《锋利的jQuery》练习代码及解释+各大门户网站特效代码及解释.docxVIP

jQuery入门学习练习代码一、jQuery的选择器：1、基本选择器：JQuery选择器选择得到的元素一般是集合元素，可以通过查看数组长度来查看返回值的个数；在得到指定元素时可以通过选取数组对应的序号或者使用jQuery特有的get(index)方法得到元素。【练习一：查看页面中p元素的个数】Page Code：bodyformid=form1runat=serverp/pp/pp/pp/pinputid=btntype=buttonvalue=测试//form/body/htmlJavaScript Code：scripttype=text/javascriptsrc=../Scripts/jquery-1.4.1.js/scriptscripttype=text/javascript $().ready(function () {var $p = $(p);var btn = $(#btn).get(0); btn.onclick = function () { alert($p.length); } });/script注释：1、$().ready是jQuery特有的页面加载运行函数，它不同于window.onload只能添加一个函数的弊端。2、var $p = $(p)是寻找页面中所有的p元素，并存储在数组集合数组$p中。3、var btn = $(#btn).get(0)，寻找页面中id=btn的元素，并提取第一个特定元素。jQuery的基本选择器不但可以选择单个符合条件的元素组，也可以使用多重复合筛选条件进行筛选元素，但是这些多重筛选条件是并集合的关系。例如：$(div,span,p,.btn,#test)表示查找页面中的div元素、span元素、p元素、类名为btn的元素、和id为test的元素。2、层次选择器： 层次选择器用来选择元素的后代元素、子元素、相邻元素和兄弟元素等。它能很快定位到需要的元素上面，进而对元素进行相应的操作。【练习一：查看页面中div元素下的所有p元素的个数】Page Code：bodyformid=form1runat=serverdivp/pp/pp/pp/p/divinputid=btntype=buttonvalue=测试//form/bodyJavaScript Code：scriptsrc=../Scripts/jquery-1.4.1.jstype=text/javascript/scriptscripttype=text/javascript $().ready(function () {var $p = $(div p);var btn = $(#btn)[0]; btn.onclick = function () { alert($p.length); } })/script注释：var $p = $(div p);利用jQuery下的层次选择器选取div元素下面的所有p元素。3、过滤选择器：【练习一：利用基本过滤选择器修改指定div的颜色样式】Page Code：bodyformid=form1runat=serverdivclass=myclassstyle=width:100px;height:200px;background:red/divdivid=myidstyle=width:100px;height:200px;background:Green/divdivstyle=width:100px;height:200px;background:Black/divinputid=btntype=buttonvalue=改?变à?颜?色|?//form/bodyJavaScript Code：scriptsrc=../Scripts/jquery-1.4.1.jstype=text/javascript/scriptscripttype=text/javascript $().ready(function () {var test = $(div:not(#myid));var btn = $(#btn).get(0); btn.onclick = function () { test.css(background,yellow); alert(测试); } } )/script注释：1、var test = $(d