jQuery选择器

最新推荐文章于 2024-07-18 10:24:18 发布

鞠婧祎yamy

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量60

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Huangpiao04/article/details/130507445

版权

1.基本选择器与层次选择器

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../jQuery/jquery-1.12.5.js"></script>
<script>
    // 1.基本选择器 #id .class element * selector1,selector2,selector3
    // 2.层次选择器
    $(function () {
        // 2.1子元素选择器 parent>child
        $('#dv >p').css('backgroundColor', 'red');
        // children()
        // $('#dv>p');
        // $('#dv').children('p');
        // 2.2后代选择器 selector selector1
        $('#dv p').css('backgroundColor', 'red');
        // find()
        // $('#dv p');
        // $('#dv').find('p');
        // 2.3兄弟选择器
        $('#dv+p').css('backgroundColor', 'red');
        // next()  获取下一个兄弟
        // nextAll() 获取所有的兄弟选择器
        // siblings() 获取指定元素的兄弟选择器
        // $('div').next('p').css('backgroundColor', 'red');
        // $('div').nextAll('p').css('backgroundColor', 'red');
        // $('div').siblings('p').css('backgroundColor', 'red');
    })
</script>

<body>
    <p>这是div前面的p元素</p>
    <div id="dv">
        <p>这是div中的第1个p元素</p>
        <ul>
            <li>这是第1个li元素</li>
            <li>
                <p>这是第2个li中的p元素</p>
            </li>
        </ul>
        <p>这是div中的第2个p元素</p>
    </div>
    <p>这是div后面的第1个p元素</p>
    <p>这是div后面的第2个p元素</p>
    <p>这是div后面的第3个p元素</p>
</body>

</html>

2.过滤选择器与表单元素选择器和表单属性选择器

效果图

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../jQuery/jquery-1.12.5.js"></script>
<script>
    // 1.基本过滤选择器 案例 4.基本过滤选择器和子元素过滤选择器...
    // :first 获取第一个选择器
    // :last 获取最后一个选择器
    // :not(selector) 获取除给定选择器除外
    // :even 获取所有索引号为偶数的元素
    // :odd 获取所有索引号为奇数的元素
    // :eq(index) 获取所有索引号为偶数的元素
    // :gt(index) 获取所有大于给定索引值的元素,索引号从0开始
    // :It(index) 获取所有小于定索引值的元素,索引号从0开始
    // :header 获取所有标题类型(h1~h6)的元素 
    // :animated 获取正在执行动画的元素
    // 2.可见性过滤选择器 visible 获取所有的可见元素 hidden获取所有的不可见元素
    $(function () {
        // $(':visible').css('backgroundColor','yellow');
        // console.log($(':visible'));
    // 3.内容过滤选择器
    // :contains(text) 获取包含给定文本的元素
    // :empty 获取所有不包含子元素或者文本的空元素
    // :has(selector) 获取含有选择器匹配的元素
    // :parent 获取含有子元素或者文本的元素
        $('div:contains(也)').css('background', 'pink');
        $('div:empty').css('background', 'yellow');
        $('div:has(span)').css('background', 'red');
        // $('div:parent').css('background', 'blue');
    })
    // 4.属性过滤选择器
    // [attribute] 获取包含给定属性的元素
    // [attribute=value] 获取等于给定的属性是某个特定值的元素
    // [attribute!=value]获取不等于给定的属性是某个特定值的元素
    // [attribute^=value]获取给定的属性是以某些值开始的元素
    // [attribute$=value]获取给定的属性是以某些值结尾的元素
    // [attribute*=value]获取给定的属性是以某些值的元素
    // [selector1][selector2][selectorN]获取满足多个条件的复合属性的元素
    // 5.子元素过滤选择器 案例 4.基本过滤选择器和子元素过滤选择器...
    // :first-child 获取每个父元素下的第一个子元素
    // :last-child 获取每个父元素下的最后一个子元素
    // :only-child 获取每个仅有父元素下的一个子元素
    // :nth-child(eq|even|odd|index) 获取每个元素下的特定元素,索引号从1开始
    // 6.表单元素选择器 案例 5.表单过滤器选择器demo
    // :input 获取所有input/textarea/select/button元素(表单控件)
    // :text 获取表单中[input=text]的元素(单行文本框)
    // :password 获取表单中[input=password]的元素(密码框)
    // :radio 获取表单中[input=radio]的元素(单选按钮)
    // :checkbox 获取表单中[input=checkbox]的元素(复选框)
    // :submit 获取表单中[input=submit]的元素(提交按钮)
    // :image 获取表单中[input=image]的元素(图像域)
    // :reset 获取表单中[input=reset]的元素(重置按钮)
    // :button 获取表单中[input=button]的元素(普通按钮)
    // :file 获取表单中[input=file]的元素(文件域)
    // 7.表单元素属性选择器
    // :enabled  获取表单中所有属性为可用的元素
    // :disabled 获取表单中所有属性为不可用的元素
    // :checked 获取表单中所有被选中的元素
    // :selected 获取表单中所有被选中option的元素
</script>
<body>
    <!-- <div id="dis">显示文本1</div>
    <div id="vis">显示文本2</div>
    <input type="hidden" value="隐藏文本域"> -->
    <div>我是div元素的文本</div>
    <div>我也是div元素的文本</div>
    <div><span>我是div内span元素的文本</span></div>
    <div></div>
</body>

</html>