$(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>
