jQuery学习笔记

Posted 2020-08-13 everest33

1： $ = jQuery    $() = jQuery()

2：CSS选择符（多个选择器组合用”,"隔开）

　　①，属性选择符 $(‘a[href^="mailto:"]‘)表示href以“mailto:”开头的a元素。同样$表示结尾，*表示通配符。属性可以写多个，如$(‘a[href$=".pdf"][href*="strive"]‘)表示href以.pdf结束且含有strive的a元素

　　②，层次选择器

　　　　1，祖先后代选择器（空格）。$(“ancestor descendant”). 返回符合条件的所有的后代元素。

　　　　2，父子选择器（ > ）。$(“parent > child”)。返回所有符合条件的子元素。（子元素只有一辈，后代元素有很多辈）。

　　　　3，隔壁选择器 （+）（后向）。$(“prev + next”)。返回同辈中 紧邻在prev元素之后的next元素。注意：只返回一个next,且要求prev和next同辈。 【效果类似next()方法】

　　　　4，邻居选择器（~）(后向)。$(“prev ~ siblings”)。返回在prev元素之后所有同辈元素。 【效果类似nextAll()方法】

　　　　

3： 自定义选择符 

　　用在CSS选择器后面，进一步筛选，语法类似CSS中的伪类，以冒号（:）开头。
　　几个自定义选择符， ①, :eq(n) 第n个，从0开始计数

　　　　　　　　　　　 ②, :even/:odd 偶/奇

　　　　　　　　　　    ③, :nth-child(),参数可为数字或者odd/even，这是jQuery中唯一从1开始计数的选择器。（注意：浏览器选择时是从右向左的）

　　　　　　　　　    　④, :contains() 参数为字符串，但是不用加引号，区分大小写

　　　　　　　　　　　⑤, :not() 否定式伪类选择符. 参数为选择符，不用加引号。如:not(.classname)。

　　　　　　　　　　　⑥, :has()。参数为选择符，不用加引号。

4: DOM遍历方法

　　①  filter()方法。筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式(同多个CSS选择器).参数可接受函数

　　②  next()方法。返回下一个紧邻的同辈元素，(效果类似于CSS选择符中的隔壁选择器)

　　     nextAll()方法。返回后面所有的同辈元素，(效果类似于CSS选择符中的邻居选择器)

　　　  prev()方法。返回前一个紧邻的同辈元素，

　　     prevAll()方法。返回前面所有的同辈元素，

　　　 siblings()方法。返回所有的同辈元素。

　　　parent()方法。返回唯一的父元素，

　　    parents()方法。返回所有的直系祖先元素，（父元素只有一个，祖先元素可有很多）

　　    children()方法。返回所有的子元素。（注意：只返回子元素，子元素之后的后代元素不选择【可用CSS选择符中的后代选择器】）

　　　find()方法。搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

　　　

　　③  addBack()方法。jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。 如果还需要包含先前的元素集合，.addBack() 可以提供帮助。考虑一个页面，一个简单的列表就可以了：

　　　　　　　　　　　　　　　　<ul>

　　　　　　　　　　　　　　　　　　<li>list item 1</li>

　　　　　　　　　　　　　　　　　　<li>list item 2</li>

　　　　　　　　　　　　　　　　　　<li class="third-item">list item 3</li>

　　　　　　　　　　　　　　　　　　<li>list item 4</li>

　　　　　　　　　　　　　　　　　　<li>list item 5</li>

　　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　　　　　　下面的代码的返回结果是后面3，4和5项是一个红色的背景：

　　　　　　　　　　　　　　　　$(‘li.third-item‘).nextAll().addBack().css(‘background-color‘, ‘red‘);

　　　　　　　　　　　首先，初始选择位于第3项，初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。最后，调用.addBack() 合并这两个组元素在一起，创建一个jQuery对象，指向　　　　　　　　　　　所有三个项元素（按照文档中的顺序）：{[<li.third-item>,<li>,<li> ]}

　　④：