使用原生JS方式获得的页面结点对象我们可以简称为DOM对象,
使用jQuery核心函数获得的对象我们可以简称为jQuery对象,
DOM对象和jQuery对象之间的方法和属性是不通用
DOM对象如何调用jQuery函数 ? DOM对象转换为jQuery $(DOM)
jQuery对象如何调用DOM对象的属性和方法? jQuery转换为DOM对象 get(0) [0]
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
$(function(){
//1 原生JS获取页面元素 原生DOM对象
var el=window.document.getElementById("d1")
console.log(el.innerText)
//2 jQuery方式获取页面元素 jQuery对象
var el1=$("#d1")
console.log(el1.text())
//DOM对象和jQuery对象之间的方法和属性是不通用
//DOM对象如何调用jQuery函数 ? DOM对象转换为jQuery $(DOM)
console.log($(el).text())
//jQuery对象如何调用DOM对象的属性和方法? jQuery转换为DOM对象 get(0) [0]
console.log(el1[0].innerText)
console.log(el1.get(0).innerText)
})
</script>
</head>
<body>
<div id="d1">测试文字</div>
</body>
</html
注意:
使用原生JSDOM对象转换成jQuery对象方式是$(dom对象)
jQuery对象转换成DOM对象的方式是jQuery对象[0]、.get(0)
jQuery的迭代遍历方式
jQuery给我们封装了一个快捷遍历元素的方法
each每拿出一个元素 都会执行一次内部的function
i 当前元素的索引
e 当前元素 DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
$(function(){
var el=$("li")
console.log(el)
for(var i=0;i<el.length;i++){
console.log(el[i].innerText)
}
/*遍历所有元素的方法*/
/*
each每拿出一个元素 都会执行一次内部的function
i 当前元素的索引
e 当前元素 DOM对象
*
* */
el.each(function (i,e){
console.info(i+'>>>'+$(e).text())
})
$.each(el,function (i,e){
console.info(i+'>>>'+$(e).text())
})
})
</script>
</head>
<body>
<ul>
<li>AI</li>
<li>Python</li>
<li>大数据</li>
<li>JAVA</li>
<li>前端</li>
</ul>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/123426.html
