jquery选择器总结

来源：互联网发布：淘宝店晨练服编辑：程序博客网时间：2024/06/11 11:50

一、jQuery选择器的分类

1.id选择器

2.类选择器

3.标签选择器

4.通配选择器

5.组选择器

二、自己理解的选择器

id选择器：通过获取标签里的id属性，来精确找到jQuery对象。

用法：$(“#id”)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery学习</title>    <script type="text/javascript" src="../../jquery/jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $(function(){            $("#div1").css("background","red");        });    </script></head><body>    <div id="div1">测试盒子</div></body></html>

类选择器：通过获取标签的class属性，来精确找到相同类名的集合jQuery对象。

用法：$(".className")

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery学习</title>    <script type="text/javascript" src="../../jquery/jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $(function(){            $(".red").css("color","red");        })    </script></head><body>    <div class="red">div1</div>    <div>div2</div>    <div class="red">div3</div></body></html>

标签选择器：不需要加任何附加标识符,直接用标签名做参数

用法：$("TagName")

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery学习</title>    <script type="text/javascript" src="../../jquery/jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $(function(){            $("div").css("color","red");        })    </script></head><body>    <div>div1</div>    <div>div2</div>    <div>div3</div></body></html>

通配选择器：直接用*来匹配所有的元素

用法：$("*")

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery学习</title>    <script type="text/javascript" src="../../jquery/jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $(function(){            $("body *").css("color","red");        })    </script></head><body>    <div>DIV</div>    <span>SPAN</span>    <p>P</p></body></html>

组选择器：多个选择器结果的并集,各个选择器之间用逗号隔开

用法：$("selector1,selector2,...,selectorN")

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery学习</title>    <script type="text/javascript" src="../../jquery/jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $(function(){            $("h2,#wrap,span.red,[title='text']").css("color","red");        })    </script></head><body>    <h2>H2</h2>    <div id="wrap">DIV</div>    <span class="red">SPAN</span>    <p title="text">P</p></body></html>

三、jquery中注意的问题

1.遇到无法识别的符号，通过"\\"来进行转义

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery学习</title>    <script type="text/javascript" src="../../jquery/jquery-3.1.1.min.js"></script>    <script type="text/javascript">        $(function(){            $("#a\\.b").css("color","red");            $("#a\\:b").css("color","blue");            $("#\\[div\\]").css("color","pink");        });    </script></head><body>    <div id="a.b">div1</div>    <div id="a:b">div2</div>    <div id="[div]">div3</div></body></html>

2.jquery和js的getElementById(),getElementByTagName()可以一起使用

0 0