参数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>