4887王中王鉄算盘奖结果各路选择器大聚会,方法

来源:http://www.smjxgs.com 作者:4887王中王鉄算盘奖结果 人气:88 发布时间:2019-08-16
摘要:锋利的Jquery解惑系列(三)------ 各路选择器大聚会,jquery大聚会 申明:初次学习Jquery的选择器时只记得几个和css选择器类似的几个,在这里列出书上写上的各路选择器方便以后的查询

锋利的Jquery解惑系列(三)------ 各路选择器大聚会,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>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")选取所有不可见元素

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

 

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

JQuery的常用选择器、过滤器、方法祥细介绍,jquery选择器

1、jQuery对象转换成DOM对象

a.
var $cr = $("#cr"); //jQuery对象
var cr=$cr[0]; //DOM对象
alert(cr.checked); //检测checkbox是否被选中了

b.
var $cr=$("#cr"); //jQuery对象
var cr=$cr.get(0); //DOM对象
alert(cr.checked); //检测checkbox是否被选中了

2.DOM对象转换成jQuery对象
var cr=document.getElementById("cr"); //DOM对象
var $cr=$(cr); //jQuery对象
注:平时用到的jQuery对象都是通过$()函数造出来的,$()函数就是一个jQuery对象的制造工厂

3.jQuery的选择器 
a.$("#test")选取id为test的元素
b.$(".test")选取所有class为test的元素
c.$("p")选取所有的<p>元素
d.$("*")选取所有的元素

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

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

g.$(".one div")选取class为one的下一个<div>元素

h.$("#two~div")选取id为two的元素后面的所有<div>兄弟元素===$("#two").nextAll("div")===$("#two").siblings("div")选取id为two元素的所有同辈div,无论前后位置

4.jQuery的过滤器

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

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

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

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

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

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

h.$("input:gt(1)")选取索引大于1的<input>元素(注:大于1,而不包括1)

i.$("input:lt(1)")选取索引小于1的<input>元素(注:小于1,而不包括1)

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

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

5.内容过滤选择器

a.$("div:contains('我')")选取含有文本'我'的<div>元素

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

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

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

6.可见性过滤器

a.$(":hidden")选取所有不可见的元素,包括<input type="hidden"/>、<div style="display:none"></div> 和<div style="visibility:hidden"></div>等元素 b.$("div:visible")选取所有可见的<div>元素

7.属性过滤选择器

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

b.$("div[title=test]")选取属性title为"test"的<div>元素

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

d.$("div[title^test]")选取属性title以"test"开始的<div>元素

e.$("div[title$=test]")选取属性title以"test"结束的<div>元素

f.$("div[title*=test]")选取属性title含有"test"的<div>元素

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

8.子元素过滤选择器

a.:nth-child(index/even/odd)选取每个父元素下的第index个子元素或者奇偶元素 :eq(index)只匹配一个元素,并且是总0算起的,而:nth-child将为每一个父元素匹 配子元素,并且:nth-child(index)的index是从1开始的。

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

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

d.:only-child如果某个元素师它父元素中唯一的子元素,那么它将会被匹配,如果父元素中含有 其它元素,则不会被匹配

例如:$("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素 :nth-child()选择器是很常用的子元素过滤选择器,详细功能如下:

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

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

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

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

e.:nth-child(3n 1)能选取每个父元素下的索引值是(3n 1)的元素。

(n从0开始) 例如:

a.$('div.one:nth-child(2)').css("background","red")表示改变每个class为one的<div>父元素下 的第二个子元素的背景色

b.$('div.one:first-child').css("background","red")表示改变每个class为one的<div>父元素下的第一个子元素的背景色

c.$('div.one:last-child').css("background","red")表示改变每个class为one的<div>父元素的最后一个子元素的背景色

d.$('div.one:only-child').css("background","red")表示如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色

9.表单对象属性过滤选择器

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

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

c.$("input:checked")选取所有被选中的<input>元素

d.$("select:selected")选取所有被算中的选项元素

e.$(":input")选取所有<input><textarea><select><button>元素

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

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

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

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

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

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

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

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

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

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

  1. $(document).ready(function{}) 表示dom加载完成后出发 window.onload= 只能注册一个方法,必须页面上所有的内容都加载完毕后触发(图片,css,js都加载完毕)

11.节点遍历 next() nextAll() prev() prevAll() siblings() end() andSelf() parent() children()

12.设置样式 css() 设置行内样式 设置标签的style属性 attr("class","c1") 对class属性赋值 设置标签的所有样式 addClass("myClass")(不影响其他样式) class="c1 c2" removeClass("myClass") 移除样式 toggleClass("myClass") 如果存在样式则去掉样式,如果没有样式则添加样式 hasClass("myClass") 判断样式是否存在

13.链式变成 $(this).css("background-color","red").siblings().css("background-color","white");

1、jQuery对象转换成DOM对象 a. var $cr = $("#cr");//jQuery对象 var cr=$cr[0];//DOM对象 alert(...

锋利的jquery目录

第1章 认识jQuery
1.1 JavaScript和JavaScript库
1.1.1 JavaScript简介
1.1.2 JavaScript库作用及对比
1.2 加入jQuery
1.2.1 jQuery简介
1.2.2 jQuery的优势
1.3 jQuery代码的编写
1.3.1 配置jQuery环境
1.3.2 编写简单的jQuery代码
1.3.3 jQuery代码风格
1.4 jQuery对象和DOM对象
1.4.1 DOM对象和jQuery对象简介
1.4.2 jQurey对象和DOM对象的相互转换
1.4.3 实例研究
1.5 解决jQuery和其他库的冲突
1.6 jQuery开发工具和插件
1.7 小结
第2章 jQuery选择器
2.1 jQuery选择器是什么
2.2 jQuery选择器的优势
2.3 jQuery选择器
2.3.1 基本选择器
2.3.2 层次选择器
2.3.3 过滤选择器
2.3.4 表单选择器
2.4 应用jQuery改写示例
2.5 选择器中的一些注意事项
2.5.1 选择器中含有特殊符号的注意事项
2.5.2 选择器中含有空格的注意事项
2.6 案例研究——某网站品牌列表的效果
2.7 其他选择器
2.7.1 jQuery提供的选择器的扩展
2.7.2 其他使用CSS选择器的方法
2.8 小结
第3章 jQuery中的DOM操作
3.1 DOM操作的分类
3.2 jQuery中的DOM操作
3.2.1 查找节点
3.2.2 创建节点
3.2.3 插入节点
3.2.4 删除节点
3.2.5 复制节点
3.2.6 替换节点
3.2.7 包裹节点
3.2.8 属性操作
3.2.9 样式操作
3.2.10 设置和获取HTML、文本和值
3.2.11 遍历节点
3.2.12 CSS—DOM操作
3.3 案例研究——某网站的超链接和图片提示效果
3.4 小结
第4章 jQuery中的事件和动画
4.1 jQuery中的事件
4.1.1 加载DOM
4.1.2 事件绑定
4.1.3 合成事件
4.1.4 事件冒泡
4.1.5 事件对象的属性
4.1.6 移除事件
4.1.7 模拟操作
……
第5章 jQuery对表单、表格的操作及更多应用
第6章 jQuery与Ajax的应用
第7章 插件的使用和写法
第8章 用jQuery打造个性网站
附录
参考资料:baike.baidu.com/view/2659670.htm  

                          所有例子都来自书上

对于《锋利的jquery》中的一个疑问

不是按照下标
是按照第几个 内置一个计数器
图中选取div 集合
从左上角从左至右
从外到里依次遍历改变颜色 偶数变色  

各路选择器大聚会,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")选取所有不可见元素

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

 

本文由4887王中王鉄算盘奖结果发布于4887王中王鉄算盘奖结果,转载请注明出处:4887王中王鉄算盘奖结果各路选择器大聚会,方法

关键词:

上一篇:无缝滚动,图片从右往左无闲暇滚动代码

下一篇:没有了

最火资讯