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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
关于php开启错误提示的总结
2019/09/24 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
JavaScript 原型继承
2011/12/26 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
python实现学生管理系统
2018/01/11 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
会计岗位职责
2015/02/03 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
详解Laravel制作API接口
2021/05/31 PHP
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript