• 为了保证你在浏览本网站时有着更好的体验,建议使用类似Chrome、Firefox之类的浏览器~~
    • 如果你喜欢本站的内容何不Ctrl+D收藏一下呢,与大家一起分享各种编程知识~
    • 本网站研究机器学习、计算机视觉、模式识别~当然不局限于此,生命在于折腾,何不年轻时多折腾一下

前端开发利器jQuery-选择器及jQuery介绍

web admin 2年前 (2016-07-16) 674次浏览 0个评论 扫描二维码

jquery-selectors-02

jQuery 是一套跨浏览器的 JavaScript 库,简化 HTML 与 JavaScript 之间的操作。由约翰·雷西格(John Resig)在 2006 年 1 月的 BarCamp NYC 上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前 10,000 个访问最高的网站中,有 65%使用了 jQuery,是目前最受欢迎的 JavaScript 库。 —维基百科

使用 jQuery

进入官方网站获取最新的版本https://jquery.com/download/,这里需要注意 jQuery 分 3 个系列版本 1.x 与 2.x 主要的区别在于 2.x 不再兼容 IE6、7、8 为移动端而优化,由于减少了一些代码,使得该版本比 jQuery1.x 更小且更快。

jQuery3.0 提供了精简版,有很多人使用 jQuery 并不需要 ajax 模块和 effects 模块,而恰恰这两个模块是 jQuery 中最占体积的,所以 jQuery 官方发布了精简版的,gzipped 压缩的版本仅仅 6k,相对于完整版动辄好几十 K 的体积来说着实骨感了不少,加载速度也快了不少。

下载地址:https://code.jquery.com/jquery-3.0.0.slim.js

jQuery 每一个系列版本分为:压缩版(compressed)与开发版(development),我们在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版本体积更小,效率更快)。

jQuery 只是一个库,不需要特别的安装,只需要我们在页面<head>标签内中通过script标签脚本引入 jQuery 库即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!-- 导入 jquery 代码 -->
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <!-- 也可以把代码下载本地进行导入 -->
    <script type="text/javascript" src="jquery-3.0.0.js"></script>
</head>
<body>

<script type="text/javascript">alert($)</script>
</body>
</html>

打开之后如图
jquery-selectors-01

将 jQuery 对象转化成 DOM 对象

jQuery 是一个类数组对象,DOM 对象就是一个单独的 DOM 元素。

  • 利用数组下标的方式读取到 jQuery 中的 DOM 对象

HTML 代码

1
2
3
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript 代码

1
2
3
var $div = $('div') //jQuery 对象
var div = $div[0] //转化成 DOM 对象
div.style.color = 'red' //操作 dom 对象的属性

用 jQuery 找到所有的 div 元素(3 个),因为 jQuery 对象也是一个数组结构,可以通过数组下标索引找到第一个 div 元素,通过返回的 div 对象然后调用它 style 属性然修改第一个 div 元素的颜色。这里需要注意的一点是,数组的索引是从 0 开始的,也就是第一个元素下标是 0

  • 通过 jQuery 自带的 get()方法

jQuery 对象自身提供一个.get() 方法允许我们直接访问 jQuery 对象中相关的 DOM 节点,get 方法中提供一个元素的索引:

1
2
3
var $div = $('div') //jQuery 对象
var div = $div.get(0) //通过 get 方法,转化成 DOM 对象
div.style.color = 'red' //操作 dom 对象的属性

DOM 对象转化成 jQuery 对象

如果传递给$(DOM)函数的参数是一个 DOM 对象,jQuery 方法会把这个 DOM 对象给包装成一个新的 jQuery 对象

HTML 代码

1
2
3
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript 代码

1
2
3
4
var div = document.getElementsByTagName('div'); //dom 对象
var $div = $(div); //jQuery 对象
var $first = $div.first(); //找到第一个 div 元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过 getElementsByTagName 获取到所有 div 节点的元素,结果是一个 dom 合集对象,不过这个对象是一个数组合集(3 个 div 元素)。通过$(div)方法转化成 jQuery 对象,通过调用 jQuery 对象中的 first 与 css 方法查找第一个元素并且改变其颜色。

jQuery 基本选择器

  • id

ID 选择器: 一个用来查找的 ID,即元素的 id 属性

语法:

1
$("#id");

id 选择器也是基本的选择器,jQuery 内部使用 JavaScript 函数document.getElementById()来处理 ID 的获取。原生语法的支持总是非常高效的,所以在操作 DOM 的获取上,如果能采用 id 的话尽然考虑用这个选择器

  • element

元素选择器: 根据给定(html)标记名称选择所有的元素

语法:

1
$("div");
  • .class

类选择器: 顾名思义,通过 class 样式类名来获取节点

1
$(".class");
  • *

全选择器: 匹配所有元素

语法:

1
$("*")
  • selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。

语法:

1
$("selector1,selector2,selectorN")

HTML 代码:

1
2
3
4
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

1
$("div,span,p.myClass")

结果:

1
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

jQuery 层级选择器

文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。

选择器中的层级选择器就是用来处理这种关系

  • 子选择器

选择所有指定“parent”元素中指定的”child”的直接子元素。

语法:

1
$( "parent > child" )
  • 后代选择器

选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子,孙子,曾孙等

语法:

1
$("ancestor descendant")
  • 相邻兄弟选择器

选择所有紧接在“prev”元素后的“next”元素

语法:

1
$("prev + next")
  • 一般兄弟选择器

匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器

语法:

1
$("prev ~ siblings")

jQuery 基本筛选器

jQuery 提供了一系列的筛选选择器用来更快捷的找到所需的 DOM 元素。筛选选择器很多都不是 CSS 的规范,而是 jQuery 自己为了开发者的便利延展出来的选择器.

  • 基本筛选器
选择器 描述
$(':first'); 获取匹配的第一个元素
$(':last'); 获取匹配的最后个元素
$("input:not(:checked)"); 去除所有给定选择器匹配的元素,例如查找所有未选中的 input 元素
$(":eq(number)"); 匹配一个给定索引值的元素
$(":gt(number)"); 匹配所有大于给定索引值的元素
$(":lt(number)"); 匹配所有小于给定索引值的元素
$(":even"); 匹配所有索引值为偶数的元素,从 0 开始计数
$(":odd"); 匹配所有索引值为奇数的元素,从 0 开始计数
$(":header").css("background", "#EEE"); 匹配如 h1, h2, h3 之类的标题元素,例如:给页面内所有标题加上背景色
$("p:lang(it)"); 选择指定语言的所有元素,例如:选择所有<P>的语言属性:
$(":root"); 选择该文档的根元素,在 HTML 中,文档的根元素,和$(":root");选择的元素一样,永远是元素。

注意事项:

  1. :eq(), :lt(), :gt(), :even, :odd用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意 jQuery 合集都是从 0 开始索引
  2. gt是一个段落筛选,从指定索引的下一个开始,gt(1)实际从 2 开始

jQuery 内容筛选器

  • :contains(text)

匹配包含给定文本的元素

实例:

查找所有包含"John"的 div 元素

HTML 代码:

1
2
3
4
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:

1
$("div:contains('John')")

结果:

1
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
  • :empty

匹配所有不包含子元素或者文本的空元素

实例:

查找所有不包含子元素或者文本的空元素

HTML 代码:

1
2
3
4
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

1
$("td:empty")

结果:

1
[ <td></td>, <td></td> ]
  • :has(selector)

匹配含有选择器所匹配的元素的元素

实例:

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:

1
2
<div><p>Hello</p></div>
<div>Hello again!</div>

jQuery 代码:

1
$("div:has(p)").addClass("test");

结果:

1
[ <div class="test"><p>Hello</p></div> ]
  • :parent

匹配含有子元素或者文本的元素

实例:

查找所有含有子元素或者文本的td元素

HTML 代码:

1
2
3
4
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

1
$("td:parent")

结果:

1
[ <td>Value 1</td>, <td>Value 2</td> ]

注意事项

  1. :contains:has都有查找的意思,但是 contains 查找包含”指定文本”的元素,has 查找包含”指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的
  3. :parent:empty是相反的,两者所涉及的子元素,包括文本节点

jQuery 可见性选择器

元素有显示状态与隐藏状态,jQuery 根据元素的状态扩展了可见性筛选选择器:visible:hidden

描述如下:

选择器 描述
$(":visible"); 选择所有的可见元素
$(":hidden"); 选择所有不可见元素,或者 type 为 hidden 的元素
  • visible 示例

查找所有可见的 tr 元素

HTML 代码:

1
2
3
4
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

1
$("tr:visible")

结果:

1
[ <tr><td>Value 2</td></tr> ]
  • hidden 示例

查找隐藏的 tr

1
2
3
4
5
HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

1
$("tr:hidden");

结果:

1
[ <tr style="display:none"><td>Value 1</td></tr> ]

匹配 type 为 hidden 的元素

HTML 代码:

1
2
3
4
<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

jQuery 代码:

1
$("input:hidden");

结果:

1
[ <input type="hidden" name="id" /> ]

jQuery 属性选择器

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。

描述如下:

选择器 描述
$(":[attribute]"); 匹配包含给定属性的元素
$(":[attribute=value]"); 匹配给定的属性是某个特定值的元素
$(":[attribute!=value]"); 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
$(":[attribute^=value]"); 匹配给定的属性是以某些值开始的元素
$(":[attribute$=value]"); 匹配给定的属性是以某些值结尾的元素
$(":[attribute*=value]"); 匹配给定的属性是以包含某些值的元素
$(":[selector1][selector2][selectorN]"); 复合属性选择器,需要同时满足多个条件时使用
`$(“:[attribute =value]”);` 匹配指定属性等于指定值或以指定值为前缀的所有元素
$(":[attribute~=value]"); 匹配指定属性的值中包含指定单词的所有元素
  • 选择器示例

[attribute]

查找所有含有 id 属性的 div 元素

HTML 代码:

1
2
3
4
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

jQuery 代码:

1
$("div[id]");

结果:

1
[ <div id="test2"></div> ]

[attribute=value]

查找所有 name 属性是 newsletter 的 input 元素

HTML 代码:

1
2
3
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:

1
$("input[name='newsletter']").attr("checked", true);

结果:

1
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

[attribute!=value]

查找所有 name 属性不是 newsletter 的 input 元素

HTML 代码:

1
2
3
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:

1
$("input[name!='newsletter']").attr("checked", true);

结果:

1
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

[attribute^=value]

查找所有name'news'开始的input元素
HTML 代码:

1
2
3
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

jQuery 代码:

1
$("input[name^='news']");

结果:

1
[ <input name="newsletter" />, <input name="newsboy" /> ]

[attribute$=value]

查找所有name'letter'结尾的input元素

HTML 代码:

1
2
3
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

jQuery 代码:

1
$("input[name$='letter']");

结果:

1
[ <input name="newsletter" />, <input name="jobletter" /> ]

[attribute*=value]

查找所有name包含'man'input元素
HTML 代码:

1
2
3
4
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

jQuery 代码:

1
$("input[name*='man']")

结果:

1
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

[selector1][selector2][selectorN]

找到所有含有id属性,并且它的name属性是以man结尾的
HTML 代码:

1
2
3
4
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

jQuery 代码:

1
$("input[id][name$='man']")

结果:

1
[ <input id="letterman" name="new-letterman" /> ]

jQuery 子元素选择器

子元素筛选选择器不常使用,其筛选规则比起其它的选择器稍微要复杂点

子元素筛选选择器描述表:

选择器 描述
$(":first-child"); 匹配第一个子元素
$(":last-child"); 匹配最后一个子元素
$(":only-child"); 如果某个元素是父元素中唯一的子元素,那将会被匹配
$(":nth-child"); 匹配其父元素下的第 N 个子或奇偶元素
`$(“:nth-last-child(n even odd formula)”);` 选择所有他们父元素的第 n 个子元素。计数从最后一个元素开始到第一个
  • nth-last-child 参数
参数 说明
n 匹配子元素序号,必须为整数,注意从 1 开始而不是 0
even 匹配所有偶数元素
odd 匹配所有奇数元素
formula 使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始,匹配每个 3 的倍数的元素
  • 示例

:first-child

在每个ul中查找第一个li
HTML 代码:

1
2
3
4
5
6
7
8
9
10
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

1
$("ul li:first-child")

结果:

1
[ <li>John</li>, <li>Glen</li> ]

:last-child

在每个ul中查找最后一个li
HTML 代码:

1
2
3
4
5
6
7
8
9
10
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

1
$("ul li:last-child")

结果:

1
[ <li>Brandon</li>, <li>Ralph</li> ]

:only-child

ul中查找是唯一子元素的li

HTML 代码:

1
2
3
4
5
6
7
8
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
</ul>

jQuery 代码:

1
$("ul li:only-child")

结果:

1
[ <li>Glen</li> ]

:nth-child

在每个ul查找第2个 li
HTML 代码:

1
2
3
4
5
6
7
8
9
10
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

1
$("ul li:nth-child(2)");

结果:

1
[ <li>Karl</li>,   <li>Tane</li> ]

:nth-last-child(n|even|odd|formula)

在每个匹配的 ul 中查找倒数第二个 li

HTML 代码

1
2
3
4
5
6
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

jQuery 代码:

1
$("ul li:nth-last-child(2)");

结果:

1
[ <li>3</li> ]

jQuery 表单元素选择器

无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的。jQuery 中专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素

选择器 描述
$(":input"); 匹配所有 input,textarea,select 和 button 元素
$(":text"); 匹配所有的单行文本框
$(":password"); 匹配所有密码框
$(":radio"); 匹配所有单选按钮
$(":checkbox"); 匹配所有复选框
$(":submit"); 匹配所有提交按钮
$(":image"); 匹配所有图像域
$(":reset"); 匹配所有重置按钮
$(":button"); 匹配所有按钮
$(":file"); 匹配所有文件域
  • 示例

:input

查找所有的 input 元素,下面这些元素都会被匹配到。
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

jQuery 代码:

1
$(":input");

结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[
  <input type="button" value="Input Button"/>,
  <input type="checkbox" />,

  <input type="file" />,
  <input type="hidden" />,
  <input type="image" />,

  <input type="password" />,
  <input type="radio" />,
  <input type="reset" />,

  <input type="submit" />,
  <input type="text" />,
  <select><option>Option</option></select>,

  <textarea></textarea>,
  <button>Button</button>,
]

:text

查找所有文本框
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
 <input type="text" />
 <input type="checkbox" />
 <input type="radio" />
 <input type="image" />
 <input type="file" />
 <input type="submit" />
 <input type="reset" />
 <input type="password" />
 <input type="button" />
 <select><option/></select>
 <textarea></textarea>
 <button></button>
</form>

jQuery 代码:

1
$(":text");

结果:

1
[ <input type="text" /> ]

:password

查找所有密码框
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":password");

结果:

1
[ <input type="password" /> ]

:radio

查找所有单选按钮

HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":radio");

结果:

1
[ <input type="radio" /> ]

:checkbox

查找所有复选框
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":checkbox");

结果:

1
[ <input type="checkbox" /> ]

:submit

查找所有提交按钮
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":submit");

结果:

1
[ <input type="submit" /> ]

:image

匹配所有图像域
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":image");

结果:

1
[ <input type="image" /> ]

:reset

查找所有重置按钮
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":reset");

结果:

1
[ <input type="reset" /> ]

:button

查找所有按钮.
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":button");

结果:

1
[ <input type="button" />,<button></button> ]

:file

查找所有文件域
HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代码:

1
$(":file");

结果:

1
[ <input type="file" /> ]

jQuery 表单对象属性选择器

除了表单元素选择器外,表单对象属性筛选选择器也是专门针对表单元素的选择器,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行筛选

选择器 描述
$(":enabled"); 选取可用的表单元素
$(":disabled"); 选取不可用的表单元素
$(":checked"); 选取被选中的<input>元素
$(":selected"); 选取被选中的<option>元素
  • 示例

:enabled

查找所有可用的 input 元素

HTML 代码:

1
2
3
4
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

jQuery 代码:

1
$("input:enabled");

结果:

1
[ <input name="id" /> ]

:disabled

查找所有不可用的 input 元素
HTML 代码:

1
2
3
4
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

jQuery 代码:

1
$("input:disabled");

结果:

1
[ <input name="email" disabled="disabled" /> ]

:checked

查找所有选中的复选框元素
HTML 代码:

1
2
3
4
5
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jQuery 代码:

1
$("input:checked");

结果:

1
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

:selected

查找所有选中的选项元素
HTML 代码:

1
2
3
4
5
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jQuery 代码:

1
$("select option:selected");

结果:

1
[ <option value="2" selected="selected">Gardens</option> ]

jQuery 特殊选择器 this

以来内容来源于慕课网-特殊选择器 this

相信很多刚接触 jQuery 的人,很多都会对$(this)和 this 的区别模糊不清,那么这两者有什么区别呢?

this 是 JavaScript 中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者

下面例子中,imooc 是一个对象,拥有 name 属性与 getName 方法,在 getName 中 this 指向了所属的对象 imooc

1
2
3
4
5
6
7
8
var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是 imooc 对象
        return this.name;
    }
}
imooc.getName(); //慕课网

当然在 JavaScript 中 this 是动态的,也就是说这个上下文对象都是可以被动态改变的(可以通过 call,apply 等方法),具体的大家可以查阅相关资料

同样的在 DOM 中 this 就是指向了这个 html 元素对象,因为 this 就是 DOM 元素本身的一个引用

假如给页面一个 P 元素绑定一个事件:

1
2
3
4
5
6
p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

通过 addEventListener 绑定的事件回调中,this 指向的是当前的 dom 对象,所以再次修改这样对象的样式,只需要通过 this 获取到引用即可

1
this.style.color = "red"

但是这样的操作其实还是很不方便的,这里面就要涉及一大堆的样式兼容,如果通过 jQuery 处理就会简单多了,我们只需要把 this 加工成 jQuery 对象

换成 jQuery 的做法:

1
2
3
4
5
$('p').click(function(){
    //把 p 元素转化成 jQuery 的对象
    var $this= $(this)
    $this.css('color','red')
})

通过把$()方法传入当前的元素对象的引用 this,把这个 this 加工成 jQuery 对象,我们就可以用 jQuery 提供的快捷方法直接处理样式了

总结:

  1. this,表示当前的上下文对象是一个 html 对象,可以调用 html 对象所拥有的属性和方法。
  2. $(this),代表的上下文对象是一个 jquery 的上下文对象,可以调用 jQuery 的方法和属性值。

Deeplearn, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明前端开发利器 jQuery-选择器及 jQuery 介绍
喜欢 (0)
admin
关于作者:

您必须 登录 才能发表评论!