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实现二级联动效果
Mar 30 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 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求一个网段开始与结束IP地址的方法
2015/07/09 PHP
js身份证验证超强脚本
2008/10/26 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
JS简单计算器实例
2015/01/20 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Weex开发之地图篇的具体使用
2019/10/16 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
django的autoreload机制实现
2020/06/03 Python
详解python中的lambda与sorted函数
2020/09/04 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
一封普通求职者的求职信
2013/11/20 职场文书
医院门卫岗位职责
2013/12/30 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
结对共建工作方案
2014/06/02 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
感谢信的格式
2015/01/21 职场文书
上课说话检讨书
2015/01/27 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
社会实践心得体会范文
2016/01/14 职场文书
初中历史教学反思
2016/02/19 职场文书
导游词之台湾阿里山
2019/10/23 职场文书