jQuery复习专用

最新推荐文章于 2022-12-15 16:10:34 发布

VIP文章一个不会编程的

最新推荐文章于 2022-12-15 16:10:34 发布

阅读量215

点赞数 1

分类专栏： JAVAWEB基础

本文链接：https://blog.csdn.net/qq_44878991/article/details/110144200

版权

文章目录

前言
一、jQuery核心函数
二、jQuery选择器
三、文档操作
四、事件
五、jquery拓展
- serialize和serializeArray
- 插件机制与自定义插件

前言

jQuery是一个快速、简洁的 JavaScript框架，是继Prototype 之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化 HTML文档操作、事件处理、动画设计和 Ajax交互。

一、jQuery核心函数

1.jQuery(callback)

jQuery(callback)它是$(document).ready()的简写。
$(document).ready(function(){});页面加载完成后，指定的函数执行。

示例：弹框演示

			jQuery(document).ready(function(){
   
				alert("hello jquery1");
			});
			$(document).ready(function(){
   
				alert("hello jquery2");
			});
			jQuery(function(){
   
				alert("hello jquery3");
			});
			$(function(){
   
				alert("hello jquery4");
			});

2.jQuery(html,[ownerDocument])

jQuery(html 代码)它的作用是将一个dom对象包装成jQuery对象。
问题：什么是jQuery对象?
我们的 jquery中定义的方法与属性，只有jquery对象可以调用。
这个核心函数的作用是将一个dom对象包装成了jquery_对象s而它的第一个参数是html代码,
它的第二个参数是可选，它用于设置 dom的相关属性.

关于jquery对象与dom对象转换：
对于dom对象----->jquery对象 $(dom)
对于jquery对象---->dom对象 jquery对象[0] 或 jquery.get(0)
代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
   
				var div = document.getElementById("d");
				var jqueryDiv = $("#d");
				
				//转换   dom转换成jquery
				$(div).html("hello jquery");
				//转换   jquery转换成dom
				jqueryDiv.get(0).innerHTML+=" hello jquery...";
			})	
		</script>
	</head>
	<body>
		<div id="d">
			
		</div>
	</body>
</html>

3.jQuery([selector,[context])

这个函数我们使用它的主要作用是用于在页面上查找，根据css选择器。
参数1就css选择器 jquery中提供了九种选择器
参数2 context就是指定要查找的dom集

二、jQuery选择器

1.基本选择器

#id 根据id属性查找一个元素
element 根据元素的标签名称查找元素
.class 根据元素的class属性查找元素
*匹配所有元素
selector1,selector2…将每一个选择器匹配到元素合并后一起返回
在这里插入图片描述

代码示例：一些常用方法，其中size()方法只能在1.8之前使用，更高版本被length取代

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
   
				//1.得到id=d1的元素中的内容显示出
				var html = $("#d1").html();
				//html()方法得到div的id=d1元素中的所有html
				alert(html);
				var text = $("#d1").text();
				//text方法得到div的id=d1元素中的所有文本
				alert(text);
				
				//将class=d元素中的内容后面添加 hello
				//i表示的是每个元素的序号
				$(".d").each(function(i){
   
					$(this).html($(this).html()+"hello");
				});
				
				//得到id=d1这个div在整个页面上是第几个
				//返回id=d1元素在所有div中的索引值，从0开始
				var index = $("div").index($("#d1"));
				alert(index);
				
				//得到class=d的元素有几个
				var size = $(".d").size();
				alert(size);
				
				//将所有class=d或id=d1元素中的内容设置为jquery
				$(".d,#d1").html("jquery");
				
			})

		</script>
	</head>
	<body>
		<div id="d1"><a>div1</a></div>
		<div class="d">div2</div>
		<div class="d">div3</div>
		<div>div4</div>
		<div>div5</div>
		
	</body>
</html>

2.层级选择器

空格 --------- 得到元素下的所有子元素(包含直接子元素与间接子元素）
大于号 > --------- 只获取直接的子元素
加号 + --------- 只获取直接的一个兄弟元素
波浪线 ~ --------- 所有的后边的兄弟元素
在这里插入图片描述

代码演示：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
   
				//获取id=d的所有<a>元素
				var size = $("#d a").size();
				alert(size);//3
				
				//获取id=d的直接<a>元素
				size = $("#d>a").size();
				alert(size);//2
				
				//获取id=d第一个兄弟元素
				alert($("#d+p").html());//php
				
				//获取id=d的所有<p>兄弟元素
				size = $("#d~p").size();
				alert(size);//2
				
				//将id=d下的所有子元素<a>的文字颜色设置成红色,背景是蓝色
				$("#d a").css({
   color:"red",background:"blue"});
				
			});

			
		</script>
	</head>
	<body>
		<div id="d">
			<a>java</a>
			<p>
				<a>ios</a>
			</p>
			<a>android</a>
		</div>
		<p>php</p>
		<p>ui</p>
	</body>
</html>

运行如下图:弹框效果不演示
在这里插入图片描述

3.过滤器

过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是“ ：”开头，除了属性过滤选择器。

基本过滤选择器

学会查文档，仅仅展示部分
在这里插入图片描述

代码示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
   
				//设置表格第一行，显示为红色
				//$("tr:first").css({color:"red"});
				
				//设置表格除了第一行以外，显示为蓝色
				//$("tr:not(tr:first)").css({color:"blue"});//方法一
				//$("tr:gt(0)").css({color:"blue"});//方法二
				
				//设置表格奇数行与偶数行颜色不一致。例如：偶数行设置为红色，奇数行设置为蓝色（以序号为判断）
				$("tr:odd").css({
   color:"blue"});//001  003为蓝色（奇数）
				$("tr:even").css({
   color:"red"});//标题 002 004为红色（偶数）
			
				//设置页面标题为灰色
				$(":header").css({
   color:"gray"});
				
			});
		</script>
	</head>
	<body>
		<h1>商品信息</h1>
		<table border=

最低0.47元/天解锁文章

一个不会编程的

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery复习专用

文章目录前言一、前言jQuery是一个快速、简洁的 JavaScript框架，是继Prototype 之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化 HTML文档操作、事件处理、动画设计和 Ajax交互。一、...
复制链接

扫一扫