1.jQuery的作用:为了简化JavaScript的开发
优点:封装了很多与定义的对象和函数,能帮助使用者建立有高难度交互的web3.0特性的富客户端页面,并且兼容各大浏览器
当前流行的JavaScript库有:jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR
2.jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的,jQuery无法使用DOM对象的任何方法,同时DOM对象也不能使用jQuery里的方法
3.约定:如果获取的是jQuery对象,那么要在变量面前加$
4.DOM对象与jQuery对象的类型互换
DOM--->jQuery $(DOM对象)
jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
jQuery--->DOM对象 jQuery对象[0]或jQuery对象.get(0)
5.jQuery选择器
作用:在jQuery中,对事件处理,遍历DOM和ajax都依赖于选择器
优点:简洁的写法、完善的事件处理机制
6.基本选择器
通过元素ID,class和标签名来查找DOM元素
1.#id 用法:$("#id"); 返回单个元素组成的集合
2.Element 用法:$("div"); 返回值 集合元素
3.class 用法:$(".class"); 返回值 集合元素
4.* 用法:$("*"); 返回所有匹配元素集合
5.组合 用法:$("div,span,.class,#id"); 返回值 集合元素
7.层次选择器
通过 DOM 元素之间的层次关系来获取特定元素
1.$("form input");
在给定的祖先元素下匹配所有后代元素
2.$("form>input");
在给定的祖先元素下匹配所有子元素
3.$("form+input");
匹配所有紧接该元素后的下一个元素
4.$(”form ~ input”);
匹配所有该元素后的元素,不包含input在内,只匹配同辈元素,子辈元素不被匹配
8.过滤器选择器
通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器
1.$(":first");
匹配找到第一个元素
2.$(":last");
匹配找到最后一个元素
3.$("input:not(:checked)");
匹配找到不满足条件的元素
4.$(":even");
匹配找到索引为偶数的元素,从0开始计数
5.$(":odd");
匹配找到索引为奇数的元素,从0开始计数
6.$(":eq(index)");
匹配找到给定索引的元素
7.$(":gt(index)");
匹配找到大于给定索引的元素
8.$(":lt(index)");
匹配找到小于给定索引的元素
9.$(":header");
匹配找到标题元素
10.$(":animated");
匹配找到执行动画效果的元素
9.内容过滤器
过滤规则主要体现在它所包含的子元素和文本内容上
1.$(":contains('text')");
匹配包含给定文本元素
2.$(":empty");
匹配不包含子元素和文本的空元素
3.$(":has(Element)");
匹配包含某个标签元素的元素
4.$(":parent");
匹配含有子元素或文本的元素,与$(":empty")相反
10.可见度过滤选择器
根据元素的可见和不可见状态来选择相应的元素,利用 jQuery 中的 show() 方法将它们显示出来
1.$(":hidden");
匹配所有不可见的元素
2.$(":visible");
匹配所有可见的元素
11.属性过滤器
通过元素的属性来获取相应的元素
1.$("[attribute]");
匹配包含给定属性的元素
2.$("[attribute=value]");
匹配给定属性是特定值的元素
3.$("[attribute!=value]");
匹配给定属性不是特定值的元素
4.$("[attribute^=value]");
匹配给定属性以特定值开始的元素
5.$("[attribute$=value]");
匹配给定属性以特定值结束的元素
6.$("[attribute*=value]");
匹配给定属性包含特定值的元素
7.$("[attribute=value][attribute=value]");
复合属性选择器,需要同时满足多个条件时使用
12.子元素过滤选择器(父元素和子元素之间要用空格隔开)
1.$("ul li:nth-child(index/even/odd/equation)");
匹配其父元素下的第N个子或奇偶元素,索引从1开始
nth-child()选择器详解如下:
(1):nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(4):nth-child(3n+1): 能选取每个父元素下的索引值是 3n + 1的元素
2.$(":first-child");
匹配第一个子元素
3.$(":last-child");
匹配最后一个子元素
4.$(":only-child");
某个元素是父元素中唯一的子元素,那将会被匹配
13.表单对象属性过滤器
对所选择的表单元素进行过滤
1.$(":enabled");
匹配所有可用元素
2.$(":disabled");
匹配所有不可用元素
3.$(":checked");
匹配所有被选中的元素(多选框input)
4.$(":selected");
匹配所有被选中的元素(下拉框option)
14.jQuery表单的一些操作方法
val() 方法改变表单内<input>元素的值
length 属性获取多选框选中的个数
text() 方法获取下拉框选中的内容
15.表单选择器
1.$(":input");
匹配所有 input, textarea, select 和 button 元素 (隐藏的元素也会被匹配)
2.$(":text");
匹配所有的单行文本框
3.$(":password");
匹配所有的密码框
4.$(":radio");
匹配所有单选按钮
5.$(":checkbox");
匹配所有复选框
6.$(":submit");
匹配所有提交按钮
7.$(":image");
匹配所有图像域
8.$(":reset");
匹配所有重置按钮
9.$(":button");
匹配所有按钮.这个包括直接写的元素button
10.$(":file");
匹配所有文件域
11.$(":hidden");
匹配所有不可见元素(直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素)