一、jQuery选择器
jQuery选择器就是帮助我们快速定位到一个或多个DOM节点
1.1 ID选择器
如果某个DOM节点有id属性，利用jQuery查找方式：
<script src="jquery-3.3.1.js"></script> <!--引入jQuery库--><script type="text/javascript">//1. jQuery的语法： $("选择器").actionvar divclass = $("#div1"); console.log(divclass);</script>
首先，通过$("#div1")可以获得一个jQuery对象，他是类似一个数组，数组中每个元素都引用自DOM节点。通过$(".div1")[0]的方式获得一个DOM节点对象，通过DOM节点对象我们可以使用DOM属性和方法。
如果$("#div1")没有查到标签的话，会返回[]，jQuery选择器不会返回null或者undefined。
1.2 DOM对象和jQuery对象转化
//1. jQuery的语法： $("选择器").actionvar divclass = $(".div1");var divDom = divclass.get(0);//获取数组中第一个DOM对象var divJq = $(divDom);//将DOM对象转换为jQuery对象console.log(divclass);
1.3 按class查找
//1. jQuery的语法： $("选择器").actionvar divclass = $(".div1"); // 类选择器console.log(divclass); // 得到一个类似数组的jQuery对象
需要注意的是不要省略.在class名前$(".div1")
所有包含div1的DOM节点都会被返回
1.4 按Tag查找
只需要写上tag标签名即可。
var ps = $('p'); // 返回所有<p>节点ps.length; // 数一数页面有多少个<p>节点
1.5 多个选择器配合使用
// 找到类名为div1的div标签var div1 = $("div.div1"); console.log(div1);console.log(div1.get(0).innerText);
div.div1 找到 类名为div1的div标签。
1.6 所有元素选择器
var all = $("*");// * 表示所有console.log(all);
1.7 组合选择器
组合查找就是把以上的简单选择器组合起来使用，
var tmp = $(".div1,#id1");console.log("tmp:",tmp);
选择出来的元素是按照他们在HTML中出现的顺序排列的。
1.8层级选择器
x,y可以是任意选择器
$("x y");// x的所有后代y（子子孙孙）$("x > y");// x的所有儿子y（儿子）$("x + y")// 找到所有紧挨在x后面的y$("x ~ y")// x之后所有的兄弟y
<!DOCTYPE html><html><head><title>层级选择器</title></head><body><div class="div1"><p class="div1-p1">div1下的儿子标签p </p><div class="div1-div1">div1下的第一个div儿子div1-div1<div class="div1-div11">div1下面的孙子</div></div><div class="div1-div2">div1下的第二个div儿子div1-div1</div></div><ul class="ul1"><li>1</li><li>2</li><li id="li3">3</li><li>4</li><li>5</li><li>6</li></ul><script src="jquery-3.3.1.js"></script><script type="text/javascript">// 1.div1的子子孙孙var div1 = $(".div1 div");//查找div1 所有的子子孙孙div标签 length = 3 console.log(div1);// 2.查找div的儿子var div1Son = $(".div1>div"); //查找div1的所有儿子 length = 2 console.log(div1Son);//3.查找紧挨着div1中p的divvar div1_div1 = $(".div1-p1+div"); // length = 1 console.log(div1_div1);//4.查看div1-p1的后面的同级兄弟var div1_div1 = $(".div1-p1~div");// length = 2 console.log(div1_div1);</script></body></html>
层级选择器demo
1.9 属性选择器
一个DOM节点除了id、class等基本的选择器之外，还可以通过属性来查找，比如在一个表单中按属性来查找
var email = $('[name=email]'); // 找出<??? name="email">var passwordInput = $('[type=password]'); // 找出<??? type="password">var a = $('[items="A B"]'); // 找出<??? items="A B"><input type="text"><input type="password"><input type="checkbox">$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[type!='text']");// 取到类型不是text的input标签
1.通过属性来查找
2.通过属性和属性值来查找
<!DOCTYPE html><html><head><title>属性选择器</title></head><body><form class="test-form" target="_blank" action="#0" οnsubmit="return false;"><legend>注册新用户</legend><fieldset><p><label>名字: <input name="name"></label></p><p><label>邮件: <input name="email"></label></p><p><label>口令: <input name="password" type="password"></label></p><p><button type="submit">注册</button></p></fieldset></form> <script src="jquery-3.3.1.js"></script><script type="text/javascript">// 只判断属性是否存在，通过属性来查找var name1 = $('[name]'); // 查找包含属性name的标签 console.log(name1);// 根据属性查找的语法 $("标签名[属性名 = '属性值'']"") 标签名可以不写var isname = $("[name = 'name']"); // 查找name = "name"的 console.log(isname);var isname2 = $("input[name='name']"); // 标签名是可以省略的 console.log(isname2);// 判断不是name=‘name’的标签var isname3 = $("input[name != 'name']"); // input不能省略，否则命中范围太大 console.log(isname3);// 多个属性 $("[属性名 = '属性值1 属性值2']")// 查找 name 和 email的inputvar nameemail = $("[name='name'],[name='email']");var nameemail2 = $("input[name != 'password']");console.log(nameemail);console.log(nameemail2)</script></body></html>
属性选择器demo
