jQuery

奕の辰

已于 2023-03-20 19:52:36 修改

阅读量386

点赞数

分类专栏：前端文章标签： javascript jquery 前端

于 2021-11-10 15:59:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51873764/article/details/121250261

版权

前端专栏收录该内容

13 篇文章

订阅专栏

jQuery20210927

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: \dotsction(){，速度快，多个$ (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>