Java相关课程系列笔记之十二jQuery学习笔记.docVIP

jQuery学习笔记 Java相关课程系列笔记之十二 笔记内容说明 jQuery（老师主讲，占笔记内容100%）一、 jQuery基础 1 1.1 jQuery的特点 1 1.2 jQuery编程的步骤 1 1.3 jQuery对象与DOM对象如何相互转换 1 1.4如何同时使用prototype和jQuery 1 1.5 EL表达式和jQuery函数的区别 2 二、 选择器 3 2.1什么是选择器 3 2.2基本选择器 3 2.3层次选择器 3 2.4基本过滤选择器 4 2.5内容过滤选择器 4 2.6可见性过滤选择器 5 2.7属性过滤选择器 5 2.8子元素过滤选择器 5 2.9表单对象属性过滤选择器 5 2.10表单选择器 6 三、 DOM操作 7 3.1查询 7 3.2创建 7 3.3插入节点 7 3.4删除节点 7 3.5如何将JavaScript代码与HTML分开 8 3.6复制节点 8 3.7属性 8 3.8样式操作 9 3.9遍历节点 9 3.10案例：员工列表（点击某行该行加亮，多选框被选中） 10 3.11案例：员工列表（点击部门隐藏或显示员工） 11 四、 事件 12 4.1事件绑定 12 4.2合成事件 12 4.3事件冒泡 可参考JavaScript笔记7.5 12 4.4 jQuery中事件处理 13 4.5动画 14 4.6类数组的操作 14 4.7案例：滚动广告条 15 五、 jQuery对Ajax编程的支持 17 5.1 load()方法 17 5.2案例：显示机票价格 17 5.3 $.get()方法 17 5.4 $.post()方法 18 5.5案例：修改Ajax笔记中2.6案例：股票的实时行情 18 5.6 $.ajax()方法 18 5.7案例：搜索栏联想效果（服务器返回text） 18 5.8案例：下拉列表（服务器返回xml文本） 20 5.9案例：表单验证 21 5.10 jQuery的自定义方法 23 5.11 $.param()方法 24 5.12案例：自定义方法和$.param()方法使用（学了Struts2再看） 24 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/script step2：使用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回） var $obj=$(#di);//ID选择器，查找的节点ID为d1 step3：调用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