锋利的jquery 笔记第1~2章

现在的位置: 首页 > 综合 > 正文

锋利的jquery 笔记第1~2章

2013年10月12日 ⁄ 综合 ⁄ 共 11000字 ⁄ 字号小中大 ⁄ 评论关闭

Jquery的优势：

1．轻量级

2．强大的选择器：
jquery允许使用从
css1到
css3几乎所有的选择器，以及
jquery独创的高级而复杂的选择器，还可以加入插件使其支持
XPath选择器，甚至开发者可以自己编写选择器。

3．出色的
DOM操作的封装

4．可靠的事件处理机制

document.getElementById(“tt”).style.color=”red”

对于上面传统的
javascript
代码，如果没有
id
为
tt
的元素，那么浏览器就会报错。因此你必须先判断该元素是否存在：

if(document.getElementById(“tt”))

document.getElementById(“tt”).style.color=”red”

但是这样每次都要判断就很麻烦。但
jquery
就非常不错，即使获取不存在的元素也不会报错。上述代码可以用
jquery
表示：

$(“#tt”).css(“color”,”red”) //
这里无需判断
$(“#tt”)
是否存在

注意：每一个
jquery
对象都是一个数组！

因此即使元素不存在也不会报错。如果你确实先判断是否存在该元素，代码如下：

if($(“#tt”).length>0){

//..

}

5．完善的
ajax

6．不污染顶级变量：
jquery只建立一个名为
jQuery的对象，其所有的函数方法都在这个对象之下。其别名
”$”也可以随时交出控制权，不会污染其他的对象。该特性使
jquery可以与其他
javascript库共存，而不用担心产生冲突

7．链式操作方式：这是
jquery最有特色的地方。你可以对发生在同一个
jquery对象上的一组动作，直接连写而无需重复获取对象，使得代码非常优雅。

8．隐式迭代。举个例，当用
jquery找到带有“
.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个元素。相反，
jquery理的方法都被设计成自动操作对象集合，而不是单独的对象，这使得大量循环结构不再需要，大幅减少代码

9．行为层与结构层分离。你可以使用
jquery选择器选中元素，然后直接给元素添加事件、属性、
css等。这种行为层与结构层分离，可以使
jquery开发人员与
html开发人员各司其职。

10．丰富的插件支持

$是
jQuery的简写形式

如　

$(“#foo”) 与　
jQuery(“#foo”)
等价

$.ajax 与　
jQuery.ajax
等价

$(document).ready(function(){

//…

}

也可以简写为

$(function(){//…}

上述代码类似于传统
javascript的
window.onload方法，但又有以下区别：

1. 执行时机。
window.onload必须等待网页中所有内容（包括图片）加载完毕后才执行，
$(document).ready是在网页中所有的
DOM结构绘制完毕后就执行，可能
DOM元素管理的东西并没有加载完。

2.编写个数。
window.onload只能有一个，如果有多个也只是执行一个。
$(document).ready能存在多个，而且多个都会被执行。

Jquery的链式操作例子

$(".has_children").click(function(){

　
$(this).addClass("highlight")

　
.children("a").show().end()

　
.siblings().removeClass("highlight")

　
.children("a").hide();

});

你可以看到上面一句代码就可以做到：当鼠标
click到
class为
has_children的元素时，

1) $(this).addClass("highlight")

给其添加一个名为
highlight的
class (现在才知道一个
tag
可以有多个
class,
在
html tag
里如果有多个
class
，则用空格隔开。如
<a class=”highlight children”>
)，这样就会使得当前元素根据
highlight css高亮显示。

其中
$(this)是指产生该事件的元素。虽然
function()是用来处理所有
class为
has_children的元素的
click
event，但
$(this)指的是当前被
click的那个元素，而不是所有
class为
has_children的元素

2) .children("a").show().end()

并将其内部的
<a>子元素都显示出來

!!其中
end()是重新定位到上次操作的元素，即
$(this)所指的元素。

End函数所表示回到最近的一个
"破坏性
"操作之前。即，将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作，则返回一个空集。所谓的
"破坏性
"就是指任何改变所匹配的
jQuery元素的操作。

例如，对于
<p><span>Hello</span>,how
are you?</p>

如果使用

$("p").find("span").end()

那么返回元素
"P"

3) .siblings().removeClass("highlight")

将其
class为
has_children的所有兄弟元素都去掉
highlight class

4) .children("a").hide();

所有兄弟元素内部的
<a>子元素全部隐藏

Jquery对象与
DOM对象

DOM对象
: 你可以把一个
html file看成是一个
DOM树。获取
DOM对象的方法

var
domOjb=document.getElementById(“id”);

var
ObjHtml=domObj.innerHTML;

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

$(“#foo”).html();

上面的
jquery
code等价于下面的
dom code

document.getElementById(“foo”).
innerHTML;

注意：
jquery对象无法使用
DOM对象的任何方法，
DOM对象也不能使用
jquery的方法。

Jquery对象与
DOM对象的相互转换

我们自己定义好变量的风格：
jQuery对象的变量前面加
$。如

var
$variable = jquery对象

DOM对象的变量不加
$。如

var
variable = DOM对象

jquery提供２个方法来把
jquery对象转成
DOM对象：

方法１：
[index]

var $cr = $(“cr”); //jquery对象

var cr = $cr[0]; //DOM对象

注意：每一个
jquery
对象都是一个数组！

方法２：
get(index)

var $cr = $(“cr”); //jquery对象

var cr = $cr.get(0); //DOM对象

把
DOM对象转成
jquery对象很简单，只需要用
$()把
dom对象包装起来。

var
cr=document.getElementById(“cr”);
//DOM对象

var $cr=$(cr) //jquery对象

Example: 判断复选框是否被选中

<input type=”checkbox” id=”cr”/>
$("#cr").click(function(){
        if($("#cr").is(":checked")){ //!!关键方法
               //...
        }
})

解决
jquery
与其他库的冲突

有些其他库
(
如
prototype)
也会用到
$
，这就会与
jquery
冲突。
$
是
jquery
的简写形式，不用
$
我们可以使用
”jquery”
来代替
”$”
。但
jquery
怎么释放
$
的控制权给其他库呢？

分几种情况。

情况一：

jquery

在其他库之后导入

那么你可以在任何时候调用
jQuery.noConflict()
函数来将变量
$
的控制权交给其他库

如

jQuery.noConflict();   //将变量$的控制权让渡给prototype.js
jQuery(function(){     //使用jQuery来代替$
        jQuery("p").click(function(){
               alert( jQuery(this).text() );
        });
});
$("pp").style.display = 'none'; //使用prototype

另一种方法是定义一个快捷方式变量来代替
$，该变量的值是
jQuery.noConflict()
函数的返回值

var $j=jQuery.noConflict();//
将变量
$
控制权让给
prototype.js,
并自定义快捷方式

$j(function(){ //使用$j来代替$
        $j("p").click(function(){
               alert($j(this).text() );
        });
});
$("pp").style.display = 'none'; //使用prototype

如果希望在
jquery里使用
$，但又不与其他库冲突，就用下列方法

jQuery.noConflict();   //将变量$的控制权让渡给prototype.js
jQuery(function($){    //使用jQuery
        $("p").click(function(){　//继续使用 $ 方法
               alert( $(this).text() );
        });
});
$("pp").style.display = 'none'; //使用prototype

情况二：

jquery

在其他库之前导入

<script src="jquery-1.3.1.js" type="text/javascript"></script>

<script src="prototype-1.6.0.3.js" type="text/javascript"></script>

那么，可以直接使用“
jQuery”来做
jQuery的工作，同时用
$作为其他库的快捷方式，不需要调用
jQuery.noConflict()函数

Jquery

选择器

Jquery选择器是
jquery的根基，重中之重。掌握了选择器，基本掌握了
jquery的一半。

先介绍
css的常用选择器热身。

标签选择器
：

以
html tag作为选择符　

格式：
E
{cssRules}

例：

td {

font-size:
14px;

}

a {

text-decoration:none;

}

ID
选择器
：

以
html tag的唯一标识符
ID作为选择符　

格式：
#ID
{cssRules}

例：

#note {

font-size:
14px;

}

class
选择器
：

以
html tag的
class作为选择符　

格式：
[E].className
{cssRules} 注：
E是可选的，因为可能不同的
tag的
class相同

例：

div.note {

font-size:
14px;

}

.dream {

font-size:
12px;

}

群组选择器
：

多个选择符应用同样的
css　

格式
：
E1, E2, E3 {cssRules}

例：

td, p, div.a {

font-size:
14px;

}

后代选择器
：

元素
E的任意后代元素
F（不仅包括子元素，也包括孙元素）　

格式：
E
F {cssRules}

例
：

#links a {

font-size: 14px;

}

通配选择器
：

所有的
html tag作为选择符　

格式：
*{cssRules}

例：

* {

font-size:
14px;

}

Jquery完全继承上面的
css选择器风格。只是２者的效果不同，
css选择器是找到元素添加样式，
jquery是找到元素添加行为。

Jquery不仅支持上面的
css常用选择器格式，还有一些不是常用
css选择器：伪类选择器
(E:Pseudo-Elements{cssRules})、子选择器
(E > F{cssRules})、临近选择器
(E + F{cssRules})、属性选择器
(E [attr] {cssRules})，它们不是所有主流浏览器完全支持。但
jquery却支持这些所有的选择器，而且主流浏览器都能兼容。下面一一介绍

Jquery选择器分为：

* 基本选择器

* 层次选择器

* 过滤选择器

* 表单选择器

1
基本选择器

$(#id)

根据给定的
id匹配一个元素

例：改变
id为
one的元素的背景色

$(‘#one’).css(“background”,”#ff0000”);

$(.class)

根据给定的类名匹配元素

例：改变
id为
mini的所有元素的背景色

$(‘.mini’).css(“background”,”#ff0000”);

$(element)

根据给定的元素名匹配元素

例：改变所有
<div>的背景色

$(‘div’).css(“background”,”#ff0000”);

$(*)

匹配所有元素

例：改变所有元素的背景色

$(‘*’).css(“background”,”#ff0000”);

$(selector1,selector2,...,selectorN)

将每一个选择器匹配到的元素合并后一起返回

例：改变所有的
<span>元素和
id为
two的元素的背景色

$(‘span,
#two’).css(“background”,”#ff0000”);

2
层次选择器

$("ancestor descendant")

选取
ancestor元素里的所有
descendant（后代）元素，后代元素不仅包括子元素，还包括孙元素、孙孙元素。

例：改变
<body>里所有
<div>（不限于子层级）的背景色

$(‘body
div’).css(“background”,”#ff0000”);

$("parent > child")

只选取
parent元素下的
child
（子层级）
元素，与
$("ancestor
descendant")有区别，前者选择所有后代元素（含且不限于子层级
）

例：仅改变
<body>里
child <div>的背景色，孙级的
<div>不会受影响

$(‘body
> div’).css(“background”,”#ff0000”);

$('prev + next')

选取紧接在
prev元素后的同辈的

next元素

例：改变
class为
one的元素的下一个同辈
<div>元素的背景色

$(‘.one
+ div’).css(“background”,”#ff0000”);

$(‘.one
+ div’)也可以用
next()方法代替，等价于
$(‘.one’).next(“div”)

$('prev ~ siblings')

选取
prev元素之后
的所有同辈的

siblings元素

例：改变
class为
two的元素后面的所有同辈
<div>兄弟元素的背景色

$(‘.two
~ div’).css(“background”,”#ff0000”);

$(‘.two
~ div’)也可以用
nextAll()方法代替，等价于
$(‘.two’).nextAll(“div”)

还有一个函数是
siblings()，该函数与
$(‘prev ~ siblings’)是不同的

$(‘#prev
~ div’)是选取
#prev元素后面的同辈
<div>元素

$(‘#prev’).
siblings(“div”)是选取所有与
#prev元素同辈的

<div>
，无论前后位置

3
过滤选择器

过滤选择器与
css的伪类选择器语法相同，即都以冒号“
:”开头。

可以同时跟多个过滤选择器
，例如

选取索引值大于
3且小于
6的
<div>元素，即选取第
4，
5个
<div>

$(‘div:gt(3):lt(6))

过滤选择器分为：

基本过滤、内容过滤，可见性过滤、属性过滤、子元素过滤和表单对象过滤

3.1
基本过滤选择器

$("selector:first")

选取第一个元素

例：改变第
1个
<div>元素的背景色

$(‘div:first’).css(“background”,”#ff0000”);

$("selector:last")

选取最后一个元素

例：改变最后
1个
<div>元素的背景色

$(‘div:last’).css(“background”,”#ff0000”);

$("selector:not(selector2)")

去除所有与给定选择器匹配的元素

例：改变
class不为
one的所有
<div>元素的背景色

$(‘div:not(.one)’).css(“background”,”#ff0000”);

$("selector:even")

选取索引是偶数的所有元素，索引从
0开始

例：改变索引值为偶数的
<div>元素的背景色

$(‘div:even’).css(“background”,”#ff0000”);

$("selector:odd")

选取索引是奇数的所有元素，索引从
0开始

例：改变索引值为奇数的
<div>元素的背景色

$(‘div:odd’).css(“background”,”#ff0000”);

$("selector:eq(index)")

选取索引等于
index的元素，
index
从
0
开始

例：改变索引值等于
3的
<div>元素的背景色

$(‘div:eq(3)’).css(“background”,”#ff0000”);

$("selector:gt(index)")

选取索引大于
index的元素，
index
从
0
开始

例：改变索引值大于
3的
<div>元素的背景色

$(‘div:gt(3)’).css(“background”,”#ff0000”);

$("selector:lt(index)")

选取索引小于
index的元素，
index从
0开始

例：改变索引值小于
3的
<div>元素的背景色

$(‘div:lt(3)’).css(“background”,”#ff0000”);

$(":header")

选取所有的标题元素，如
h1,h2,h3等等

例：改变所有标题元素，如
<h1>,<h2>,<h3>等的背景色

$(‘:header’).css(“background”,”#ff0000”);

$(":animated")

选取当前正在执行动画的所有元素

例：改变当前正在执行动画的元素的背景色

$(‘:animiated’).css(“background”,”#ff0000”);

3.2
内容过滤选择器

$(":contains(text)")

选取含有文本内容为
"text"的元素

例：改变含有文本
di的
<div>元素的背景色

$(‘div:contains(di)’).css(“background”,”#ff0000”);

$(":empty")

选取不包含子元素或者文本的空元素

例：改变不包含子元素（包括文本元素）的
<div>元素的背景色

$(‘div:empty’).css(“background”,”#ff0000”);

$(":has(selector2)")

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

例：改变含有
class为
mini的
<div>元素的背景色

$(‘div:has(.mini)’).css(“background”,”#ff0000”);

$(":parent")

选取含有子元素或者文本的元素

例：改变含有子元素或文本的
<div>元素的背景色，该过滤与

(“:empty”)
刚刚相反

$(‘div:parent).css(“background”,”#ff0000”);

3.3
可见性过滤选择器

$(":hidden")

选取所有不可见的元素

例：显示隐藏的
<div>元素
3秒

$(‘div:hidden’).show(3000);

$(":visible")

选取所有可见的元素

例：改变所有可见的
<div>元素的背景色

$(‘div:visible’).css(“background”,”#ff0000”);

3.4
属性过滤选择器

$("selector[attribute]")

选取拥有此属性的元素

例：改变含有
title属性的
<div>元素的背景色

$(‘div:[title]’).css(“background”,”#ff0000”);

$("selector[attribute=value]")

选取属性的值为
value的元素

例：改变属性
title的值等于
test的
<div>元素的背景色

$(‘div:[title=test]’).css(“background”,”#ff0000”);

$("selector[attribute!=value]")

选取属性的值不等于
value的元素

例：改变属性
title的值不等于
test的
<div>元素的背景色

$(‘div:[title!=test]’).css(“background”,”#ff0000”);

$("selector[attribute^=value]")

选取属性的值以
value开始的元素

例：改变属性
title的值以
te开始的
<div>元素的背景色

$(‘div:[title^=te]’).css(“background”,”#ff0000”);

$("selector[attribute$=value]")

选取属性的值以
value结束的元素

例：改变属性
title的值以
est结尾的
<div>元素的背景色

$(‘div:[title$=est]’).css(“background”,”#ff0000”);

$("selector[attribute*=value]")

选取属性的值含有
value的元素

例：改变属性
title的值含有
es的
<div>元素的背景色

$(‘div:[title*=es]’).css(“background”,”#ff0000”);

$("selector[selector2][selectorN]")

用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围，如
$("div[id][title$='test']")选取拥有

属性
id，并且属性
title以
"test"结束的
<div>元素