第一部分，jquery入门知识。

1，隐式迭代（一般不需要for循环遍历dom对象） 
2，jQuery1.x支持低版本和非标准浏览器 
a) 谷歌CDN： http://www.google-jquery-cdn.com/ 
b) 百度CDN：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs 
c) 微软CDN：http://msdn.microsoft.com/zh-cn/library/ee517318.aspx 
d) 新浪CDN：http://sae.sina.com.cn/?m=devcenter&catId=147 
注意：优先引入CDN上的jquery,如果失效再引入本地的jquery，引入必须在head标签里。 

3，jQuery对象转换为Dom对象的两种方法[index]或get(index) 
Dom对象转换为jQuery对象只需要用$()把Dom对象包装起来 
length、toString等等是公用的 

4，val()、html()、click() 

5，jQuery库和其他库共存的两种办法（即释放$权限） 
jQuery.noConflict(); 
alert("这是prototype弹出的："+$F('a')); 
alert("这是jQuery弹出的："+jQuery('#a').val()); 
率先引入jQuery库，还有后面的$换为jQuery 
 
 
选择器 
css中div>a选择div下的一级子元素，低版本浏览器不兼容，但jQuery(‘div>a’)却不会存在兼容性的问题! 
$(“body *”) 
div+p选择div的下一个兄弟相当于next()方法 
div~p选择div的后面的所有兄弟节点   相当于nextAll()方法 
基本过滤选择器 
p:first  第一个p 
p  :first     p元素的所有子孙元素的第一个 
:not()、:even、:odd、:eq()、:gt(2)大于2的下标、:lt(2)小于2的下标、:animated 
内容过滤选择器 
:contains()选取含有指定文本内容的元素 
:has()选择含有指定标签（元素）的元素 
:empty选择不包含子元素或文本的空元素 
:parent选择含有子元素或文本的元素 
可见性选择器 
:hidden选取所有不可见元素 
:visible选取所有可见元素    例如：$(‘div:hidden’)选取不可见的div 
注意：opacity：0或visibility：hidden虽然不可见但都占据空间用所以:hidden是选择不到的 
属性选择器 
$(“div[title=js]”)选取有属性title且属性名为js的div元素（属性不一定是title，可以自定义的） 
$(“div[title]”)选取有属性为title的元素，而不论属性名如何 
子元素过滤选择器 
:first-child选择父元素第一个子元素 
:last-child选择父元素最后一个子元素 
:only-child选择父元素只包含一个子元素的子元素  例如$(“div p:only-child”) 
$(“div p:nth-child(2n)”)注意：索引从1开始 
表单元素选择器 
:input选择所有表单元素包括textarea、select等 
:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden等 
$(“input:disabled”)或$(“input[disableddisabled=disabled]”)选择不能修改的表单元素 
$(“select option[selectedselected=selected]”)或$(“select option:selected”) 
 
$('p').eq(0).css('background','red'); 
$('p:eq(0)').css('background','green'); 
$('p').filter(":odd").css('background','red');//参数也可为类名 
$('p').first().css('background','red'); 
 
$('p').click(function(){ 
if($(this).is('.box'))//如果类型为box则...... 
{ 
   $(this).css('background','red'); 
} 
}); 
 
$('p').not(':first').css('background','green');//除去第一个不加样式 
$('p').slice(1,5).css('background','red');//第一个开始第五个结束，包一不包五 
遍历查找 
$(“#wrap”).children().not(“div”)选取id为wrap的子元素不包括div 
$(“#wrap”).children(‘p’)选取id为wrap的子元素仅包括p 
parent() 
parents()和parentsUntil()是一样的 
offsetParent()返回父元素中第一个其position设为relative或absolute的元素，仅指可见元素 
next()、nextAll()、prev()、prevAll() 
siblings()除本身之外的所有兄弟元素 
注意：只要是返回一组元素的都可以加参数 
.end()返回上一级匹配的节点 
.addBack()与end一样，只不过位置不同 
分别弹出每个input的值each() 
$(function(){ 
$('input').each(function(){ 
alert($(this).val()); 
});}); 
\[\]特殊字符 
$("#tab1 tr:even").css("background","red"); 
$("#tab1 tr:odd").css("background","green"); 
合并 
$("#tab1 tr").filter(":even").css("background","red").end(). 
filter(":odd").css("background","green"); 

选择器的优化 
1.优先使用id选择器 
2.在class选择器前添加标签名 
3.采用find()，而不使用上下文查找 
4.强大的链式操作比缓存更快 
5.从左值右的模型 

Dom操作 
创建（两种方式） 
var newElement='

前插入的两种方法prepend和prependTo 
 

外部插入 
后插入的两种方法after和insertAfter 
 

前插入的两种方法before和insertBefore 
包裹节点 
wrap()讲所有匹配元素单独包裹 
wrapAll()将所有匹配元素用一个元素包裹 
WrapInner讲所有匹配的元素的子内容用其他标签包裹 
删除节点 
remove()、empty()清除标签及内容，但仍占用位置 
unwrap()仅删除父元素（不包括子元素本身及父元素的内容即不包括父元素的子元素） 
复制节点 
Clone克隆标签及及标签包含的事件注意：标签包含的事件要写在克隆事件的后面或写成clone(true) 
 

替换标签 
replaceWith与replaceAll 
 

操作dom属性 
attr()获取或添加或修改属性值   prop 
removeAttr()删除属性值   removeProp 
样式操作 
addClass()添加样式（可以连续用两个addClass，也可以用一个，Class间用空格隔开） 
removeClass()移除样式 
toggleClass()切换样式（有和无之间切换，上面两个的交换） 
hasClass()判断是否有样式，返回布尔值 
css()设置匹配元素的css（行内样式） 
height()获取高度 
innerHeight()获取包括padding的高度 
outerHeight(l)获取包括border的高度 
outerHeight(true)获取包括margin的高度 
width() 
innerWidth() 
outerWidth(bool) 
offset()使用方法：先获取offset对象，然后left、top等   相对于文档 与原生js不同 
position()相对于有定位的父级 
设置或获取节点内的元素（html和文本） 
text()获取或设置匹配元素的文本节点（无参为获取，有参则设置） 
html()获取匹配元素的dom节点或文本节点 
查看、修改和删除实例 
children指的是一级子元素 
关于z-index与position的关系 
事件和对象 
$.holdReady(bool)暂停或恢复ready事件       jQuery的工具函数 
事件 
click() 
dblclick()双击鼠标左键 
focusin()获得焦点事件，可作用于父爷级 
focusout()失去焦点事件，可作用于父级 
mouseenter、mouseleave可以阻止冒泡的 
键盘事件：keydown、keyup、keypress 
绑定和移除事件：bind()、unbind、on、off、one执行一次事件，然后销毁该事件、delegate.... 
 

事件命名空间 
click点命名空间 
event.preventDefault()阻止浏览器默认的行为 
动画 
基础动画、渐变动画、滑动动画、自定义动画、动画队列 
obj.hide(300)、obj.hide(“fast/slow/normal”) 
模拟toggle 
 

div里面的文字自动换行 
white-space:normal; word-break:break-all; overflow:hidden; 
 
fadeIn()自动显示   透明度从0变到100 
fadeOut自动隐藏 
fadeTo(执行到目标所需的时间，0.2，回调函数) 

slideDown()、slideUp()、slideToggle() 
 
animate({...},所需时间，回调函数) 
 
动画队列 
stop()、dequeue()、finish()、delay() 
hover(函数一，函数二) 
 

表格搜索实例 
$("#tab1 tr:not('#header')").hide().filter(":contains('"+oT+"')").show(); 
微博发布限制字数 
注意：关于val()和text()的区别？ 
jQuery中的Ajax 
 

您可能感兴趣的文章: