jquery选择器从认识到使用初级篇

1. .class 选择器 ---一种通过元素类别属性查找元素

调用格式：
$(".class") ----其中参数表示元素的css类别名称（类选择器）
<input class="abc" />-------$(".abc")

2.*选择器（取走所有的元素）
调用格式: $("*") 可以与其他元素组合使用
$("div *")-------选取包含在div里面的所有元素；
例如 <div>
    <p class="a"></p>
   <span><span>
      </div>
<script type="text/javascript">
        $("div *").html("你好")；
</script>
特别注意，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

3.sele1,sele2,seleN选择器，也就是多选择器
调用格式：$(“sele1,sele2,seleN”)
特别注意：中间是用逗号隔开的
例如上面我想选择div中的p元素那一行的话
就可以$(".a, span").html("我只想选你")；

4.层次选择器（父子选择器）：ance desc选择器
调用格式：$("ance desc")
其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。

$("div span")------就是类似 div是父亲，span被他包裹的所有小辈在这里是可以取到两个span的元素的

5.parent > child选择器
调用格式：$(“parent > child”)

例如
<div>
     <p> <span></span></p>
     <span></span>---取的是这个元素
</div>
$("div>span").html("我是父亲的儿子不是他的孙子")
与ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈

6.prev + next选择器
调用格式：$(“prev + next”) 这就叫做远亲不如近邻了就是调用你紧靠着你的下一家的元素

通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素

$("div+p").html("不管你又几个p 我只取你紧靠着你的第一个p元素")

7.prev ~ siblings选择器
调用格式
$(“prev ~ siblings”)
获取prev 元素后面全部相邻的元素
$("div~p").html("不管你又几个p 只要是同级别的p我都取到")

8.:has(selector)过滤选择器
过滤选择器的功能是获取选择器中包含指定元素名称的全部元素
在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是
$("div:has(span)");
<div>改变包含"label"元素的背景色：</div>
        <ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸就是我</label></li>---------
            <li><p>我也是P先生</p></li>                       这两行的样式发生改变了
            <li><label>我也是L妹纸哦</label></li>------
            <li><p>P先生就是我哦</p></li>
        </ol>
$("li:has('label')").css("background-color", "blue");-----注意了：冒号后面是没有空格的
注意需要加单引号；
9. :first过滤选择器
该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。
在<ul>元素中,添加了多个<li>元素,通过jquery选择器获取最后一个<li>元素的方法是:
$("li:last")--------获取最后一个<li>元素
$(“li:first”)------获取第一个元素

10. :eq(index)过滤选择器--这个经常也会用到
调用格式：:eq(index)
--如果想从一组标签元素数组中，灵活选择任意的一个标签元素
<ul>
<li></li>
<li></li>
<li></li>
<li>选我</li>
</ul>
例如$("li:eq(3)").css("color","red");---选取第四个li的元素

11. :contains(text)过滤选择器---按照文本内容来查找一个或多个元素
eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便，它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

调用格式：:contains(text)
<div>改变包含"jQuery"字符内容的背景色：</div>
         <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是一种开发语言</li>
            <li>前端利器——"jQuery"</li>
$("li:contains('jQuery')").css("background", "green");

12. :hidden过滤选择器
过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素

<h3>显示隐藏元素的内容</h3>
        <input id="hidstr" type="hidden" value="我已隐藏起来"/>
<div></div>
var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);

13. :visible过滤选择器与hidden过滤器相反
:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。

14.[attribute=value]属性选择器----这个经常用到
[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
<h3>改变"title"属性值为"蔬菜"的背景色</h3>
        <ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>

        <script type="text/javascript">
            $("li[title='蔬菜']").css("background-color", "green");
        </script>
注意：属性值中的‘’单引号可以不写，由于属性名与属性值是等号，因此，它们之间不是包含关系，而是完全相同。

[attribute!=value]属性选择器这个就不介绍了

15. [attribute*=value]属性选择器
介绍一个功能更为强大的属性选择器[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。
<h3>改变"title"属性值包含"果"的背景色</h3>
        <ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="人参果">小西红柿</li>
            <li title="水果">西瓜</li>
        </ul>

        <script type="text/javascript">
            $("li[title*='果']").css("background-color", "green");
        </script>

16. :first-child子元素过滤选择器
:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。
   <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>

        <script type="text/javascript">
            $("li:first-child").css("background-color", "green");
        </script>

17. :last-child子元素过滤选择器这个就不介绍了
子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。

18. :input表单选择器
:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。
<h3>修改全部表单元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <select>
            <option>Option</option>
            <option>oooo</option>
        </select><br />
        <textarea rows="3" cols="8"></textarea><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :input").addClass("bg_blue");
注意： :input前面是有一个空格的
addClass()方法的功能是为元素添加指定的样式类别名称

19 . :text表单文本选择器
可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具
<h3>修改多个单行输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="我是小纸条"/><br />
        <textarea rows="3" cols="8"></textarea><br />
        <input type="text" id="Text2" value="我也是小纸条"/><br />
        <button>
            Button</button><br />
        </form>

20. :password表单密码选择器 ---这个看起来也很不错
果想要获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。
<h3>修改多个密码输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="单行文本输入框"/><br />
        <input type="password" id="Text2" value="密码文本输入框"/><br />
        <textarea rows="3" cols="8">区域文本输入框</textarea><br />
        <input type="password" id="Text3" value="密码文本输入框"/><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :password").addClass("bg_red");
        <script type="text/javascript">
            $("#frmTest :text").addClass("bg_blue");
这个时候是type=“text”的框被选中

21 :radio单选按钮选择器
表单中的单选按钮常用于多项数据中仅选择其一，而使用:radio选择器可轻松获取表单中的全部单选按钮元素。
<h3>将表单中单选按钮设为不可用</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Radio1" type="radio" />
        <label for="Radio1">
            男</label>
        <input id="Radio2" type="radio" />
        <label for="Radio2">
            女</label><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :radio").attr("disabled","true");
        </script>

22 :checkbox复选框选择器
表单中的复选框常用于多项数据的选择，使用:checkbox选择器可以快速定位并获取表单中的复选框元素。
     <h3>将表单的全部复选框设为不可用</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Checkbox1" type="checkbox" />
        <label for="Checkbox1">
            西红柿</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label for="Checkbox2">
            茄子</label><br />
        <input id="Checkbox3" type="checkbox" />
        <label for="Checkbox3">
            黄瓜</label><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :checkbox").attr("disabled","true");
        </script>
全部设为选中状态：$("#frmTest:checkbox").attr("checked","true")

23 :submit提交按钮选择器
通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。
<h3>修改表单中提交按钮的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input type="submit" value="点我就提交了" /><br />
        <button>
            Button</button><br />
        </form>

        <script type="text/javascript">
            $("#frmTest input:submit").addClass("bg_red");
        </script>这个时候就比较特殊了：需要加上input:submit 否则无法定位是否缺少“input”， <button>按钮通常也被认为是提交按钮，为更好区分，只要在:submit选择器之前添加“input”符号。

24 :image图像域选择器

当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。例如，在表单中添加两种类型的图像元素，使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式，
<h3>修改表单中图像元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="image" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
        <br />
        <img alt="" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :image").addClass("bg_red");

24 :button表单按钮选择器
表单中包含许多类型的按钮，而使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

25 :checked选中状态选择器
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。

<h3>将处于选中状态的元素设为不可用</h3>
        <form id="frmTest" action="#">
        <input id="Radio1" type="radio" checked="checked" />
        <label id="Label1" for="Radio1">
            苹果</label><br />
        <input id="Radio2" type="radio" />
        <label id="Label2" for="Radio2">
            桔子</label><br />
        <input id="Checkbox1" type="checkbox" checked="checked" />
        <label id="Label3" for="Checkbox1">
            荔枝</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label id="Label4" for="Checkbox2">
            葡萄</label><br />
        <input id="Checkbox3" type="checkbox" checked="checked" />
        <label id="Label5" for="Checkbox3">
            香蕉</label><br />
        </form>

        <script type="text/javascript">
            $("#frmTest :checked").attr("disabled", true);
        </script>

26:selected选中状态选择器

与:checked选择器相比，:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
    <h3>获取处于选中状态元素的内容</h3>
        <form id="frmTest" action="#">
        <select id="Select1" multiple="multiple">
            <option value="0">苹果</option>
            <option value="1" selected="selected">桔子</option>
            <option value="2">荔枝</option>
            <option value="3" selected="selected">葡萄</option>
            <option value="4">香蕉</option>
        </select><br /><br />
        <div id="tip"></div>
        </form>

        <script type="text/javascript">
            var $txtOpt = $("#frmTest :selected").text();
            $("#tip").html("选中内容为:" + $txtOpt);
        </script>

如何获取列表框元素中被选中元素的的值,代码为
B$("select option:selected").text();

27.使用attr()方法控制元素的属性 --使用度最广的，一定要记住
attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。
<body>
        <h3>attr()方法设置元素属性</h3>
        <a href="http://127.0.0.1" id="a1">点我就变</a>
        <div>我改变后的地址是：<span id="tip"></span></div>

        <script type="text/javascript">
            $("#a1").attr("href", "www.imooc.com");---这是设置属性href
            var $url = $("#a1").attr("href");----这是获取href的值
            $("#tip").html($url);
        </script>

操作元素的内容
使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
区别：html()方法可以获取元素的HTML内容，包含HTML格式代码

　　　text()方法只是获取元素中的文本内容，并不包含HTML格式代码

操作元素的样式
通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。
$("#content").css({"color":"#fff","background-color":"red"});

移除属性和样式-----这个也不错，使用度还比较高
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，

$("#abc").removeAttr("href")
$("#content").removeClass();

使用append()方法向元素内追加内容-----这个就是在分页的时候或者是下拉菜单的时候运用广
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。
function rethtml() {
                var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
                return $html;
            }
            $("body").append(rethtml());

使用appendTo()方法向被选元素内插入内容----这个格式可不要和append的格式搞混了；
appendTo()方法也可以向指定的元素内插入内容
$(content).appendTo(selector)
参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部
<h3>appendTo()方法插入内容</h3>
        <div>
            <span class="green">小乌龟</span>
        </div>

        <script type="text/javascript">
            var $html = "<span class='red'>小青蛙</span>"
            $($html).appendTo("div");
        </script>

使用before()和after()在元素前后插入内容
before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容
调用格式分别为
$(selector).before(content)和$(selector).after(content) 其中参数content表示插入的内容，该内容可以是元素或HTML字符串。
<h3>after()方法在元素之后插入内容</h3>
        <span class="green">我们交个朋友吧！</span>

        <script type="text/javascript">
            var $html = "<span class='red'>兄弟。</span>"
            $("span").after($html);
注意和appendTo()的区别

使用clone()方法复制元素
调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，
它的调用格式为：
$(selector).clone()
其中参数selector可以是一个元素或HTML内容。
使用clone()方法复制元素时，不仅复制了该元素的文本和节点，还将它的“title”属性也一起复制过来了。
<h3>使用clone()方法复制元素</h3>
        <span class="red" title="hi">我是美猴王</span>

        <script type="text/javascript">
            $("body").append($(".red").clone());

replaceWith()和replaceAll()
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：
$(selector).replaceWith(content)和$(content).replaceAll(selector)----注意格式
<span class="green" title="hi">我是屌丝</span>

        <script type="text/javascript">
            var $html = "<span class='red' title='hi'>我是土豪</span>";
       $($html).replaceAll(".green");
       $(".green").replaceWith($html);-----效果都是一样的

使用wrap()和wrapInner()方法包裹元素和内容
wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：

$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)

参数selector为被包裹的元素，wrapper参数为包裹元素的格式。
$(".red").wrapInner("<i></i>");
$(".red").wrap("<i></i>");

使用each()方法遍历元素----这个好用
each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：

$(selector).each(function(index))
参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。 <h3>使用each()方法遍历元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>

        <script type="text/javascript">
            $("span").each(function (index) {
                if (index == 1) {
                    $(this).attr("class", "red");
                }
            });

使用remove()和empty()方法删除元素
remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素的内容。
$("span").empty()
$("span").remove()

使用attr方法,取消id号为test的复选框选中状态代码为:
D$("#test").attr("checked", false);

posted @ 2015-01-30 09:49 sucer德阅读(459) 评论(0) 编辑收藏举报

刷新页面返回顶部

刘阿德

jquery选择器从认识到使用初级篇

公告