文章目录
1.JQuery快速入门
2.JS对象和JQuery对象的转换
2.1 js对象转换为 jquery对象
2.2 将jquery对象转换为js对象
1.JQuery快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
</body>
<script>
//使用JQuery获取元素对象
var div1 = $("#div1");
//获取标签体的内容
alert(div1.html())
var div2 = $("#div2");
alert(div2.html());
</script>
</html>
2.JS对象和JQuery对象的转换
2.1 js对象转换为 jquery对象
js–>jquery:${js对象}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//1.通过js方式获取名称div的所有html元素对象
var divs = document.getElementsByTagName("div");
//将标签体内容改为aaa
for(var i=0;i<divs.length;i++){
// divs[i].innerHTML="aaa";
//将js对象放入$()中即为jquery对象
$(divs[i]).html("ccc");
}
</script>
</body>
</html>
2.2 将jquery对象转换为js对象
jquery–>js:juery对象[索引]或者jquery对象.get(索引)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//2.通过JQuery的方式获取名称div的所有html元素对象
var $divs = $("div");
//将标签体内容改为bbb
$divs.html("bbb");
$divs[0].innerHTML="ddd";
$divs[1].innerHTML="eee";
</script>
</body>
</html>