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

1,736次阅读
没有评论

前端开发利器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库即可。

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

<span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="undefined">alert($)</span><span class="tag"></<span class="name">script</span>></span></span>
<span class="line"><span class="tag"></<span class="name">body</span>></span></span>
<span class="line"><span class="tag"></<span class="name">html</span>></span></span>

打开之后如图 前端开发利器jQuery-选择器及jQuery介绍

将jQuery对象转化成DOM对象

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

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

HTML代码

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>元素一<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>元素二<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>元素三<span class="tag"></<span class="name">div</span>></span></span>

JavaScript代码

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="keyword">var</span> $div = $(<span class="string">'div'</span>) <span class="comment">//jQuery对象</span></span>
<span class="line"><span class="keyword">var</span> div = $div[<span class="number">0</span>] <span class="comment">//转化成DOM对象</span></span>
<span class="line">div.style.color = <span class="string">'red'</span> <span class="comment">//操作dom对象的属性</span></span>

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

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

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="keyword">var</span> $div = $(<span class="string">'div'</span>) <span class="comment">//jQuery对象</span></span>
<span class="line"><span class="keyword">var</span> div = $div.get(<span class="number">0</span>) <span class="comment">//通过get方法,转化成DOM对象</span></span>
<span class="line">div.style.color = <span class="string">'red'</span> <span class="comment">//操作dom对象的属性</span></span>

DOM对象转化成jQuery对象

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

HTML代码

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>元素一<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>元素二<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>元素三<span class="tag"></<span class="name">div</span>></span></span>

JavaScript代码

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'div'</span>); <span class="comment">//dom对象</span></span>
<span class="line"><span class="keyword">var</span> $div = $(div); <span class="comment">//jQuery对象</span></span>
<span class="line"><span class="keyword">var</span> $first = $div.first(); <span class="comment">//找到第一个div元素</span></span>
<span class="line">$first.css(<span class="string">'color'</span>, <span class="string">'red'</span>); <span class="comment">//给第一个元素设置颜色</span></span>

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

jQuery基本选择器

  • id

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

语法:

<span class="line">1</span>
<span class="line">$(<span class="string">"#id"</span>);</span>

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

  • element

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

语法:

<span class="line">1</span>
<span class="line">$(<span class="string">"div"</span>);</span>
  • .class

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

<span class="line">1</span>
<span class="line">$(<span class="string">".class"</span>);</span>
  • *

全选择器: 匹配所有元素

语法:

<span class="line">1</span>
<span class="line">$(<span class="string">"*"</span>)</span>
  • selector1,selector2,selectorN

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

语法:

<span class="line">1</span>
<span class="line">$(<span class="string">"selector1,selector2,selectorN"</span>)</span>

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">div</span>></span>div<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"myClass"</span>></span>p class="myClass"<span class="tag"></<span class="name">p</span>></span></span>
<span class="line"><span class="tag"><<span class="name">span</span>></span>span<span class="tag"></<span class="name">span</span>></span></span>
<span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"notMyClass"</span>></span>p class="notMyClass"<span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"div,span,p.myClass"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">div</span>></span>div<span class="tag"></<span class="name">div</span>></span>, <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"myClass"</span>></span>p class="myClass"<span class="tag"></<span class="name">p</span>></span>, <span class="tag"><<span class="name">span</span>></span>span<span class="tag"></<span class="name">span</span>></span> ]</span>

jQuery层级选择器

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

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

  • 子选择器

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

语法:

<span class="line">1</span>
<span class="line">$( <span class="string">"parent > child"</span> )</span>
  • 后代选择器

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

语法:

<span class="line">1</span>
<span class="line">$(<span class="string">"ancestor descendant"</span>)</span>
  • 相邻兄弟选择器

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

语法:

<span class="line">1</span>
<span class="line">$(<span class="string">"prev + next"</span>)</span>
  • 一般兄弟选择器

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

语法:

<span class="line">1</span>
<span class="line">$(<span class="string">"prev ~ siblings"</span>)</span>

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代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">div</span>></span>John Resig<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>George Martin<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>Malcom John Sinclair<span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>J. Ohn</span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"div:contains('John')"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">div</span>></span>John Resig<span class="tag"></<span class="name">div</span>></span>, <span class="tag"><<span class="name">div</span>></span>Malcom John Sinclair<span class="tag"></<span class="name">div</span>></span> ]</span>
  • :empty

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

实例:

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

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">table</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>Value 1<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span><span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>Value 2<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span><span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line"><span class="tag"></<span class="name">table</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"td:empty"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">td</span>></span><span class="tag"></<span class="name">td</span>></span>, <span class="tag"><<span class="name">td</span>></span><span class="tag"></<span class="name">td</span>></span> ]</span>
  • :has(selector)

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

实例:

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

HTML代码:

<span class="line">1</span>
2
<span class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span>></span>Hello again!<span class="tag"></<span class="name">div</span>></span></span>

jQuery 代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"div:has(p)"</span>).addClass(<span class="string">"test"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"test"</span>></span><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"></<span class="name">div</span>></span> ]</span>
  • :parent

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

实例:

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

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">table</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>Value 1<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span><span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>Value 2<span class="tag"></<span class="name">td</span>></span><span class="tag"><<span class="name">td</span>></span><span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line"><span class="tag"></<span class="name">table</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"td:parent"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">td</span>></span>Value 1<span class="tag"></<span class="name">td</span>></span>, <span class="tag"><<span class="name">td</span>></span>Value 2<span class="tag"></<span class="name">td</span>></span> ]</span>

注意事项

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

jQuery可见性选择器

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

描述如下:

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

查找所有可见的 tr 元素

HTML 代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">table</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span> <span class="attr">style</span>=<span class="string">"display:none"</span>></span><span class="tag"><<span class="name">td</span>></span>Value 1<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>Value 2<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line"><span class="tag"></<span class="name">table</span>></span></span>

jQuery 代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"tr:visible"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>Value 2<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span> ]</span>
  • hidden示例

查找隐藏的 tr

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
HTML 代码:
<span class="line"><span class="tag"><<span class="name">table</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span> <span class="attr">style</span>=<span class="string">"display:none"</span>></span><span class="tag"><<span class="name">td</span>></span>Value 1<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">tr</span>></span><span class="tag"><<span class="name">td</span>></span>Value 2<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span></span>
<span class="line"><span class="tag"></<span class="name">table</span>></span></span>

jQuery 代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"tr:hidden"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">tr</span> <span class="attr">style</span>=<span class="string">"display:none"</span>></span><span class="tag"><<span class="name">td</span>></span>Value 1<span class="tag"></<span class="name">td</span>></span><span class="tag"></<span class="name">tr</span>></span> ]</span>

匹配type为hidden的元素

HTML 代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">form</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"email"</span> /></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"hidden"</span> <span class="attr">name</span>=<span class="string">"id"</span> /></span></span>
<span class="line"><span class="tag"></<span class="name">form</span>></span></span>

jQuery 代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input:hidden"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"hidden"</span> <span class="attr">name</span>=<span class="string">"id"</span> /></span> ]</span>

jQuery属性选择器

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

描述如下:

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

[attribute]

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

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">div</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">p</span>></span>Hello!<span class="tag"></<span class="name">p</span>></span></span>
<span class="line"><span class="tag"></<span class="name">div</span>></span></span>
<span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"test2"</span>></span><span class="tag"></<span class="name">div</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"div[id]"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"test2"</span>></span><span class="tag"></<span class="name">div</span>></span> ]</span>

[attribute=value]

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

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">value</span>=<span class="string">"Hot Fuzz"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">value</span>=<span class="string">"Cold Fusion"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"accept"</span> <span class="attr">value</span>=<span class="string">"Evil Plans"</span> /></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[name='newsletter']"</span>).attr(<span class="string">"checked"</span>, <span class="literal">true</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">value</span>=<span class="string">"Hot Fuzz"</span> <span class="attr">checked</span>=<span class="string">"true"</span> /></span>, <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">value</span>=<span class="string">"Cold Fusion"</span> <span class="attr">checked</span>=<span class="string">"true"</span> /></span> ]</span>

[attribute!=value]

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

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">value</span>=<span class="string">"Hot Fuzz"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">value</span>=<span class="string">"Cold Fusion"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"accept"</span> <span class="attr">value</span>=<span class="string">"Evil Plans"</span> /></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[name!='newsletter']"</span>).attr(<span class="string">"checked"</span>, <span class="literal">true</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"accept"</span> <span class="attr">value</span>=<span class="string">"Evil Plans"</span> <span class="attr">checked</span>=<span class="string">"true"</span> /></span> ]</span>

[attribute^=value]

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"milkman"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newsboy"</span> /></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[name^='news']"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> /></span>, <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newsboy"</span> /></span> ]</span>

[attribute$=value]

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

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"milkman"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"jobletter"</span> /></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[name$='letter']"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> /></span>, <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"jobletter"</span> /></span> ]</span>

[attribute*=value]

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"man-news"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"milkman"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"letterman2"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newmilk"</span> /></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[name*='man']"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"man-news"</span> /></span>, <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"milkman"</span> /></span>, <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"letterman2"</span> /></span> ]</span>

[selector1][selector2][selectorN]

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">id</span>=<span class="string">"man-news"</span> <span class="attr">name</span>=<span class="string">"man-news"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"milkman"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">id</span>=<span class="string">"letterman"</span> <span class="attr">name</span>=<span class="string">"new-letterman"</span> /></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"newmilk"</span> /></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[id][name$='man']"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">id</span>=<span class="string">"letterman"</span> <span class="attr">name</span>=<span class="string">"new-letterman"</span> /></span> ]</span>

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代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
6
7
8
9
10
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>John<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Karl<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Brandon<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Glen<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Tane<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Ralph<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"ul li:first-child"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">li</span>></span>John<span class="tag"></<span class="name">li</span>></span>, <span class="tag"><<span class="name">li</span>></span>Glen<span class="tag"></<span class="name">li</span>></span> ]</span>

:last-child

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
6
7
8
9
10
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>John<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Karl<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Brandon<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Glen<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Tane<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Ralph<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"ul li:last-child"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">li</span>></span>Brandon<span class="tag"></<span class="name">li</span>></span>, <span class="tag"><<span class="name">li</span>></span>Ralph<span class="tag"></<span class="name">li</span>></span> ]</span>

:only-child

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

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
6
7
8
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>John<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Karl<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Brandon<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Glen<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"ul li:only-child"</span>)</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">li</span>></span>Glen<span class="tag"></<span class="name">li</span>></span> ]</span>

:nth-child

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
6
7
8
9
10
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>John<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Karl<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Brandon<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Glen<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Tane<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>Ralph<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"ul li:nth-child(2)"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">li</span>></span>Karl<span class="tag"></<span class="name">li</span>></span>,   <span class="tag"><<span class="name">li</span>></span>Tane<span class="tag"></<span class="name">li</span>></span> ]</span>

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

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

HTML代码

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
6
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">	<span class="tag"><<span class="name">li</span>></span>1<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">	<span class="tag"><<span class="name">li</span>></span>2<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">	<span class="tag"><<span class="name">li</span>></span>3<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">	<span class="tag"><<span class="name">li</span>></span>4<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"ul li:nth-last-child(2)"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">li</span>></span>3<span class="tag"></<span class="name">li</span>></span> ]</span>

jQuery表单元素选择器

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

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

:input

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

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

<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> /></span></span>
<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"hidden"</span> /></span></span>
<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"image"</span> /></span></span>

<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> /></span></span>
<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span></span>
<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"reset"</span> /></span></span>

<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> /></span></span>
<span class="line">    <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /></span></span>
<span class="line">    <span class="tag"><<span class="name">select</span>></span><span class="tag"><<span class="name">option</span>></span>Option<span class="tag"></<span class="name">option</span>></span><span class="tag"></<span class="name">select</span>></span></span>

<span class="line">    <span class="tag"><<span class="name">textarea</span>></span><span class="tag"></<span class="name">textarea</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">button</span>></span>Button<span class="tag"></<span class="name">button</span>></span></span>

<span class="line"><span class="tag"></<span class="name">form</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":input"</span>);</span>

结果:

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

<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> /></span>,</span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"hidden"</span> /></span>,</span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"image"</span> /></span>,</span>

<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> /></span>,</span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span>,</span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"reset"</span> /></span>,</span>

<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> /></span>,</span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /></span>,</span>
<span class="line">  <span class="tag"><<span class="name">select</span>></span><span class="tag"><<span class="name">option</span>></span>Option<span class="tag"></<span class="name">option</span>></span><span class="tag"></<span class="name">select</span>></span>,</span>

<span class="line">  <span class="tag"><<span class="name">textarea</span>></span><span class="tag"></<span class="name">textarea</span>></span>,</span>
<span class="line">  <span class="tag"><<span class="name">button</span>></span>Button<span class="tag"></<span class="name">button</span>></span>,</span>
<span class="line">]</span>

:text

查找所有文本框 HTML代码:

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

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":text"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /></span> ]</span>

:password

查找所有密码框 HTML代码:

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

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":password"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> /></span> ]</span>

:radio

查找所有单选按钮

HTML代码:

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

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":radio"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> /></span> ]</span>

:checkbox

查找所有复选框 HTML代码:

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

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":checkbox"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> /></span> ]</span>

:submit

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

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

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":submit"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> /></span> ]</span>

:image

匹配所有图像域 HTML代码:

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

jQuery 代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":image"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"image"</span> /></span> ]</span>

:reset

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

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

jQuery 代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":reset"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"reset"</span> /></span> ]</span>

:button

查找所有按钮. HTML代码:

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

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":button"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> /></span>,<span class="tag"><<span class="name">button</span>></span><span class="tag"></<span class="name">button</span>></span> ]</span>

:file

查找所有文件域 HTML代码:

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

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">":file"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> /></span> ]</span>

jQuery表单对象属性选择器

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

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

:enabled

查找所有可用的input元素

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">form</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"email"</span> <span class="attr">disabled</span>=<span class="string">"disabled"</span> /></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"id"</span> /></span></span>
<span class="line"><span class="tag"></<span class="name">form</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input:enabled"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"id"</span> /></span> ]</span>

:disabled

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
<span class="line"><span class="tag"><<span class="name">form</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"email"</span> <span class="attr">disabled</span>=<span class="string">"disabled"</span> /></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"id"</span> /></span></span>
<span class="line"><span class="tag"></<span class="name">form</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input:disabled"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">name</span>=<span class="string">"email"</span> <span class="attr">disabled</span>=<span class="string">"disabled"</span> /></span> ]</span>

:checked

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
<span class="line"><span class="tag"><<span class="name">form</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">checked</span>=<span class="string">"checked"</span> <span class="attr">value</span>=<span class="string">"Daily"</span> /></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">value</span>=<span class="string">"Weekly"</span> /></span></span>
<span class="line">  <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">checked</span>=<span class="string">"checked"</span> <span class="attr">value</span>=<span class="string">"Monthly"</span> /></span></span>
<span class="line"><span class="tag"></<span class="name">form</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input:checked"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">checked</span>=<span class="string">"checked"</span> <span class="attr">value</span>=<span class="string">"Daily"</span> /></span>, <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"newsletter"</span> <span class="attr">checked</span>=<span class="string">"checked"</span> <span class="attr">value</span>=<span class="string">"Monthly"</span> /></span> ]</span>

:selected

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

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
<span class="line"><span class="tag"><<span class="name">select</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"1"</span>></span>Flowers<span class="tag"></<span class="name">option</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"2"</span> <span class="attr">selected</span>=<span class="string">"selected"</span>></span>Gardens<span class="tag"></<span class="name">option</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"3"</span>></span>Trees<span class="tag"></<span class="name">option</span>></span></span>
<span class="line"><span class="tag"></<span class="name">select</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"select option:selected"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"2"</span> <span class="attr">selected</span>=<span class="string">"selected"</span>></span>Gardens<span class="tag"></<span class="name">option</span>></span> ]</span>

jQuery特殊选择器this

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

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

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

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

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

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

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

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

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

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

<span class="line">1</span>
<span class="line"><span class="keyword">this</span>.style.color = <span class="string">"red"</span></span>

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

换成jQuery的做法:

<span class="line">1</span>
<span class="line">2</span>
<span class="line">3</span>
4
5
<span class="line">$(<span class="string">'p'</span>).click(<span class="function"><span class="keyword">function</span>()</span>{</span>
<span class="line">    <span class="comment">//把p元素转化成jQuery的对象</span></span>
<span class="line">    <span class="keyword">var</span> $<span class="keyword">this</span>= $(<span class="keyword">this</span>)</span>
<span class="line">    $<span class="keyword">this</span>.css(<span class="string">'color'</span>,<span class="string">'red'</span>)</span>
<span class="line">})</span>

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

总结:

  1. this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
  2. $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
admin
版权声明:本站原创文章,由admin2016-07-16发表,共计15545字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)