一.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") });