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

3,364次阅读
没有评论

共计 15545 个字符，预计需要花费 39 分钟才能阅读完成。

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

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-选择器及jQuery介绍

将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的方法和属性值。
正文完
请博主喝杯咖啡吧！
post-qrcode
web
发表至： web
2016-07-16
 
admin
版权声明：本站原创文章，由 admin 2016-07-16发表，共计15545字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
前端开发利器jQuery-操作属性
MAC 压测工具Webbench   
前端开发利器jQuery-筛选器之查找
前端开发利器jQuery-选择器及jQuery介绍
评论（没有评论）
验证码