jquery写ajax请求的五个步骤 jquery基础教程( 二 )

(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小编还为您精选了以下内容,希望对您有所帮助: