jQuery笔记

时间：2016-04-27 00:16:23 阅读：305 评论：0 收藏：0 [点我收藏+]

标签：

第一章认识jQuery

1.1 javascript 和 javascript库

javascript的三个弊端：

一：复杂的文档对象模型（DOM）；

二：不一致的浏览器实现和便捷的开发；

三：调试工具的缺乏；

jquery的优势：

1：轻量级。

2：强大的选择器

3：出色的DOM操作和封装。

4：可靠的时间处理机制。

5：完善的ajax。

6：不污染顶级变量。

7：出色的浏览器兼容性。

8：链式操作方式。

9：隐式迭代。

10；行为层和结构层的分离。

11：丰富的插件支持。

12：完善的文档。

13：开源

1.4 jquery对象和DOM对象

通过JS的放法从DOM树中提取的DOM元素就是DOM对象：

如下：

var document.getelementByTagName;

var document.getElementById;

2:jquery 对象：

jquery对象就是通过jquery包装DOM对象后产生的对象。

jquery对象是jquery独有的。如果一个对象是jquery对象，那么就可以使用jquery里面的方法

例如：

$("#id").html(); //获取id名为id的元素里的html代码。

这段代码等同于:

document.getElementById("#id").innerHTML;

注意：用JQ获得的jquery对象和DOM获取的对象是不一样的，jquery获取的对象是不能使用DOM对象的任何方法的。

1.4.2 jquery 对象和DOM对象的相互转换

在讨论转换之前，先要约定好定义的风格。如果获取的对象是jquery对象，那么就在变量前面加上$例如：

var $variable = jquery对象；

如果获取的是DOM对象：

var variable = DOM对象；

1：在使用jquery的时候，如果对jquery对象提供的方法不了解或者是jquery没有封装你想要的方法的话，那么就要使用DOM方法，jquery提供了两种处理方法。

方法：[index]和get[index]；

（1）jquery对象是一个类似于数组的对象，可以通过[index]的方法得到相应的DOM对象。

jquery代码如下：

var $cr = $("#cr");  //jquery 对象
var cr = $cr[0];  //DOM对象

(2) 另一种方法是jquery本身提供的，通过get（index）方法得到相应的DOM对象。

jquery代码如下：

var $cr = $("#cr");  //jquery 对象
var cr = $cr.get(0);

DOM对象转jquery对象：

DOM转jquery很简单，只用$()把DOM对象包裹起来就可以了。

is(":checked")是jquery的方法，判断jquery对象是否被选中，返回值是boolean类型。

第二章：jquery选择器

1：css选择器：

选择器	语法	描述	实例
标签选择器	R{ css规则 }	以文档元素作为选择符	header{ font-size : 100% }
ID选择器	#id{ css规则 }	以文档元素的唯一标识符作为选择符	#id{ font:size :100% }
类选择器	.class{ css规则 }	以文档元素的class作为选择符	.class{ font:size :100% }
群组选择器	a,b,c{ css规则 }	多个选择符应用同样的样式规则	a,div,aside{ font:size :100% }
后代选择器	a b{ css规则 }	元素a 的任意一个后代	.name p{ font:size :100% }
统配	*{ css规则 }	以文档的所有元素作为选择符	*{ font:size :100% }

jquery 选择器，完全继承了css的风格。

注意：用$()获取的永远是对象，即使页面上没有这个元素。所以不能用jquery来检查某个元素在页面上是否存在。

如：if($("tt")){

do something;

}

应该根据获取到的元素的长度来判断：

if($("tt").length>0){

do something;

}

或者转化为DOM对象来判断，代码如下：

if($("tt")[0]){

do something；

}

基本选择是jquery中最常用的选择器了，也是最简单的选择器。，通过id class 和标签名来查找DOM元素。

基本选择器

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$（“ #id”）
.class	更具给定的元素找到全部类名为class的元素。	集合元素	$（".class"）
element	通过元素名匹配元素	集合元素	$("p")
*	匹配所有元素	集合元素	$("*")
selector1，selector2，。。。	将每一个选择器匹配到的元素合并后一起返回	集合元素	$("div,span,p")

层次选择器：

选择器	描述	返回	实例
$(" ancestor descendant")	选取ancestor元素里的descendant元素派生选择器	集合元素	$("div span")
$("parent>child")	选择parent下的child元素，自选择器	集合元素	$(" div>p")
$("perv+next")	选择紧挨在perv元素旁边的next元素	集合元素	$("span>p")
$("perv~sibling")	选取prev元素之后的所有sibling元素	集合元素	$("#id~")

第一个和第二个比较常用，用next（）方法来代替$("perv+next")选择器，用nextall（）方法来代替$("perv~sibling")

siblings（）方法与前后位置无关，只要是同辈节点都能匹配到。

过滤选择器：

选择器	描述	返回	示例
：first	选取第一个元素	单个元素	$("div:frist")选取所有div里的第一个元素
:last	选取最后一个元素	单个元素
：not（select）	除了select以外的所有元素	集合元素
：even	选取索引是偶数的所有元素	集合元素
：odd	选取索引是奇数的所有元素	集合元素
：eq（index）	选取索引等于index的所有元素	集合元素
：gt（index）	选取索引大于index的元素（从0开始）	集合元素
：lt（index）	选取索引小于index的元素	集合元素
：header	选取所有标题元素（h1,h2.h3）	集合元素
：animated	选取正在执行动画的元素	集合元素
：focus	选取当前获取焦点的元素	集合元素

内容过滤选择器

内容过滤选择器的过滤规则主要体现现在它所包含的子元素或文本上。

选择器	描述	返回	实例
：contain（text）	选取含有文本内容为“text”的元素	集合元素
：empty	选取不包含子元素或者文本的空元素	集合元素
：has（select）	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)");选取包含p的div元素
：parent	选取含有子元素或者文本的元素	集合元素	$("div:parent")选取拥有子元素的div元素

可见性选择器：

是根据元素的可见和不可见状太来选择的

选择器	描述	返回	实例
：hidden	选取所有不可见的元素	集合元素
：visible	选取所有可见的元素	集合元素

属性过滤选择器

通过元素的属性来获取相应的元素

选择器	描述	返回	实例
[attrbute]	选取拥有此属性的元素	集合元素
[attrbue=value]	属性值为value的元素	集合元素
[attrbute!=value]	属性值不等于value的元素	集合元素
[attrbute^=value]	属性值以value开头的元素	集合元素
[attrbute$=value]	属性值为value结尾的元素	集合元素
[attrbute*=value]	属性值里包含value的元素	集合元素
[attrbute\|=value]	属性等于给定字符串或者以字符串为前缀的元素	集合元素
[attrbute~=value]	属性中用空格分隔值包含value的元素	集合元素
[attribute1][attribute2][attribute3][attribute4]	用属性选择器合并成一个复合属性选择器，满足多个条件	集合元素

子元素选择器

选择器	描述	返回	实例
：nth-child（index/even/odd/equation）	选取每个父元素下第index个元素或者奇数或者偶数项	集合元素
：frist-child	选取每个父元素中第一个元素	集合元素
：last-child	选取每个父元素最后一个元素	集合元素
：only-child	如果某个元素是它父元素里唯一个一个元素，那么就选取它	集合元素

表单选择器：

选择器	描述	返回	实例
：input	选取选取<input>、<textarea>、<button>	集合元素	$(":input")可以和属性选择器器一起使用，能更好地找到你所需要的元素：$(”：input[type=type]“)
:text	找到表单里面的单行文本框	集合元素	$(":text")
:password	选取所有的密码框	集合元素	$(”：password“)
:radio	选取选取所有的单选框	集合元素	$(":radio")
:checkbox	选取多选框	集合元素	$(":checkbox")
:snbmit	选取所有的提交按钮	集合元素	$(":submit")
:image	选取所有的图像按钮	集合元素	$(":image")
:reset	选取所有的重置按钮	集合元素	$(":teset")
:button	选取所有上传域	集合元素	$(":button")
:file	选取所有的上传域	集合元素	$(":file")
:hidden	选取所有的不可见元素	集合元素	$(":hidden")

选择器中的一些注意事项：

1：如果选择器中含有特殊符号[".","、","#","]"]，这些符号

根据W3C的规定属性中是不能存在这些字符的，但是在实际项目中难免会遇到这样的表达式，所以我们在遇到这种带有特殊符号的表达式的时候，按照普通的方法就会出错。

例如:

以上的代码如果使用普通的选择器来选择器的话就会出现错误

$("#id#d");

$("#id[1]");

以上两个选择器是不能被识别的。

正确的写法如下：

$("#id//#d");

$("#id//[1//]")

要使用转义特殊字符

属性选择器的@符号问题

在新的jquery版本中是不存在@符号的，如果在你的属性中出现了@符号，正确的方法是去掉@。

注意：如果你的项目中使用较早的jquery代码和插件，使用最新的jquery文档，在运行的时候会出错或者不能使用有可能就是因为舒心选择器中使用了@的原因。

属性选择器中有空格的问题

在jquery中属性存在空格和不存在空格所选取的元素是不一样的。

jQuery中的DOM操作

一般来说DOM操作分为三个方面。即DOM Core （核心）、HTML-DOM和CSS-DOM。

DOM Core （核心）

它并不专属于javaScript，任何一种支持DOM的程序开发语言都可以使用它。

document.getElementById()/ByTagName/ByAttrbute()都属于DOM Core。

HTML-DOM

在使用javascript和DOM为HTML来编写脚本，有许多专属与HTML-DOM的属性。它提供了一些简单的标记来描述HTML的属性。

例如：
使用HTML-DOM来获取表单：

document.forms//获取HTML-DOM提供的一个form对象

使用HTML-DOM来获取src属性的方法。

element.src

CSS-DOM

CSS-DOM是针对CSS的操作。在javascript中，CSS-DOM的技术的主要作用是获取和设置style对象的各种属性

jquery中的DOM操作

查找元素节点：

查找与元素节点的方法是：

选取合适的选择器来选中，需要注意的是，如果选择的选择器返回的不只是一个元素的话，你需要对这个数组进行选择，看看你到底需要哪一个数。

查找元素属性：

这个方法其实是上一步的衍生操作，先找到相应的元素，然后通过attr（”attribute“）来提取你需要的属性的值

例子：

$(function(){
//创建JQ对象
var $li = $(".second-menu li:eq(1)");
var $liattr = $li.attr("name");
alert($liattr)
})

在这里当你获得元素集合之后，如果你不进行数组元素选取的话（:eq(n)n代表数字内的index，从0开始），系统默认显示第一个元素的属性值。

创建节点

var $ul = $("p");//创建jq对象，实例是ul
var $li1 =$("<li>我是第一个被创建出来的</li>");
var $li2 =$("<li>我是第二个被创建出来的</li>");
$ul.append($li1).append($li2);

对p标签内添加两个li标签，可以添加空节点，也可以添加文字节点，借助append（jq对象）的方式来给父元素添加节点。

添加属性节点

var $ul = $("p");//创建jq对象，实例是ul
var $li1 =$("<li>我是第一个被创建出来的</li>");
var $li2 =$("<li>我是第二个被创建出来的</li>");
var $li3 =$("<li title=‘我有自己的属性‘>我是第二个被创建出来的</li>");
$ul.append($li1).append($li2).append($li3);
alert($li3.attr("title"))

和上面的代码基本相似，区别就是在创建节点的时候吧属性加上就可以了。

插入节点

动态创建HTML元素没有实际用处，还需要将新创建的元素插入到文档中。将新创建的节点插入到文档的最简单办法是，让它成为某个节点的子节点。下面我们来介绍，jquery追加创建内容的方法：

插入节点的方法

方法	描述	实例
append()	向每个匹配元素中添加内容,向$a中添加$b节点	$("$a").append($("b"))
appendTo()	它是append（）的反向操作，appendTo（）是吧前面的元素添加到后面的元素里去	$("b").appendTo($("a"))和上面的效果是一样的
prepend（）	向匹配的所有元素添加前置内容	$("p").prepend("<b>hello</b>") <p><b>hello</b></p>
prependTo（）	也是反向的操作
after（）	在匹配的元素之后添加内容	$("<b>hello</b>").after($("p")); <p></p><b>hello</b>
insertAfter（）	上面方法的反向操作
before（）	向匹配的元素前面插入内容和prepend是有去别的	$("<b>hello</b>").before($("p")); <b>hello</b><p></p>
insertBefore()	和上面的是相反的

删除节点

如果文档中某一个元素多余，那么应将其删除，jquery提供了三种删除节点的方法，即remove（）detach（）和empty（）。

1：remove方法

使用remove（）方法可以将你选择的元素删除掉，这个方法的返回值是这个被你删除的元素，所以当你还想使用这个方法的时候，你还可以把删除的方法添加回去。

$li = $(".fruit li:eq(0)");   //获取到想删除的对
$remove_li = $li.remove();    //删除$li对象
想要移动元素可以使用append()方法
$li.appendTo($(".fruit"));
也可以做选择性的删除
$("li").remove("li[title=pear]")

remove（）里面的参数是任何 jQuery 选择器的语法

2：detach（）方法

这个方法不会吧匹配的元素从jquery对象中删除，因此可以在将来再使用这些匹配元素。与remove（）不同的是，所有绑定的事件，附加的数据等都会保留下来。

这个的意思是，如果你删除的元素身上之前有事件或者数据，再使用remove（）方法之后再追加上的时候，身上的数据和时间都会消失，但是当你使用detach（）方法的话，身上的事件和数据是不会消失的。

3：empty（）方法

这个方法与其说是删除到不如说是清空，使用这个方法之后，他的文本结构是还存在的，只是里面的内容不在了。

复制节点

复制节点可以用clone（）方法来实现

$(".fruit li").click(function(){
$(this).clone().appendTo($(".fruit-text"))//搞清楚位置关系是谁添加给谁
})

clone（）方法里存在一个ture的参数，他的意思就是，当你复制一个元素的时候，被复制的元素数据或者事件都会被复制上。

替换节点

如果要替换某个节点，jquery提供了相应的方法，即replaceWith（）和replaceAll（）。

replaceWith（）

$("p").replaceWith($("<strong>这些都是我喜欢的水果</strong>"))

replaceAll（）

这个方法只是对上面的方法进行颠覆了而已。

($("<strong>这些都是我喜欢的水果</strong>")).replaceAll($("p")).

注意，如果在替换之前有绑定过事件，那么在你替换之后，需要在新的元素上重新添加事件，因为时间会和被替换元素一起被替换掉。

包裹节点

如果要将某个节点用其他标记包裹起来，jquery提供了相应的方法，及wrap（）。该方法对于要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。可以给div布局加上H5的语义化结构标签，加上之后也不会造成影响。

$("p").wrap("<strong></strong>");

将所有的匹配的元素单独用一个strong元素包裹

包裹节点操作还有两个其他的方法，即wrapAll（）和wrapInner（）。

1：wrapAll（）方法

该方法会将所有匹配的元素用一个包裹来包裹起来。不同于wrap（）的地方是，wrap（）是将所有的元素进行单独的包裹。

$("p").wrapAll("<strong></strong>");

它的意思是将所有的p元素都用一个strong标签来包裹。

注意：如果被包裹的元素之间有其他元素，其他元素会被放到包裹元素之后

HTML结构

<p class="fruit-text">水果</p>
<a href="#"> you can click here to jump to somewhere</a>
<p class="fruit-text">好多水果</p>

添加wrapAll（）之后debug的显示结果

<strong>
<p class="fruit-text">水果</p>
<p class="fruit-text">好多水果</p>
</strong>
<a href="#"> you can click here to jump to somewhere</a>

2:wrapInner()方法

使用这个方法，效果是，包裹元素的子内容包括文本节点，都用包裹元素进行包裹。

之前的代码结构和上面的HTML结构是相同的：

$("p").wrapInner("<strong></strong>");//p元素的子节点都被strong标签包裹。

使用这个代码之后，在firebug上显示的结构成了这样：

<p class="fruit-text">
<strong>水果</strong>
</p>
<a href="#"> you can click here to jump to somewhere</a>
<p class="fruit-text">
<strong>好多水果</strong>
</p>

属性操作

在 jquery中用attr（）的方法来获取和设置元素属性，removeAttr（）来删除元素属性。

1：attr（）

//        属性操作
var $title = $("p");
$title.attr("title","fruit-title");//给单个元素设置单个属性
$title.attr({"title":"first","name":"second"})//给单个元素设置多个属性

2：removeAttr（）

用来删除某个元素的某个属性。

$title.removeattr("title");//删除title属性

注意1,6版本的JQ新增了prop（）和removeProp（）。方法，用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性。

console.info($title.prop("title"));

只返回匹配元素里第一个元素属性的值

样式操作

获取样式和添加样式。

他们的思路就是获得属性，和添加属性。

添加样式：

$title.attr("class","high")

注意的问题：使用attr（）方法来添加样式，最好是在他没有class属性的情况下，原因是，如果以前有样式的情况下，他会替代掉以前的样式，只保留现在你添加的样式。

得到样式：

console.info($title.attr("class"));

追加样式

jquery提供了专门的方法来追加样式，这样子会更容易理解。

ar $title = $("p");
var $colorBtn = $(".add-color");//颜色对象
var $fontBtn =$(".add-font");//样式对象
$colorBtn.click(function(){
$title.addClass("color");
})
$fontBtn.click(function(){
$title.addClass("font")
})

如果给一个元素添加了多个不同样式，那么就等于合并了他们的样式。

如果给一个元素添加了两个不同的样式，后面添加的样式会取代之前的样式。

删除样式

移除样式jquery同样提供了方法，jquery使用removeclass（），这个方法可以一次删除一个样式，也可以一个删除多个样式。

一次删除一个样式：

$title.removeClass("样式名");

一次删除多个样式就是在样式名里用空格将不同样式区分开来就可以了。

$title.removeClass("color font")

全部删除：

当removeClass（）里面的参数为空时，系统就会默认将索取元素的所有样式全部删除。

切换(toggle)样式

$(".change-style").toggle(function(){
//显示元素
},function(){
//隐藏元素
});

toggle()方法在此处的作用是交替执行代码函数1和函数2.只要控制行为上的重复切换。

另外jquery还提供了一个方法来控制方法上的重复切换样式

$(".change-style").click(function(){
$title.toggleClass("only-style");
})

判断是否含有某个样式：

hasClass（）可以用来判断元素中是否含有某个类，如果有就返回true，如果没有就返回false。

注意：这个方法是为了增强代码的可读性而产生的。在jquery内部实际上是调用了is（）方法来完成这个功能的。

设置和获取HTML、文本和值

1：html（）方法

此方法类似于javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

取值：

当html（）里面不设置参数的时候，就是用来提取标签内的值得

设置：

如果里面有参数，就是用来设置HTML中的内容。

注意：html（）方法可以用于XHTML文档，但是不能用于XML文档。

2：text()方法：

此方法类似于javascript中的innerText属性，可以读取或者设置HTML代码

注意：

（1）javascript中的innerHTML属性并不能在firefox浏览器下运行，而jquery的text（）方法支持所有浏览器。

（2）text()方法对HTML文档和XML文档都有效

3：val（）方法

此方法类似于javascript中的value属性，可以用来设置和获取元素无论是多选框还是下拉框，他都可以返回元素的值。如果元素为多选，则返回一个包含所有选择值得数组。

val（）不知能设置元素的值，同时也能获取元素的值。另外val（）方法还有另外一个用处，就是他能使select（下拉列表。）checkbox（多选框）、和radio（单选框）相应的值被选中。

例子：HTML代码段

<!--d单选框-->
<select id="single">
<option>选择一号</option>
<option>选择二号</option>
<option>选择三号</option>
<option>选择四号</option>
</select>
<!--多选框-->
<select id="multiple" multiple="multiple">
<option selected="selected">选择一号</option>
<option>选择二号</option>
<option>选择三号</option>
<option>选择四号</option>
<option>选择五号</option>
</select>

设置下拉列表框的显示值：

$("#single").val（"设置你想要它显示的值"）；

设置多选框显示的值

//        设置复选框的值
$("#multiple").val(["选择四号","选择五号"])

设置表单的显示值，就想是给他们赋值一样，单个的给单个赋值，多个的以数组的形式赋值

遍历节点：

1：children（）方法

使用这个方法，可以直接获得该元素自己所构成的数组；

console.info($("#single").children().length);

注意：children（）方法只考虑子元素！不考虑其他后代

2：next（）

取得匹配元素后面紧跟的同辈元素。

3：prev()

和next（）方法刚好相反，它是获得匹配元素前面紧跟的同辈元素

4：siblings（）方法

该方法用于取得匹配元素前后所有的同辈元素

5:closest(“targer”)

匹配最近的匹配元素。首先检查当前元素是否匹配，如果匹配直接返回元素本身，如果匹配不到就向上查找父元素

，如果什么都没找到就返回一个空的jquery对象。

jQuery笔记

标签：

原文地址：http://www.cnblogs.com/gavinzzh-firstday/p/5437075.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行