锋利的jquery 笔记第1~2章

本文主要是介绍锋利的jquery 笔记第1~2章，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>元素

3.5 子元素过滤选择器

$(":nth-child(index/even/odd/equation)")
选取每个父元素下的第 index个子元素或者奇偶元素， index 从 1 算起

:nth-child(even)是选取父元素下的索引值是偶数的元素

:nth-child(odd)是选取父元素下的索引值是奇数的元素

:nth-child(2)是选取父元素下的索引值是 2的元素

:nth-child(3n)是选取父元素下的索引值是 3的倍数的元素 (n从 0开始 )

:nth-child(3n+1)是选取父元素下的索引值是 3n+1的元素 (n从 0开始 )

例：改变每个 class为 one的 <div>父元素下的第 2个子元素的背景色

$(‘div.one:nth-child(2)’) .css(“background”,”#ff0000”);

$("selector:first-child")
选取每个父元素的第一个子元素

例：改变每个 class为 one的 <div>父元素下的第 1个子元素的背景色

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

$("selector:last-child")
选取每个父元素的最后一个子元素

例：改变每个 class为 one的 <div>父元素下的最后 1个子元素的背景色

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

$("selector:only-child")
如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配
例：如果 class为 one的 <div>父元素下只有一个子元素，那么改变这个子元素的背景色

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

3.6 表单对象属性过滤选择器
该类选择器主要是对表单元素进行过滤

假设有下列的 html codes:

可用元素 <input name=”add”>

不可用元素 <input name=”email” disabled=”disabled” >

</select>

</form>
$("selector:enabled")
选取所有可用元素

例：改变表单内可用 <input>元素的值

$(‘#form1 input:enabled’) .val(“changed”);

$("selector:disabled")
选取所有不可用元素

例：改变表单内不可用 <input>元素的值

$(‘#form1 input:disabled’) .val(“changed”);

$("selector:checked")
选取所有被选中的元素（ for radio,checkbox）

例：获取多选框选中的个数

$(‘input:checked’) .length;

$("selector:selected")
选取所有被选中的选项元素（主要针对 <select>下拉列表）
例：获取下拉选框的内容

$(‘select:selected’) .text();

4 表单选择器
通过这类选择器，可以很方便的获取表单的某个或某类型的元素

$(":input")
选取所有的 <input>,<textarea>,<select>,<button> 元素

例：获取表单内表单元素的个数

$(‘#form1 :input’) .length;

注意和 $(‘#form1 input’) 的区别，

$(‘#form1 input’)是只是选取所有 #form1里的 <input>元素，不包括 <textarea>,<select>,<button>

$(":text")
选取所有的单行文本框

例：获取表单内单行文本框的个数

$(‘#form1 :text’) .length;

$(":password")
选取所有的密码框

例：获取表单内密码框的个数

$(‘#form1 :password’) .length;

$(":radio")
   选取所有的单选框
$(":checkbox")
   选取所有的复选框
$(":submit")
   选取所有的提交按钮
$(":image")
   选取所有的图像按钮
$(":reset")
   选取所有的重置按钮
$(":button")
   选取所有的按钮
$(":file")
   选取所有的上传域
$(":hidden")
   选取所有不可见元素