筛选 Traversing:
$("div").add("p").css("background", "yellow"); //在div标签中添加背景颜色为黄色的p标签
$("p").add(document.getElementById("a")) //在p标签中添加id为a的
$("div").find("p").andSelf().addClass("border"); //div下的p标签,包括div标签都增加border类
$("div").children(".selected"); //查找每个div标签中的已经被选择的子元素
$('li.item-a').closest('ul').css('background-color', 'red'); //将li.item-a最近的ul标签的背景颜色改为红色
$("p").contents().not("[nodeType=1]"); //查找p标签下的所有文本节点
$('li').each(function(index) { alert(index + ': ' + $(this).text()); }); //alert所有li标签的索引和内容
$("p").find("span").css('background-color', 'red').end().css('background-color', 'blue'); //将p标签中的span背景颜色改为红色,然后将p标签背景颜色改成蓝色
$("div").eq(-2).addClass("blue"); //将倒数第3个div增加blue类
$('li').filter(':even').css('background-color', 'red'); //将偶数的li标签的背景颜色改成红色
$('li').filter(function(index) {
return $('strong', this).length == 1;
}).css('background-color', 'red'); //将包含1个strong标签的li标签背景颜色改成红色
$("p").find("span").css('color','red'); //将p标签中找到的所有span标签的颜色改成红色
$("p span").first().addClass('highlight'); //p标签下的第一个span标签加上highlight的类
$('li').has('ul').css('background-color', 'red'); //将包含ul的li标签背景颜色改成红色
$('ul').click(function(event) {
if ($(event.target).is('li') ) {
$(event.target).css('background-color', 'red');
}
}); //如果在ul中点击的对象是li标签,则将li标签的背景颜色改成红色
$('li').last().css('background-color', 'red'); //将最后一个li标签的背景颜色改成红色
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") ); //将表单中input的所有值用", "分隔加入到p标签中去
$("button[disabled]").next(); //选择被禁用的按钮的下一个同辈标签
$("div:first").nextAll(); //选择第1个div标签后的所有同辈标签
$('#term-2').nextUntil('dt'); //选择#term-2后到下一个dt标签的所有标签
$('li').not(document.getElementById('notli')); //选择id不等于notli的li标签
$("div").not(".green, #blueone"); //选择id不等于blueone和类不包含.green的div标签
$('li.item-a').offsetParent(); //选择li.item-a的偏移父标签(拥有relative或absolute属性的父标签,如果都没有,就是body)
$("p").parent(); //查找所有p标签的父元素
$('li.item-a').parentsUntil('.level-1'); //查找li.item-a一直到.level-1的所有父标签
$('li.third-item').prev(); //li.third-item的上一个同辈标签
$('#term-2').prevUntil('dt'); #term-a前一直到dt的所有同辈标签
$('li.third-item').siblings(); //查找li.third-item的所有同辈函数
$("p").slice(0, 1); //选择第1个p元素
文档处理 Manipulation:
addClass();
$('.inner').after('<p>Test</p>'); //在.inner后面添加 "<p>Test</p>"
$("p").append("<strong>Hello</strong>"); //在p标签里添加 "<strong>Hello</strong>"
$("span").appendTo("#foo"); //将span标签及其所有内容移动到$fooli
.attr();
$('.container').before($('h2')); //将h2移动到.container之前
$('.container').before("<b>here</b>"); //将"<b>here</b>"加到.container之前
$($('h2')).clone().appendTo('.container'); 将h2复制一份加到.container里
$('#p').css("background-color"); //返回#p的background-color
var obj = $("p").detach(); //分离函数,清除p标签,并且将被清除的对象保存在变量obj中
$("p").empty(); //删除p标签中的所有内容
hasClass();
$("p").height(); //p标签的高度(不包括padding, border和margin)
.html();
$("p").innerHeight(); //p标签的内部高度(包括padding, 不包括border和margin)
$("p").innerWidth(); //p标签的内部宽度(包括padding, 不包括border和margin)
$('<p>Test</p>').insertAfter('.inner'); //将'<p>Test</p>'插入到.inner后面,作用等同于after,只是主宾位置不同
$('h2').insertBefore($('.container')); //将h2标签插入到.container之前,作用等同于before,只是主宾位置不同
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top ); //获取最后一个p标签的位移坐标
$("p:first").outerHeight(); //最后一个p标签的高度(包含padding,border,不包含margin)
$("p:first").outerHeight(true); //最后一个p标签的高度(包含padding,border,margin)
$("p:first").outerWidth(); //最后一个p标签的宽度(包含padding,border,不包含margin)
$("p:first").outerWidth(true); //最后一个p标签的宽度(包含padding,border,margin)
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top ); //获取最后一个p标签的位置(不包含p标签的margin值)
$('.inner').prepend('<p>Test</p>'); //将'<p>Test</p>'加到.inner里的最前面
$('h2').prependTo($('.container')); //将h2移动到.container里的最前面去
$('.hello').remove(); //删除包含.hello的标签
$('div').remove('.hello'); //删除包含.hello的div标签
$("button").removeAttr("disabled"); //移除按钮的disabled属性
.removeClass();
$('<h2>New heading</h2>').replaceAll('.inner'); //用h2整个替换掉.inner标签
$('.second').replaceWith('<h2>New heading</h2>'); //将.second整个替换成'<h2>New heading</h2>'
$("p:first").scrollLeft(); //第1个p标签的横向滚动条值
$("p:first").scrollTop(); //第1个p标签的纵向滚动条值
.text();
.toggleClass();
$("button").toggle(function(){
$("p").wrap("<div></div>");
}, function(){
$("p").unwrap();
}); //如果p标签没有被div包含则添加div标签,否则去掉div标签
.val();
$("p").width(); //p标签的宽度(不包括padding, border和margin)
$('.inner').wrap('<div />'); 将.inner标签分别用<div></div>包起来
$('.inner').wrapAll('<div />'); 将所有的.inner标签组合在一起用一个<div></div>包起来
$('.inner').wrapInner('<div />'); 用<div></div>将.inner里的内容包起来
