Blogger Information
Blog 35
fans 3
comment 0
visits 25087
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
12月19日jQuery 选择器
随风
Original
695 people have browsed it

jQuery 选择器

`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
<h2>jQuery id选择器</h2>
</head>

<body>

<div id="div1" class="class1">
<p id="i1" class="c1">1</p>
<p id="i2" class="c3">2</p>
</div>
<div id="div2" class="class1">
<p id="i3" class="c3">3</p>
<ul>
<li>12</li>
<li>11</li>
<li> <p id="i7" class="c8">8</p></li>

</ul>
</div>
<p id="i6" class="c6">6</p>
<div id="div3" class="class3">
<p id="i5" class="c5">5</p>

</div>
<div id="div4" class="class4">
<ul>
<li>12</li>
<li>11</li>
<li> <p id="i4" class="c4">4</p></li>

</ul>
</div>

<script type="text/javascript">
// id选择器
let iddiv= $(‘#div3’);
console.log(iddiv);
let idp= $(‘#i4’);
console.log(idp);
//通配符选择器
let aa=$(‘div’);
console.log(aa);
//类选择器
let class1=$(‘.class3’);
console.log(class1);
let c=$(‘.class1’);
console.log(c);
//后代选择器
let d=$(‘div p’);
console.log(d);
let e=$(‘#div2 p’);
console.log(e);
//直系选择器
let f=$(‘.class1>p ‘);
console.log(f);
//相邻的兄弟选择器
let g=$(‘#div2+p’);
console.log(g);
let h=$(‘#div3+p’);
console.log(h);
//后面的兄弟选择器
let t=$(‘#div1~div’);
console.log(t);
let s=$(‘#i1~p’);
console.log(s);

</script>
</body>
</html>`

总结

jquery选择器 和css选择器差不多,经过本次复习,基本上掌握了选择器。

Correcting teacher:西门大官人西门大官人

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post