jQuery完美版 教学说明.docVIP

昨天内容回顾 各种选择器使用 基本选择器 $(“#id”) $(“tag标签”) $(“.class”) $(“*”) $(“s1,s2,s3...”) 层次选择器 $(s1 s2) $(s1 s2) $(s1 + s2) $(s1 ~ s2) 并且(过滤)选择器 :first :last :eq(index) :gt(index) :lt(index) :even :odd :not(selector) :header $(s1s2s3) 并且关系：普通选择器、并且过滤选择器都可以构成并且关系，注意不要有歧义产生。 $(“li:first”) $(“li.apple”) $(“li:odd:gt(1)”) 内容过滤选择器 :contains(text) :empty :has(selector) :parent 表单域选中选择器 :checked---------checkbox/radio :selected---------option 属性操作 $().attr(name) $().attr(name,value); $().attr(name,function) $().attr(json对象); $().removeAttr(name) 各种快捷操作(class、包含内容、css、复选框/下拉列表/单选按钮、复选框全选/反选/全不选) class addClass() removeClass() toggleClass(name) b) 包含内容 html([value]) text([value]) c) css()操作样式 d) 复选框/下拉列表/单选按钮 $(复选框/下拉列表/单选按钮).val([value值元素，value值元素。。]) $(下拉列表).val(); $(选中的单选按钮).val(); e) 复选框选中、不选中 $().attr(‘checked’,true/false); 二．作业 作业： 利用过滤选择器实现如下效果 利用样式操作(height()、width())设置动画效果 制作一个“复选框”控制其他复选框的选中、不选中情况 三. $符号的由来 $(‘div’) $(‘.apple’) $(‘*’)等等。 $符号就是一个函数，函数名称为”$”符号而已。也可以使用jQuery符号。 使用jquery过程中用到的$符号，其在jquer框架内部体现为是函数，其和jQuery关键字互为别名。 四. jquery对象 与 dom对象关系 jquery对象：$(‘li’) $(‘.apple’) 等选择器使用返回的信息就是jquery对象 dom对象： document.getElementById() document.getElementsByTagName(); jquery对象 和 dom对象 互相调用对方的成员 jquery对象 与 dom对象 互相调用对方成员失败了 原因：它们不是平等关系，导致其成员也有层次划分。 jquery对象 是 包含 dom对象的 2. jquery对象 如何封装的dom对象 dom对象就是jquery对象的数组组成部分 通过上图，我们看到dom对象 和jquery对象做合并，dom对象 是jquery对象 的数组组成部分。 3. jquery对象 和 dom对象 的转化 3.1 jquery对象-----》dom对象： $()[下标] 3.2 dom对象-----》jquery对象：$(dom对象) 五. jquery框架对象分析 jquery框架对象类型：jquery对象 和 $对象 ① jquery对象就是各种选择器创建出来的对象 ② $对象就是函数对象 jquery对象  2. $函数对象 $函数对象可以调用的许多成员也是通过extend复制继承过来的 $.get() $.post() $.ajax() 以上无论是jquery对象 还是 $对象，他们98%以上的成员都是通过各自的extend复制继承过来的。 六. 遍历方法 each()方法： $.each(数组/对象,function处理); //$对象 调用的 $(选择器).each(function处理); //jquery对象 调用的 总结： $符号的由来 jquery对象 和 dom对象的关系 dom对象 是jquery对象的数组组成部分 jquery对象---》dom对象：$()[下标] dom对象----》jquery对象：$(dom对象) jquery框架对象分析 类型：jquery对象 $(jQuery)对象 jquery对象(new jQuery.fn