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对象
3.jQuery选择器
3.1.概述
我们学习jQuery,主要是学习jQuery中的方法,来简化js开发。因此,学习jQuery主要是学习jQuery对象的各种方法,但前提是要先获取jQuery对象,即操作必先选中(获取),一切从选择器开始!
如何选中元素?
语法:$(selector)
补充:context可选的,如果指定,就会在指定的元素下查找。默认值:document.
选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM、Ajax等各种操作都依赖于选择器。
选择器的语法可参考官方手册的选择器章节,如下图所示
jQuery内部提供了三大类共9种选择器
- 基本选择器
- 层级选择器
- 过滤选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器
过滤选择器一般用于对其他选择器的补充(缩小选择范围)
3.2.基本选择器:第1大类
基本选择器,是jQuery所有选择器的基础,通过元素的id属性、class属性、标签名称进行选择。
基本选择器的语法和用法:
- #id(id选择器)根据id属性查找一个元素例如:$("#mydiv")
- element(标签选择器) 根据元素标签名称查找所有元素,例如: $(“div”);
- .class(类选择器) 根据class属性查找元素,例如:
$(".myclass");
原理是遍历所有的DOM节点,然后逐个判断是否使用了
指定的类选择器,可以想象,如果页面上节点很多的情况下,效率很低,因此类选择器通常和标签选择器同时使用,
例如:$("div.myclass")
,意思是获取所有使用了.myclass类的div元素,这样,jQuery会先找页面中的所有div,然后再遍历判断,大大减少了循环次数,从而提高了查询效率! - selector1,selector2,selectorN(组合选择,多选,混用选择器)将每一个选择器匹配到的元素合并后一起返回
例如:$("#myinput,div,p.pClass");
意思是获取页面中ID为myinput的元素和所有的div元素和使用了.pClass的p元素
此种方式获取的是所有匹配元素的并集 *
匹配所有元素 例如 $("*"); 意义不大!
【示例】
<div>DIVAAAA</div>
<div class="demo">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="demo">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="demo">PBBBB</p>
<p>PCCCC</p>
需求:
获取页面中ID为foo的元素的内容
通过each()遍历所有div,在每个div元素前 加入"hello"
通过size() 或 length 打印页面中 class属性为 demo 的元素数量
获取class属性为demo的div的个数
相关函数参考文档:一定要自己点进去看看,里面有例子
脚本代码:
<script type="text/javascript">
jQuery(function($) {
//获取页面中ID为foo的元素的内容
//alert( $("#foo").html() );
//通过each()遍历所有div,在每个div元素前 加入"hello"
// each中的函数中的i表示div的索引,o表示当前div对象:DOM对象!DOM对象!DOM对象!
/* $("div").each(function(i, o) {
// this === o 表示当前DOM对象
var newHTML = "hello" + $(this).html();
$(this).html(newHTML);
}); */
//$("div").prepend("hello");
//$("div").append("world");
//通过size() 或 length 打印页面中 class属性为 demo 的元素数量
alert( $(".demo").size() );
alert( $(".demo").length );
//获取class属性为demo的div的个数
alert( $("div.demo").length );
});
</script>
交集和并集选择器:
<!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">
$(function () {
// 小标为0的li 双击事件
$("li:eq(0)").dblclick(function () {
//并集选择
//$("#xx,.ff,li:eq(5)").css("color","green").css("font-family","楷体");
//交集选择器
$("li.ff").css("color","green").css("font-family","楷体");
});
});
</script>
</head>
<body>
<ul>
<li>貂蝉</li>
<li id="xx">西施</li>
<li >王昭君</li>
<li>杨玉环</li>
<li class="ff">凤姐</li>
<li>芙蓉姐</li>
<p class="ff">哈哈</p>
</ul>
</body>
</html>
3.3.层次选择器:第2大类
层次选择器是根据DOM元素的层级关系进行选择。
参考文档:
DOM元素层级的位置关系:
ancestor 祖先元素(父亲、爷爷、。。。。)
descendant 后代元素(儿子、孙子。。。。)
parent 父元素
child 子元素
prev 上一个元素
next 下一个元素
siblings 兄弟(平级的)元素
注意:每个单词都代表任意选择器!
例如,有如下html代码:
<form id="myform">
<label>Name:</label>
<div>