锋利的jqeuy学习笔记
锋利的jquery学习
1: jquery与dom对象之间的转换:
??? 1> jquery对象是一个数组，可以通过[index]的方法得到相应的dom对象.
??? 2> jquery --> dom: 两种方式:[index] || get(index)
??????? 如: var $obj = $("#id");?? //jquery对象
??????????? var obj = $obj[0];???? //dom对象
??????????? var obj2 = $obj.get(0);
??? 3> dom --> jquery:
??????? var obj = document.getElementById("id");?? //dom对象
??????? var $o = $(obj);?? //jquery对象
2: 解决jQuery和其他库的冲突
??? 在其他库和jquery库加载完毕后,调用jQuery.noConflict();
3:jquery 开发工具
?? eclipse插件:
?? jqueryWTP? http://www.langtags.com/jquerywtp/index.html
?? Spket????? http://spket.com
4:常用的css选择器
? 标签选择器?? 如: td {font-size:14px}
? id选择器???? 如: #id{...}
? 类选择器???? 如: div.className{.......}
? 群组选择器?? 如: td,p,div{....}
? 后代选择器?? 如: #id a {}
? 通配选择器?? 如: *{....}
5: 判断jquery对象:
??? $("#id") 不管id是否存得到的都是obj对象
??? 1> 根据长度判断?? $("#id").length >0
??? 2> 转化成dom对象来判断? $("#id")[0]
6: jquery 选择器
?? 1> 基本选择器
????? id:???????? $('#id')???
????? class:????? $('.class')
????? element:??? $('div')?
????? * ?? $('*')
????? s1,s2..sn 如: $('span,#id')
?? 2> 层次选择器
?$('body div').css('','');???? 改变body内所有div 的样式
??????? $('body > div').css('','');?? 改变body内子div元素的样式
??????? $('.one + div').css('','');?? 改变class=one的下一个div元素样式
??????? $('#two ~ div').css('','');?? 改变id=two元素后面的所有div兄弟元素的样式
?? 3> 过滤选择器
?????? a: 基本过滤选择器
?????????? :first , :last , :not(selector) , :event , :odd , :eq(index) ,
??? :gt(index) , :lt(index) , :header? , :animated
?????? b: 内容过滤选择器
?????????? :contains??? $('div:contains(di)').css('',''); 改变含有文本di的div元素的样式
??? :empty????? 选取不包含子元素或者文本的空元素
???? :has(selector)? 选取含有选择器所匹配的元素
??? :parent??????? 选取含有子元素或者文本的元素
?????? c: 可见性过滤选择器
?????????? :hidden
?????????? :visible
?????? d:属性过滤选择器
?????? e: 子元素过滤选择器
?? 4> 表单选择器
====================================================================
第三章? jquery中的dom操作
dom定义： 文档对象模型
dom操作的分类: dom core(S核心),html-dom,css-dom
$(this).clone(true).append("");?? clone方法中增加true表明复制元素同时也复制元素中所绑定的事件
替换节点：replaceWith(); replaceAll();
包裹节点:? wrap();?? wrapAll(); wrapInner();
?
==============================================================================
第四章?? jquery中的事件
1: 加载DOM??
??? window.onload与 $(document).ready() 方法的区别:??????????
?? 1> 执行时机
?window.onload??
????????? 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的.
?$(document).ready()方法注册的事件处理程序，在dom完全就绪时就可以被调用.
???? $(window).load(function(){})? 等价于? window.onload = function(){}
?? 2> 多次使用
????? window.onload 事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数.
????? $(document).ready()每次调用此方法都会在现有的行为上追加新的行为,根据注册的顺序依次执行.
?? 3>简写方式
????? $(document).ready(function(){});
????? $(function(){});
????? $().ready(function(){});
???? 三者等同
2:? 事件绑定
?????? 在文档加载完成后，如完元素来绑定事件，可用bind("事件类型","event.data属性值","绑定处理????????????? 函数");
3:合成事件
?? hover("fn1","fn2")? 用于模拟光标悬停事件,光标移到元素时，会触发 "fn1",移开元素时，
?? 会触发 “fn2”。
?? toggle(fn1,fn2,..fnN)? 用于模拟标连续单击事件. 第1次触发fn1,第2次触发fn2,n次触发fnN
4: 事件冒泡
?? 事件对象 event
?? 停止事件冒泡:? event.stopPropagation();
?? 阻止默认行为:? event.preventDefault(), 默认行为: 如单击超连接跳转，点击按钮表单提交时
5: 事件对象的属性
?? event.type????????????? 事件类型
?? event.preventDefault()? 阻止默认行为
?? event.target()?? 获取触发事件的元素
?? event.relatedTarget()
?? event.pageX || event.pageY
?? event.which? 1=标左键,2=中键，3=右键
?? event.metaKey 获到ctrl按键
?? event.originalEvent() 指向原始的事件对象
6:移除事件
? 1> $("#id").unbind("click");
? 2> $(function(){
?????????? $("#id").bind("click",myfun1 =function(){})
??????????????????? .bind("click",myfun2 =function(){})
????? });
?? $("#id").unbind("click",myfun1);
? 3> $("#id").one("click",function(){});
7:模拟事件
?? 1>常用模拟
?? $("#id").trigger("click"); 页面加载完就触发此事件 或 $("#id").click();
?? 2> 触发自定义事件
????? $("#id").bind("myClick",function(){});
????? $("#id").trigger("myClick");
?? 3>传递数据
????? $("#id").trigger("事件类型",[param1,param2,..]);
8: 其它用法
? 1>绑定多个事件类型
? 2>添加事件命名空间，便于管理
??? 如: $(function(){
???? ??$("#id").bind("click.plugin",function(){})
???.bind("click",function(){})
????.bind("mouseover.plugin",function(){})
????.bind("dbclick",function(){});
??// $("#id").unbind(".plugin");//将删除带。plugin 的 click,mouserover事件
?? //? $("#id").unbind("click!");//将删除不带.plugin的 click事件
??// $("#id").unbind("click");//将删除两个 click事件
?
????? });
??
