jQuery复习要点01

1.什么是 jQuery ?jQuery 核心思想是什么？

1.JavaScript 和查询（Query） ， 它就是辅助 JavaScript 开发的 js 类库。
2.它的核心思想是 write less,do more(写得更少,做得更多)， 所以它实现了很多浏览器的兼容问题。jQuery 是免费、 开源的， jQuery 的语法设计可以使开发更加便捷。

2.jQuery中相当于window.οnlοad=function(){}的程序是什么？

$(function(){
});

3.jQuery中按id查询标签对象？

$(function(){
 var $btnObj=$("#btnId");
});

4.jQuery中如何绑定单击事件？

$(function(){
 var $btnObj=$("#btnId");
 $btnObj.click(function(){
  alert("jQuery单击事件");
 });
});

5.jQuery的核心函数是什么？如何创建HTML标签？如何根据id查询对象？如何根据标签查询对象？如何根据class属性查询对象？如何把dom对象转化成jQuery对象？dom对象alert出来的效果是什么？JQuery对象alert出来的效果是什么？

1.$
2.例子：KaTeX parse error: Can't use function '\"' in math mode at position 14: ("<button id=\̲"̲btId2\">提交2</bu…("#id属性值");
4.$("标签名");5.$(".class属性值");
6.$(dom对象);
7.[object HTML标签名Element]
8.[object Object]

6.jQuery 对象的本质是什么？

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数

7.jQuery 对象和 Dom 对象使用区别是什么？

jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法

8.如何将dom 对象转化为 jQuery 对象？如何将jQuery 对象转为 dom 对象？

1、 先有 DOM 对象，$( DOM 对象 ) 就可以转换成为 jQuery 对象
2.先有 jQuery 对象，jQuery 对象[下标]取出相应的 DOM 对象

9.回忆基本选择器的用法是什么？

#ID 选择器： 根据 id 查找标签对象
.class 选择器： 根据 class 查找标签对象
element 选择器： 根据标签名查找标签对象

• 选择器： 表示任意的， 所有的元素
  selector1， selector2 组合选择器： 合并选择器 1， 选择器 2 的结果并返回
  例子：$("#idTest");

10.如何获取设置和样式？

$("#one").css("background-color","red");

11.设置按钮id为btn2的点击事件：选择class为mini的所有元素

$("#btn2").click(function(){
 $(".mini").css("background-color","red");
});

12.设置按钮id为btn3的点击事件：选择元素名是div的所有元素

$("#btn3").click(function(){
 $("div").css("background-color","red");
});

12.设置按钮id为btn4的点击事件：选择所有元素

$("#btn4").click(function(){
 $("*").css("background-color","red");
});

13.设置按钮id为btn5的点击事件：选择所有span元素和id为two的元素

$("#btn5").click(function(){
 $("span,#two").css("background-color","red");
});

14.回忆层级选择器有哪些配置方法？

ancestor descendant 后代选择器 ： 在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器： 在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器： 匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器： 匹配 prev 元素之后的所有 siblings 元素

15.$(function(){})的全写是什么？

$(document).ready(function(){});

16.id为btn1的按钮单击实现：选择body内的所有div元素

$("#btn1").click(function(){
 $("body div").css("background-color","red");
});

17.id为btn2的按钮单击实现：选择body内的所有div子标签

$("#btn2").click(function(){
 $("body > div").css("background-color","red");
});

17.id为btn3的按钮单击实现：选择id为one的下一个div元素

$("#btn3").click(function(){
 $("#one+div").css("background-color","red");
});

18.id为btn4的按钮单击实现：选择id为two的元素后面的所有div兄弟元素

$("#btn4").click(function(){
 $("#two ~ div").css("background-color","red");
});

19.回忆基本的过滤选择器有哪些？

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素， 从 0 开始计数
:odd 匹配所有索引值为奇数的元素， 从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

20.选择第一个 div 元素

$("#btn1").click(function(){
 $("div:first").css("background", "#bbffaa");
});

21.选择最后一个 div 元素

$("#btn2").click(function(){
 $("div:last").css("background", "#bbffaa");
});

22.选择class不为 one 的所有 div 元素

$("#btn3").click(function(){
 $("div:not(.one)").css("background", "#bbffaa");
});

23.选择索引值为偶数的 div 元素

$("#btn4").click(function(){
 $("div:even").css("background", "#bbffaa");
});

24.选择索引值为奇数的 div 元素

$("#btn5").click(function(){
 $("div:odd").css("background", "#bbffaa");
});

25.选择索引值为大于 3 的 div 元素

$("#btn6").click(function(){
 $("div:gt(3)").css("background", "#bbffaa");
});

26.选择索引值为等于 3 的 div 元素

$("#btn7").click(function(){
 $("div:eq(3)").css("background", "#bbffaa");
});

27.选择索引值为小于 3 的 div 元素

$("#btn8").click(function(){
 $("div:lt(3)").css("background", "#bbffaa");
});

28.选择所有的标题元素

$("#btn9").click(function(){
 $(":header").css("background", "#bbffaa");
});

29.选择当前正在执行动画的所有元素

$("#btn10").click(function(){
 $(":animated").css("background", "#bbffaa");
});

30.选择没有执行动画的最后一个div

$("#btn11").click(function(){
 $("div:not(:animated):last").css("background", "#bbffaa");
});

31.回忆内容过滤器

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

32.选择 含有文本 ‘di’ 的 div 元素

$("#btn1").click(function(){
 $("div:contains('di')").css("background", "#bbffaa");
});

33.选择不包含子元素(或者文本元素) 的 div 空元素

$("#btn2").click(function(){
 $("div:empty").css("background", "#bbffaa");
});

34.选择含有 class 为 mini 元素的 div 元素

$("#btn3").click(function(){
 $("div:has(.mini)").css("background", "#bbffaa");
});

35.选择含有子元素(或者文本元素)的div元素

$("#btn4").click(function(){
 $("div:parent").css("background", "#bbffaa");
});

36.回忆有哪些属性过滤器？

[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性， 或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器， 需要同时满足多个条件时使用。

37.选取含有 属性title 的div元素

$("#btn1").click(function() {
 $("div[title]").css("background", "#bbffaa");
});

38.选取 属性title值等于’test’的div元素

$("#btn2").click(function() {
 $("div[title='test']").css("background", "#bbffaa");
});

39.选取 属性title值不等于’test’的div元素(*没有属性title的也将被选中)

$("#btn3").click(function() {
 $("div[title!='test']").css("background", "#bbffaa");
});

40.选取 属性title值 以’te’开始 的div元素

$("#btn4").click(function() {
 $("div[title^='te']").css("background", "#bbffaa");
});

41.选取属性title值 以’est’结束 的div元素

$("#btn5").click(function() {
 $("div[title$='est']").css("background", "#bbffaa");
});

42.选取属性title值 含有’es’的div元素

$("#btn6").click(function() {
 $("div[title*='es']").css("background", "#bbffaa");
});

43.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有’es’的 div 元素

$("#btn7").click(function() {
 $("div[id][title*='es']").css("background", "#bbffaa");
});

44.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素

$("#btn8").click(function() {
 $("div[title][title!='test']").css("background", "#bbffaa");
});

44.回忆表单过滤器

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button 按钮
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden

45.对表单内 可用input 赋值操作

$("#btn1").click(function(){
 // val()可以操作表单项的value属性值
 // 它可以设置和获取
 $(":text:enabled").val("我是万能的程序员");
});

46.对表单内 不可用input 赋值操作

$("#btn2").click(function(){
 $(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
});

47.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数

$("#btn3").click(function(){
 alert( $(":checkbox:checked").length );
});

48.获取多选框，每个选中的value值

$("#btn4").click(function(){
 // 获取全部选中的复选框标签对象
 var $checkboies = $(":checkbox:checked");
 // 老式遍历
 // for (var i = 0; i < $checkboies.length; i++){
 //  alert( $checkboies[i].value );
 // }
 // each方法是jQuery对象提供用来遍历元素的方法
 // 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
 $checkboies.each(function () {
 alert( this.value );
 });
});

49.获取下拉框选中的内容

$("#btn5").click(function(){
 // 获取选中的option标签对象
 var $options = $("select option:selected");
 // 遍历，获取option标签中的文本内容
 $options.each(function () {
 // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
 alert(this.innerHTML);
 });
});