jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

夜间不睡觉的程序员

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量717

点赞数 3

分类专栏： Java基础

本文链接：https://blog.csdn.net/weixin_44012230/article/details/110749777

版权

Java基础专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、jQuery入门

1. 什么是jQuery

jQuery：顾名思义，就是JavaScript和查询（query），即是辅助JavaScript库。
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。

2. HelloWorld的编写

要想使用jQuery编写helloworld，首先要将jQuery相应版本的jQuery的js文件引入到界面中，然后再进行编写相应的代码。
1. $() ：调用$()方法，$()叫做jQuery的核心函数
2. 为$()方法传入一个function(){}作为参数：相当于window.onload()=function(){代码片段}
以下两段代码是等价的

window.onload()=function(){};
$(function(){};);

HelloWorld的编写代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Say HelloWorld!!!</title>
<script type="text/javascript" src="../js/jquery-1.11.2.js"></script>
<script type="text/javascript">
	// javascript版本
	window.onload = function(){
		var helloButton = document.getElementById("helloID");
		helloButton.onclick=function(){
			alert("HelloWorld");
		}
	}
	
	// jQuery版本
	$(function(){
		// 使用$();查找元素，使用.click来绑定单击响应函数，把单击响应函数作为click()的参数即可。
		$("#helloID").click(function(){
			alert("helloworld");
		});
	});
	
</script>
</head>
<body>
	<button id="helloID">SayHello</button>
</body>
</html>

3. $();核心函数

$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用这个函数。

3.1. 传入参数为[函数]时

$(function(){ });
文档加载完成时执行此方法，相当于window.onload。

3.2. 传入参数为[HTML字符串]时

$("<div>html</div>"); 根据字符串创建元素节点对象。

3.3. 传入参数为[选择器字符串]时

$("#id"); 根据选择器查找出元素节点对象。

3.4. 传入参数为[DOM对象]时

$(this);将dom对象包装为jQuery对象返回。

4. DOM对象与jQuery对象的相互转换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM/jQuery对象相互转换</title>
<script type="text/javascript" src = "../js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
	// 使用DOM对象调用DOM方法
	var btn01 = document.getElementById("btn01");
	btn01.onclick=function(){
		var testDiv = document.getElementById("testDiv");
		testDiv.style.color="red";
	};
	// 使用DOM对象调用jQuery方法
	var btn02 = document.getElementById("btn02");
	btn02.onclick = function(){
		var testDiv = document.getElementById("testDiv");
		$(testDiv).css("color","blue");
	};
	// 使用jQuery方法调用jQuery方法
	$("#btn03").click(function(){
		$("#testDiv").css("color","green");
	});
	// 使用jQuery方法调用DOM方法
	$("#btn04").click(function(){
		$("#testDiv")[0].style.color="pink";
	})
});
	
</script>
</head>
<body>
	<div id="testDiv">钓鱼岛是中国的！！！</div><br><br><br>
	
	<button id="btn01">使用DOM对象调用DOM方法</button><br><br><br>
	<button id="btn02">使用DOM对象调用jQuery方法</button><br><br><br>
	<button id="btn03">使用jQuery方法调用jQuery方法</button><br><br><br>
	<button id="btn04">使用jQuery方法调用DOM方法</button>
</body>
</html>

2. jQuery选择器

选择器就是一个字符串，我们把选择器字符串传入核心函数$()，就会返回要查的对象。

2.1. 基本选择器

类型	用法
#id	根据id选出元素，$(“id值”)
element	根据元素名选出元素，$(“标签名”)
.class	根据元素的类的值选出元素，$(".类值")
*	选出所有元素，$("*")
selector1,selector2,selectorN	把各个选择器选出的元素合并起来并返回

详细使用方法见jQuery帮助文档

2.2. 层级选择器

类型	用法
ancestor descendant	在给定的祖先元素（ancestor）下匹配所有的后代元素（descendant ）
parent>child	在给定的父元素下匹配所有的子元素
prev+next	匹配所有紧接在 prev 元素后的 next 元素（下一个兄弟元素）
prev~siblings	匹配 prev 元素之后的所有 siblings 元素（所有的兄弟元素）

详细使用方法见jQuery帮助文档

2.3. 基本过滤选择器

类型	用法
:first	获取第一个元素
:last	获取最后一个元素
:not(selector)	除了selector之外的元素
:even	选择索引为偶数的元素
:odd	选择索引为奇数的元素
:eq(index)	选择索引等于index的元素
:gt(index)	选择索引大于index的元素
:lt(index)	选择索引小于index的元素
:header	选择所有的标题标签，h1~h6
:animated	选择所有正在执行动画的元素
:focus	匹配当前获取焦点的元素
:lang	选择指定语言的所有元素
:root	选择该文档的根元素
:target	选择由文档URI的格式化识别码表示的目标元素

详细使用方法见jQuery帮助文档

2.4. 内容过滤选择器

类型	用法
:contains (text)	选择包含text文本的元素
:empty	选择空元素（1、没有子元素；2、没有文本元素）
:has(selector)	选择符合selector的元素
:parent	选择含有子元素的元素

详细使用方法见jQuery帮助文档

2.5. 可见性选择器

类型	用法
:hidden	匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有的可见元素

详细使用方法见jQuery帮助文档

2.6. 属性过滤选择器

类型	用法
[attribute]	包含attribute属性的元素
[attribute=value]	attribute属性值等于value的元素
[attribute!=value]	attribute属性值不等于value的元素
[attribute^=value]	attribute属性值以value开头的元素
[attribute$=value]	attribute属性值以value结尾的元素
[attriibute*=value]	attribute属性值包含value的元素
[selector1][selector2][selectorN]	同时满足[]里的所有条件的元素

详细使用方法见jQuery帮助文档

2.7. 子元素过滤选择器

类型	用法
:first-child	匹配第一个子元素
:last-child	匹配最后一个子元素
:nth-child	匹配其父元素下的第N个子元素
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配
:first-of-type	选择所有相同的元素名称的第一个兄弟元素
:last-of-type	选择所有相同的元素名称的最后一个兄弟元素
:nth-last-child(n\|even\|odd\|formula)	选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
:nth-last-of-type(n\|even\|odd\|formula)	选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个
:nth-of-type(n\|even\|odd\|formula)	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
:noly-of-type	选择所有没有兄弟元素，且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配

详细使用方法见jQuery帮助文档

2.8. 表单对象选择器

类型	用法
:input	匹配所有 input, textarea, select 和 button 元素
:text	匹配所有的单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:file	匹配所有文件域
:hidden	匹配所有可用元素

详细使用方法见jQuery帮助文档

2.9. 表单对象属性选择器

类型	用法
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:selected	匹配所有选中的option元素

3. jQuery元素筛选方法

3.1. 过滤选择器

类型	用法
eq(index\|-index)	获取第N个元素(index基于0的位置,-index基于最后一个元素开始倒数)
first()	获取第一个元素
last()	获取最后一个元素
hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是is(.+class) 。
filter(expr\|obj\|ele\|fn)	筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
is(expr\|obj\|ele\|fn)	根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
map(callback)	将一组元素转换成其他数组（不论是否是元素数组）
has(expr\|ele)	保留包含特定后代的元素，去掉那些不含有指定后代的元素。
not(expr\|ele\|fn)	删除与指定表达式匹配的元素，即不是指标表达式匹配的元素
slice(start, [end])	选取一个匹配的子集

3.2. 查找选择器

类型	用法
children([expr])	查找所有子元素，传入表达式，表示满足表达式的子元素
closest(expr\|object\|element)	表示查找和当前元素最接近的元素
find(expr\|obj\|ele)	表示查找元素，查找的是后代元素
next([expr])	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。即查找紧邻的下一个兄弟元素
nextAll([expr])	查找当前元素之后所有的同辈元素。即查找下面所有的兄弟元素
nextUntil([exp\|ele][,fil])	查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
parent([expr])	取得一个包含着所有匹配元素的唯一父元素的元素集合。即返回父元素。
parents([expr])	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。即返回所有祖先元素。
parentsUntil([exp\|ele][,fil])	查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。即返回所有祖先元素直到满足表达式为止。
prev([expr])	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。即返回之前的那个元素。
prevall([expr])	查找当前元素之前所有的同辈元素。即返回之前所有的兄弟元素。
prevUntil([exp\|ele][,fil])	查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。即返回之前所有兄弟元素直到满足表达式为止
siblings([expr])	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。即返回满足表达式的同辈元素。

3.3. 串联选择器

类型	用法
add(expr\|ele\|html\|obj[,con])	并联关系。选择当前的元素和add条件中的元素，返回的是这些元素的集合。
addBack()	添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。即包括自己。
contents()	查找匹配元素内部所有的子节点（包括文本节点）。
end()	回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

4. jQuery的DOM属性操作

4.1. DOM属性操作

类型	用法
html([val\|fn])	在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。用法：a.html()：取出a的html值。a.html(val) ：让a的html值变为val
text([val\|fn])	结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。用法：a.text()：取出a的text值。a.text(val)：让a的文本值变为val
val([val\|fn\|arr])	a.val()：取出a的val值。a.val(v)：设置a的value值为v
attr(name\|pro\|key,val\|fn)	设置或返回被选元素的属性值。用法：1、a.attr(‘name’)：取出a的name值 2、a.attr(“name”,“username”)：把a的name值设置为username
removeAttr(name)	从每一个匹配的元素中删除一个属性。
prop(name\|properties\|key,value\|fn)	获取在匹配的元素集中的第一个元素的属性值。用法：1、a.prop(‘id’)：取出a的id值 2、a.prop(‘id’,“bj”)：设置a的id值为bj
removeProp(name)	用来删除由.prop()方法设置的属性集。

5. jQuery的文档处理操作

5.1. 内部插入

类型	用法
append(content\|fn)	向每个匹配的元素内部追加内容。用法：a.append(b); 把b添加到a里面，也就是 a里面加入b——添加到最后面
appendTo(content)	把所有匹配的元素追加到另一个指定的元素元素集合中。用法：a.appendTo(b); 把a加到b里面——添加到最后面
prepend(content)	向每个匹配的元素内部前置内容。用法：a.prepend(b); 把b添加到a里面——添加到最前面
prependTo(content)	把所有匹配的元素前置到另一个、指定的元素元素集合中。用法：a.prependTo(b); 把a添加到b里面——添加到最前面

5.2. 外部插入

类型	用法
after(content\|fn)	在每个匹配的元素之后插入内容。用法：a.after(b); 把b放到a的后面
before(content\|fn)	在每个匹配的元素之前插入内容。用法：a.before(b); 把b放a的前面
insertAfter(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的后面。用法：a.insertAfter(b); 把a插入到b的后面
insertBefore(content)	把所有匹配的元素插入到另一个、指定的元素元素集合的前面。用法：a.insertBefore(b);把a插入到b的前面

5.3. 替换

类型	用法
replaceWith(content\|fn)	将所有匹配的元素替换成指定的HTML或DOM元素。用法：a.replaceWith(b) 把a用b替换
replaceAll(selector)	用匹配的元素替换掉所有 selector匹配到的元素。用法：a.replaceAll(b) 用a替换所有的b

5.4. 删除

类型	用法
empty()	删除匹配的元素集合中所有的子节点。用法：a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr])	从DOM中删除所有匹配的元素。用法：1、a.remove(b) 所有的a，是b的话就会删除 2、a.remove() 删除a
detach([expr])	从DOM中删除所有匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

5.5. 包裹

类型	用法
wrap(html\|element\|fn)	把所有匹配的元素用其他元素的结构化标记包裹起来。用法：a.wrap(b) 使用b把每一个a包裹
unwrap()	这个方法将移出元素的父元素。用法：a.unwrap() 解除包裹，移除当前元素的父元素
wrapAll(html\|ele)	将所有匹配的元素用单个元素包裹起来。用法：a.wrapAll(b) 所有的a使用b来包裹
wrapInner(htm\|element\|fnl)	将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。用法：a.wrapInner(b) 把a里面的子元素使用b包裹

6. jQuery的CSS操作

6.1. CSS操作

类型	用法
addClass(class\|fn)	为每个匹配的元素添加指定的类名（一个或多个）。用法：添加单个class：传入class值；添加多个class：不同的class值用空格隔开
removeClass([class\|fn])	从所有匹配的元素中删除全部或者指定的类。用法：删除单个class：传入class值；删除多个class：不同的class值用空格隔开
hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true。
toggleClass(class\|fn[,sw])	如果存在（不存在）就删除（添加）一个类。
css(name\|pro\|[,val\|fn])	访问匹配元素的样式属性。设置或返回样式属性
height([val\|fn])	设置或返回匹配元素的高度。用法：1、传入值设置高度 2、不传值获取高度
width([val\|fn])	设置或返回匹配元素的宽度。用法：1、传入值设置宽度 2、不传值获取宽度
offset([coordinates])	返回第一个匹配元素相对于文档的位置。

7. jQuery事件

7.1. $(function(){});与window.οnlοad=function(){}的区别

类型	区别
$(function(){}) 等同于$(document).ready(function(){});	1、dom载入就绪，即DOM树加载完成执行。2、$(function(){});可以使用多次
window.οnlοad=function(){}	1、文档加载完成后执行。2、同一个页面，同时写多个window.onload只有最后一个会执行

7.2 事件绑定

类型	用法
on()	在选择元素上绑定一个或多个事件的事件处理函数。具体使用见帮助文档
trigger(type,[data])	在每一个匹配的元素上触发某类事件。具体使用见帮助文档
triggerHandler(type, [data])	这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
常规绑定	1、Ele.οnclick=function(){}。2、$(.class\|#id).click(function(){})
bind()方法绑定	$(.class\|#id).bind(“click1 click2”,function(){}) 注意：事件可以多个，方法只能一个
one()方法绑定，事件只响应一次	$(.class\|#id).one(“click”,function(){})
live()方法绑定，为以后动态添加的元素也绑定事件	$(.class\|#id).live(“click”,function(){})

7.3. 事件解绑

类型	用法
off(events,[selector],[fn])	在选择元素上移除一个或多个事件的事件处理函数。具体见帮助文档
给p标签解绑所有事件	$(“p”).unbind()
给p标签解绑click事件	$(“p”).unbind( “click” )

7.4. 事件

类型	用法
blur([[data],fn])	当元素失去焦点时触发 blur 事件。
focusout([data],fn)	当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
change([[data],fn])	当元素的值发生改变时，会发生 change 事件。
click([[data],fn])	触发每一个匹配元素的click事件。
dblclick([[data],fn])	当双击元素时，会发生 dblclick 事件。
error([[data],fn])	当元素遇到错误（没有正确载入）时，发生 error 事件。
focus([[data],fn])	当元素获得焦点时，触发 focus 事件。
focusin([data],fn)	当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
keydown([[data],fn])	当键盘或按钮被按下时，发生 keydown 事件。
keypress([[data],fn])	当键盘或按钮被按下时，发生 keypress 事件。与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
keyup([[data],fn])	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown([[data],fn])	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter([[data],fn])	当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave([[data],fn])	当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
mousemove([[data],fn])	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout([[data],fn])	当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
mouseover([[data],fn])	当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。
mouseup([[data],fn])	当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
resize([[data],fn])	当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])	当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
select([[data],fn])	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit([[data],fn])	当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
unload([[data],fn])	在当用户离开页面时，会发生 unload 事件。

夜间不睡觉的程序员

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jQuery

一、jQuery入门1. 什么是jQueryjQuery：顾名思义，就是JavaScript和查询（query），即是辅助JavaScript库。jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。2. HelloWorld的编写要想使用jQuery编写helloworld，首先要将jQuery相应版本的jQuery的js文件引入到界面中，然后再进行编写相应的代码。1. $() ：调用$()方法，$()叫做jQuery的核心函数2. 为$()方法传
复制链接

扫一扫