jquery核心操作.doc

1.1$(document).ready()值整个jQuery运行的核心。在传统的window.onload事件在整个HTML页面元素全部加载完毕之后发生，这带来了一定性能上的问题，现代网页元素多，特别是图像等，需加载很长的时间，所以window.onload事件需要等待很长的时间。而事实上只需要HTML代码本身加载完毕就可以开始操作。也就是不需要等待图片加载完毕了就可以操作。W3C定义了一个DOM Content Loaded事件，当DOM被载入之后。DOM Content Loaded事件就会发生，这个比window.loaded更早发生，这样就提高了效率。但IE6/IE7均不支持此事件。jQuery就解决了这个问题。即$(docuemnt).read()事件，它模拟了DOM Content Loaded事件。 Document元素代表DOM树，$(document)选取了这个document元素，它加载完成的时候，就意味着整个HTML DOM树加载完成，此时触发ready（）事件。1.1.1写法:标准写法一$(document).ready(function() Alert(c); );另类写法jQuery(document).ready(function() alert(c););简洁写法$(function() Alert(c););1.1.2优点：1使用$(document).ready()之后，不需要在HTML中加入任何的行为代码，更好实现代码分离，可以将jQuery代码和javascript代码放置到外部的js中，而调用HTML页面包含任何元素事件等行为的定义2$(document).ready()可以同时定义多个行为，而window.onload只能定义一次。$(document).ready(function() /some code here);$(document).ready(function() /some other code here)如果window.onload被定义多此，那么只有最后一次才有效3$(document).ready()相比window.onload.大大提高了加载的速度和javascript代码执行的效率。1.2快速选择页面元素获取第一个li元素$(li:eq(0) eq就是equal几获取所有奇数的li元素$(li:even) $(li:odd) 获取所有偶数的li元素获取最开始的3个li元素$(li:lt(3) lt就是less than 小于几获取样式不是goofy的li元素$(li:not(.goofy) not不属于获取在一个p中包含一个href属性，而且属性href中包含#的连接。p a 表示作为p子元素的a。Ahref*=#表示a包含href属性且属性中包含#$(p ahref*=#) *包含什么获取所有code元素以及所有样式为goofy的li元素$(code,li.goofy)1.2.1利用表达式获取元素获取所有ol元素中样式为goofy且字体样式为strong的元素$(ol.goofystrong) 所有的获取所有以pdf结尾的链接，这些链接是li元素的子元素，并且这些父li元素之前存在li元素$(li+li ahref$=pdf) $以什么结尾ahref$=pdf 表示a标签的href属性值以pdf结尾inputid$=txt 表示input标签的id属性值以txt结尾获取所有hidden的span元素$(span:hidden) 此处的hidden是表示在页面上隐藏的spansurprise1.2.2其他获取id为jqdt元素中的第一个li子元素$(#jqdt).find(li).slice(0,1)Slice(v1,v2) v1开始位置（包含），v2结束位置（不包含）获取id为jqdt元素中的前3个li$(#jqdt).find(li).slice(0,3)获取id为jqdt的li元素中id为funny的补集$(#jqdt).find(li.funny).siblings()Siblings()补集 获取所有包含silly字符串的元素，并且他们不能处于第3个li后面$(#jqdt).find(li).not(:gt(2).filter(:contains(silly)Find（）是在$(#jqdt)元素内查找操作，filter()是在$(#jqdt)元素本身查找:Contains(silly)匹配元素中包含silly这个变量的文本集合获取jqdt所有的li元素，然后过滤，只获取样式为goofy的元素$(#jqdt).find(li).filter(class=goofy)获取所有funny样式的li元素，end()使得当前jquery对象指向$(#jqdt)然后选取strong样式的段落，更改其css$(#jqdt).find(li.funny).end().find(pstrong).css(backgroundcolor,#ff0)利用父子关系来选取$(li.goofy).parents(#jqdt).children(p).next().find(a).parent()1.3灵活控制元素和属性元素（properties）是DOM中的概念，而属性（attributes）是html中的概念。比如img是页面上的一个元素，而id src alt clas等都是img的属性Each(iterator)以遍历的方式操作获取每个元素，参数为元素在获取的元素集合中的序号$(img).each(function(n) This.alt = This is image+n+ with an id of +this.id)Attr()用于获取元素的属性$(img).attr(src) ; 返回src的值用于操作元素的属性$(img).attr(src,login.jpg) 更改img元素的src属性值Val()Form元素具有的一个特殊函数val()用于获取元素value值Html()返回包括HTML在内的文本 abcText()只返回内含的文本 abc1.4动态改变页面cssaddClass()添加样式removeClass()移除样式css(key,value)设置样式属性值1.5事件处理方法blur()失去焦点change()元素内容改变dblclick()鼠标双击error()当元素内部出现错误时调用focus()获得焦点keydown()键盘按下keypress()按下并放开键盘时调用onkeyup()放开键盘后触发onload()页面载入mousedown()鼠标按下mousemove()鼠标移动mouseover()鼠标经过某区域时触发mouseout()鼠标离开某区域时触发resize()对象调整大小时调用scroll()Iframe卷起时调用select()文本在文本字段内选中时调用，而不是在组合框内选中时调用reload/unload()对象在页面重载,卸载时发生1.5.2常用方法hover(fn1,fn2)当鼠标移到某区域时触发fn1函数，离开时触发fn2.就是mouseover和mouseout。$(tr).hover(function() $(this).css(backgroundcolor,#0000ff) ;, function() $(this).css(backgroundcolor,#fff);)toggle(fn1,fn2,fn3,.)每当触发click事件后就会轮流切换执行函数，当第一次单击执行fn1，第二次单击执行fn2bind(eventType,fn)绑定事件，这样可以自定义事件的处理。$(p).bind(mouseenter,function(e) $(this).toggleClass(“over”) ;); $(#sth).bind(myEvent,doSomething) ; myEvent不是DOM标准事件不会自动执行，需要$(#sth).trigger(myEvent) 来触发;unbind(eventType)注销事件处理$(document).unbind(ready)注销ready事件的处理函数trigger(eventType,data)Trigger方法用于触发某类事件，data传递给事件处理函数的参数。下面的代码触发了第一个button按钮的click事件$(button:first).trigger(click) ;one(eventType,data,fn)该方法绑定被触发一次的处理程序。1.5.3捕捉鼠标位置event.pageX , event.pageYoffset()获取对象在页面的位置1.6JavaScript库共享在某种清空下，如果这个$已经被其他的JavaScript库定义和使用。这个时候在jquery中使用$()就会产生冲突，而只能使用右边形式jQuery.noConflict();jQuery(document).ready(function() jQuery(div).addClass(special) ;);在使用jQue