04_尚硅谷_jQuery_王振国 – 课堂笔记

共计 6175 个字符，预计需要花费 16 分钟才能阅读完成。

04_尚硅谷_jQuery_王振国 - 课堂笔记
04-jQuery
讲师：王振国

今日任务

1.jQuery 的属性操作
2.jQuery 练习
3.jQuery CSS 样式操作
4.jQuery 动画操作
5.jQuery 事件操作

课堂笔记

今天课程内容：

**jQuery ** 属性操作

04_尚硅谷_jQuery_王振国 - 课堂笔记

html()
text()
val()

它可以设置和获取起始标签和结束标签中的内容。它可以设置和获取起始标签和结束标签中的文本。它可以设置和获取表单项的 value 属性值。

跟 dom 属性 innerHTML 一样。
跟 dom 属性 innerText 一样。
跟 dom 属性 value 一样

**val ** 方法同时设置多个表单项的选中状态：

html>
<html lang=“zh_CN”>
<head>
<meta charset=“UTF-8”>
<title>Titletitle>


type=“text/javascript”src=“script/jquery-1.7.2.js”>script>
<script
<script
type=“text/javascript”>

$(function () {
/*
// 批量操作单选
$(“:radio”).val([“radio2”]);
// 批量操作筛选框的选中状态
$(“:checkbox”).val([“checkbox3”,“checkbox2”]);
// 批量操作多选的下拉框选中状态
$(“#multiple”).val([“mul2”,“mul3”,“mul4”]);
// 操作单选的下拉框选中状态
$(“#single”).val([“s in2”]);
*/

$(“#multiple,#single,:radio,:checkbox”).val([“radio2”,“checkbox1”,“checkbox3”,“mul1”,“mul4”,“s in3”]
);
});

script>
head>
<body>
<body>
单选：
	<input
<input	name=“radio”type=“radio”value=“radio1”/>radio1
name=“radio”type=“radio”value=“radio2”/>radio2
	<br/>
	多选：
	<input	name=“checkbox”	type=“checkbox”	value=“checkbox1”	/>checkbox1
	<input	name=“checkbox”	type=“checkbox”	value=“checkbox2”	/>checkbox2
	<input	name=“checkbox”	type=“checkbox”	value=“checkbox3”	/>checkbox3
	<br/>

	下拉多选：
	<select id=“multiple”multiple=“multiple”size=“4”>
	<option
<option
<option
<option		value=“mul1”>mul1option>
value=“mul2”>mul2option>
value=“mul3”>mul3option>
value=“mul4”>mul4option>
	select>
	<br/>

	下拉单选：
	<select id=“single”>
	<option
<option
<option		value=“s in1”>sin1option>
value=“s in2”>sin2option>
value=“s in3”>sin3option>
	select>
body>

04_尚硅谷_jQuery_王振国 - 课堂笔记

| body

04_尚硅谷_jQuery_王振国 - 课堂笔记

attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等

attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj

prop() 可以设置和获取属性的值, 只推荐操作 checked、readOnly、selected、disabled 等等

**2.** 全选，全不选，反选

“-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type”content=“text/html; charset=UTF-8”>
<title>Insert title heretitle>
<script type=“text/javascript”src=“…/…/script/jquery-1.7.2.js”>script>
<script type=“text/javascript”>

$KaTeX parse error: Expected group after ‘_’ at position 32: …{_// 给全选绑定单击事件_̲ _$ (“#checkedAllBtn”).click(function () {
$(“:checkbox”).prop(“checked”,true);
});

// 给全不选绑定单击事件
$KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 6: _(**”#̲checkedNoBtn”**\dots$ (“:checkbox”).prop(“checked”,false);
});

// 反选单击事件
$(“#checkedRevBtn”).click(**function **() {

04_尚硅谷_jQuery_王振国 - 课堂笔记

| // 查询全部的球类的复选框
$(“:checkbox[name=‘items’]”).each(**function **() {
// 在 each 遍历的 function 函数中，有一个 this 对象。这个 this 对象是当前正在遍历到的 dom 对象
this.**checked **= !this.checked;
});

// 要检查 是否满选
// 获取全部的球类个数
var allCount = $KaTeX parse error: Expected group after ‘_’ at position 85: \dotscheckedCount = _̲$ (“:checkbox[name=‘items’]:checked”).length;

// if (allCount == checkedCount) {
// $(“#checkedAllBox”).prop(“checked”,true);
// } else {
// $(“#checkedAllBox”).prop(“checked”,false);
// }

$(“#checkedAllBox”).prop(“checked”,allCount == checkedCount);

});

//【提交】按钮单击事件
$KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 6: _(**”#̲sendBtn”**).cli\dots$ (“:checkbox[name=‘items’]:checked”).each(**function **() {
alert(this.value);
});
});

// 给【全选 / 全不选】绑定单击事件
$(“#checkedAllBox”).click(**function **() {

// 在事件的 function 函数中，有一个 this 对象，这个 this 对象是当前正在响应事件的 dom 对象 // alert(this.checked);

$(“:checkbox[name=‘items’]”).prop(“checked”,this.checked);
});

// 给全部球类绑定单击事件
$KaTeX parse error: Expected group after ‘_’ at position 65: … **() { _// 要检查_̲ _是否满选_ _// 获取全…$ (“:checkbox[name=‘items’]”).length;
// 再获取选中的球类个数
var checkedCount = $(“:checkbox[name=‘items’]:checked”).length;

$(“#checkedAllBox”).prop(“checked”,allCount == checkedCount);

04_尚硅谷_jQuery_王振国 - 课堂笔记

});

script>
head>
<body>

<form method=“post”action=“”>

你爱好的运动是？<**input type=“checkbox”id=“checkedAllBox”**/>全选 / 全不选

<**br **/>
<**input type=“checkbox”name=“items”value=“足球 ”**/> 足球
<**input type=“checkbox”name=“items”value=“ 篮球 ”**/> 篮球
<**input type=“checkbox”name=“items”value=“ 羽毛球 ”**/> 羽毛球
<**input type=“checkbox”name=“items”value=“ 乒乓球 ”**/> 乒乓球
<**br **/>
<**input type=“button”id=“checkedAllBtn”value=“ 全选 ”**/>
<**input type=“button”id=“checkedNoBtn”value=“ 全不选 ”**/>
<**input type=“button”id=“checkedRevBtn”value=“ 反选 ”**/>
<**input type=“button”id=“sendBtn”value=“ 提交”**/>
form>

body>

04_尚硅谷_jQuery_王振国 - 课堂笔记

内部插入：
appendTo()

a.appendTo(b)

把 a 插入到 b 子元素末尾，成为最后一个子元素


prependTo()

外部插入：
insertAfter()
insertBefore()

替换 **😗*
replaceWith()
replaceAll()

删除：
remove()
empty() | a.prependTo(b)

a.insertAfter(b) a.insertBefore(b)

a.replaceWith(b) a.replaceAll(b)

a.remove();
a.empty(); | 把 a 插到 b 所有子元素前面，成为第一个子元素

得到 ba
得到 ab

用 b 替换掉 a
用 a 替换掉所有 b

删除 a 标签
清空 a 标签里的内容 |
|

**2.** 从左到右，从右到左练习 | | |
| html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”> | | |
| <html> | | |
| <head> | | |
| <meta http-equiv=“Content-Type”content=“text/html; charset=UTF-8”>
<title>Insert title heretitle>
<style type=“text/css”>
select {
width: 100px;
height: 140px; | | |
| } | | |
| | | |
| div {
width: 130px;
float: left;
text-align: center; | | |
| } | | |
| style> | | |
| <script type=“text/javascript”src=“script/jquery-1.7.2.js”>script>
<script type=“text/javascript”> | | |
| // 页面加载完成 | | |
| $(**function **() {| | |

04_尚硅谷_jQuery_王振国 - 课堂笔记

| // 第一个按钮 【选中添加到右边】
$KaTeX parse error: Expected group after ‘_’ at position 47: …unction **() { _̲$ (“select:eq(0) option:selected”).appendTo( $KaTeX parse error: Expected ‘EOF’, got ‘}’ at position 25: \dotsct:eq(1)”**)); }̲); _// 第二个按钮_ _\dots$ (“button:eq(1)”).click(function () {
$KaTeX parse error: Expected group after ‘_’ at position 43: \dots).**appendTo**(_̲$ (“select:eq(1)”));
});

// 第三个按钮 【选中删除到左边】
$KaTeX parse error: Expected group after ‘_’ at position 47: …unction **() { _̲$ (“select:eq(1) option:selected”).appendTo($(“select:eq(0)”));
});

// 第四个按钮 【全部删除到左边】
$KaTeX parse error: Expected group after ‘_’ at position 47: …unction **() { _̲$ (“select:eq(1) option”).appendTo($(“select:eq(0)”));
});
});
script>
head>
<body>

<div id=“left”>

<select multiple=“multiple”name=“sel01”>
<option
<option
<option
<option
<option
<option
<option
<option
select>	value=“opt01”>选项 1option>
value=“opt02”>选项 2option>
value=“opt03”>选项 3option>
value=“opt04”>选项 4option>
value=“opt05”>选项 5option>
value=“opt06”>选项 6option>
value=“opt07”>选项 7option>
value=“opt08”>选项 8option>
<button>选中添加到右边button>
<button>全部添加到右边button>
div>
<div id=“rigth”>
<select multiple=“multiple”name=“sel02”>
select>
<button>选中删除到左边button>
<button>全部删除到左边button>
div>

body>
html> | |


3. 动态添加、删除表格记录
“-//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 Documenttitle>
<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 () {

// 创建一个用于复用的删除的 function 函数
var deleteFun = function(){

// alert(“ 删除操作的 function : ” + this);

// 在事件响应的 function 函数中，有一个 this 对象。这个 this 对象是当前正在响应事件的 dom 对象。
var	$trObj	= $(this).parent().parent();

var	name =	$trObj.find(“td:first”).text();

/**
* confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么，它就提示什么
* 当用户点击了确定，就返回 true。当用户点击了取消，就返回 false
*/
if(confirm(“你确定要删除 [”+ name + “] 吗？”) ){
$trObj.remove();
}

// return false; 可以阻止元素的默认行为。
return false;

};

// 给【Submit】按钮绑定单击事件
$(“#addEmpButton”).click(function () {
// 获取输入框，姓名，邮箱，工资的内容
var name = $(“#empName”).val();
var email = $(“#email”).val();
var salary = $(“#salary”).val();