您的位置：首页 > Web前端 > JQuery

《锋利的jQuery（第2版）》随记－长期更新

2016-06-17 17:34 387 查看
Created by Yiyi_coding

Last edited at 2016年6月17日

第一章 认识jQuery
jQuery代码的编写
jQuery代码风格

DOM对象和jQuery对象
DOM对象和jQuery对象区别

DOM对象和jQuery对象的互相转换

解决jQuery和其它库的冲突
jQuery库在其它库之后导入

jQuery库在其它库之前导入

第二章 jQuery选择器

常用的css选择器

jQuery选择器

第一章 认识jQuery

jQuery代码的编写

jQuery代码风格

jQuery**链式操作**实现导航栏效果：

$(".level > a").click(function(){
$(this).addClass("current").next().show()//当前元素添加class，并将紧邻其后的元素显示出来
.parent().sibling()//筛选父辈元素的同辈元素
.children("a").removeClass("current").next().hide();
});


更多sibling()语法请参考 这儿.

DOM对象和jQuery对象

DOM对象和jQuery对象区别

DOM对象：通过JavaScript中的getElementsByTagName或者getElementById获取的元素节点就是DOM对象。DOM对象可以使用JS中的方法和属性例如：

var domOBJ = document.getElementById("id-1");//获得DOM对象
var domHTML = domOBJ.innerHTML;//使用JS中的属性


jQuery对象：通过jQuery包装DOM对象后产生的对象。

$("#id-1").html();//等价于document.getElementById("id-1").innerHTML


＊注：利用＃id得到的jQuery对象与getElementById得到的DOM对象并不等价，如下图



DOM对象和jQuery对象的互相转换

一 ：jQuery提供了两种方法将一个jQuery对象转换为DOM对象，即［index］和get(index)。

（1）如上图，jQuery对象是一个类似于数组的对象，可以通过［index］

的方法得到DOM对象

$("#id-1")［0］ 等价于 document.getElementById("id-1");


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

document.getElementById("id-1") 等价于 $("#id-1").get(0);


二：DOM对象转换为jQuery对象

$("#id-1") 等价于 $(document.getElementById("id-1"));


解决jQuery和其它库的冲突

jQuery库在其它库之后导入

①：在jQuery库和其他库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交给其他JavaScript库。如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决①</title>
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
jQuery(function(){                  //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});

$("pp").style.display = 'none';        //使用prototype.js隐藏元素
</script>

</body>
</html>


②：如果想确保jQuery不会与其他库冲突，又想自定义个其他快捷方式，可进行如下操作：

<script type="text/javascript">
var $j = jQuery.noConflict();      //自定义一个比较短快捷方式
$j(function(){                     //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});

$("pp").style.display = 'none';        //使用prototype.js隐藏元素
</script>


③：如果不想给jQuery自定义上述备用名称，还想使用
$
而不管其他库中的$()方法，同时又不想与其他库产生冲突，可以尝试下述两种方法：

<script type="text/javascript">
jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
jQuery(function($){                    //使用jQuery
$("p").click(function(){		//继续使用 $ 方法
alert( $(this).text() );
});
});

$("pp").style.display = 'none';        //使用prototype
</script>


<script type="text/javascript">
jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
(function($){						//定义匿名函数并设置形参为$
$(function(){					//匿名函数内部的$均为jQuery
$("p").click(function(){	//继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery);                         //执行匿名函数且传递实参jQuery

$("pp").style.display = 'none';        //使用prototype
</script>


jQuery库在其它库之前导入

如果jQuery库在其他库之前就导入了，那么可以直接使用”jQuery”来做jQuery的一些工作，同时，可以将$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决</title>
<!-- 引入 jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">
jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});

$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>


第二章 jQuery选择器

常用的css选择器

选择器语法描述示例
标签选择器E｛css规则｝文档元素作为选择符a｛text-decoration:none｝
ID选择器ID{css规则}文档元素的唯一标示符ID做为选择符note{font-size:14px}
类选择器E.class{css规则}或者直接.class{css规则}文档元素的class做为选择符div.note{font-size:16px} .dream{font-size:18px}
群组选择器E1,E2,E3{css规则}多个选择符应用同样的样式p,a,span{font-size:14px}
后代选择器E F{css规则}元素E的任意后代元素Fdiv a{color:red}
通配符选择器＊{css规则}文档的所有元素应用同样的样式＊{color:red}

jQuery选择器

jQuery选择器完全继承了css的风格。两者写法非常相似，只不过作用效果不同，css选择器找到元素后添加样式，jQuery选择器则常用于添加行为。

jQuery选择器不仅比传统的JavaScript中取得元素的方法写法简洁，还能避免由于使用了页面中不存在的元素而导致的错误（getElementById() 方法：通过id取得HTML元素。getElementsByName()方法：通过name取得元素，是一个数组。getElementsByTagName()方法：通过HTML标签取得元素，是一个数组。）

通过JS选择器查找页面不存在的元素时会报错，而jQuery选择器则不会。

选择器描述示例
＃id根据id选择唯一元素$(“#test”) 选取id为test的元素
＃class根据类名匹配元素$(“.test”) 选取所有class为test的元素
element根据元素类型匹配$(“p”) 选取所有< p >标签元素
＊匹配所有元素$(“＊”) 选取页面所有的元素
selector1，2，3…每个选择器匹配到的元素集合$(“#test , div , p.myclass”) 匹配id为test，所有的div以及class为myclass的p元素的集合
jQuery(“parent child”)选取parent元素里所有的child元素$(“div span”) 选取< div >里所有的< span >元素 （不同级的多个）
jQuery(“parent > child”)选取parent元素下紧接着的child元素$(“#test > span”) 选取位于id为test的元素下的紧接的< span >子元素（同级的多个）
jQuery(“prev＋next”)选取紧接在prev元素后的next元素$(“.one+div”) 选取class为one的下一个同辈< div >元素 (同辈一个)
jQuery(“prev～siblings”)选取prev元素之后所有的siblings元素$(“＃test～span”) 选取id为test之后的所有的< span >同辈元素（同辈多个）




*1.可以使用next()方法代替$(“prev＋next”)选择器：

$(".one＋div")等价于$(".one").next("div")


*2.可以使用nextAll()方法代替$(“prev～next”)选择器：

$(".one～div")等价于$(".one").nextAll("div")


*3.区别nextAll()和siblings()方法：

nextAll()取到的是该元素之后的所有同辈元素，有位置区分。

siblings()取到的的是所有的同辈元素，没有位置前后区分。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航