jQuery 是一个 JavaScript 库。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
一、jQuery语法
1、jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
2、基础语法：$(selector).action()
（1）美元符号定义 jQuery；
（2）选择符（selector）“查询”和“查找” HTML 元素；
（3）jQuery 的 action() 执行对元素的操作；
示例：
$("this").hide()：隐藏当前的 HTML 元素。
$("#this").hide()：隐藏 id="test" 的元素。
$("p").hide()：隐藏所有 <p> 元素。
$(".this").hide()：隐藏所有 class="test" 的元素。
3、所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
});这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。
二、jQuery选择器
1、jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。
2、选择器允许对 HTML 元素组或单个元素进行操作。选择器允许对 DOM 元素组或单个 DOM 节点进行操作。
3、jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
（1）$("p") 选取 <p> 元素。
（2）$("p.intro") 选取所有 class="intro" 的 <p> 元素。
（3）$("p#demo") 选取所有 id="demo" 的 <p> 元素。
4、jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
（1）$("[href]") 选取所有带有 href 属性的元素。
（2）$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
（3）$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
5、jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
三、jQuery事件
1、事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
2、jQuery获得内容和属性
（1）获得内容
三个简单实用的用于 DOM 操作的 jQuery 方法：
text()：设置或返回所选元素的文本内容
html()：设置或返回所选元素的内容（包括 HTML 标记）
val()：设置或返回表单字段的值
2、获取属性
jQuery attr() 方法用于获取属性值。
3、jQuery设置内容和属性
（1）设置内容：text()、html()、val()
（2）text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回希望使用的字符串。
4、设置属性 - attr()
（1）jQuery attr() 方法也用于设置/改变属性值。attr() 方法也允许同时设置多个属性。
（2）attr() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回希望使用的字符串。
5、jQuery添加元素
（1）添加新的 HTML 内容
append()：在被选元素的结尾插入内容
prepend()：在被选元素的开头插入内容
after()：在被选元素之后插入内容
before()：在被选元素之前插入内容
6、jQuery删除元素
（1）删除元素/内容
remove()：删除被选元素（及其子元素）
empty()：从被选元素中删除子元素
（2）过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许对被删元素进行过滤。
jQuery获取并设置CSS类
7、jQuery 操作 CSS
（1）jQuery 拥有若干进行 CSS 操作的方法。
addClass()：向被选元素添加一个或多个类
removeClass()：从被选元素删除一个或多个类
toggleClass()：对被选元素进行添加/删除类的切换操作
（2）css()：css() 方法设置或返回被选元素的一个或多个样式属性。
8、jQuery尺寸
（1）jQuery width() 和 height() 方法
width()方法：设置或返回元素的宽度（不包括内边距、边框或外边距）
height()方法：设置或返回元素的高度（不包括内边距、边框或外边距）
（2）jQuery innerWidth() 和 innerHeight() 方法
innerWidth()方法：返回元素的宽度（包括内边距）
innerHeight()方法：返回元素的高度（包括内边距）
（3）jQuery outerWidth() 和 outerHeight() 方法
outerWidth()方法：返回元素的宽度（包括内边距和边框）
outerHeight()方法：返回元素的高度（包括内边距和边框）
四、 jQuery遍历
1、向上遍历 DOM 树
（1）jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
（2）jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
（3）jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
2、向下遍历 DOM 树
（1）jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
（2）jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
3、在 DOM 树中水平遍历
（1）jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
（2）jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
（3）jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
（4）jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
（5）jQuery prev()、prevAll() 以及 prevUntil() 方法
它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
五、jQuery过滤
1、缩写搜索元素的范围
三个最基本的过滤方法是：first()、 last() 和 eq()，它们允许基于其在一组元素中的位置来选择一个特定的元素。
filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。
2、jQuery first() 方法
first() 方法返回被选元素的首个元素。
3、jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
4、jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
5、jQuery filter() 方法
filter() 方法允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
6、jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
扫一扫
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
