jjjjQuery选择器

此文为作者自用复习文章

jQuery选择器:

    它不仅继承了CSS选择器简洁的语法,

    还继承了其获取页面便捷高效的特点,  

    它还拥有更加完善的处理机制;

    但jQuery选择器获取元素后,为该元素添加的是行为,而CSS则是属性。

层叠选择器:

$("form input")         //选择所有的form元素中的input元素
$("#main > *")          //选择id值为main的所有的子元素
$("label + input")     //选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")       //同辈选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器:

$("tr:first")               //选择所有tr元素的第一个

$("tr:last")                //选择所有tr元素的最后一个

$("input:not(:checked) + span")  //过滤掉:checked的选择器的所有的input元素

$("tr:even")               //选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

$("tr:odd")                //选择所有的tr元素的第1,3,5... ...个元素

$("td:eq(2)")             //选择所有的td元素中序号为2的那个td元素

$("td:gt(4)")             //选择td元素中序号大于4的所有td元素

$("td:ll(4)")              /选择td元素中序号小于4的所有的td元素

内容过滤选择器:

$("div:contains(‘John‘)") //选择所有div中含有John文本的元素

$("td:empty")           //选择所有的为空(也不包括文本节点)的td元素的数组

$("div:has(p)")        //选择所有含有p标签的div元素

$("td:parent")          //选择所有的以td为父节点的元素数组

可视化过滤选择器:

$("div:hidden")        //选择所有的被hidden的div元素

$("div:visible")        //选择所有的可视化的div元素

属性过滤选择器:

$("div[id]")              //选择所有含有id属性的div元素

 $("input[name=‘newsletter‘]")    //选择所有的name属性等于‘newsletter‘的input元素

 $("input[name!=‘newsletter‘]") //选择所有的name属性不等于‘newsletter‘的input元素

 $("input[name^=‘news‘]")         //选择所有的name属性以‘news‘开头的input元素

 $("input[name$=‘news‘]")         //选择所有的name属性以‘news‘结尾的input元素

 $("input[name*=‘man‘]")          //选择所有的name属性包含‘news‘的input元素

 $("input[id][name$=‘man‘]")    //可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

注意:

  若选择器中含有特殊符号,应用转义符转义。例:

$("#id#a") //此代码不能正确获取元素
$("#id\\#a") //正确代码

  若选择器中含有空格,得到的结果也会不一致!

时间: 2024-10-13 02:24:10

jjjjQuery选择器的相关文章

CSS3选择器:nth-child和:nth-of-type之间的差异

对于p:nth-child选择器,选择一个元素如果: 这是个段落元素 这是父标签的第二个子元素 对于p:nth-of-type选择器,选择一个元素如果: 选择父标签的第二个段落子元素 :nth-of-type选择器,限制条件少

CSS3选择器 ::selection选择器

"::selection"伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本).浏览器默认情况下,用鼠标选择网页文本是以"深蓝的背景,白色的字体"显示的,效果如下图所示: 从上图中可以看出,用鼠标选中"专注IT.互联网技术"."纯干货.学以致用"."没错.这是免费的"这三行文本中,默认显示样式为:蓝色背景.白色文本. 有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时

jQuery选择器补充

------------------------------------------------------------------------------------------------------------ --------------------------- 简单选择器(使用频率最高) ---------------------------- ----------------------- 进阶选择器(使用频率不如简单选择器) ----------------------- 高级选

微信小程序组件解读和分析:十二、picker滚动选择器

picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date), 默认是普通选择器. picker滚动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

CSS3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 选择器的使用 通过选择器的使用,可以不再需要在编辑任何多余的无语义的class属性. 属性选择器: 在使用属性选择器时,需要声明属性和属性值. 声明方法:[att=val],其中att代表属性,val代表属性值. E[att=val]:前面的E表示在何种标签如:div[id=momo],a[he

jQuery 选择器2

jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class=&qu

优化jQuery选择器

优化jQuery选择器 选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任.记住这些小技巧可以让你轻松突破学习选择器时的瓶颈. jQuery 扩展 如果可能的话,避免使用jQuery扩展选择器.这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧. 1 2 3 4 5 // Slower (the zero-based :even sele

Test_赋值多个class选择器

ZC: 元素属性"class"中,可以赋值 多个 class选择器 ZC: 多个选择器,相同的属性设置,哪个起作用:晚定义的起作用 1.代码 <!--内联 HTML5--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .bgc01 { width :500px; he

jQuary学习-什么是jquary? Js与jquary之间的关系 Jquary选择器

1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQuery提供给我们的方法 2.jQuery的使用步骤 1)引入jQuary包 2)写进入口函数 入口函数的两种书写方式: 方式一: $(document).ready(function(){ }); 方式二: $(function(){ }); 3) 写入需要实现的功能 例: <script src