(3)id选择器
1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.<p>jQuery选择器</p>9.<p class="foo">带class样式的p标签</p>10.<p><span>内嵌span的p标签</span></p>11.<p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>12.<div>13.<p my-id="my_para">在div内部带id的p标签</p>14.<p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15.</div>16.17.<!-- 通过使用jquery文件来使用jquery -->18.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>19.20.<script>21.// $()该语法标识在html加载完成再执行function()匿名函数中的内容22.$(function () {23.24.// id选择器语法格式是'#+class名称'如下所示25.var bar = $("#bar");26.// 将查询到id名称为bar的所有标签进行打印27.console.log(bar)28.})29.</script>30.31. </body>32. </html>
(4)组合选择器
jquery允许在指定选择标签元素同时,指定其class名称或者id来进行筛选,这种筛选方式称其为组合选择器,具体示例如下:
1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.<p>jQuery选择器</p>9.<p class="foo">带class样式的p标签</p>10.<p><span id="boo">内嵌span的p标签</span></p>11.<p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>12.<div>13.<p my-id="my_para">在div内部带id的p标签</p>14.<p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15.</div>16.17.<!-- 通过使用jquery文件来使用jquery -->18.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>19.20.<script>21.// $()该语法标识在html加载完成再执行function()匿名函数中的内容22.$(function () {23.24.// 组合选择器语法格式"元素标签+class名称/id名称"25.var span_class = $("span.foo");26.var span_id = $("span#boo")27.// 将查询的标签对象打印出来28.console.log(span_class)29.console.log(span_id)30.})31.</script>32.33. </body>34. </html>
(5)多选择器
1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.<p>jQuery选择器</p>9.<p class="foo">带class样式的p标签</p>10.<p><span id="boo">内嵌span的p标签</span></p>11.<p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>12.<div>13.<p my-id="my_para">在div内部带id的p标签</p>14.<p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15.</div>16.17.<!-- 通过使用jquery文件来使用jquery -->18.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>19.20.<script>21.// $()该语法标识在html加载完成再执行function()匿名函数中的内容22.$(function () {23.24.// 多选择器,可以将多种选择器进行组合,之间用逗号隔开25.var a = $("p#bar, .foo");26.console.log(a);27.28.})29.</script>30.31. </body>32. </html>
(6)层级选择器
1. <!DOCTYPE html>2. <html>3. <head>4.<meta charset="UTF-8">5.<title>jQuery基础教程</title>6. </head>7. <body>8.<p>jQuery选择器</p>9.<p class="foo">带class样式的p标签</p>10.<p><span id="boo">内嵌span的p标签</span></p>11.<p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>12.<div>13.<p my-id="my_para">在div内部带id的p标签</p>14.<p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>15.</div>16.17.<!-- 通过使用jquery文件来使用jquery -->18.<script src="https://www.520longzhigu.com/shenghuo/jQuery/jquery-3.5.1.js"></script>19.20.<script>21.// $()该语法标识在html加载完成再执行function()匿名函数中的内容22.$(function () {23.24.// 层级选择器,选择p标签中含有span标签的对象元素25.var a = $("p span");26.console.log(a);27.28.})29.</script>30.31. </body>32. </html>
以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助:- 小学生应该写什么作文
- 小学生带什么水果作文
- 小学生带什么水果作文400字左右
- 学生家长给学校送锦旗写什么
- 考研复试介绍家乡泰安
- 先写灰雀什么接着列宁
- 夏天的什么写景作文600字作文
- 夏天的什么写景作文600字
- 五年级作文同学真什么
- 我是秋雨中的什么作文600字作文怎么写