Jquery_基础(一) 常用方法与选择器

一.Jquery常用方法：

$(function(){
    //掌握$()  以及function(){}  结合
    $("#a01").click(function(){
        alert('hi');
    });
});

首先得导入<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

jquery-3.2.1.min.js：http://jquery.com/download/

 $():工厂函数，$("a#a01"):选择器     .click()事件   ,function(){alert('hi');}回调函数

接下来让我们来学习一些Jqueryde的常用方法

一.

//$() 是工厂函数，返回的是一个jQuery对象,括号里面的叫表达式
    $("#a02").click(function(){
        //alert(   $("#a02")  );
        
        //document明显就是整个DOM的根节点
        alert(  $(document)  );
        alert(  $(document).text()  );
        
    });

二.

//2、返回的jQuery对象可以是多个的
    $("#a04").click(function(){
        //alert( $(".c04")  );
        alert( $(".c04").text()  );
        alert( $(".c04").length  );
    });

三

//通过标签名获得多个标签，CSS也经常这样使用的
$("#a05").click(function(){
alert( $("a").text() );
alert( $("a").length );
});

四

//text方法
    $("#a06").click(function(){
        alert($("#a01,#a02,#a03").text() );
        alert($("#a01,#a02,#a03").length );
    });

五.

//多个jquery对象
    $("#a07").click(function(){
        //alert($("#a07").text());
        //$("#a07").text('你好');
        alert($("#a03,#a05,#a06").text('你好') );
    });

六

//html方法
    $("#a08").click(function(){
        alert( $("#a08").text() );
        alert( $("#a08").html() );
          
        //$("#a08").html("<a href='www.163.com'>网易</a>")
        $("#a08a").html("<a href='www.163.com'>网易</a>")
    });

七

//val方法
    $("#a09").click(function(){
        alert($("#b09").val());
        $("#b09").val('2008-08-21');
    });

八

//attr方法 对属性的更改
    $("#a11").click(function(){
        alert($("#a11").attr("style"));
        $("#a11").attr("style","background:green");
    });

 二.选择器

     层次选择器——$(a b)[后代元素，不管层次]

     

$("#a01").click(function(){
           //$(a b)a里面的所有b
           $("form input")
           .css("border","2px solid blue")
           .css("background","yellow")
           .val("ok");
       }); 

     层次选择器——$(a>b)[子元素]

$("#a02").click(function(){
           //$(a>b)子元素
           $("form>input")
           .css("border","2px solid blue")
           .css("background","red")
           .val("子元素");
       });

 层次选择器——$(a+b)[紧邻的同辈，注意不要看到a+b就认为返回内容是a和b两个，返回的是b]

$("#a03").click(function(){
           //$(a+b)找到a旁边的b
           $("span+input")
           .css("border","2px solid blue")
           
       });

层次选择器——$(a~b)[同辈就行，不需要紧邻]

$("#a04").click(function(){
           //$(a+b)找到a旁边的b
           $("span~input")
           .css("background","pink")
           
       });