jQuery操作

   jQuery库可以通过一行简单的标记被添加到网页中，jQuery是一个JavaScript函数库。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

jQuery库包含以下特性：

• HTML元素选取

• HTML元素操作

• CSS操作

• HTML事件函数

• JavaScript特效和动画

• HTML DOM遍历和修改

• AJAX

• Utilities

一、jQuery入门

有两个版本的jQuery可供下载：

• Production version --> 用于实际的网站中，已被精简和压缩，后缀名为：min.js

• Development version --> 用于测试和开发，未压缩，是可读的代码，后缀名为：.js

这两个版本都可以从http://jquery.com/download/ 官网下载。

下面我们主要使用jQuery的1.x版本来进行介绍，主要是因为新版本的jQuery对IE6、7、8已经不兼容了。

1、jQuery的语法

    jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

基础语法：$(selector).action()

• $符号定义jQuery

• 选择符(selector)"查询"和"查找"HTML元素

• jQuery的action()执行对元素的操作

示例：

• $(this).hide() -->隐藏当前元素

• $("p").hide() -->隐藏所有<p>标签元素

• $("p.test").hide() -->隐藏所有class="test"的<p>标签元素

• $("#test").hide() -->隐藏所有id="test"的元素

2、jQuery选择器

基本选择器：

• #id选择器

jQuery #id选择器通过HTML元素的id属性选取指定的元素。页面中元素的id应该是唯一的，所以要在页面中选取唯一的元素需要通过#id选择器。

1 2 3 4 5 6 7

<div id="i1">    <p>wu.wu.wu......</p> </div>   //#id选择器的语法   $("#i1")

• 元素选择器

jQuery元素选择器基于元素名选取元素，下面例子查找出页面所有的<p>元素。

1 2 3 4 5 6 7 8 9

<div>DIV1</div> <div>DIV2</div> <span>SPAN</span>   //元素选择器： $("div");   //结果为对象： [ <div>DIV1</div>, <div>DIV2</div> ]

• .class选择器

jQuery类选择器可以通过指定的class查找元素。

1 2 3 4 5 6 7 8 9

<div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>   //class类选择器 $(".class");   //结果： [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

• 更多示例

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线

层级选择器：

1 2 3 4 5 6 7 8 9

<form>   <label>Name:</label>   <input name="name" />   <fieldset>       <label>Newsletter:</label>       <input name="newsletter" />  </fieldset> </form> <input name="none" />

• $("from input")：在给定的祖先元素下匹配所有的后代元素；

• $("parent > child")：在给定的父元素下匹配所有的子元素；

• $(“prev + next")：匹配所有紧接在prev元素后的next元素；

• $("prev ~ siblings")：匹配prev元素之后的所有siblings元素。

基本筛选器：

• $('xx:first');  ：获取第一个元素；

• :not(selector)：去除所有与给定选择器匹配的元素；

• $("tr::even")：匹配所有索引值为偶数的元素，从0开始计数；

• $("tr:odd")：匹配所有索引值为奇数的元素，从0开始计数；

• $("tr:eq(1)")：匹配一个给定索引值的元素；

• $("tr:gt(0)")：匹配所有大于给定索引值的元素。

选择器属性：

    [attribute=value]：匹配给定的属性是某个特定值的元素。

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

1 2 3 4 5 6 7 8 9 10 11

//HTML代码：   <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代码： $("input[name='newsletter']").attr("checked", true);   //结果： [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter"value="Cold Fusion" checked="true" /> ]

3、jQuery筛选器

过滤：

• eq(index) ：获取当前链式操作中第N个jQuery对象，返回jQuery对象

• first() ：获取第一个元素

• last() ：获取最后一个元素

• hasClass(class) ：检查当前元素时候含有某个特定的类，如果有，则返回true

查找：

• children([expr]) ：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

• closest(expr|object|element)：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

• find(expr|obj|ele)：搜索所有与指定表达式匹配的元素，这个函数是找出正在处理元素的后代元素的好方法

• next([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

• nextAll([expr])：查找当前元素之后所有的同辈元素

• nextUntil([exp|ele][,fil])：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

• offsetParent()：返回第一个匹配元素用于定位的父节点

• parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合

• parents([expr])

• parentsUntil([e|e],[,f])：直到找到为止

• prev([expr])：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

• prevAll([expr])：查找当前元素之前所有的同辈元素

• prevUntil[e|e],[,f])

• siblings([expr])：取得一个包含匹配的元素集合中，每一个元素的所有唯一同辈元素集合，可以用可选的表达式进行筛选

4、jQuery属性

• attr(name|pro|key,val|fn)：设置或返回被选元素的属性值

• removeAttr(name)：从每一个匹配的元素中删除一个属性

• prop(n|p|k,v|f)：获取在匹配的元素集中的第一个元素的属性值

• removeProp(name)：用来删除有.prop()方法设置的属性值

• addClass(class|fn)：为每个匹配的元素添加指定的类名

• removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类

5、jQuery CSS

 

• css(name|pro|[,val|fn])：访问匹配元素的样式属性

位置：

• offset([coordinates])：获取匹配元素在当前视口的相对偏移

• position()：获取元素相对父元素的偏移 

• scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移

• scrollLeft([val]) ：获取匹配元素相对滚动条左侧的偏移

尺寸：

• heigh([val|fn])：取得匹配元素当前计算的高度值(px)

• width([val|fn])：取得第一个匹配元素当前计算的宽度值(px)

• innerHeight()：获取第一个匹配元素内部区域高度(包括补白、不包括边框)

• innerWidth()：获取第一个匹配元素内部区域宽度(包括补白，不包括边框)

• outerHeight([soptions])：获取第一个匹配元素外部高度（默认包括补白和边框）

• outerWidth([options])

6、文档处理

内部插入：

• append(content|fn)：向每个匹配的元素内部追加内容

• appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中

• prepend(content|fn)：向每个匹配的元素内部前置内容。

• prependTo(content)

外部插入：

• after(content|fn)：在每个匹配的元素之后插入内容。

• before(content|fn)：在每个匹配的元素之前插入内容。

• insertAfter(content)：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

• insertBefore(content)

删除：

• empty()：删除匹配的元素集合中所有的子节点。

• remove([expr])：从DOM中删除所有匹配的元素。

• detach([expr])：从DOM中删除所有匹配的元素。

复制：

• clone([Even[,deepEven]])：克隆匹配的DOM元素并且选中这些克隆的副本。

 

更多内容参考：

•    jQuery1.12.0： http://www.php100.com/manual/jquery/index.html

•    jQuery3.1.0：   http://jquery.cuishifeng.cn/