jQuery笔记

最新推荐文章于 2024-01-20 21:49:50 发布

我思想出了问题

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量53

点赞数

分类专栏： Java笔记

本文链接：https://blog.csdn.net/deku1018/article/details/117260966

版权

Java笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、jQuery核心函数：

在这里插入图片描述
简单测试：

1、传入参数为 [ 函数 ] 时：

表示页面加载完成之后。相当于 window.onload = function(){}

2、传入参数为 [ HTML 字符串 ] 时：

会对我们创建这个 html 标签对象
在这里插入图片描述

3、传入参数为 [ 选择器字符串 ] 时：

在这里插入图片描述

4、传入参数为 [ DOM 对象 ] 时：

会把这个 dom 对象转换为 jQuery 对象

二、jQuery 对象和 dom 对象区分：

1、jQuery 对象，dom 对象：

在这里插入图片描述

2、jQuery 对象的本质：

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

3、jQuery 对象和 Dom 对象使用区别：

jQuery 对象不能使用 DOM 对象的属性和方法。
DOM 对象也不能使用 jQuery 对象的属性和方法。

4、Dom 对象和 jQuery 对象互转：

在这里插入图片描述

三、jQuery 选择器：

1、基本选择器：

在这里插入图片描述

2、层级选择器：

在这里插入图片描述

3、过滤选择器：

在这里插入图片描述

4、内容过滤器：

在这里插入图片描述

5、属性过滤：

在这里插入图片描述

6、表单过滤器:

在这里插入图片描述

7、表单对象属性过滤器：

在这里插入图片描述

8、jQuery 元素筛选：

在这里插入图片描述

四、jQuery属性操作：

在这里插入图片描述
val 方法可以同时设置多个表单项的选中状态：

五、DOM 的增删改：

内部插入：

appendTo() ：a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素
prependTo()： a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素

外部插入：

insertAfter() ：a.insertAfter(b) 得到 ba
insertBefore() ：a.insertBefore(b) 得到 ab

替换:

replaceWith() ：a.replaceWith(b) 用 b 替换掉 a
replaceAll() ：a.replaceAll(b) 用 a 替换掉所有 b

删除：

remove()： a.remove(); 删除 a 标签
empty() ：a.empty(); 清空 a 标签里的内容

案例：
在这里插入图片描述
注意：（1）添加操作（2）删除操作要注意将新添加的行进行绑定，才能进行删除。（3）注意自定义函数的复用方法，传入的是函数名。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function () {

		//删除的复用函数
		var delFun = function(){
			var $hangbiaoqian = $(this).parent().parent();
			/**
			 * confirm 是 JavaScript提供的一个确认提示函数，输入什么就提示什么
			 * 当用户点击确定后，就返回true，否则返回false
			 */
			if ( confirm("是否要删除" + $hangbiaoqian.find("td:first").text() +"？")){//true：进行删除操作
				$hangbiaoqian.remove();
			}
			return false; //可以阻止元素的默认行为；
		}


		//添加按钮 绑定单击事件
		$("#addEmpButton").click(function () {
			//
			var empName = $("#empName").val();
			var salary = $("#salary").val();
			var email = $("#email").val();

			var $trObj = $("<tr></tr>");
			$trObj.append("<td>"+empName+"</td>")
					.append("<td>"+email+"</td>")
					.append("<td>"+salary+"</td>")
					.append("<td><a href='#'>Delete</a></td>")
					.appendTo("#employeeTable");
			//给添加的 行 中 a 标签绑定 单击事件, 并传入 删除函数
			$trObj.find("a").click(delFun);


		});

		//删除
		$("a").click(delFun);


	});
	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

六、CSS样式操作：

在这里插入图片描述

七、jQuery动画：

在这里插入图片描述

八、jQuery 事件操作：

在这里插入图片描述

jQuery 中其他的事件处理方法：

事件的冒泡：

javaScript 事件对象：

我思想出了问题

关注

0
点赞
踩
0

收藏

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

文章目录一、jQuery核心函数：1、传入参数为 [ 函数 ] 时：2、传入参数为 [ HTML 字符串 ] 时：3、传入参数为 [ 选择器字符串 ] 时：4、传入参数为 [ DOM 对象 ] 时：二、jQuery 对象和 dom 对象区分：1、jQuery 对象，dom 对象：2、jQuery 对象的本质：3、jQuery 对象和 Dom 对象使用区别：4、Dom 对象和 jQuery 对象互转：一、jQuery核心函数：简单测试：1、传入参数为 [ 函数 ] 时：表示页面加载完成之后。相
复制链接

扫一扫