$(function(){ $("#mydiv").click(function(){ //从dom到jquery的转变
var mydiv = document.getElementById("mydiv"); $(mydiv).text("8888"); }); });
$(function(){ $("#mydiv").click(function(){ //document属于dom的根节点
alert( $(document) ); alert( $(document).text() ); //通过id获取jQuery对象
alert( $("#mydiv").text() ); //通过class获取jQuery对象
alert( $(".mydiv").text() ); alert( $(".mydiv").length ); //通过标签名获取jQuery对象
alert( $("a").text() ); alert( $("a").length ); //一次获取多个对象
alert( $("#a1,#a2,#a3").text() ); alert( $("#a1,#a2,#a3").length); //设置文本内容
$("#mydiv").text("你好") ; //text()和html()的差别
alert( $("#mydiv").text() ); alert( $("#mydiv").html() ); $("#a08a").html("<a href='http://www.163.com'>
网易</a>");
//val()方法当set和get使用
alert( $("#mydiv").val() ); $("#mydiv").val('你好呀'); //css()方法
$("#mydiv").css("border","3px dotted blue"); //attr()方法
alert( $("#mydiv").attr('style') ); $("#mydiv").attr('style',"background:green"); $('body').attr("style","padding:0;margin:0"); }); });
$(function(){ $("#mydiv").click(function(){ //旧版本是.size()方法，新版本改为.length
alert( $("div").length ); //index()返回对象所在包装集的下标，注意index(int)并不会返回对应
坐标的对象 var arrayList = $("div");//返回多个jQuery对象
var oneElement = $("#a02");//返回单一对象
alert ( arrayList.index( oneElement ) ); alert( $(arrayList[1]).text() ); //get或者[]获出来的是DOM对象
alert( $(arrayList[2]).text() ); alert( $(arrayList.get(2)).text() ); //添加元素
$("body").append($("<a href='#'></a>").text("123")); arrayList.css("background","yellow"); $("a").clone().appendTo(document.body); //not()去掉
$("div").not("#a01,#a02").css("background","green"); //filter()仅保留
$("div").filter("#a01,#a02").css("background","green"); //slice(2,4)取中间
$("div").filter(2,4).css("background","green"); //遍历
$("#a01,#a02,#a03").each(function(){ alert( $(this).text() ); }); }); });
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"> $(function(){ $("#a01").click(function(){ //$(a b) //form里面的input
$("form input") .css("border","3px solid blue") .css("background","yellow") .val("ok"); }); $("#a02").click(function(){ //$(a>b) //form里面的input
$("form>input") .css("border","3px solid blue") .css("background","red") .val("子元素"); }); //$(span+input) [同辈，注意返回的是input]
$("#a03").click(function(){ $("span+input").css("background","yellow"); }); $("#a04").click(function(){ $("span~input").css("background","yellow") .hide(); }); }); </script>
</head>
<body>
<form id="frm">
<span>姓名：</span>
<input type="text" value="1">
<div>
<input type="text" value="2">
</div>
<input type="text" value="3">
<input type="text" value="4">
</form>
<input type="text" value="5">
<div id="a01">层次选择器__$(a b) [后代元素，不管层次]</div>
<div id="a02">层次选择器__$(a>b) [子元素]</div>
<div id="a03"> 层次选择器__$(a+b) [紧邻同辈,注意别看到a+b就认为返回内容是包含a和b2个，返回的是b] </div>
<div id="a04"> 层次选择器__$(a~b) [相邻同辈,同辈就行，不需要紧邻] </div>
</body>
