jquery

最新推荐文章于 2023-04-07 21:22:51 发布

监听员_1379

最新推荐文章于 2023-04-07 21:22:51 发布

阅读量360

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/knight_a/article/details/89115440

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

1 jquery核心函数的用法

1.1 回顾js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 需求: 点击div时,将它的的背景颜色 由"红色" 改成 “蓝色"
			// 页面加载完成函数: 保证将页面的所有标签加载到内存中再操作
			//alert(1111);
			window.onload = function() {
				//alert(4444);
				document.getElementById("mydiv").onclick = function() {
					// this 绑定事件的当前对象
					this.style.background = "blue";
				}
			}
			//alert(2222);
		</script>
	</head>
	<body>
		<div id="mydiv" style="border:1px solid red; background:red"> 绝不后退,敢于亮剑</div>
	</body>
	<script>
		//alert(3333);
	</script>
</html>

1.2 jquery快速入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
		<script>
			// 需求: 点击div时,将它的的背景颜色 由"红色" 改成 “黄色"
			// 页面加载完成函数: 保证将页面的所有标签加载到内存中再操作
			jQuery(function(){
				jQuery("#mydiv").click(function(){
					jQuery(this).css("background", "yellow");
				})
			});
		</script>
	</head>
	<body>
		<div id="mydiv" style="border:1px solid red; background:red"> 绝不后退,敢于亮剑</div>
	</body>
</html>

1.3 jquey的核心函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
		<script>
			function demo1() {
				alert("调用demo1 1111嘿嘿嘿... ...")
			}
			
			function demo1(a, b) {
				alert("调用demo1 2222哈哈哈 ... ...")
			}
			
			// 1 js函数不存在重载效果
			// 2 如果方法名一致,后面的会把前面的给覆盖掉
			// 3 函数如果需要参数,我就不传, 也不会报错,而且会正常执行
			// demo1();
			
			// 讲jquery核心函数的用法
			/*
			// 特点: 后面的会把前面的给覆盖掉
			window.onload = function() {
				alert("传统js 加载1 ... ...");
			}
			
			window.onload = function() {
				alert("传统js 加载2 ... ...");
			}
			*/
			
			// jquery用法一: 页面加载完成后执行
			// 特点: jquery页面加载不存在覆盖效果, 且会依次执行
			jQuery(function(){
				// alert("jQuery 加载1111 ... ...");
			});
			
			jQuery(function(){
				// alert("jQuery 加载2222 ... ...");
				// 用法二: jQuery(表达式) 获取页面的标签对象
				jQuery("#mydiv").click(function(){
					// this 指js对象
					// 用法三: 如何将js对象转成jquery对象: jQuery(js对象)
					// 因为 js对象不能调用 jquery对象的属性和方法等
					// 因为 jquery对象 不能直接调用 js对象的属性和方法
					// 所以 需要js对象和jquery对象相互转化
					jQuery(this).css("background", "green");
				});
				
				// 补充: 如何将jquery对象转成 js对象
				// 将jquery对象 看成是第一个数组, 其中第一个对象就是 js对象
				jQuery("#mydiv")[0].onmouseover = function(){
					this.style.background = "pink";
				}
			});
			
			// 如何给函数起别名
			function slkjfdslkfdjslkfjslfkjslkfdjsklfjslkfjsldfkjslfjsldfjssldkfjs() {
				alert("咋就这么长 ... ...");	
			}
			// slkjfdslkfdjslkfjslfkjslkfdjsklfjslkfjsldfkjslfjsldfjssldkfjs();
			var $ = slkjfdslkfdjslkfjslfkjslkfdjsklfjslkfjsldfkjslfjsldfjssldkfjs;
			$();
		</script>
	</head>
	<body>
		<div id="mydiv" style="border:1px solid red; background:red"> 绝不后退,敢于亮剑</div>
	</body>
</html>

1.4 jquery的核心函数(简化版) 重点重点重点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
		<script>
			function demo1() {
				alert("调用demo1 1111嘿嘿嘿... ...")
			}
			
			function demo1(a, b) {
				alert("调用demo1 2222哈哈哈 ... ...")
			}
			
			// 1 js函数不存在重载效果
			// 2 如果方法名一致,后面的会把前面的给覆盖掉
			// 3 函数如果需要参数,我就不传, 也不会报错,而且会正常执行
			// demo1();
			
			// 讲jquery核心函数的用法
			/*
			// 特点: 后面的会把前面的给覆盖掉
			window.onload = function() {
				alert("传统js 加载1 ... ...");
			}
			
			window.onload = function() {
				alert("传统js 加载2 ... ...");
			}
			*/
			
			// jquery用法一: 页面加载完成后执行
			// 特点: jquery页面加载不存在覆盖效果, 且会依次执行
			$(function(){
				alert("jQuery 加载1111 ... ...");
			});
			
			$(function(){
				alert("jQuery 加载2222 ... ...");
				// 用法二: jQuery(表达式) 获取页面的标签对象
				$("#mydiv").click(function(){
					// this 指js对象
					// 用法三: 如何将js对象转成jquery对象: jQuery(js对象)
					// 因为 js对象不能调用 jquery对象的属性和方法等
					// 因为 jquery对象 不能直接调用 js对象的属性和方法
					// 所以 需要js对象和jquery对象相互转化
					$(this).css("background", "green");
				});
				
				// 补充: 如何将jquery对象转成 js对象
				// 将jquery对象 看成是第一个数组, 其中第一个对象就是 js对象
				$("#mydiv")[0].onmouseover = function(){
					this.style.background = "pink";
				}
			});
		
		</script>
	</head>
	<body>
		<div id="mydiv" style="border:1px solid red; background:red"> 绝不后退,敢于亮剑</div>
	</body>
</html>

2 选择器

2.1 基本选择器(重点重点重点)

#id 		根据id属性值获取标签对象(唯一)
element 	根据标签名获取标签对象(多个)
.class 		根据class属性值值获取标签对象(多个)
* 			获取所有的标签对象
selector1,selector2,selectorN	既要 第一个, 也要 第二个 还要 第N个

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1．通过each() 在每个div元素前 加入 “传智播客”
	$("div").each(function(){
		// alert($(this).html());
		// console.info($(this).html()); // 获取
		$(this).html("传智播客" + $(this).html());// 设置
	});
	// 2．通过size() / length 打印页面中 class属性为 itcast 的元素数量
	//console.info("size = " + $(".itcast").size());
	//console.info("length = " + $(".itcast").length);
	
	// 3．通过index()  打印 id属性为foo 的div标签 是页面内的第几个div标签
	var _index = $("div").index($("#foo"));
	console.info("index = " + _index)
});
</script>
</head>
<body>
	<div>DIVAAAA</div>
	<div class="itcast">DIVBBBB</div>
	<div>DIVCCCC</div>
	<div>DIVDDDD</div>
	<div class="itcast">DIVEEEE</div>
	<div id="foo">DIVFFFF</div>
	<p>PAAAA</p>
	<p class="itcast">PBBBB</p>
	<p>PCCCC</p>
</body>
</html>

2.2 层级(重点重点重点)

ancestor descendant : 选择当前标签的后代标签(空格)
parent > child : 选择当前标签的子标签(大于号 >)
prev + next : 选择当前标签的下一个弟弟标签
prev ~ siblings :选择当前标签的兄弟标签

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1．将class属性值为itcast的元素下所有a元素字体变为红色
	$(".itcast a").css("color", "red");
	// 2．将class属性值为itcast的元素下直接a元素字体变为蓝色
	$(".itcast>a").css("color", "blue");
	// 3．将div元素后所有兄弟a元素，字体变为黄色，大小变为30px
	$("div~a").css({
		"color":"yellow",
		"font-size":"30px"
	});
});
</script>
</head>
<body>
	<div class="itcast">
		<a>div link</a>
		<p>
			info <a>p link</a>
		</p>
	</div>
	<a>link</a>
	<p class="itcast">
		<a>p link</a>
	</p>
	<a>link</a>
</body>
</html>

缺点: 选择范围太大了, 过滤缩小范围

2.3 基本过滤选择器

:first 选择第一个
:last 选择最后一个
:not(selector) 不选择指定的那个标签
:even 偶数
:odd 奇数
:eq(index) 选择指定下标的那个标签
:gt(index) 大于指定下标的标签
:lt(index) 小于指定下标的标签
:header 选择标签标签
:animated 选择执行动画效果的标签
:focus1.6+

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1．设置表格第一行，显示为红色
	$("tr:first").css("color", "red");
	// 2．设置表格除第一行以外 显示为蓝色
	$("tr:not(:first)").css("color", "blue")
	// 3．设置表格奇数行背景色 黄色
	$("tr:gt(0):odd").css("background", "yellow");
	// 4．设置表格偶数行背景色 绿色
	$("tr:gt(0):even").css("background", "green");
	// 5．设置页面中所有标题 显示为灰色
	$(":header").css("color", "gray");
	// 6．设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色
	$("div").click(function(){
		$(this).slideUp("slow"); // 向上滑动
		$("div:animated").css("background", "yellow"); // 正在执行动画效果div背景黄色
	});
	// 不执行动画div背景绿色
	$("div:not(:animated)").css("background", "green");
});
</script>
</head>
<body>
<h1>表格信息</h1>
	<h2>这是一张商品表</h2>
	<table border="1" width="600">
		<tr>
			<th>商品编号</th>
			<th>商品名称</th>
			<th>售价</th>
			<th>数量</th>
		</tr>
		<tr>
			<td>001</td>
			<td>冰箱</td>
			<td>3000</td>
			<td>100</td>
		</tr>
		<tr>
			<td>002</td>
			<td>洗衣机</td>
			<td>2000</td>
			<td>50</td>
		</tr>
		<tr>
			<td>003</td>
			<td>热水器</td>
			<td>1500</td>
			<td>20</td>
		</tr>
		<tr>
			<td>004</td>
			<td>手机</td>
			<td>2188</td>
			<td>200</td>
		</tr>
	</table>

	<div>slideDown(speed, [callback]) 概述
		通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
		这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery
		1.3中，上下的padding和margin也会有动画，效果更流畅。 参数
		speedString,Number三种预定速度之一的字符串("slow", "normal", or
		"fast")或表示动画时长的毫秒数值(如：1000) callback (可选)FunctionFunction在动画完成时执行的函数</div>
	<div>fadeOut(speed, [callback]) 概述
		通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
		这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数
		speedString,Number三种预定速度之一的字符串("slow", "normal", or
		"fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数</div>
</body>
</html>

2.4 内容过滤选择器

:contains(text) 包含某个文本内容的标签
:empty 没有内容的标签
:has(selector) 包含指定内容的标签
:parent 查找有内容的标签

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1．设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色
	$("div:contains('传智播客')").css("color", "red");
	// 2．设置没有子元素的div元素 文本内容 ”这是一个空DIV“
	$("div:empty").html("这是一个空DIV");
	// 3．设置包含p元素 的 div 背景色为黄色
	$("div:has(p)").css("background", "yellow");
	// 4．设置所有含有子元素的span字体为蓝色
	$("span:parent").css("color", "blue");
});
</script>
</head>
<body>
	<div>今天是个晴天</div>
	<div>明天要去传智播客学 java</div>
	<div>
		<span>JavaScript</span> 是网页开发中脚本技术
	</div>
	<div>Ajax 是异步的 JavaScript和 XML</div>
	<div>
		<p>jQuery</p>
		是 JavaScript一个 轻量级框架
	</div>
	<div></div>
</body>
</html>

2.5 可见性过滤选择器

:hidden 选择隐藏的标签:1 input type=hidden 2 <标签 sytle=“display:noe” …/>
:visible 选择可见的标签

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1．为表单中所有隐藏域  添加 class属性，值为itcast 
	$("form :hidden").addClass("itcast");
	
	// 2．设置table所有 可见 tr 背景色 黄色
	$("tr:visible").css("background", "yellow");
	
	// 3．设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
	/*
	var _tr = $("tr:hidden").css("color", "red");
	var _tr2 = _tr.show();
	alert(_tr2.html());
	*/
	alert($("tr:hidden").css("color", "red").show().html());
});
</script>
</head>
<body>
<!-- <h1>隐藏页面的标签</h1> -->
 <!--<span style="visibility:hidden">3333</span>4444 <br/>--> 
 <!--<span style="display:none">1111</span>2222 <br/>--> 

	<form>
		<input type="hidden" /> <input type="text" name="xxx"  style="display: none;" />
	</form>

	<table>
		<tr>
			<td>洗衣机</td>
		</tr>
		<tr>
			<td>热水器</td>
		</tr>
		<tr style="display: none">
			<td>电冰箱</td>
		</tr>
	</table>
</body>
</html>

2.6 属性过滤选择器(重点重点重点)

[attribute] 选择有某个属性的标签, 如: input[name] 选择有name属性的标签
[attribute=value] 选择属性等于某个值的标签如: input[name=‘username’]
[attribute!=value] 选择属性不等于某个值的标签如: input[name!=‘username’]
[attribute^=value] 选择属性以某个值开始的标签如: input[name^=‘use’] 类似 sql name like ‘use%’
[attribute$=value] 选择属性以某个值结束的标签如: input[name$=‘name’] 类似 sql name like ‘%name’
[attribute*=value] 选择属性含有某个值的标签如: input[name*=‘user’], 类似 sql name like ‘%user%’
[attrSel1][attrSel2][attrSelN] 选择既有属性id,也有属性class, 如 input[id][class]

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1.设置所有含有id属性的div，字体颜色红色
	$("div[id]").css("color", "red");
	// 2.设置所有class属性值 含有itcast元素背景色为黄色
	$("[class*='itcast']").css("background", "yellow");
	// 3.对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
	$("div[id][class]").click(function(){
		// alert(this.innerHTML); // js写法
		alert($(this).html()); // jquery写法
	});
	// 4 获取属性name="hobby"的input标签, 打印value属性值
	$("input[name='hobby']").each(function() {
		// alert(this.value); // js写法
		alert($(this).val()); // jquery写法
	});
});
</script>
</head>
<body>
	<div>AAAA</div>
	<div id="mydiv" class="itcast1">BBBB</div>
	<div class="itcast2">CCCC</div>
	<div id="mydiv2">DDDD</div>
	<div class="divclass">EEEE</div>
	<div id="xxx" class="itcast3">FFFF</div>
	<p class="p-itcast">PPPPPP</p>
	
	<input type="checkbox" name="hobby" value="高尔夫"/> 高尔夫
	<input type="checkbox" name="hobby" value="蹦极"/> 蹦极
	<input type="checkbox" name="hobby" value="足球"/> 足球 
	
</body>
</html>

2.7 子元素过滤选择器

:nth-child 匹配其父元素下的第N个子或奇偶元素
:first-child ‘:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:last-child 匹配最后一个子元素 ':last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1.在每个表格 下3的倍数行，字体颜色为红色
	$("tr:nth-child(3n)").css("color", "red");
	// 2.每个表格 奇数行 背景色 黄色
	$("tr:nth-child(odd)").css("background", "yellow");
	// 3.每个表格 偶数行 背景色 灰色
	$("tr:nth-child(even)").css("background", "gray");
	// 4.每个tr 只有一个td的  背景为 蓝色
	$("td:only-child").css("background", "blue");
});
</script>
</head>
<body>
	<table border="1" width="400" id="mytable">
		<tr><td>1</td><td>冰箱</td></tr>
		<tr><td>2</td><td>洗衣机</td></tr>
		<tr><td>3</td><td>热水器</td></tr>
		<tr><td>4</td><td>电饭锅</td></tr>
		<tr><td>5</td><td>电磁炉</td></tr>
		<tr><td>6</td><td>豆浆机</td></tr>
		<tr><td>7</td><td>微波炉</td></tr>
		<tr><td>8</td><td>电视</td></tr>
		<tr><td>9</td><td>空调</td></tr>
		<tr><td>10</td><td>收音机</td></tr>
		<tr><td>11</td><td>排油烟机</td></tr>
		<tr><td>12</td><td>加湿器</td></tr>
    	<tr><td>13 电暖气</td></tr>
	</table>
</body>
</html>

2.8 表单过滤选择器

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选框
:checkbox 匹配所有多选框
:submit 匹配提交按钮
:image 匹配图片标签
:reset 匹配重置按钮
:button 匹配按钮
:file 匹配 input type='file’的标签
:hidden 匹配隐藏的标签

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	//1．对所有text框和password框，添加离焦事件，校验输入内容不能为空
	$("input[name='username'], input[name='password']").blur(function(){
		var val = this.value
		if(val==null || val.trim().length <=0) {
			alert(this.name + "不得为空!");
		}
	});
	//2．对button 添加 点击事件，提交form表单
	$(":button").click(function(){
		$("form").submit();
	});
});
</script>
</head>
<body>
	<form action="login">
		用户名 <input type="text" name="username" /> <br/>
		密码 <input type="password" name="password" /> <br/>
		<input type="button" value="提交" />
	</form>
</body>
</html>

2.9 表单对象属性

:enabled 可用
:disabled 不可用
:checked 选中(单选和多选)
:selected 选中(下拉)

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	//需求1: 观察只读和不可用标签的联系和区别
	// 联系: 只能看,不能修改
	// 区别: 
			// 只读虽然不能修改,但是可以随表单一起提交
			// 不可用不仅不能修改, 还不能表单一起提交
	//需求2: 点击button 打印radio checkbox select 中选中项的值
	$(":button").click(function(){
		// 性别
		var sexVal = $("input[name='gender']:checked").val();
		alert("性别: " + sexVal);
		
		// 爱好
		var hobbyStr = "";
		$("input[name='hobby']:checked").each(function(){
			var hobby = this.value; // js写法
			hobbyStr += hobby + ",";
		});
		alert("爱好 : " + hobbyStr);
		
		// 城市
		var cityVal = $("select[name='city'] option:selected").val();
		alert("城市:" + cityVal);
	});
});
</script>
</head>
<body>
	<form>
		用户名(只读): <input type="text" readonly="readonly" name="username" value="zhangsan"/> <br/>
		密码(不可用): <input type="text" disabled="disabled" name="123" value="123"/> <br/>
		性别 
		<input type="radio" value="男" name="gender"/>男
		<input type="radio" value="女" name="gender"/>女 <br/>
		爱好
		<input type="checkbox" value="抽烟" name="hobby"/> 抽烟
		<input type="checkbox" value="喝酒" name="hobby" /> 喝酒
		<input type="checkbox" value="烫头" name="hobby" /> 烫头
		<input type="checkbox" value="泡妞" name="hobby" /> 泡妞 <br/>
		城市
		<select name="city">
			<option value="">请选择</option>
			<option value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="天津">天津</option>
		</select> <br/>
		<input type="button" value="打印" />
	</form>
</body>
</html>

3 dom

3.1 操作属性

attr(name|pro|key,val|fn) 设置或返回被选元素的属性值。
removeAttr(name)
prop(n|p|k,v|f)1.6+ 获取在匹配的元素集中的第一个元素的属性值。
removeProp(name)1.6+

设置

设置一个属性

标签.attr(key, value);

标签.attr({

key1 : val1,

key2 : val2

… …

});

获取

标签.attr(key)

删除

标签.removeAttr()

prop: 针对单选, 多选, 下拉

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 设置标签存在的属性
	$("#btn1").click(function(){
		$("a").attr("href", "http://www.baidu.com");
	})
	
	// 设置标签不存在的属性
	$("#btn2").click(function(){
		$("a").attr("meinv", "刘亦菲");
	})
	
	$("#btn3").click(function(){
		$("input[name='sex']").each(function(){
			var attrChecked = $(this).attr("checked"); // 获取单选的选中状态不合适
			alert(this.checked + " ===== " + attrChecked);
		});
	});
	
	$("#btn4").click(function(){
		$("input[name='sex']").each(function(){
			var propChecked = $(this).prop("checked"); // 获取单选的选中状态不合适
			alert(this.checked + " ===== " + propChecked);
		});
	});
});
</script>
</head>
<body>
	<a>百度</a> <br/>
	<input type="button" id="btn1" value="设置标签存在的属性"/> <br/>
	<input type="button" id="btn2" value="设置标签不存在的属性"/> <br/>
	<hr/>
	
	<input type="radio" name="sex" value="女"/>女
	<input type="radio" name="sex" value="男" checked="checked"/>男 <br/>
	<input type="button" id="btn3" value="通过attr获取选中状态"/> <br/>
	<input type="button" id="btn4" value="通过prop获取选中状态"/>
</body>
</html>

3.2 案例1: 全选全不选

1530516604906

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>

		<script type="text/javascript">
			$(function() {
				// 全选
				$("#checkall").click(function(){
					$("input[name='items']").prop("checked", true);
				});
				
				// 全不选
				$("#checkallNo").click(function(){
					$("input[name='items']").prop("checked", false);
				});
				
				// 全选/全不选
				$("#checkAllOrNot").click(function(){
					// 获取 全选/全不选 的选中状态
					var isChecked = this.checked;
					// alert(isChecked);
					$("input[name='items']").prop("checked", isChecked);
				});
				
				// 反选
				$("#check_revsern").click(function(){
					$("input[name='items']").each(function(){
						console.info(this.checked); 
						this.checked = !this.checked;
					});
				});
			});
		</script>
	</head>

<body>
		您的爱好很广泛!!!
		<br>
		<input type="checkbox" id="checkAllOrNot" />全选/全不选<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" name="checkall" id="checkall" value="全选" />
		<input type="button" name="checkall" id="checkallNo" value="全不选" />
		<input type="button" name="checkall" id="check_revsern" value="反选" />
	</body>

</html>

3.3 设置样式

1530517288772

CSS 类
addClass(class|fn) 增加class样式
removeClass([class|fn]) 删除class样式
toggleClass(class|fn[,sw]) 切换css样式: 有去掉; 没有增加

<!DOCTYPE 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 here</title>

<style type="text/css">
	.changeBackYellow {
		background : yellow;
	}
	
	.changeFontBlue {
		color : blue;
	}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
$(function(){
	$("#btn1").click(function(){
		// 方式一
		// $("div").attr("style", "background:yellow");
		
		// 方式二: 通过css
		// $("div").css("background", "yellow");
		
		// 方式三: 增加class样式
		// $("div").addClass("changeBackYellow");
		
		// 切换效果: 有 去掉; 没有 增加
		$("div").toggleClass("changeBackYellow");
	});
	
	// 字体变蓝
	$("#btn2").click(function(){
		// 方式一
		// $("div").attr("style", "color:blue");
		
		// 方式二: 通过css
		// $("div").css("color", "blue");
		
		// 方式三: 增加class样式
		// $("div").addClass("changeFontBlue");
		
		// 切换效果: 有 去掉; 没有 增加
		$("div").toggleClass("changeFontBlue");
	});
});
</script>
</head>
<body>
	<div>心情不错！</div>
	<input type="button" value="背景变黄" id="btn1"/>
	<input type="button" value="字体变蓝" id="btn2"/>
</body>
</html>

3.4 获取标签内容和获取用户填写或选择的值(重点重点重点)

读取和设置某个元素中HTML内容
	标签.html() 		获取一个元素中html内容
	标签.html(val) 	设置一个元素中html内容
	这个函数不能用于XML文档。但可以用于XHTML文档 
	
读取和设置某个元素中的文本内容 
	标签.text() 		获取一个元素中 文本内容
	标签.text(val) 	设置一个元素中 文本内容
	该方法既可以用于 XHTML 也可以用于 XML 文档
	
文本框、下拉列表框、单选框 选中的元素值
	标签.val() 		获取文本框、下拉列表框、单选框 value值
	标签.val(val) 	设置文本框、下拉列表框、单选框 value值

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 1．<div><p>传智播客</p></div>  获取div中 html和text 对比
	var _html = $("div").html();
	var _text = $("div").text();
	//console.info("html === " + _html);
	//console.info("text === " + _text)
	
	// 2．单击pickBtn 使用val() 获得文本框、下拉框、单选框选中的value 
	$("#pickBtn").click(function(){
		// 用户名 
		var usernameVal = $("input[name='username']").val();
		console.info("用户名  === " + usernameVal);
		// 城市
		var cityVal = $("select[name='city']").val();
		console.info("城市 === " + cityVal);
		// 爱好
		var hobbyStr = "";
		$("input[name='hobby']:checked").each(function(){
			hobbyStr += this.value + ", ";
		});
		console.info("爱好 === " + hobbyStr);
		// 性别
		var sexVal = $("input[name='gender']:checked").val();
		console.info("性别 === " + sexVal);
	});
	
	// 3．单击setBtn 测试能否通过 val() 设置单选框、下拉框的选中效果 ？ 
	$("#setBtn").click(function(){
		// 用户名 
		$("input[name='username']").val("梅西");
		
		// 城市
		$("select[name='city']").val("北京");
		
		// 爱好(多个)
		$("input[name='hobby']").val(["足球", "篮球", "乒乓球"]);
		
		// 性别(将单选认为是特殊多选, 只能选择一个)
		$("input[name='gender']").val(["男"]);
	});
});
</script>
</head>
<body>
	<div><p>传智播客</p></div>  
	<form>
		用户名 <input type="text" name="username" /> <br/>
		城市 <select name="city">
				<option value="">请选择</option>
				<option value="北京">北京</option>
				<option value="上海">上海</option>
			</select><br/>
		爱好 <input type="checkbox" name="hobby" value="足球" />足球	
		 <input type="checkbox" name="hobby" value="篮球" />篮球	
		 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球	
		 <input type="checkbox" name="hobby" value="排球" />排球 <br/>	

		性别 <input type="radio" name="gender" value="男" />男	
			<input type="radio" name="gender" value="女" />女 <br/>
		<input type="button" value="取值" id="pickBtn" />
		<input type="button" value="设值" id="setBtn" />
	</form>
</body>
</html>

3.5 jQuery操作

创建元素
    使用工厂函数 jQuery(html, [ownerDocument])  --- jQuery可以写为$
    例如： $(“<div>你好，jQuery</div>”);
内部插入
    $node.append($newNode)向每个匹配的元素内部的结尾处追加结尾处 
    $newNode.appendTo($node)将新元素追加到每个匹配元素内部的结尾处 
    $node.prepend($newNode) 向每个匹配的元素内部的结尾处追加开始处 
    $newNode.prependTo($node)将新元素追加到每个匹配元素内部的开始处 
外部插入
    $node.after($newNode) 向每个匹配的元素的之后插入内容，是并列兄弟 
    $newNode.insertAfter($node)  将新元素插入到每个匹配元素之后 
    $node.before($newNode)  向每个匹配的元素的之前插入内容 
    $newNode.insertBefore($node)  将新元素插入到每个匹配元素之前

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 插入大专学历 （本科和高中之间）--- 外部插入
	var _dazhuan = "<option value='大专'>大专</option>";
	$("option[value='本科']").after(_dazhuan);
	
	// 插入幼儿园 （学历列表最后） --- 内部插入
	var _youeryuan = "<option value='幼儿园'>幼儿园</option>";
	$("#edu").append(_youeryuan)
});
</script>
</head>
<body>
	<!-- 选择学历 -->
	<select id="edu" name="edu">
		<option value="">请选择</option>
		<option value="本科">本科</option>
		<option value="高中">高中</option>
		<option value="中转">中专</option>
		<option value="小学">小学</option>
	</select>
</body>
</html>

3.6 删除标签对象

<!DOCTYPE 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 here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
	// 绑定事件
	$("#inner").click(function(){
		alert("点击内部的div ... ...");
	});
	
	$("#outer").click(function(){
		alert("点击外部的div ... ...");
	});
	
	// 1 使用remove删除内部div标签, 再将删除标签 重新加入body 查看事件是否存在: 事件不存在
	//var _inner = $("#inner").remove();
	//$("body").append(_inner);
	
	// 2 使用detach删除标签, 再将删除标签 重新加入body 查看事件是否存在: 保留事件
	var _inner = $("#inner").detach();
	$("body").append(_inner);
	
	// 3 清空id='inner'的标签内容
	$("#inner").empty();
	
});
</script>
</head>
<body>
	<div id="outer" style="background:blue;width:300px;height:300px;">
		<div id="inner" style="background:red;width:150px;height:150px;">你们的真的太棒了!!!</div>
	</div>
</body>
</html>

3.7 案例2: 隔行变色

1530522616746

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>表格隔行变色和高亮</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			table {
				border: 1px red solid;
				width: 500px;
				margin: auto;
			}
			
			td {
				border: 1px blue solid;
				margin: 10px;
				padding: 10px;
				text-align: center;
			}
			
			th {
				background-color: maroon;
			}
			
			.one {
				background-color: blue;
			}
			
			.two {
				background-color: green;
			}
			
			.over {
				background-color: deeppink;
			}
		</style>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				// 1 偶数行样式为two
				$("tr:even").addClass("two");
				// 2 奇数行样式为one
				$("tr:odd").addClass("one");
				
				/*
				// 3 当光标悬浮在 tr上时,增加 over样式
				$("tr").mouseover(function(){
					$(this).addClass("over");
				});
				
				// 4 当光标离开tr时,删除over样式
				$("tr").mouseout(function(){
					$(this).removeClass("over");
				});
				*/
				
				// 合并第三步和第四步
				$("tr").hover(
					function(){
						$(this).addClass("over");
					},
					function(){
						$(this).removeClass("over");
					}
				);
				
			});
		</script>
	</head>

	<body>
		<table>
			<tr>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>5</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>6</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>7</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>8</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>9</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>10</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>

	</body>

</html>