jQuery选择器整理

最新推荐文章于 2024-05-06 00:33:33 发布

原创最新推荐文章于 2024-05-06 00:33:33 发布 · 170 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery选择器整理

jQuery 专栏收录该内容

25 篇文章

订阅专栏

`jQuery选择器整理`

$("div div").css("color","red");//空格取后面的几位
$("div> div").css("color", "green"); //空格取后面的几位
$("#div1 div").css("color", "blue");//取‘id’后面的两位
$("#div1 + div").css("color", "blue");//'+'只取后面的一位
$("#div1~ div").css("color", "blue");//'~'取后面的两位
$("li:first").css("color", "red");//第一个
$("li:last").css("color", "red");//最后一个
$("li:even").css("color", "red");//偶数
$("li:odd").css("color", "red");//奇数
$("li:eq(3)").css("color", "red");//等于(索引元素从0开始)
$("li:gt(2)").css("color", "red");//大于(索引元素从0开始)
$("li:lt(2)").css("color", "red");//小于(索引元素从0开始)
$("li:contains(列表)").css("color", "red");//选取含有文本内容
$("li:empty").css("color", "red");//不包含子元素（文本元素）为空
$("li:has(p)").css("color", "red");//选取含有<p>元素的
$("li:parent").css("color", "red");//选取含有子元素（文本元素）的（<li> </li> 元素节点）
$("li:visible").css("color", "red"); //可见元素
$("li:hidden").css("color","red");//不可见元素
$("li[title]").css("color", "red");//选取拥有‘title’的元素
$("li[title= list1]").css("color", "red");//选取‘title等于list1’的元素
$("li[title!=list1]").css("color", "red");//选取‘title不等于list1’的元素
$("li[title][title!=list1]").css("color", "red");//选取‘title中不等于list1’的元素
$("li[title][title=list1]").css("color", "red");//选取‘title中等于list1’的元素
$("li[title^=list1]").css("color", "red");//选取属性为title开头的元素list1
$("li[title$=list5]").css("color", "red"); //选取属性为title结尾的元素list5
$("li[title*=list]").css("color", "red");//选取属性为title中所包含的list元素
$("li[id][title^=list]").css("color", "red");//选取用于id属性，且title属性中以list开头的元素
$("li[id][title*=list]").css("color", "red"); //选取用于id属性，且title属性中包含list的元素
$("li[id]").css("color", "red");//选取所拥有id属性的元素
$("ul li:first-child").css("color", "red"); //选取ul中的第一个li元素
$("ul li :first-child").css("color", "red"); //选取ul中每一个li中的元素(加空格)
$("ul li:last-child").css("color", "red"); //选取ul中的最后一个li元素
$("ul li:only-child").css("color", "red"); //在ul中选取是唯一子元素的li元素
$("ul li:nth-child(4)").css("color", "red");//选取索引元素，从1开始
$("ul li:nth-child(even)").css("color", "red");//选取父元素索引下值的偶数元素
$("ul li:nth-child(odd)").css("color", "red");//选取父元素索引下值的奇数元素
$("ul li:nth-child(2n)").css("color", "red");//选取父元素索引下值是2的倍数元素
// click
$("li:first").click(function () {
alert($(this).text());
});
//bind和unbind删除和解除
$("li").bind("click", function () {
alert($(this).text());
});
$("li:first").unbind("click");
//on和off删除和解除
$("li").on("click", function () {
alert($(this).text());
});
$("li").on("click", "li li", function () {
alert($(this).text());
});
$("li:first").off("click");
//one只能执行一次
$("li:first").one("click", function () {
alert($(this).text());
});
//给匹配的元素叫一个事件（live点击button添加事件）live以后添加的事件也可以执行
$("li").live("click", function () {
alert($(this).text());
});
$("li").die("click"); //删除匹配事件，与live相反
$("#Button1").click(function () {
$("ol").append("<li>列表7</li>");
});
//hover模仿悬停事件鼠标移入移出
$("li:first").hover(function () { alert("移入") }, function () { alert("移出") });
//toggle绑定多个事件处理，轮流执行click事件
$("li:last").toggle(function () { alert(1) }, function () { alert(2) }, function () { alert(3) }, function () { alert(4) });
//冒泡事件
$("#Button1,body").click(function () {
alert($(this).text());
return false; //结束冒泡事件
});
//append与appendTo谁先在前面运行，谁在后面显示结果。
//prepend与prependTo谁先在前面运行，谁排第一位。
//向每个匹配元素内部追加内容
$("ol").append("<li>列表1</li>"); //（<li>列表1</li>添加到ol后面）
//插入到匹配元素中的前部
$("ol").prepend("<li>列表2</li>"); //（<li>列表2</li>添加到ol前面）
//将所有匹配的元素追加到指定元素中
$("<li>列表3</li>").appendTo($("ol")); //（<li>列表3</li>添加到ol后面）
//将所有匹配元素插入到指定元素中的前部
$("<li>列表4</li>").prependTo($("ol")); //（<li>列表4</li>添加到ol前面）
//元素节点
$("<ol style='font-size:24px; color:Aqua;'></ol>").appendTo($(document.body));
$("ol").append("<li>创建元素节点1</li>");
$("ol").append("<li>创建元素节点2</li>");
$("#D1").after("<li>after</li>"); //<li>我是1</li>插入到我是0后面(排第五)
$("#D1").before("<li>before</li>"); //<li>我是2</li>插入到我是0前面(排第一)
$("<li>insertAfter</li>").insertAfter($("#D1")); //<li>我是3</li>在我是0后面(排第四)
$("<li>insertBefore</li>").insertBefore($("#D1")); //<li>我是4</li>在我是0前面(排第二)
$("#id1").attr("class", "class1"); //设置后返回被选元素的属性值
alert(("#id1").attr("class"));
alert(("#id1").removeAttr("class"));//从每一个匹配的元素中删除一个属性
alert($("#id1").html());//取得第一个匹配元素的html内容，不能用于XML文档
alert($("#id1").text());//取得所有匹配元素的内容
alert($("#id1").val());//获得匹配元素的当前值
//reemove删除所有匹配的元素
$("li").remove(".class1"); //删除id号 id1中的列表2
//删除所有匹配的元素
$("li").detach("#id1"); //删除class中 class1的li 列表4
//删除匹配的元素集合中所有的子节点
$("ol").empty("#id");//删除ol中所包含的li元素
$(".class").clone().appendTo($("#div")); //因为三个div 所以复制了三个<div id="id">列表 2</div>
$("#id").clone().append("div"); //复制并追加
$('#div').wrap(function () {
return '<div style="color:green"></div>';
});
$('#div').unwrap();
//将所有匹配的元素替换成指定的元素
$(".C1").replaceWith("<li>列表 replaceWith</li>");
//用匹配的元素替换掉所有匹配到的元素
$("<li>列表 replaceAll</li>").replaceAll($("#D1"));