锋利的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. $(document).ready() 方法的区别:
1> 执行时机
window.
方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的.
$(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事件
});