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

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>

Jquery和js的关系

可以混用但不能‘混用’~