jquery和jsDom的区别和转换
16lz
2021-01-22
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery-1.11.1.js"></script>
<script>
//----------------------------jquery中的Dom对象和js中的dom对象区别和联系----------------------//
//入口函数
$(document).ready(function(){
//jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
var jqbox = $("#box");
var jqCbox = $(".box");
var jqdiv = $("div");
console.log(box);
console.log(jqbox);
console.log("------------");
console.log(cbox);
console.log(jqCbox);
console.log("------------");
console.log(div);
console.log(jqdiv);
//原生js中没有css();
// div.css("width: 100px;height:100px;background-color:red;margin:10px;");
//jquery中有css(); 原因就是因为:jquery有一层功能皮肤。可以理解相当于js套了一层皮肤
jqdiv.css({"width": 100,"height":100,"background-color":"red","margin":10});
//---------------------------------jquery中DOM对象和js中DOM对象的转换--------------------------------//
//如果想要那种方式设置属性或方法,必须转换成该种类型 。
//1.js对象转换成jquery对象 $(js对象);
//2.jquery对象转换成js对象 1).jquery对象[索引值] 2).jquery对象.get(索引值)
//jquery对象是一个数组。数组中包含着原生JS中的DOM对象。
//获取相关元素js写法
var box = document.getElementById("box");
var cbox = document.getElementsByClassName("box");
var div = document.getElementsByTagName("div");
//获取jquery相关对象
var jqbox = $("#box");
var jqCbox = $(".box");
var jqdiv = $("div");
console.log(box);
console.log(jqbox);
console.log("------------");
console.log(cbox);
console.log(jqCbox);
console.log("------------");
console.log(div);
console.log(jqdiv);
//转换成jquery对象
box = $(box);
cbox = $(cbox);
div = $(div);
console.log(box);
console.log(jqbox);
console.log("------------");
console.log(cbox);
console.log(jqCbox);
console.log("------------");
console.log(div);
console.log(jqdiv);
//转换成了jquery对象,皮上面有功能可以直接调用。
div.css({"width": 100, "height": 100, "border": "1px solid red"});
box.css("background", "red");
cbox.css("background", "yellow");
});
</script>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>
</body>
</html>
更多相关文章
- 将php jsonencode数组结果显示为ajax成功函数
- 如何使用XMLHttpRequest向服务器发送数组
- jQuery的deferred对象详解
- 【JavaScript】jQuery+ajax传递json数组(局部响应处理)
- 创建一个未排序的数组,其中包含重复元素和唯一元素的总和
- js不使用jquery,调用ajax,传递数组,并接受,
- 使用jQuery.ajax post函数将javascript数组中的数据传递给服务器
- jQuery对象和DOM对象
- 将JavaScript数组转换成逗号分隔列表的简单方法?