jQuery选择器
1,表格隔行添加样式
$("table tr:nth-child(even)").addClass("striped")
2,带有thisworld类的div元素呈现淡出的效果,并添加新样式removed
$("div.thisworld").fadeOut().addClass("removed")
3,选择id后 进行用html进行替换
$("#someElement").html("i have to....") = $("#someElement")[0].innerHTML="i have to...."
$("#div.fillMeIn").html("i have to...") 等价于
var elements = $("div.fillMeIn");for(i=0;i<elements.length;$i++) elements[i].innerHTML = "i have to..."
4,选择器
$("p:even") 偶数; $("tr:nth-child(1)") 第一行; $("body > div") 直接子节点的div;
$("a[href$=pdf]") pdf文件的链接; $("body > div:has(a)") body的直接子节点包含链接a的div;
http://docs.jquery.com/Selectors
实用工具
$.trim(someString)删除前后空格
文档就绪处理 页面完全加载 只接受一个函数
window.onload = function(){$("table tr:nth-child(even)"").addClass("even");};
DOM完全加载 优化
$(document).ready(function(){$("table tr:nth-child(even)").addClass("even");};
简化 $(function(){$("table tr:nth-child(even)").addClass("even");};
追加在某id之后
$("<p>Hi there</p>").insertAfter("#follow");
禁用一组表单元素的函数并添加样式
$("form#myFrom input.special").disable().addClass("moreSpecial");
$.fn.disable = function(){return this.each(function(){if (typeof this.disable != "undefined") this disabled = true;});} 不明觉厉
消除第三方库带来的冲突
jQuery.noConfilic();
选择元素包装集
$("p a.specialClass") 带有某个类的包含着p元素里的a
ul.myClass li a ul下所有class类的li里的a链接
ul.myClass > li > a 直接子节点
a[href^=http://] 以http开头的href值所有链接
input[type=text] 类型为text的所有input元素
div[title^=my] title特性值以my开头的所有div元素
a[href$=.pdf] 以pdf结尾
a[href*=jquery.com] 包含这个值的元素 li:has(a)
div:not(li:has(a)) 不存在包含a的li的div元素
通过位置选择
a:first 第一个a; p:odd 奇数; p:even 偶数; li:last-child 最后一个子元素;
:only-child 没有兄弟节点的所有元素;
:nth-child(n) 第n个节点
:nth-child(even|odd) 偶数或奇数的子节点
:nth-child(Xn+y) X倍的y项 从1开始
:eq(n) 第n个匹配元素 0开始
:gt(n) 第n个匹配元素之后的元素
:lt(n) 第n个匹配元素之前的元素
table#mou tbody td:first-child == table#mou td:nth-child(1)
radio.checked checkbox.checked 选择默认项
选择器
:animated 动态控制
:button 任何按钮
:checkbox 复选框 contains(foo) 选择文本包含foo的元素
:disabled :enabled 禁用|启用的表单元素
:file :header :hidden :image :input :not(filter) 反选
:parent 拥有后台节点的元素 :password :radio :reset :selected :submit :text :visible 可见的元素
:checkbox.checked:enable 组合 input:not(:checkbox) 反选
$("<div class="foo">I have foo</div><div>i don't</div>").filter(".foo").click(function(){alter("i'm foo");}).end().appendTo("#mou") 创建两个元素在.foo上添加事件把他们添加在mou的元素后
$('#some').html('there are '+ $('a').size()+' links on this page.) size()返回元素的个数
$('img[alt]').get(0) == $('img['alt']')[0]
var allbutton = $('label+button').get() 选择所有临近label的button元素
var n = $('img').index($('img#some'))[0] 返回获取的元素下标
$('img[alt],img[title]']) or ;
$('img[alt]').add('img[title]']) 添加到包装集 ;