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实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery自定义组件实例详解
Dec 31 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获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python优先队列实现方法示例
2017/09/21 Python
Django中Model的使用方法教程
2018/03/07 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Django REST 异常处理详解
2020/07/15 Python
python中pow函数用法及功能说明
2020/12/04 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
大四学年自我鉴定
2013/11/13 职场文书
贷款承诺书范文
2014/05/19 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python