jQuery常用选择器详解


Posted in jQuery onJuly 17, 2017

本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下

1、jQuery:(使用jQuery一定标明我们使用的版本号)

  它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题)

2、jQuery中提供的方法

选择器

通过传递对应规则的内容(ID、标签名、样式类名...),获取到页面中指定的元素/元素集合 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id='div1'>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div></div>
    <div id='div3'></div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </div>
  

  <script>
    //原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
    //原生的JS对象不能直接的使用jQuery中提供的属性和方法
    var oDiv = document.getElementById('div1')
    oDiv.clientWidth
    oDiv.getAttribute
    //jq获取到的结果是一个jQuery对象,可以使用jQuery里面提供的属性和方法,但是不能直接的使用浏览器内置的属性和方法
    var $oDiv = jQuery("#div1")//$("#div1")
    $oDiv.innerWidth();
    $oDiv.attr

    //关于原生JS对象和jQuery对象之间的转换
      //1)、原生的转变成jQuery:$(原生JS对象)
      $(oDiv)
      //2)、jQuery转化成原生:直接通过索引获取对应的元素对象即可
      $oDiv[0]
      $oDiv.get(0)//<==>$oDiv[0]都是通过索引来获取指定位置的元素(JS原生对象)

    //更多的jQuery选择器
    $('#div1')
    $('div')
    $('.w100')
    $('*')
    $('#div1,div,.w100')//把每一个选择器获取到的jQuery对象最后融合在一起,最后一起获取到
    $('#div1 li')//在子子孙孙级中进行查找
    $('#div1>li')//在子级中进行查找
    $('#div3+')//获取它的下一个弟弟
    $('#div3+ul')//获取它的下一个弟弟并且标签名是ul的
    $('#div3~')//获取它的所有的弟弟元素
    $('#div3~ul')//获取它的所有的弟弟元素并且标签名为ul的
    $('#div1>div:not(.w100)')//#div1下的所有子集div样式类名不包含w100的
    $('#div1>div:eq(0)')//通过索引获取到集合中的某一个,但是获取到的结果依然是一个jQuery对象(而get方法也是通过索引获取,但是获取到的是一个JS原生对象)
    $('#div1>div:gt(1)')//大于索引1的(不包含索引1的)
    $('#div1>div:lt(1)')//小于索引1的(不包含索引1的)
    $('#div1 li:contains("我")')//获取所有的li内容包含“我” 的
    $('#div1 div:has(ul)')//在所有的div中包含ul的
    $('#div1>*:nth-child(1)')//获取所有的子元素的第一个
    $('#div1>*:eq(1)')//获取所有的子元素的第二个(索引为1)
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
You might like
PHP输入输出流学习笔记
2015/05/12 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
javascript打开word文档的方法
2014/04/16 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
拉歌口号大全
2014/06/13 职场文书
公司踏青活动方案
2014/08/16 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
Mysql Online DDL的使用详解
2021/05/20 MySQL
详解redis在微服务领域的贡献
2021/10/16 Redis