jQuery入门笔记（知识的搬运工）-优快云博客

本文链接：https://blog.youkuaiyun.com/loading___JJ/article/details/102766049

本文全面介绍jQuery框架，涵盖其特点、封装原理、选择器、元素操作、事件机制、动画效果及表格操作等内容，适合初学者快速入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery

前序

本文只是笔记整理，适合Java学习时jQuery入门；
原创：尚学堂的高琪_java_300集中的jQuery章节；

jQuery介

JavaScript Query，是JavaScript的一个框架。本质上仍然js。

jQuery特点

支持各种主流的浏览器。
使用特别简单。
拥有便捷的插件扩展机制和丰富的插件

注意：
一定不要二合一操作
js、jQuery是动态的脚本语言，用来操作HTML的，让网页和用户之间互动
HTML用来格式化展示信息
CSS用来增加网页样式
都是由浏览器解析执行的
注意：
所有的网页都是存储在服务器端，运行在浏览器端。
所有的网页都是服务器实时的根据请求发送给浏览器执行的。
所有的网页数据可以实现动态的拼接。

jQuery的封装原理

js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。
使用对象封装，将代码封装到到对象中。但是对象如果被覆盖，则全部失效，风险极高。
使用工厂模式，将代码进行封装，但并没有解决问题。
匿名自调用，可以在页面加载的时候一次性调用，并且数据没有办法获取。
使用闭包和匿名自调用，将数据一次性挂载到window对象下。jQuery的选择器。
5.1 window.jQuery = window.$ = jQuery;（jQuery源码）
5.2.闭包原理：在全局区中不能获取函数体内的数据，使用更大作用域的变量记录较小作用域变量的值。

jQuery的选择器

基本选择器

id选择器: $("#uname")
标签选择器 : $(“input”)
类选择器 : $(".common")
组合选择器 : $(“h3,input”)

以下选择器可借助jQuery的API文档学习，以下链接可以获得：
jQuery 1.4中文API文档发布，chm格式

层级选择器
选择器
内容选择器
可见性选择器
属性选择器
子元素选择器
表单选择器
注意：
jQuery中选择器获取的是储存了HEML源对象的数组。
jQuery获取的元素对象不能直接使用js的内容，按照数组的取出方式将对象取出后可使用js的内容。
jQuery对我们提供了多种多样的的选择器来选择需要操作的HTML元素对象。

jQuery操作元素属性

获取:
1.1 对象名.attr(“属性名”) //返回当前属性值
1.2 注意此方式不能获取value属性的实时数据，使用对象名.val()进行获取。
修改
2.1 对象名.attr(“属性名”,“属性值”);

jQuery操作元素的内容

获取
1.1 对象名.html()//返回当前对象的所有内容，包括HTML标签。
1.2 对象名.text()//返回当前对象的文本内容，不包括HTML标签
修改
2.1 对象名.html(“新的内容”)//新的内容会将原有内容覆盖，HTML标签会被解析执行
2.2 对象名.text(“新的内容”)//新的内容会将原有内容覆盖，HTML标签不会被解析

jQuery操作元素的样式

使用css()
1.1 对象名.css(“属性名”)//返回当前属性的样式值
1.2 对象名.css(“属性名”,“属性值”)//增加、修改元素的样式
1.3 对象名.css({“样式名”:“样式值”,“样式名”:“样式值”……})//使用json传参，提升代码书写效率。
使用addClass()
2.1 对象名.addClass(“类选则器名”)//追加一个类样式
2.2 对象名.removeClass(“类选择器名”)//删除一个指定的类样式

jQuery操作文档结构

内部插入
1.1 append(“内容”) 将指定的内容追加到对象的内部
1.2 appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
1.3 prepend() 将指定的内容追加到对象的内部的前面
1.4 prependTo() 将制定的元素对象追加到指定的对象内容前面
外部插入
2.1 after 将指定的内容追加到指定的元素后面
2.2 before 将指定的内容追加到指定的元素前面
2.3 insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
2.4 insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
包裹
3.1 wrap 使用结构化标记包裹起来
替换只是主动还是被动之分
删除
5.1 empty() 删除所有子节点。
复制
6.1 clone() 生成副本

jQuery事件机制

元素对象.bind(“事件名”,fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
注意：
a)js中的是一次添加，多次添加时覆盖的效果；
b)jQuery是追加的效果，可以实现给一个事件添加不同的监听函数。
元素对象.unBind(“事件名”)//移除指定的元素对象的指定事件
注意：js方式添加的事件不能移除。
元素对象.one(“事件名”,fn)//给指定的元素对象添加一次性事件，事件被触发执行一次即失效。
注意：可以给事件添加多个一次性函数，unBind可以用来解绑
页面载入事件
a) js：$(document).ready(fn); window.load=fn; jQuery: $(fn);
b) 页面载入成功后会调用传入的函数对象
注意：此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。

jQuery动画效果

展现：$("#showdiv").show(3000 );
隐藏：$("#div01").hide(3000);
先显示再隐藏：$(“div”).toggle(3000);
下滑出现：$("#showdiv").slideDown(3000);
上滑出现：$("#div01").slideUp(2000);
谈出：$("#showdiv").fadeOut(3000);

jQuery操作表格

jquery操作checkbox
1.1 操作checkbox的选择状态使用prop()方法
1.1.1 prop(“checked”)//返回选择的状态，选择返回true,未选返回false
1.1.2 prop(“checked”,true)//置为选择状态
1.1.3 prop(“checked”,false)//置为未选状态
1.2 使用each进行遍历
1.2.1 对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数
1.3 this表示js对象
1.4 $(this)表示jQuery对象
1.5 parents(“标签名”)//获取指定的上级元素对象
jQuery操作表格

			//实现全选
				$(function(){
					//给按钮绑定单击事件
					$("#btn1").click(function(){
						//实现全选
						$("input[type='checkbox']").prop("checked",true);
					});
				})
			//实现取消选择
				$(function(){
					//给按钮绑定事件
					$("#btn2").click(function(){
						//实现全不选
						$("input[type='checkbox']").prop("checked",false);
					})
				})
			//反选
				$(function(){
					//给按钮绑定事件
					$("#btn3").click(function(){
						$("input[type='checkbox']").each(function(){
							//alert(this.checked);
							$(this).prop("checked",!$(this).prop("checked"));
						})
					})					

				})
			//选择奇数行
				$(function(){
					$("#btn4").click(function(){
						$("input[type=checkbox]:odd").prop("checked",true)
					})
				})
			//隔行变色
				$(function(){
					$("#btn5").click(function(){
						$("tr:odd").css("background-color","orange");
					})
				})
			//删除选中的行
				$(function(){
					$("#btn6").click(function(){
						$(":checkbox:checked").parents("tr").remove();
					})
					
				})
			//添加行---操作文档结构
				$(function(){
					$("#btn7").click(function(){
						$("tr:last").after("表格的格式");
					})
				})