1.开始jQuery的学习之旅
1.1.jQuery简介
JQuery是继Prototype之后又一款非常优秀的JavaScript框架,由John Resig创建于2006年1月。jQuery体积小,运行速度快,它独有的极为强大的选择器,使得页面元素的查找变得非常简单,其出色的DOM操作、可靠的事件处理、完善的浏览器兼容性和链式操作等优点。
Jquery本身也是JS,只不过是对原生的JS进行封装,形成了一个JS的开发库!
JQuery官方介绍:
1.2.jQuery简介
JQuery的核心理念是:“write less, do more”,即:写得少,做得多!
jQuery独特的选择器、链式的DOM操作、可靠的事件处理机制和封装完善的Ajax都是其他JavaScript框架望尘莫及的。
2.jQuery快速入门
2.1.第1个jQuery程序
需求:当页面加载完成之后,alert弹出"Hello World!"。
准备:新建Web工程:jquery,新建测试目录和html文件
2.1.1.window.onload加载
部署到tomcat,测试
http://127.0.0.1:8080/jquery/a_quickstart/01_helloworld.jsp
2.1.2.jQuery的ready加载
1.引入jQuery
a.在项目中加入jQuery的js文件
b.将文件引入到页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入JQuery的开发库-->
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
//页面加载的时候执行
//window.οnlοad=function () {
//alert("Hello,JavaScript!!!");
//}
/**
* 01- 页面加载的时候执行
*/
jQuery(window).ready(function () {
alert("标准的页面加载事件写法1!");
});
/**
* 02- 页面加载的时候执行
*/
jQuery(document).ready(function () {
alert("标准的页面加载事件写法2!");
});
/**
* 03-简化写法
*/
$(document).ready(function () {
alert("标准的页面加载事件写法3!");
});
/**
* 04-终极简化写法
*/
$(function () {
alert("标准的页面加载事件写法4!");
});
</script>
</head>
<body>
</body>
</html>
2.1.3.window.onload和jQuery的ready区别
代码示例:
<script type="text/javascript">
// 页面加载完成之后执行
window.onload = function() {
alert("Hello World!---------传统js方式");
};
// 赋值操作,会覆盖之前的onload
window.onload = function() {
alert("Hello World!---------传统js方式2");
};
/*
代码解析:
jQuery()
这是jQuery的核心函数,可以把这个函数理解为一个工厂,生产出来的是一个jQuery对象
jQuery(document)
把document转换为jQuery对象
jQuery(document).ready(回调函数);
既然是jQuery对象,就可以调用jQuery对象中的方法!
ready(回调函数),这个方法的作用是:DOM载入就绪后,执行回调函数中的代码
*/
// 不会覆盖windown.onload
jQuery(document).ready(function() {
alert("Hello World!---------jquery方式");
});
// 不会覆盖之前的ready
jQuery(document).ready(function() {
alert("Hello World!---------jquery方式2");
});
</script>
运行结果:
alert("Hello World!---------jquery方式111");
alert("Hello World!---------jquery方式222");
alert("Hello World!---------传统js方式222");
结论:先按顺序执行jQuery的每一个ready事件,最后执行最后一次绑定的window.onload事件
2.1.4.jQuery的别名$
为了简化代码,jQuery定义了一个全局的变量
作为别名来代替
j
Q
u
e
r
y
,即
作为别名来代替jQuery,即
作为别名来代替jQuery,即=jQuery,$是jQuery的别名
例如,jQuery(document).ready(回调函数); 可以简写为 $(document).ready(回调函数);
2.2.jQuery的核心函数
-
jQuery(callback) //页面onload函数,相当于jQuery(document).ready(callback)
-
jQuery(html[, prop]) //将html片段转换为jQuery对象$(“
1”)<script type="text/javascript"> //JS DOM标签转换化 Jquert中的对象 var t=jQuery("<input type='button' value='哈哈'/>"); alert(t.val()); //简写 var t=$("<input type='button' value='哈哈'/>"); alert(t.val()); </script> 注意: JS和Jquery不能混用!可以把JS对象转为Jquery对象!
-
jQuery(selector [, context]) //根据选择器查找页面元素,默认查找整个文档document
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.js"></script> <script type="text/javascript"> //JS DOM标签转换化 Jquert中的对象 //var t=jQuery("<input type='button' value='哈哈'/>"); //alert(t.val()); //简写 var t=$("<input type='button' value='哈哈'/>"); //alert(t.val()); //页面加载的时候执行 $(function () { //标签选择器 $("h1").css("color","red").css("background","green"); //ID选择器 $("#h").css("color","red"); }); </script> </head> <body> <h1>哈哈</h1> <h2 id="h">呵呵</h2> <h2>呵呵</h2> </body> </html>
2.2.1.$(callback):页面加载完成事件
用法:
简化过程:
jQuery(document).ready(callback) ——> $(document).ready(callback) ——> $(callback)
2.2.2.$(html代码):将html转换为jQuery对象
用法:
3.2.3.$(selector):根据选择器查找页面元素
用法:
3.3.jQuery对象和DOM对象
3.3.1.jQuery对象和DOM对象的区别
什么是jQuery对象?
jQuery对象是jQuery框架独有的,通过jQuery的核心函数$(selector)获取。
selector也可以是一个DOM对象,jquery会把DOM对象转换为jQuery对象
什么是DOM对象?
DOM的全称是"Document Object Model",即文档对象模型,而DOM对象指的是
某个或某些具体的节点对象,通过document.getElementXXX()获取。
两者之间的区别?
jQuery对象只能使用jQuery对象的属性和方法,不能直接使用DOM对象的属性和方法;
同样,DOM对象只能使用DOM对象的属性和方法,不能直接使用jQuery对象的属性和方法。
两种对象的属性和方法不通用!
jQuery对象在使用其属性和方法的时候,实际上底层使用的依然是DOM对象中的属性和方法。
那么,在页面中如何区分jQuery对象和DOM对象呢?在开发中有个约定:在jQuery对象的前面加$,例如:
var $mydiv = $(“#mydiv”); // $mydiv是jQuery对象
var mydiv = document.getElementById(“mydiv”); // mydiv是DOM对象