jQuery学习笔记..docxVIP

jQuery基础1.1 jQuery的特点1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。2）jQuery利用选择器（借鉴了CSS选择器的语法）查找要操作的节点（DOM对象），然后将这些节点封装成一个jQuery对象（封装的目的有两个：①是为了兼容不同的浏览器。②也为了简化代码）。通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。3）jQuery特点简单概括就是：选择器 + 调方法。1.2 jQuery编程的步骤step1：引入jQuery框架（下载），min为去掉所有格式的压缩版script language=javascript src=js/jquery-1.4.1.min.js/scriptstep2：使用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回）var $obj=$(#di);//ID选择器，查找的节点ID为d1step3：调用jQuery对象的方法或者属性$obj.css(font-size,60px);//调用jQuery的css()方法注意事项：jQuery是一个大的匿名函数，且内部有很多函数（类似Java中的内部类），它的大部分函数返回对象都是jQuery对象（它自己），所以可以继续“．”，例如：function f1(){var $obj=$(#d1);//为了强调返回的是jQuery对象，命名习惯用$开头来声明变量$obj.css(font-size,60px).css(font-style,italic);}1.3 jQuery对象与DOM对象如何相互转换1）dom对象如何转化为jQuery对象使用函数：$(dom对象)即可，例如：function f2(){var obj=document.getElementById(d1);var $obj=$(obj);//将dom节点封装成jQuery对象$obj.html(hello java);}2）jQuery对象如何转化为dom对象方式一：$obj.get(0);方式二：$obj.get()[0];function f3(){var $obj=$(#d1);//方式一：var obj=$obj.get(0);var obj=$obj.get()[0];//方式二obj.innerHTML=hello perl;}1.4如何同时使用prototype和jQuerystep1：先导入prototype.js，再导入jQuery.jsstep2：将jQuery的$函数换一个名字：var $a=jQuery.noConflict();//注意大小写注意事项：函数名就是一个变量，指向函数对象，例如：script language=javascript src=js/prototype-.js/scriptscript language=javascript src=js/jquery-1.4.3.js/scriptfunction f1(){//无效var obj=$(d1);}//无效是因为jQuery是后引入的，所以prototype被jQuery替换function f1(){//为了避免冲突，可以将jQuery的$函数换一个名字$avar $a=jQuery.noConflict();var obj=$(d1);obj.innerHTML=hello prototype;$a(#d1).html(hello jQuery);}1.5 EL表达式和jQuery函数的区别1）${}：EL表达式，在服务器端运行（JSTL标签库也在服务器端运行，EL和JSTL标签库本质是Java代码）。2）$()：jQuery函数，在浏览器中运行（JavaScript也在浏览器中运行）。选择器2.1什么是选择器jQuery模仿CSS选择器的语法提供了一种用来方便查找要操作的节点的语法规则。2.2基本选择器1）#id：ID选择器，如：$(#d1).css(color,red);//编号1变2）.class：类选择器，如：$(.s1).css(font-size,60px);//编号2和3变3）element：元素选择器，如：$(div).css(font-size,60px);//编号1和2变4）selector1,selector2...selectorn：选择器合并，如：$(#d1,p).css(font-size,60px);//编号1和3变5）*：所有选择器，如：$(*).css(font-size,60px);6）案例：div id=d1hello jquery/div!-- 1 --div class=s1hello java/div!-- 2 --p class=s1hello perl/p!-