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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jquery实现广告上下滚动效果
Mar 04 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
Python实现登录接口的示例代码
2017/07/21 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
python list的index()和find()的实现
2020/11/16 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
团队精神演讲稿
2013/12/31 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
经理聘任证明
2015/03/02 职场文书
党支部评议意见
2015/06/02 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
Python OpenCV形态学运算示例详解
2022/04/07 Python