一、jQuery选择器
jQuery选择器就是帮助我们快速定位到一个或多个DOM节点
1.1 ID选择器
如果某个DOM节点有id属性，利用jQuery查找方式：
<script src="jquery-3.3.1.js"></script> <!--引入jQuery库-->
<script type="text/javascript">
//1. jQuery的语法： $("选择器").action
var divclass = $("#div1");
console.log(divclass);
</script>
首先，通过$("#div1")可以获得一个jQuery对象，他是类似一个数组，数组中每个元素都引用自DOM节点。通过$(".div1")[0]的方式获得一个DOM节点对象，通过DOM节点对象我们可以使用DOM属性和方法。
如果$("#div1")没有查到标签的话，会返回[]，jQuery选择器不会返回null或者undefined。
1.2 DOM对象和jQuery对象转化
//1. jQuery的语法： $("选择器").action var divclass = $(".div1"); var divDom = divclass.get(0);//获取数组中第一个DOM对象 var divJq = $(divDom);//将DOM对象转换为jQuery对象 console.log(divclass);
1.3 按class查找
//1. jQuery的语法： $("选择器").action var 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的div
var 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>
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" onsubmit="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的input
var nameemail = $("[name='name'],[name='email']");
var nameemail2 = $("input[name != 'password']");
console.log(nameemail);
console.log(nameemail2)
</script>
</body>
</html>