dom对象和jq对象
dom使用js语法创建的对象是dom对象,也就是js对象。例如 let obj = document.getElementById(‘xx’)
obj就是dom对象
例如 $(‘div’)
内部是 {
0: dom对象,
1: dom对象,
2: dom对象,
…
}
只是内部的键是从0开始的,所以用起来像数组,但是是不能用数组方法的哦
typeof jq对象 //object
dom对象可以和jq对象相互转换:$(dom对象)
例如 上面的obj可以通过 $(obj) 转换成jq对象
jq对象也可以转为dom对象,从伪数组中取出的一个对象,就是dom对象,使用[x]或get(x)
例如 $(‘div’)[0] 或者 $(‘div’).get(0)
转换目的
使用对象的方法,要使用jq提供的函数必须是jq对象才行,dom对象可以使用dom的属性或方法。
例如
<input type="text" value="hello">
<script>
//获取input的value
//jq
console.log($('input').val());//hello
//js
console.log(document.querySelector('input').value);//hello
</script>
<!-->开始jq的学习<-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<script type="text/javascript">
//dom加载完毕后执行内部内容,与onload的区别是后者会等所有资源(css,图片等)加载完后执行
//为了避免获取不到dom节点,尽量把代码写在代码区中
$(document).ready(function(){
//代码区
console.log('h')
})
// 另外三种书写方式
$(function(){console.log('h1')})
jQuery(function(){
console.log('h2')
})
window.jQuery(function(){console.log('h3')})
</script>
</body>
</html>
链接: jquery快速入门(二)选择器和过滤器.