jQuery选择器

最新推荐文章于 2024-07-28 23:04:06 发布

小兮喔

最新推荐文章于 2024-07-28 23:04:06 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

分类专栏： js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/xiaosevenliang/article/details/44464705

js 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了jQuery中的各种选择器用法，包括基本选择器、过滤选择器、表单选择器等，并通过实例展示了如何使用这些选择器来操作DOM元素。

<html>

<head>

<script language='javascript' type='text/javascript'src='jquery-1.11.1.js'></script>

</head>

<body>

<p>p1</p>

<p>p2</p>

<p>p3</p>

<table>

<tbody>

<tr>

<td>h1h1</td>

<td>h1h1</td>

<td>h1h1</td>

<td>h1h1</td>

<td>h1h1</td>

</tr>

</tbody>

</table>

<div id = 'default'>hello</div>

<div id = 'testCss'>hello</div>

<div class = 'testCss'>hello</div>

<div class = 'testCss'>world</div>

<div id='s'>

<h1>

<label>111</label>

</h1>

<label>1</label>

<label>1</label>

</div>

<script>

/*基本选择器*/

$("p").html();

$("p").val();

$("p").text();

$("p").html('sds');

$("div").attr("disable","true");

$("#testCss").css("font-size","19px");

$(".testCss").css("color","red");

$("form *").attr("disabled", "true"); //子元素

$("#default,.testCss").html("我们很特殊");//sele1,sele2,seleN选择器

$("tr td").html('change');//ance desc选择器 ance内所有desc元素(外、内)

$("#s>label").html('YouHoo'); //parent > child选择器(属于p的c,不含p-m-c)

$("h1+label").html('pre+nex'); // prev + next选择器(h1相邻兄弟l)

$("h1 ~ label").html('pre+all');// prev ~ siblings选择器(全部相邻)

/*过滤选择器*/

$("li:first").css("background-color", "red");//首个

$("li:last").css("background-color", "red");

$("li:eq(3)").css("background-color", "#60F");//li的位置0开始

$("li:contains('土豪')").css("background-color", "#60F");//li内容

$("li:has('p')").css("background-color", "#60F");//li包含p下的属性

$("li:hidden()").html();

$("li:visible").css("background-color","blue");

$("li[attribute = '水果']").css("background-color","blue");//li的内容

$("li[attribute != '蔬菜']").css("background-color","blue");

$("li[attribute *= '果']").css("background-color","blue");

$("li:first-child").css("background-color", "green");//2个ul每个li

$("li:last-child").css("background-color", "green");//2个ul每个li

function change(){

var value = $("a").html();

if(value == '更多'){

$("div:hidden").attr('style','display:block');

$("a").html("简化");

}else{

$("div").attr('style','display:none');

$("a").html("更多");

}

}

/*表单选择器*/

$("#frmTest :input").addClass("bg_blue");

$("#frmTest :text").addClass("bg_blue");

$("#frmTest :password").addClass("bg_blue");

$("#frmTest :button").addClass("bg_blue");

$("#frmTest :radio").addClass("bg_blue");

$("#frmTest :checed").attr("disabled", "true");

$("#frmTest :checkbox").attr("disabled","true");

// #id input:type

$("#frmTest input:text").addClass("bg_red");

$("#frmTest :image").addClass("bg_red");

$("#frmTest :selected").html('ss')

/*删除对象的子元素*/

$("table").empty();

/*删除对象和子元素*/

$("table").remove();

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。