jQuery学习笔记.docx

jQuery学习笔记

jQuery基础
1.1jQuery的特点
1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。
2）jQuery利用选择器（借鉴了CSS选择器的语法）查找要操作的节点（DOM对象），然后将这些节点封装成一个jQuery对象（封装的目的有两个：①是为了兼容不同的浏览器。②也为了简化代码）。通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。
3）jQuery特点简单概括就是：选择器+调方法。
1.2jQuery编程的步骤
step1：引入jQuery框架（www.jquery.org下载），min为去掉所有格式的压缩版
<scriptlanguage="javascript"src="js/jquery-1.4.1.min.js"></script>
step2：使用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回）
var$obj=$('#di');//ID选择器，查找的节点ID为d1
step3：调用jQuery对象的方法或者属性
$obj.css('font-size','60px');//调用jQuery的css()方法
注意事项：jQuery是一个大的匿名函数，且内部有很多函数（类似Java中的内部类），它的大部分函数返回对象都是jQuery对象（它自己），所以可以继续“．”，例如：
functionf1(){
var$obj=$('#d1');//为了强调返回的是jQuery对象，命名习惯用$开头来声明变量
$obj.css('font-size','60px').css('font-style','italic'); }
1.3jQuery对象与DOM对象如何相互转换
1）dom对象如何转化为jQuery对象
使用函数：$(dom对象)即可，例如：
functionf2(){
varobj=document.getElementById('d1');
var$obj=$(obj);//将dom节点封装成jQuery对象
$obj.html('hellojava'); }
2）jQuery对象如何转化为dom对象
方式一：$obj.get(0); 方式二：$obj.get()[0];
functionf3(){
var$obj=$('#d1'); //方式一：varobj=$obj.get(0);
varobj=$obj.get()[0];//方式二 obj.innerHTML='helloperl'; }
1.4如何同时使用prototype和jQuery
step1：先导入prototype.js，再导入jQuery.js
step2：将jQuery的$函数换一个名字：var$a=jQuery.noConflict();//注意大小写
注意事项：函数名就是一个变量，指向函数对象，例如：
<scriptlanguage="javascript"src="js/prototype-1.6.0.3.js"></script>
<scriptlanguage="javascript"src="js/jquery-1.4.3.js"></script>
functionf1(){//无效 varobj=$('d1'); }
//无效是因为jQuery是后引入的，所以prototype被jQuery替换
functionf1(){//为了避免冲突，可以将jQuery的$函数换一个名字$a
var$a=jQuery.noConflict(); varobj=$('d1');
obj.innerHTML='helloprototype'; $a('#d1').html('hellojQuery'); }
1.5EL表达式和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