jquery(一)css选择器独有表达式选择多种筛选方式链式操作取值赋值合体

最新推荐文章于 2023-01-31 22:39:36 发布

hu炸炸

最新推荐文章于 2023-01-31 22:39:36 发布

阅读量351

点赞数

分类专栏： C#

本文链接：https://blog.csdn.net/qq_37959151/article/details/105590099

版权

C# 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

jquery(一)

基础css选择器

 <script>

     $(function() {
         $("li").css("backgroundColor", 'yellow');
         $("ul li").css('background-color', 'red');
         $("li:eq(4)").css('background-color', 'green');   //选择下标是2的
         $("[name=text1]").css('background-color', 'aqua');   //name选择
         //$("li:first").addClass(".box");
     });
</script>

独有表达式选择

<script>

    $(function() {

        $("ul li:first").css('background-color', 'purple');  //第一个
        $("li:even").css('background-color', 'hotpink');  //偶数
        $("li:odd").css('background-color', 'saddlebrown');   //奇数

    });
</script>

多种筛选方式

 <script>

     $(function() {


         $("li.box").css('background-color', 'yellowgreen');  //li下class为box的
         $("li").filter('.box').css('background-color','red');//li下class为box的

           
     });
</script>

jquery写法

链式操作

 <script>
     $(function() {
         $("h2").click(function() {
             alert("hello");
         })
         $("h2").mouseover(function() {
             this.style.backgroundColor = 'red';
         })
         $("h2").mouseout(function() {
             this.style.backgroundColor = 'blue';
         })

         //链式
         $("h2").click(function() {
             alert("hello");
         })
         .css('background-color', 'red')
         .mouseover(function() {
             this.style.backgroundColor = 'blue';
         })

     })
</script>

取值赋值合体

 <script>
     $(function () {
         $("li").click(function() {
             alert($("#div1").html());  //取得是里面的代码
             alert($("input").val());  //取值是文本
         });


     })
</script>