JQuery对象和JS对象区别与转换
1. JQuery对象在操作时,更加方便。
2. JQuery对象和js对象的方法不通用的.
3. JQuery对象和js对象两者之间如何相互转换
* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="id_div1">div1...</div>
<div id="id_div2">div2...</div>
<script>
//一、采用js方式进行处理.通过js方式来获取名称叫div的所有html元素对象
var js_div = document.getElementsByTagName("div");
alert(js_div.length); //可以将js_div当做数组使用,我么测试其长度,结果为:2
//将div标签体中的所有内容变为aaa
for(var i=0;i<js_div.length;i++){
js_div[i].innerHTML = "aaa";
}
alert("js->JQuery")
//js对象与JQuery对象之间相互转换。js ->JQuery,格式: $(js对象)
$(js_div[1]).html("bbb");
//二、采用JQuery方式进行处理。通过JQuery方式来获取名称叫div的所有html元素对象
var JQ_div = $("div");
alert(JQ_div.length);//JQ_div也可以作为数组使用
//将div标签体中的所有内容改为ccc
for(i=0;i<JQ_div.length;i++){
JQ_div.html("ccc");
}
alert("JQuery->js");
//js对象与JQuery对象之间相互转换。JQuery -> js,格式:JQuery对象[索引].属性或方法 <=>JQuery对象.get(索引).属性或方法
JQ_div[0].innerHTML="ddd";
JQ_div.get(1).innerHTML="eee";
</script>
</body>
</html>