jq选择器大全案例

作者: zkzhengmeng | 来源:发表于2019-07-19 10:11 被阅读0次

jq选择器大全案例
jq初始,选择器,事件,内容操作,样式操作
前端
jQuery学习指南01
dom对象和jq对象-2020-01-01
jq
24、jQuery插件库
前端js学习
JQ二刷
jQuery速成笔记（一）

1. 根据id选择元素

<p id="myId">这是第一个p标签</p>
<p id="not">这是第二个p标签</p>
<script type="text/javascript">
    $(function(){
        $("#myId").css("color","red");
    });
</script>

2. 根据元素标签名选择元素元素

<div>这是div标签1</div>
<p>这是p标签</p>
<script type="text/javascript">
    $(function(){
        $("div").css("color","red");
    });
</script>

3. 根据给定的css类名选择元素

<p class="myClass">这是第一个p标签</p>
<p class="not">这是第二个p标签</p>
<script type="text/javascript">
    $(function(){
        $(".myClass").css("color","red");
    });
</script>

4. 匹配所有元素

<p>这是p标签</p>
<div>这是div标签</div>
<script type="text/javascript">
    $(function(){
        $("*").css("color","red");
    });
</script>

5. 根据祖先元素选择所有的后代元素

<div>
    <span>这是第一个span标签</span>
    <p>
        <span>这是第二个span标签</span>
    </p>
</div>
<script type="text/javascript">
    $(function(){
        $("div span").css("color","red");
    });
</script>

6. 在父元素下匹配所有的子元素 parent > child

<div>
    <span>这是第一个span标签</span>
</div>
<script type="text/javascript">
    $(function(){
        $("div > span").css("color","red");
    });
</script>

7.匹配所有紧接在 prev 元素后的 next 元素 prev + next

<div></div>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<script type="text/javascript">
    $(function(){
        $("div + p").css("color","red");
    });
</script>

8. 选择该元素的所有同辈元素siblings

<div>
    <p>这是第二个p标签</p>
    <span>宋迪元素</span>
    <b>宋迪元素</b>
</div>

<script type="text/javascript">
    $(function(){
        $("div p").siblings().css("color","red");
    });
</script>

9. 获取第一个元素:first

<div>
    <p>这是第一个p标签</p>
    <p>这是第二个p标签</p>
    <p>这是第三个p标签</p>
</div>
<script type="text/javascript">
    $(function(){
        $("p:first").css("color","red");
    });
</script>

10. 获取最后一个元素:last

<div>
    <p>这是第一个p标签</p>
    <p>这是第二个p标签</p>
    <p>这是第三个p标签</p>
</div>
<script type="text/javascript">
    $(function(){
        $("p:last").css("color","red");
    });
</script>

11. 去除所有与给定选择器匹配的元素 :not(selector)

<p class="del">这是第一个p标签</p>
<p class="del">这是第二个p标签</p>
<p>这是第三个p标签</p>
<script type="text/javascript">
    $(function(){
        $("p:not(.del)").css("color","red");
    });
</script>

12. 匹配所有索引值为偶数的元素，从 0 开始计数 :even

<div>这是索引值为0的p标签</div>
<div>这是索引值为1的p标签</div>
<div>这是索引值为2的p标签</div>
<div>这是索引值为3的p标签</div>
<script type="text/javascript">
    $(function(){
        $("div:even").css("color","red");
    });
</script>

13. 匹配所有索引值为偶数的元素，从 0 开始计数 :odd

<div>这是索引值为0的p标签</div>
<div>这是索引值为1的p标签</div>
<div>这是索引值为2的p标签</div>
<div>这是索引值为3的p标签</div>
<script type="text/javascript">
    $(function(){
        $("div:odd").css("color","red");
    });
</script>

14. 匹配一个给定索引值的元素:eq(index) index从0开始

<div>这是索引值为0的p标签</div>
<div>这是索引值为1的p标签</div>
<div>这是索引值为2的p标签</div>
<div>这是索引值为3的p标签</div>
<script type="text/javascript">
    $(function(){
       $("div:eq(1)").css("color","red");
    });
</script>

15. 匹配所有大于给定索引值的元素 :gt(index)

<div>这是索引值为0的p标签</div>
<div>这是索引值为1的p标签</div>
<div>这是索引值为2的p标签</div>
<script type="text/javascript">
    $(function(){
        $("div:gt(1)").css("color","red");
    });
</script>

16. 匹配所有小于给定索引值的元素:lt(index)

<div>这是索引值为0的p标签</div>
<div>这是索引值为1的p标签</div>
<div>这是索引值为2的p标签</div>
<script type="text/javascript">
    $(function(){
        $("div:lt(1)").css("color","red");
    });
</script>

17. 匹配如 h1, h2, h3之类的标题元素:header

<p>这是p标签</p>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<script type="text/javascript">
    $(function(){
        $(":header").css("color","red");
    });
</script>

18. 匹配所有正在执行动画效果的元素:animated

<button id="run">Run</button>
<div style="width:100px;height:100px;border:1px solid #f00;position:absolute;"></div>
<script type="text/javascript">
$(function(){
    $("#run").click(function(){
        $("div:animated").css("color","red");
    });
});
</script>

19. 匹配当前获取焦点的元素:focus

<input type="text" />
<script type="text/javascript">
$(function(){
    $("input").focus();     //让input自动获取焦点
    $("input:focus").css("background","red");
});
</script>

20. 匹配包含给定文本的元素:contains(text)

<div>boys</div>
<div>girls</div>
<div>home</div>
<script type="text/javascript">
    $(function(){
        $("div:contains('boys')").css("color","red");
    });
</script>

21.匹配所有不包含子元素或者文本为空的元素:empty

<p>这是有内容的p标签</p>
<p></p>
<p>这是有内容的p标签</p>
<p></p>
<script type="text/javascript">
    $(function(){
        $("p:empty").css("color","red");
    });
</script>

22. 匹配所有不可见元素，或者type为hidden的元素 :hidden

<div style="display: none;">这是隐藏的div标签</div>
<div>这是显示的div标签</div>
<input type="hidden" name="hide"  />
<script type="text/javascript">
    $(function(){
       $("div:hidden").css("color","red");
　　　　console.log($("div:hidden"));    //结果：获取到隐藏的div 和input
    });
</script>

23. 选取所有包含有 <span> 元素在其内的 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<p><span>p 元素中的 span 元素</span></p>
<p>这个 p 元素没有 span 元素</p>
<p><span>p 元素中的 span 元素</span></p>
<p>这个 p 元素没有 span 元素</p>
<script>
$(document).ready(function(){
  $("p:has(span)").css("border","solid red");
});
</script>
</body>
</html>

24. 选取所有带有子元素或包含文本的 <td> 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<table border="1">
  <tr>
    <th>序号</th>
    <th>站点名</th>
    <th>网址</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Google</td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Runoob</td>
    <td>runoob.com</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Taobao</td>
    <td>taobao.com</td>
  </tr>
</table>
<p>你可以向空的 td 插入一些内容，查看效果。</p>
<script>
$(document).ready(function(){
    $("td:parent").css("background-color","yellow");
});
</script>
</body>
</html>

25. 选择带有某个属性的元素[attribute=value]

<div class="myDiv" data-id="6">这是第一个div标签</div>
<div class="not">这是第二个div标签</div>
<script type="text/javascript">
    $(function(){
        $("div[data-id='6']").css("color","red");
    });
</script>

26. 匹配第一个子元素，类似的 :first 匹配第一个元素 :first-child

<div>
    <p>这是第一个div中的第一个p标签</p>
    <p>这是第一个div中的第二个p标签</p>
</div>
<div>
    <p>这是第二个div中的第一个p标签</p>
    <p>这是第二个div中的第二个p标签</p>
</div>
<script type="text/javascript">
    $(function(){
        $("div p:first-child").css("color","red");
    });
</script>

27. 匹配最后一个子元素，类似的 :last 只匹配最后一个元素 :last-child

<div>
    <p>这是第一个div中的第一个p标签</p>
    <p>这是第一个div中的第二个p标签</p>
</div>
<div>
    <p>这是第二个div中的第一个p标签</p>
    <p>这是第二个div中的第二个p标签</p>
</div>
<script type="text/javascript">
    $(function(){
        $("div p:last-child").css("color","red");
    });
</script>

28. 匹配其父元素下的第N个子元素 :nth-child

注意！:eq(index)是从0开始，而这里的 :nth-child的序号是从1开始的

<div>
    <p>这是第一个div中的第一个p标签</p>
    <p>这是第一个div中的第二个p标签</p>
</div>
<div>
    <p>这是第二个div中的第一个p标签</p>
    <p>这是第二个div中的第二个p标签</p>
</div>
<script type="text/javascript">
    $(function(){
        $("div p:nth-child(2)").css("color","red");
    });
</script>

29.匹配所有被选中元素(复选框、单选框等) :checked

<form>
    <input type="checkbox" name="news" checked="checked" />
    <input type="checkbox" name="news" />
    <input type="checkbox" name="news" checked="checked" />
</form>
<script type="text/javascript">
    $(function(){
        $(":checked").css("color","red");
    });
</script>

30. 匹配所有选中的option元素 :selected

<select>
  <option value="1">basketball</option>
  <option value="2" selected="selected">football</option>
  <option value="3">swim</option>
</select>
<script type="text/javascript">
    $(function(){
        $("select option:selected").css("color","red");
    });
</script>

31. 匹配所有不可用元素 :disabled

<form>
    <input type="submit" disabled="disabled" />
    <input type="reset" />
</form>
<script type="text/javascript">
    $(function(){
        $(":disabled").css("color","red");
    });
</script>

32.获取type=xxx的input元素 $(":xxx")

<form>
    <input type="text" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
</form>
<script type="text/javascript">
    $(function(){
        $(":text").css("color","red");
       $(":password").css("color","blue");
    });
</script>

jq选择器大全案例
1. 根据id选择元素 2. 根据元素标签名选择元素元素 3. 根据给定的css类名选择元素 4. 匹配所有元...
jq初始,选择器,事件,内容操作,样式操作
jq初始 jq选择器 jq事件 jq内容操作 jq样式操作
前端
1.闭包 2.JQ加载 3.JQ选择器
jQuery学习指南01
jQuery的优点轻，jq一共30kb左右。选择器强大，jq支持从css1到css3几乎所有的选择器。而jq自...
dom对象和jq对象-2020-01-01
dir =>显示对象的所有属性和方法。原生选择器获取dom对象.png JQ选择器获取图片.png ?JQ对象和D...
jq
1.选择器获取元素$("")//里面放字符串--选择器 2.原生对象与jq对象之间的转化注意：（1）通过jq获取...
24、jQuery插件库
网址：http://www.jq22.com/[http://www.jq22.com/] 案例：颜色插件案例：...
前端js学习
js没有定义类的说法直接创建对象 jq选择器：选择器改变标签属性
JQ二刷
1. JQ操作和原生JS操作 2.选择器 2.1基本选择器 2.2后代选择器 2.3 索引选择器 2.4 显示隐藏...
jQuery速成笔记（一）
本小爷自从学习了jq，再也不想写原生的js了，出于我对jq的喜爱，今天兴趣来了，想写篇jq的文章。。嘿嘿！选择器...

jq选择器大全案例

1. 根据id选择元素

2. 根据元素标签名选择元素元素

3. 根据给定的css类名选择元素

4. 匹配所有元素

5. 根据祖先元素选择所有的后代元素

6. 在父元素下匹配所有的子元素 parent > child

7.匹配所有紧接在 prev 元素后的 next 元素 prev + next

8. 选择该元素的所有同辈元素siblings

9. 获取第一个元素:first

10. 获取最后一个元素:last

11. 去除所有与给定选择器匹配的元素 :not(selector)

12. 匹配所有索引值为偶数的元素，从 0 开始计数 :even

13. 匹配所有索引值为偶数的元素，从 0 开始计数 :odd

14. 匹配一个给定索引值的元素:eq(index) index从0开始

15. 匹配所有大于给定索引值的元素 :gt(index)

16. 匹配所有小于给定索引值的元素:lt(index)

17. 匹配如 h1, h2, h3之类的标题元素:header

18. 匹配所有正在执行动画效果的元素:animated

19. 匹配当前获取焦点的元素:focus

20. 匹配包含给定文本的元素:contains(text)

21.匹配所有不包含子元素或者文本为空的元素:empty

22. 匹配所有不可见元素，或者type为hidden的元素 :hidden

23. 选取所有包含有 <span> 元素在其内的 <p> 元素：

24. 选取所有带有子元素或包含文本的 <td> 元素

25. 选择带有某个属性的元素[attribute=value]

26. 匹配第一个子元素，类似的 :first 匹配第一个元素 :first-child

27. 匹配最后一个子元素，类似的 :last 只匹配最后一个元素 :last-child

28. 匹配其父元素下的第N个子元素 :nth-child

注意！:eq(index)是从0开始，而这里的 :nth-child的序号是从1开始的

29.匹配所有被选中元素(复选框、单选框等) :checked

30. 匹配所有选中的option元素 :selected

31. 匹配所有不可用元素 :disabled

32.获取type=xxx的input元素 $(":xxx")

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读