首页 > 其他分享 >jQuery再学习之二、jQuery选择器

jQuery再学习之二、jQuery选择器

时间:2022-12-08 10:35:45浏览次数:52  
标签:jQuery 元素 之二 查找 id 节点 div 选择器


前言

jQuery选择器非常非常强大而且灵活,要完全掌握它是需要狠下一番功夫的。当然,掌握了主要的部分后,其它的了解就好,因为一些比较偏的毕竟用得少,而且可以有其它方法来实现。

 

 

选择器

1          基本选择器

1.1        #id选择器,通过元素的id来查找对象,

例:$("#txtTime") 

查找id为txtTime的元素

 

1.2        html标签选择器,通过html标签来查找对象,例:

$("div")

查找标签为div的所有元素

 

1.3        .css类选择器,通过元素使用的css类名来查找对象,例:

$(".title")

查找css类名为title的元素

 

1.4        *,选取所有元素,例:$("*")

 

1.5        xx,xx,xx多选择器,多个选择器一起使用(逗号分隔),例:

$("div,#txtname")

查找所有的div元素和id为txtName的元素

 

 

2          层级关系选择器

2.1        在所有子孙元素中匹配(使用空格),例:

$("body div")

查找body元素下的所有子孙节点中的div元素

 

2.2        在所有子元素中匹配(使用>号),例:

$("body>div");

查找body元素下所有儿子节点中的div元素

 

 

3          简单条件选择器

3.1        :not(…) :非选择器,祛除匹配的元素,例:

$("div:not(.txtRed)");

查找所有的div元素,并排除css类名为txtRed的div元素

 

3.2        :eq(index) :匹配一个给定索引值的元素,例:

$("div:eq(1)");

查找所有div元素,并只取查找到的元素数组的索引号为1的div元素

 

3.3        :gt(index) :匹配大于给定索引值的元素,例:

$("div:gt(1)");

查找所有div元素,并取查找到的元素数组的索引号大于1的div元素

 

3.4        :lt(index) :匹配小于给定索引值的元素,例:

$("div:lt(1)");

查找所有div元素,并取查找到的元素数组的索引号小于1的div元素

 

3.5        :contains(text) :匹配包含给定文本的元素,例:

$("div:contains('name')");

查找所有div元素,并取查找到的元素包含name文本的div元素

 

3.6        :hidden、:visible :匹配所有隐藏的、可见的元素,例:

$("div:hidden");

查找所有div元素,并取所有隐藏了的div元素

 

 

4          属性选择器

4.1        […] :匹配包含给定属性的元素,例:

$("div[id]")

查找包含id属性的div元素

 

4.2        [attribute(=/!=/^=/$=/*=)value] :匹配给定的属性值(等于、不等于、开头为、结束为、包含)给定的value值,例:

$("div[id='title']")

查找id等于title的div(注意:值应该用引号括起来,如’value’)

 

4.3        […][…][…] :多属性联合使用,例:

$("div[id='txt'][class='title']")

查找id为txt且class为title的div

 

$("input[type='checkbox'][checked='true']")

查找所有的被勾选了的复选框

 

 

5          查找选择器

5.1        $("...").children([…]) :获取所有匹配元素的儿子节点的匹配元素,例:

$("body").children().length

获取body元素的所有儿子节点元素

 

$("body").children("div").length

获取body元素的所有儿子节点元素中的div元素

 

5.2        $("...").closest("...") : 从元素本身开始,逐级向上查找匹配的元素,并返回最新查找到的元素,例:

$("#dd").closest("div").html()

查找id为dd的元素的最近的上级div元素

 

5.3        $("...").find("...") :查找元素下的匹配元素(所有子孙节点),例:

$("body").find("div").length

获取body节点下的所有div元素

 

5.4        $("...").parent() :获取元素的父亲节点元素,例:

$("#yy").parent().html()

获取id为yy的节点的父亲节点

 

5.5        $("...").parents("...") :获取元素的所有祖先节点或其中的匹配节点,例:

$("#yy").parents().length

获取id为yy的节点的所有祖先节点

 

$("#yy").parents("body").html()

获取id为yy的节点的祖先节点为body标签的元素

 

 

 

标签:jQuery,元素,之二,查找,id,节点,div,选择器
From: https://blog.51cto.com/u_15906220/5920650

相关文章

  • jQuery再学习之一、jQuery核心
    前言     jQuery核心是最基础的jQuery对象,或者叫函数,有了它我们才可以进行其它的操作,所以,需要认真掌握。  jQuery核心函数1         获取jQuery对象(包装......
  • JQuery UI之(五)日期选择——Datepicker
    一、         前言JQuery官方的Datepicker控件,可以很方便的使用,但是在我看来他所提供的功能却稍显简单,并不能完全地符合我们的需求,所以,如果只是很简单的需求的话......
  • dojo,jquery,mootools三种框架实现的ajax效果
    经常在微BLOG上,或者象tudou,ku6等视频网站上,看到"查看评论"的按钮,点后就显示列表,是AJAX效果的,找到老外的一篇文,讲这个实现:​​​http://davidw......
  • python之路44 jQuery语法应用 与Bootstrap框架
    写的略粗糙咨询https://www.cnblogs.com/Dominic-Ji/p/10490669.html作业讲解页面简陋定时器:<inputtype="text"id="d1"><buttonid="startBtn">开始</button><bu......
  • 前端第六天--jQuery操作与bootstrap操作
    目录jQuery操作与bootstrap操作今日内容概要今日内详细jQuery查找标签操作标签jQuery事件事件相关补充jQuery动画效果(了解)Bookstarp页面框架核心部分讲解重要样式组件jQ......
  • 前端JQuery
    JQuery与DOM使用的不同区别在声明一个jQuery对象变量的时候在变量名前面加上$:var$variable=jQuery对像varvariable=DOM对象$variable[0]//jQuery对象转成DOM对......
  • 事件 jQuery类库、Bootstrap页面框架
    目录jQuery查找标签基本选择器组合选择器层级选择器属性选择器基本筛选器表单筛选器筛选器方法链式的本质(jQuery一行代码走天下)操作标签class操作位置操作文本操作创建标......
  • jQuery和Bootstrap
    jQuery类库标签对象与jQuery对象jQuery查找标签操作标签jQuery事件jQuery动画效果Bootstarp页面框架组件jQuery类库'''基本'''1.兼容多浏览器......
  • jQuery 查找标签 事件 Bootstrap页面框架
    1.查找标签1.基本选择器: $('#d1'):id选择器 $('.c1'):class选择器 $('div'):标签选择器2.组合选择器: $('div#d1'):查找id为d1的div标签 $('div.c1'):查找c......
  • jQuery 查找标签 事件 Bootstrap页面框架
    jQuery查找标签基本筛选器 :first//第一个:last//最后一个:eq(index)//索引等于index的那个元素:even//匹配所有索引值为偶数的元素,从0开......