jQuery选择器和基本操作

最新推荐文章于 2023-04-23 17:34:04 发布

沐沐185

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量198

点赞数

分类专栏： JS 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125721748

版权

JS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

一、属性选择器

1.属性选择器通过HTML元素的属性来选择元素

语法构成	描述	示例
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(''[href^='www']'')选取href属性值以www开头的元素
[attribute$=value]	选取给定属性是以某些特定值结束的元素	$(''[href$='com']'')选取href属性值以com结尾的元素
[attribute*=value]	选取给定属性是包含特定值的元素	$(''[href*='txt']'')选取href属性值包含txt的元素

2.根据是否包含某属性来选取元素

二、过滤选择器

1.基本过滤选择器

 <div style="width:50px;height:100px;border: 1px solid red;"></div>
    <h1>我是标题111</h1>
    <h3>我是标题333</h3>
    <h5>我是标题555</h5>
    <ul>
        <li>我是程序员0</li>
        <li>我是程序员1</li>
        <li class="three">我是程序员2</li>
        <li>我是程序员3</li>
        <li>我是程序员4</li>
    </ul>
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        /* 选取第一个元素 :first*/
        $('li:first').css('font-size', '30px');
        /* 选取最后一个元素 :last */
        $('li:last').css('font-weight', '700')
        /* 选择出去不需要的其他的部分 */
        $('li:not(.three)').css('color', 'green');
        /* 选择索引为偶数的元素 */
        $('li:even').css('background', 'pink');
        /* 选择索引为奇数的元素 */
        $('li:odd').css('background', 'gray');
        /* 选择索引等于 指定 index 的元素 */
        $('li:eq(0)').css('background', 'blue');
        /* 选择索引大于index 的元素开始，不含 index*/
        $('li:gt(1)').css('padding', '10px 20px');
        /* 选择索引小于index 的元素开始，不含 index*/
        $('li:lt(2)').css('margin-left', '50px');
        /* 选取所有标题元素 ，如h1-h6 */
        $(':header').css('background', 'red');
        /* 选取当前获取光标的元素 */
        $(':focus').css('background', 'red');
        
        /* 选择所有动画 */
        $('div').animate({
            width: '800px',
            height: '200px'
        }, 'slow')
        $(':animated').css('background', 'red');

注意事项：

1.特殊符号需要加转义字符 \\

2.选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

<div id="id#a">aa</div>
<div id="id[2]">cc</div>
<script>
//特殊符号的转义 \\
$('#id\\#a').css('background', 'red')
$('#id\\[2\\]').css('background', 'pink')
</script>

三、可见性过滤选择器

<body>
    <div id="id#a">aa</div>
    <div id="id[2]">cc</div>
    <ul>
        <li>我是11111</li>
        <li style="display: none;">我是22222</li>
        <li>我是33333</li>
        <li>我是44444</li>
    </ul>
    <script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
    <script>
        //可见性选择器
        $("li:hidden").show();
        $("li:visible").hide();
    </script>
</body>

四、jQuery基本操作

1.同时设置多个属性css({name:value, name:value,name:value…}) ;

注意：设置多个属性时，是用花括号，name须用驼峰命名法

 <style>
        .dty {
            margin: 0 auto;
        }
</style>
<div></div>
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
     /* 设置多个属性css({name:value, name:value,name:value…}) ;
     */
     //这里是花括号以对象的形式传入，名字须用驼峰命名法
     $('div').css({
            width: '100px',
            height: '200px',
            backgroundColor: 'pink'
     })
</script>

2.追加样式

追加一个样式：$(selector).addClass(class);

追加多个样式：$(selector).addClass(class1 class2 … classN);中间空格分隔

<style>
        .dty {
            margin: 0 auto;
        }
</style>
//追加样式
$('div').addClass('dty')
//原生追加样式的方法，原生和jQuery不可混合使用
document.querySelector('div').classList.add('dty');

3.移除样式

移除单个样式：$(selector).removeClass("class") ;

移除多个样式：$(selector).removeClass("class1 class2 … classN ") ;

$('div').click(function () {
       $('div').removeClass("dty")
})

4.切换样式

toggleClass()

模拟了addClass()与removeClass()实现样式切换的过程

hasClass( )方法来判断是否包含指定的样式，如果存在返回true，不存在返回false;

  //切换样式
        $('div').click(function () {
            $('div').toggleClass("dty")
        })

等价于下面的方法：

$('div').click(function () {
      var flag = $('div').hasClass('red');
          if (flag) {
                $('div').removeClass("red");
           } else {
                $('div').addClass('red')
           }
})

5.内容操作

（1）HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

（2）标签内容操作

text()可以获取或设置元素的文本内容


<div></div>
<div></div>
<div></div>
<input type="text" name="" id="">
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
        /* 1.html(content)可以对HTML代码进行操作，类似于JS中的innerHTML */
        $('div').html('<h1>我是中国人</h1>');
        //html()不带参数，获取第一个匹配元素的HTML内容或者文本内容
        console.log($('div').html()); //-->返回第一个

        //2.text(content)方法不识别标签，不解析标签
        $('div').text('<h1>我是中国人</h1>');
        //获取所有匹配元素的文本内容
        console.log($('div').text()); //--->返回所有div里的值

        //3.val()可以获取或设置元素的value属性值，主要针对表单元素的
        //val(content)设置value值；
        $('input').val("你好！！！");
        //val()不加参数，用来获取value值；
        console.log($('input').val());
</script>