jQuery学习笔记_选择器

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #class #实例 #函数 #选择器

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了jQuery的基础语法及各种选择器的使用方法，包括基础选择器、层次选择器、表单选择器、过滤选择器等，帮助开发者更好地理解和运用jQuery进行网页元素操作。

一、jQuery语法

基础语法：$(selector).action();
jQuery的所有代码都将写在$(document).ready()函数中。

二、选择器

2.1 基础选择器

#id 根据id匹配一个元素
.class 根据class匹配一个元素
element 根据元素名称匹配元素
* 选择所有元素，包括body
上述实例如下：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery ex01</title>
</head>
<body>
    <h2>welcome to jQuery</h2>
    <div id="demo01"></div>
    <div class="demo02">
        <a href="http://www.baidu.com">
        http://www.baidu.com<em>hai</em>
        </a>

    </div>

    <script src="http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $("h2").css({
        "color": "darkred",
        "margin-bottom":"10px"
        }),
        $("#demo01").css({
            "margin": "10px",
            "float": "left",
            "width":"100px",
            "height":"100px",
            "background":"red"
        }),
        $(".demo02").css({
            "margin": "10px",
            "float": "left",
            "width":"100px",
            "height":"100px",
            "background":"blue"
        }),
        $("a,em").css({
            "margin-left": '150px',
            "float":"left",
            "color": 'purpose',
            "width":"100px",
            "height":"100px"
        });
    });

    </script>

</body>
</html>

selector1,selector2,……
用“，”分隔开然后再拼成一个选择器字符串，同时选择多个匹配的选择器的内容。

2.2 层次选择器

ancestor descendant

选中ancestor中的所有descendant后代元素，选择类名为demo02的元素的所有后代a元素，直接的第一个子元素百度，字体样式得到改变，实验楼也是demo02的后代，也得到了样式的改变。

    <div class="demo02">
        <a href="http://www.baidu.com">百度</a>
        <div class="innerDemo">
            <a href="http://www.shiyanlou.com">实验楼</a>
        </div>  
    </div>
-----------------------------------------------------------
    $(document).ready(function() {
        $(".demo02 a").css({
            "font-size": "25px",
        })
    });

parent>child
选中parent的直接子节点child，child必须包含在parent中，并且父类是parent元素。注：选择的是子元素，与后代元素区分。后代是一个空格，这里是>。

    $(document).ready(function() {
        $(".demo02>a").css({
            "font-size": "25px",
        })
    });

prev + next
prev和next是两个同级别的元素。选中在prev元素后面的next元素。选中class为demo后面的a元素，并设置大小如下：

    $(document).ready(function() {
        $(".demo02+a").css({
            "font-size": "30px",
        })
    });

prev~siblings
选择prev后面的根据siblings过滤的所有元素中选中class为demo的div元素后面的所有a同辈元素，并设置大小如下：

    $(document).ready(function() {
            $(".demo02~a").css({
            "font-size": "30px",
        })
    });

2.3 表单选择器

:input 选取所有的<input>、<textarea>、<select>、<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮集合元素
:file 选取所有的上传域
:hidden 选取所有的不可见元素

如：

    $(document).ready(function() {
            $(":input").css({
            "font-size": "30px",
        })
    });

2.4 过滤选择器

(1). 基本过滤选择器

:first-匹配第一个元素-$("div:first")
:last-匹配最后一个元素-$("span:last")
:not(selector)-选取不包含匹配条件的元素-$("p:not(.a)")
:even-匹配索引是偶数的元素索引从0开始-$("li:even")
:odd-匹配索引是奇数的元素-索引从0开始-$("li:odd")
:eq(index)-匹配索引等于index的元素(索引从0开始)-$("input:eq(2)")
:gt(index)-匹配索引大于index的元素(索引从0开始)-$("input:gt(1)")
:lt(index)-匹配索引小于index的元素(索引从0开始)-$("input:lt(5)")
:header-匹配所有h1,h2…等标题元素-$(":header")
:animated-匹配所有正在执行动画的元素-$("div:animated")
:foucus-选取当前获取焦点的元素-$(":focus")

(2). 内容过滤选择器

:contains(text)-匹配含有文本内容text的元素-$("p:contains(今天)")
:empty-匹配不含子元素或文本元素的空元素-$("p:empty")
:has(selector)匹配包含selector元素的元素-$("div:has(span)")
:parent-匹配含有子元素或文本的元素集合元素-$("div:parent")

(3). 可见性过滤选择器

:hidden-匹配所有不可见的元素-$(":hidden")
:visible-匹配所有可见元素-$(":visible")

(4). 属性过滤选择器

[attr]-匹配拥有此属性的元素-$("img[alt]")
[attr=value]-匹配属性值为value的元素-$("a[title=test]")
[attr!=value]-匹配属性值不等于value的元素-$("a[title!=test]")
[attr^=value]-匹配属性值以value开头的元素-$("img[alt^=welcome]")
[attr$=value]-匹配属性值以value结尾的元素-$("img[alt$=last]")
[attr*=vlaue]-匹配属性值中含有value的元素-$("div[title*=test]")
[attr1][attr2]…通过多个属性进行匹配-$("div[id][title*=test]")

(5). 子元素过滤选择器

:first-child-选取第一个子元素-$("div:first-child")
:last-child-选取最后一个子元素-$("div:last-child")
:nth-child-匹配每个父元素下的第index个子元素索引从1开始-$("div:nth-child(2)")
:only-child-某元素是它父元素中的唯一的子元素则匹配它-$("div:only-child")

(6). 表单对象属性过滤选择器

:enabled-匹配所有可用元素-$("form:enabled")
:disabled-匹配所有不可用的元素-$("form:disabled")
:checked-匹配所有被选中的元素(含单选框，复选框)-$("input:checked")
:selected-匹配所有被选中的选项元素-$("select :selected")