锋利的Jquery解惑系列(三)------ 各路选择器大聚会

申明:初次学习Jquery的选择器时只记得几个和css选择器类似的几个,在这里列出书上写上的各路选择器方便以后的查询和现在的学习    

                          所有例子都来自书上

测试画面:

一、基本选择器

#id,                    $("#test")选取id为test的元素(惟一)

.class                    $(".test")选取所有class为test的元素

element                   $("p")选取所有的<P>元素

*                       $("*")选取所有的元素

selector1,selector2,....,selectorN      $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

demo1: 改变id为one的元素的背景色

demo2:改变class为mini的所有元素的背景色

demo3:改变元素名是<div>的所有元素的背景色

demo4:改变所有元素的背景色

demo5:改变所有的<span>元素和id为two的元素的背景色

 二、层次选择器

通过DOM元素之间的层次关系来获取特定元素,如:后代元素、子元素、相邻元素和同辈元素

$("ancestor descendant")          $("div span")选取<div>里的所有的<span>元素

$("parent > child")                                  $("div > span")选取<div>元素下元素名是<span>的子元素

两者区别在于前者检索出所有后代,后者只是检索儿子

$("prev + next")               $(".one + div")选取class为one的下一个<div>同辈元素

$("prev~siblings")               $("#two~div")选取id为two的元素后面的所有<div>同辈元素

demo1:改变<body>内所有<div>的背景色

demo2:改变<body>内<div>元素的背景色

demo3:改变class为one的下一个<div>同辈元素背景色

demo4:改变id为two的元素后面的所有<div>同辈元素的背景色

对于后面两个选择器有更方便的方法可以替代:

$(".one + div") == $(".one").next("div")          $("#prev~div")==$("#prev").nextAll("div");

$("prev~siblings")与siblings()方法的区别在于前者只能匹配"prev"元素后面的同辈<div>元素。而后者与位置无关只要是同辈的节点都可以。

三、过滤选择器

1)基本过滤选择器

:first         $("div:first")选取所有<div>元素中第一个<div>元素

:last          $("div:last")选取所有<div>元素中最后一个<div>元素

:not(selector)    $("input:not(myClass)")选取class不是myClass的<input>元素

:even        $("input:even")选取索引是偶数的<input>元素 0算偶数

:odd         $("input:odd")选取索引是奇数的<input>元素

:eq(index)      $("input:eq(1)")选取索引等于1的<input>元素

:gt(indfex)     $("input:gt(1)")选取索引大于1的<input>元素

:lt(index)       $("input:lt(1)")选取索引小于1的<input>元素

:header           $(":header")选取网页中所有的<h1>,<h2>,<h3>...

:animated        $("div:animated")选取正在执行动画的<div>元素

:focus        $(":focus")选取当前获取焦点的元素

demo1: 改变第一个<div>元素的背景色

demo2: 改变最后一个<div>元素的背景色

demo3: 改变class不为one的<div>元素的背景色

demo4:改变索引值为偶数的<div>元素的背景色

demo5:改变索引值为奇数的<div>元素的背景色

demo5:改变索引值等于3的<div>元素的背景色

demo6:改变索引值大于3的<div>元素的背景色

demo7:改变索引值i小于3的<div>元素的背景色

2)内容过滤选择器

:contains(text)        $("div:contains("我")") 选取含有文本”我“的<div>元素

:empty              $("div:empty")选取不包含子元素(包括文本元素)的<div>空元素

:has(selector)          $("div:has(p)")选取含有<p>元素的<div>元素

:parent            $("div:parent")选取拥有子元素(包括文本元素)的<div>元素

demo1:改变含有文本"di"的<div元素的背景色

demo2:改变不包含子元素的<div>空元素的背景色

demo3:改变含有class为mini元素的<div>元素的背景色

demo4:改变含有子元素(包括文本元素)的<div>元素的背景色

3)可见性过滤选择器

:hidden      $(":hidden")选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">.如果只想选取               <input>元素,可以使用$("input:hidden");

:visible       $("div:visible")选取所有可见的<div>元素

demo1:改变所有可见的<div>元素的背景色

demo2:显示隐藏的<div>元素

4)属性过滤选择器

[attribute]          $("div[id]")选取拥有属性id的元素

[attribute=value]        $("div[title=test]")选取属性title为”test“的<div>元素

[attribute!=value]       $("div[title!=test]")选取属性title不等于"test"的<div>元素(没有属性title的<div>元素也会被选取)

[attribute^=value]      $("div[title^=test]")选取属性title以”test“开始的<div>元素

[attribute$=value]      $("div[title$=test]")选取属性title以”test“结束的<div>元素

[attribute*=value]      $("div[title*=test]")选取属性title含有”test“的<div>元素

[attribute|=value]       $("div[title|=‘en‘]")选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘-’)的<div>元素

[attribute~=value]      $("div[title~=‘uk‘]")选取属性title用空格分隔的值中包含字符uk的<div>元素

[attribute1][attribute2]...[attributeN]      $("div[id][title$=‘test‘]")选取拥有属性id,并且属性title以"test"结束的<div>元素

demo1:改变含有属性title的<div>元素的背景色

demo2:改变属性title值等于"test"的<div>元素的背景色

demo3:改变属性值不等于”test“的<div>元素的背景色

demo4:改变属性值以”te“开始的<div>元素的背景色

demo5:改变属性值title以”est“结束的<div>元素的背景色

demo6:改变属性title含有"es"的<div>元素的背景色

dmeo7:改变含有属性id,并且属性title含有”es“的<div>元素的背景色

测试画面

demo8:改变属性title等于en或以en为前缀(该字符串后跟一个连字符‘-‘)的元素的背景色

demo9:改变属性title用空格分隔的值包含字符uk的元素的背景色

5)子元素过滤选择器

:nth-child      :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)有index从1开始,而eq(index)是从0开始的

      :nth-child(even)能选取每个父元素下的索引值是偶数的元素

      :nth-child(odd)能选取每个父元素下的索引值是奇数的元素

      :nth-child(2)能选取每个父元素下的索引值等于2的元素

      :nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素(n从1开始)

      :nth-child(3n+1))能选取每个父元素下的索引值是3n+1的元素(n从1开始)

:first-child      :first只返回单个元素,而first-child选择符将为每一个父元素匹配第一个子元素,例如$("ul li:first-child");选取每个<ul>中第一个<li>元素

:last-child       :同样,:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素,例如$("ul li:last-child")选取每个<ul>中最后一个<li>元素

:only-child      $("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素

demo1: 改变每个class为one的<div>的父元素下的第2个子元素的背景色

demo2:改变每个class为one的<div>父元素下的第1个子元素的背景色

demo3:改变每个class为one的<div>父元素下的最后一个子元素的背景色

demo4:如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色

6)表单对象属性过滤选择器

:enabled            $("#form1 :enabled")选取id为"form1"的表单内的所有元素可用的元素

:disabled             $("#form2 :disabled")选取id为“form2”的表单内的所有不可用元素

:checked            $("input :checked")选取所有被选中的<input>元素(单选框,复选框)

:selected            $("select option :selected")选取所有被选中的选项元素(下拉列表)

测试画面

demo1:改变表单内可用<input>元素的值

demo2:改变表单内不可用<input>元素的值

demo3:获取多选框选中的个数

$("input :checked").length

demo4:获取下拉框选中的内容

$("select :selected").text();

四、表单选择器

:input            $(":input")选取所有<input>、<textarea>、<select>、<button>

:text              $(":text")选取所有的单行文本框

:password           $(":password")选取所有的密码框

:radio             $(":radio")选取所有的单选框

:checkbox          $(":checkbox")选取所有的复选框

:submit          $(":submit")选取所有提交的按钮

:image           $(":image")选取所有的图像按钮

:reset           $(":reset")选取所有的重置按钮

:button            $("button")选取所有的按钮

:file            $(":file")选取所有的上传域

:hidden          $(":hidden")选取所有不可见元素

有点晚,后面的例子就不写啦!!!

时间: 2024-08-28 05:07:23

锋利的Jquery解惑系列(三)------ 各路选择器大聚会的相关文章

锋利的Jquery解惑系列(一)------基本概念大锅炖

声明:虽然是基本概念但也是笔者经过一番学习才总结的这些文章,所以他不包括Jquery优缺点.特点.语法的介绍. 概念一:jQuery对像与DOM对象 DOM(Document Object Model, 文档对象模型)他可以表示成数据结构的树 <html> <head></head> <body> <h1></h </body> </html> 就像上面表示html.head.body.h1都是DOM元素节点并且具有

[jQuery学习系列三 ]3-JQuery学习二-字典操作

前言:如果看过了第一篇和第二篇, 相信大家会对jQuery有个初步的认识了, 对于jQuery的选择器和数组的操作都已经很熟悉了, 这一篇就单独罗列jQuery中字典的操作相关的内容. 1. 数组中添加map var arr = []; var key = 'Jeremy'; var value = '!!!!' arr.push({ 'key': key, 'value': value, }); document.write("key: " + arr[0]['key'] + &qu

锋利的jQuery第三章

现在开始学习第三章,jQuery中的Dom操作. 以前我也看过w3school的dom,看过了很迷,不知道dom是什么. 1,dom是文档对象模型,dom操作分为3类:Dom Core(核心),HTML-DOM,CSS-DOM (1)Dom Core(核心):主要有getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法. (2)HTML-DOM:如 document.forms //取得forms对象; el

Jquery的学习(三)选择器

1.Jquery中最重要的就是选择器了. 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 ①简单选择器. 最简单的也就是最常用的,最常用的一般也是最简单的. 在使用 jQuery 选择器时,我们首先必须使用"$()"函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了. #box { //使用 ID 选择器的 CSS 规则 color

锋利的jQuery读书笔记---选择器

前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所以笔记和代码也就写到一起了.下面是选择器的记录: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <script type="t

jQuery下拉框操作系列$(&quot;option:selected&quot;,this) &amp;&amp;(锋利的jQuery)

jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

锋利的Jquery学习笔记之Jquery的选择器

Jquery的选择器分为:基本选择器,层次选择器,过滤选择器和表单选择器. 1.基本选择器 基本选择器是Jquery中最常用的选择器,也是最简单的选择器. 2.层次选择器 如果想通过DOM之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和同辈元素等,那么层次选择器是一个非常好的选择. 在层次选择器中,第一个和第二个选择比较常用,而后面两个在JQuery里可以用更加简单的方法代替,所以使用的几率相对较小. 3.过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤

jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: 隐式迭代: 行为层与结构层的分离: 丰富的插件支持: 完善的文档: 开源. jQuery对象就是通过jQuery包装DOM对象后产生的对象. 在jQuery对象中无法使用DOM对象的任何方法.同样,DOM对象也不能使用jQuery里的方法. jQuery对象和DOM对象的相互转换        如果

《锋利的Jquery》

一.Js及库的异同和作用. 1.JQuery的代码风格: 链式操作风格.对于同一对象操作不超过三个,可以写成一行:对于较多操作的对象,每行一个操作:对于多对象少量操作,可以每个对象些一行,子对象缩进: 代码注释.//..... 2.JQuery对象和DOM对象: JQuery对象和DOM对象之间的转化.var $cr=$("#cr")----->var cr=$cr[0]; DOM对象和JQuery对象之间的转化.$()包起来: JQuery判断:is(":checke