参数0520.md文档，将课堂未演示的常用选择器， 自己举例进行联系
收藏
//元素element 选择器
$("button").click(function () {
})
//ID选择器
$("#btn").click(function () {
})
//class选择器
$(".test").hide();
//*选择器
$("*").css("color","red");
//层级选择器
$("p.myP,div#myDiv").css("color","red");
//后代选择器, 中间用空格分隔
$("div span").css("color","red");
//子选择器，选择父节点下所有
$("div > span").css("color","red");
//相邻下个兄弟元素
$("div + p").css("color","red");
//获取第一个元素
$("p:first").css("color","red");
//去除所有与给定选择器匹配元素
$("p:not(.del)").css("color","red");
// 内容选择器
$("div:contains('boys')").css("color","red");
// 表单选择器
$(":input").css("color","red");
// 匹配复选框选择器
$(":checkbox").css("color","red");2. 演示DOM对象与jQuery对象之间的转换方式
<html>
<head>
<title>jquery演示</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button type="button" id="btn" name="button">我是一个按钮</button>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</body>
<script>
$(function () {
//将dom转换为jquery对象
var $obj = $('#btn');
console.log($obj instanceof jQuery);
$('ul li:nth-of-type(3)').css('color', 'red');
//将jquery转换为dom
var lis = $('li');
console.log(lis);
})
</script>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
