JQuery常用选择器功能与用法实例分析


Posted in jQuery onDecember 23, 2019

本文实例讲述了JQuery常用选择器功能与用法。分享给大家供大家参考,具体如下:

JQuery基础回顾

今天对JQuery内容进行了回顾,下面进行一些总结:

JQuery是javascript的一个库,所以二者可以相互转换,例如JQuery到Javascript,用$()获取元素,传给JS的var变量。反之JS的getElement方法获取var变量后,可以通过$(var)转化成JQuery对象。

JQuery的选择器,

id选择$("#id"),class选择$(".class"),元素选择$("elemrnt"),选择所有$("*")。层级选择器有:子选择器$("parent>child")选中直接子代,后代选择器$("ancensterdescendant")选中所有的后代元素,相邻兄弟选择器$("prev+next")选中prev之后的第一个next节点,一般兄弟选择$("prev~siblings")选中prev之后所有siblings元素。Jquery常用属性选择器如下:

$(“:first”) 选中第一个元素
$(“:last”) 选中最后一个元素
$(“:eq(n-1)”) 选中第n个元素
$(“:gt(n-1)”) 选中n个以后的所有
$(“:lt(n-1)”) 选中n个以前的所有
$(“:even”) 选中偶数个元素
$(“:odd”) 选中奇数个的元素
$(“:not(selector)”) 选中除selector选择外的所有
$(“:animated”) 选中执行动画的元素
$(“: header”) 选中标题元素,如h1、h2
$(“:visible”) 选中可见的元素
$(“:hidden”) 选中隐藏的元素

子元素选择器

$(“:first-child”) 选择第一个元素
$(“:last-child”) 选择最后一个元素
$(“:only-child”) 选择没有兄弟的元素
$(“:nth-child(n)”) 选择第n个元素
$(“:nth-last-child(n)”) 选择倒数第n个元素

First与first-child区别:

<ul>
 <li>第1个ul的第1个li</li>
 <li>第1个ul的第2个li</li>
 <li>第1个ul的第3个li</li>
</ul>
<ul>
 <li>第2个ul的第1个li</li>
 <li>第2个ul的第2个li</li>
 <li>第2个ul的第3个li</li>
</ul>

first表示(所有父元素合并后的)第一个元素;first-child表示(每个父元素的)第一个

$('ul li:first') 返回"第1个ul的第1个li"。 查找所有ul下第一个li元素

$("ul li:first-child") 返回"第1个ul的第1个li"与"第2个ul的第1个li"。 查找每个ul下第一个元素是li元素dom元素。

常用内容选择器如下:

$(“:contains(‘text')”) 选中包含文本text的元素
$(“:parent”) 选中包含内容(节点或文本)的元素
$(“empty”) 选中不包含任何内容的元素
$(“:has(selector)”) 选中包含selector选择器的元素

属性内容选择器:

$(“[attribute]”) 选中包含指定属性的元素
$(“[attribute='value']”) 选中属性等于指定值的元素
$(“[attribute!='value']”) 选中属性不等于指定值的元素
$(“[attribute^='value']”) 选中属性以指定值开头的元素
$(“[attribute$='value']”) 选中属性以指定值结尾的元素
$(“[attribute*='value']”) 选中属性包含指定值的元素
$(“[attribute|='value']”) 选中属性以指定值为前缀+'-‘的元素
$(“[attribute~='value']”) 选中属性以指定值为前缀+空格的元素
$(“[attribute1] [attributeN]”) 多个属性值括号可并列复选

例如:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>属性筛选选择器</title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
  <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
  <div class="left" testattr="true" >
    <div class="div" testattr="true" name='p1'>
      <a>[att=val]</a>
    </div>
    <div class="div" testattr="true" p2>
      <a>[att]</a>
    </div>
    <div class="div" testattr="true" name="t-est">
      <a>[att|=val]</a>
    </div>
    <div class="div" testattr="true" name="a b">
      <a>[att~=val]</a>
    </div>
  </div>
  <script type="text/javascript">
     //查找所有div中,属性name=p1的div元素
     $('div[name=p1]').css("border", "3px groove red"); 
    //查找所有div中,有属性p2的div元素
    $("div[p2]").css("border", "3px groove blue"); 
    //查找所有div中,属性name中包含一个连字符"-"为前缀的div元素
    $('div[name|="t"]').css("border", "3px groove #00FF00"); 
    //查找所有div中,属性name中包含一个连字符"空"和"a"的div元素
    $("div[name~='a']").css("border", "3px groove pink"); 
  </script>
  <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
  <div class="left" testattr="true" >
    <div class="div" testattr="true" name='start-name'>
      <a>[att^=val]</a>
    </div>
    <div class="div" testattr="true" name='name-end'>
      <a>[att$=val]</a>
    </div>
    <div class="div" testattr="true" name="attr-test-selector">
      <a>[att*=val]</a>
    </div>
    <div class="div" name="a b">
      <a>[att!=val]</a>
    </div>
  </div>
  <script type="text/javascript">
     //查找所有div中,属性name的值是用start开头的
     $("div[name^='start']").css("border", "3px groove red"); 
     //查找所有div中,属性name的值是用end结尾的
     $("div[name$='end']").css("border", "3px groove blue"); 
    //查找所有div中,有属性name中的值包含一个test字符串的div元素
    $("div[name*='test']").css("border", "3px groove #00FF00"); 
    //查找所有div中,有属性testattr中的值没有包含"true"的div
    $("div[testattr!='true']").css("border", "3px groove #668B8B"); 
  </script>
</body>
</html>

结果如下:

JQuery常用选择器功能与用法实例分析

表单选择器

$(“input:type”) 选择类型为type的表单元素
$(“:enabled”) 选择激活的表单元素
$(“:disabled”) 选择不可用的表单元素
$(“:checked”) 选择选中的表单元素
$(“:selected”) 选择选中的option元素

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现验证用户登录
Dec 10 #jQuery
You might like
PHP读取MySQL数据代码
2008/06/05 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php返回json数据函数实例
2014/10/09 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
新员工入职感言
2014/02/01 职场文书
化工专业自荐书
2014/06/16 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers