JQuery基础

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

jQuery 是一个快速，小型且功能丰富的JavaScript库，jQuery设计的宗旨时"write less,do more",即倡导写更少的代码，做更多的事情

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>初识JQuery</title>
	<script  src="../JQuery/jquery-3.3.1.js"></script>
		<script type="text/javascript">	
		$(document).ready(function(){
			$("p").click(function(){
				$(this).hide();
		});
	</script>
</head>
<body>
	<p>一点，我就消失了</p>
</body>
</html>

$(document)是jquery是HTML的文档对象；

ready()事件在文档对象就绪时触发，这个和onload作用效果是一样的，但是要比onload加载更快；

$("p")是一个JQuery选择器,用来选中文档中的p标签，

$("p").click为当前选中的对象添加一个click事件，

$("this")表示当前的HTML对象，这里指的是p标签，

hide()方法为实现效果，将p标签在单击后内容隐藏。

jQuery选择器

基本选择器

类型	语法	描述	返回值	示例
子选择器	parent>child	选取parent元素下所有的child子元素	元素集合	$('ul>li');选取ul元素下所有的li元素
后代选择器	root siblings	匹配root元素里所有的siblings后代元素	元素集合	$('div p'); 选取div元素中所有的p元素
兄弟选择器	prev~siblings	匹配prev元素之后的所有兄弟元素	元素集合	$('p~span'); 选取所有p元素之后的所有兄弟span元素
相邻选择器	prev+next	匹配紧邻prev元素之后的next元素	元素集合	$('h1+ul'); 选取紧邻h1元素之后的兄弟元素ul

过滤选择器

jQuery过滤选择器是根据过滤规则筛选出符合条件的DOM元素。根据不同的过滤规则，可以将jQuery中的过滤选择器分为基本过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，和表单对象属性过滤选择器。

jQuery基础过滤选择器

基础过滤选择器是jQuery过滤选择器中使用较为频繁的一个。

语法	描述	返回值	示例
:first	选取第一个元素	单个元素	$('ul:first')选取所有ul元素中的第一个ul元素
:last	选取最后一个元素	单个元素	$('ul:first')选取所有ul元素中的最后一个ul元素
:not(selector)	选取除给定选择外的所有元素	元素集合	$('ul:not(.top)')选取class不是top的ul元素
:even	选取索引值为偶数的元素，索引从0开始	元素集合	$('ul:even')选取索引是偶数的ul元素
:odd	选取索引值为奇数的元素，索引从0开始	元素集合	$('ul:odd')选取索引是奇数的ul元素
:eq(index)	选取给定索引的元素，索引从0开始	单个元素	$('ul:eq(0')选取索引为0的ul元素
:gt(index)	选取所有大于给定索引的元素，索引从0开始	元素集合	$('ul:gt(1)')选取索引大于1的ul元素
:lt(index)	选取所有小于给定索引的元素，索引从0开始	元素集合	$('ul:lt(1)')选取索引小于1的ul元素
:header	选取所有标题元素，如h1~h6	元素集合	$(':header')选取网页中的所有标题元素
:focus	选取当前获取焦点的元素	元素集合	$(':focus')选取当前获取焦点的元素
:animated	选取所有动画元素	元素集合	$(':animated')选取当前所有动画元素

jQuery属性过滤选择器

语法	描述	返回值	示例
[attribute]	选取包含指定属性的元素	元素集合	$('p[id]')选取含有id属性的元素
[attribute=value]	选取指定属性为value的元素	元素集合	$('p[id=content]')选取id为content的p元素
[attribute!=value]	选取指定属性不为value的元素	元素集合	$('p[id!=content]')选取id不为content的p元素
[attribute^=value]	选取指定属性为指定value开始的元素	元素集合	$('p[id^=content]')选取id为content开始的p元素
[attribute$=value]	选取指定属性为指定value结束的元素	元素集合	$('p[id$=content]')选取id为content结束的p元素
[attribute*=value]	选取指定属性包含value的元素	元素集合	$('p[id*=content]')选取id为包含content的p元素