<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/a1.css">
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="box">
box
</div>
<div id="box1">
box1
</div>
<div id="box2">
box2
</div>
</body>
<script src="./js/a1.js">
//$() = jQuery();
//$(".title") 选择对象
//click() 触发条件
//function(){} 操作函数
//.是运算符
//DOM对象，对应DOM对象下的属性和方法 this
//jquery对象，对应jquery对象下的属性和方法 $(this)，jquery对象前面有个$
//1.each()
$("div").each(function(){ //each()遍历$("div")的返回值，有三个div
alert($(this)); //object Object, jquery对象
//alert(this); //返回this就是这个div对象object HTMLDivElement，DOM对象
//alert(this.innerHTML); //DOM对象返回div中的内容
});
//2.size(), length
$("div").size(); //得到获取的标签的长度，也可以说$("div")数组的长度
$("div").length; //得到获取的标签的长度
//3.DOM对象与jQuery对象互转
var box = document.getElementById("box"); //DOM定义变量
var box1 = $("#box"); //jquery定义变量
alert(box); //返回object HTMLDivElement
alert(box.innerHTML); //返回box
alert($(box)); //返回object Object, *** DOM对象转jquery对象
alert($(box).html()); //返回box
alert($("div")); //返回object Object
alert($("div").html()); //值返回一个值box
alert($("div").get(0)); //返回object HTMLDivElemet *** jquery对象转DOM对象，因为这样的div有三个，0 1 2
$("div").click(function(){
alert(this.innerHTML);
});
$("div").click(function(){
alert($(this).html());
});
</script>
</html>
时间： 2024-10-03 16:35:18