"这篇博客深入探讨了jQuery与DOM对象之间的主要区别，包括获取方式、打印结果、内部存储方式以及操作属性和方法的不同。文章通过实例展示了jQuery核心函数的多种用途，如作为文档加载完成后的回调、创建元素、选择元素等。同时，对比了`window.onload`与`$(function(){}
jQuery0927
jQuery
j:JavaScript
Query：查询
辅助开发JavaScript的JS框架
jQuery核心函数
DOM对象和jQuery对象的区别
$();根据存入方法的参数不同，核心函数会发挥不同的效果。
区别1：获取方式不同
//通过document.getElementByXXX方法 获取到的对象 都是DOM对象
var btnObj = document.getElementById('btn');
//通过jQuery核心函数获取到的对象，都是jQuery对象
var $btnObj = $('#btn');
区别2：打印结果不同
DOM对象
console.log(btnObj);//<button id="btn">点击我</button>
alert(btnObj);//[object HTMLButtonElement]
jQuery对象
console.log($btnObj); //init [button#btn, context: document, selector: '#btn']
alert($btnObj); //[object Object]
区别3：jQuery对象以数组形式保存DOM对象
区别4：DOM对象，绝大部分情况下操作属性；jQuery对象，绝大部分情况下，调用方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function() {
// var btnObj = document.getElementById('btn');
// console.log(btnObj);//<button id="btn">点击我</button>
// alert(btnObj);//[object HTMLButtonElement]
// btnObj.onclick = function() {
// alert('id="btn"的按钮被点击');
// }
// }
$(function() {
//在jQuery核心函数中，存入function 等价于 window.onload = function() {
//在jQuery核心函数中，存入代表选择器的字符串 就会查找所有匹配的元素
var $btnObj = $('#btn');
console.log($btnObj); //init [button#btn, context: document, selector: '#btn']
alert($btnObj); //[object Object]
//绑定点击事件
$btnObj.click(function() {
alert('id="btn"的按钮被点击');
});
});
</script>
</head>
<body>
<button id="btn">点击我</button>
</body>
</html>
核心函数的4个作用
传入参数为[函数]时：在文档加载完成后执行这个函数;等价于window.onload
传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
$(function() {
$('#div1').append($("<b>Hello</b>"));
var divObj = document.getElementById('div1');
var $divObj = $(divObj);
console.log($divObj);
})
window.onload = function(){ 和 $(function(){ 区别
区别1:window.onload 需要等待页面所有元素的内容加载完毕后，才执行；$(function(){ 等待页面的文档结构加载完毕后，就执行。
区别2：window.onload速度慢，多个window.onload只会执行最后一个。KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){，速度快，多个(function(){按顺序从上到下执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
window.onload = function() {
alert('window.onload1');
}
window.onload = function() {
alert('window.onload2');
}
window.onload = function() {
alert('window.onload3');
}
$(function() {
alert('jQuery核心函数1');
})
$(function() {
alert('jQuery核心函数2');
})
$(function() {
alert('jQuery核心函数3');
})
</script>
</head>
<body>
<!-- <iframe src="https://www.hao123.com" width="100%" height="500px"></iframe> -->
</body>
</html>
jQuery和DOM对象操作差异
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
//DOM元素：都是通过属性
// window.onload = function() {
// document.getElementById('btn').onclick = function() {
// alert('提交按钮被点击');
// //DOM元素取值的操作
// var usernameObj = document.getElementById('username');
// var passwordObj = document.getElementById('password');
// var ageObj = document.getElementById('age');
// var messagebj = document.getElementById('message');
// var div1Obj = document.getElementById('div1');
// console.log("用户名 = " + usernameObj.value);
// console.log("密码 = " + passwordObj.value);
// console.log("年龄 = " + ageObj.value);
// console.log(messagebj.innerText);
// console.log(div1Obj.innerHTML);
// }
// document.getElementById('setValue').onclick = function() {
// alert('设置默认值按钮被点击');
// //DOM元素赋值的操作
// var usernameObj = document.getElementById('username');
// var passwordObj = document.getElementById('password');
// var ageObj = document.getElementById('age');
// var messagebj = document.getElementById('message');
// var div1Obj = document.getElementById('div1');
// usernameObj.value = 'admin';
// passwordObj.value = '123';
// ageObj.value = 30;
// messagebj.innerText = '<h1>这是一个提示信息</h1>';
// div1Obj.innerHTML = '<h1>这是一个提示信息</h1>';
// }
// }
$(function() {
$('#btn').click(function() {
alert('提交按钮被点击');
//jQuery对象取值的操作
var $usernameObj = $('#username');
var $passwordObj = $('#password');
var $ageObj = $('#age');
var $messageObj = $('#message');
var $div1Obj = $('#div1');
//jQuery对象获取value 用val()方法，不是value()方法 也不是value属性
console.log("用户名 = " + $usernameObj.val());
//undefined jQuery方法和DOM属性不能混用
console.log("用户名 = " + $usernameObj.value);
console.log("密码 = " + $passwordObj.val());
console.log("年龄 = " + $ageObj.val());
console.log($messageObj.text());
console.log($div1Obj.html());
});
$('#setValue').click(function() {
alert('设置默认值按钮被点击');
//jQuery对象赋值的操作
var $usernameObj = $('#username');
var $passwordObj = $('#password');
var $ageObj = $('#age');
var $messageObj = $('#message');
var $div1Obj = $('#div1');
//jQuery方法的特点：不传参数是取值，传参数是赋值
$usernameObj.val('admin');
$passwordObj.val('123');
$ageObj.val(30);
$messageObj.text('<h1>这是一个提示信息</h1>');
$div1Obj.html('<h1>这是一个提示信息</h1>');
});
})
</script>
</head>
<body>
<div id="div1" style="width: 100px;height: 100px;border: 1px solid black;">
<h1>这是信息</h1>
</div>
<form method="get" action="#">
用户名:<input type="text" name="username" id="username" /><br />
密码:<input type="password" name="password" id="password" /><span id="message" style="color: red;">
<h1>这是信息</h1>
</span> <br />
年龄：<select id="age">
<option value="10">10</option>
<option>20</option>
<option>30</option>
<option>50</option>
<option>90</option>
</select>
<button type="button" id="btn">提交</button>
<button type="button" id="setValue">设置默认值</button>
</form>
</body>
</html>
4662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
