ZichengQu · ZichengQu · Jan 10, 2019 · Jan 10, 2019 · Jan 10, 2019 · Jan 10, 2019
diff --git a/Others/jQuery_day01/img/科比.jpg b/Others/jQuery_day01/img/科比.jpg
diff --git a/Others/jQuery_day01/js/jquery-1.7.1.min.js b/Others/jQuery_day01/js/jquery-1.7.1.min.js
diff --git a/Others/jQuery_day01/内容过滤选择器.html b/Others/jQuery_day01/内容过滤选择器.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				$("div:contains('John')").css({ background: "yellow" });//:contains(text) 匹配包含给定文本的元素//第1和3行
+				console.log($("div:empty"));//:empty 匹配所有不包含子元素或者文本的空元素
+				$("div:has(p)").css({ color: "blue" });//:has(selector) 匹配含有选择器所匹配的元素的元素
+				$("div:parent").css({ color: "blue" });//:parent 匹配含有子元素或者文本的元素
+			});
+		</script>
+	</head>
+	<body>
+		<div>John Resig</div>
+		<div><p>George</p> Martin</div>
+		<div>Malcom John Sinclair</div>
+		<div style="border: 1px solid blue; width: 100px; height: 100px;"></div>
+	</body>
+</html>
diff --git a/Others/jQuery_day01/初识jq.html b/Others/jQuery_day01/初识jq.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title></title>
+		<script>
+			window.onload = function(){//使用原生js实现
+				var btn1 = document.getElementById("btn1");
+				btn1.onclick=function(){
+					var username = document.getElementById("name");
+					console.log(username.value);
+				}
+			}
+		</script>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			jQuery(document).ready(function(){//使用jq实现
+			  $("#btn2").click(function(){
+			  	var username = $("#name");
+			  	console.log(username.val());
+			  });
+			});
+		</script>
+	</head>
+	<body>
+		用户名: <input type="text" id="name" />
+		<input id="btn1" type="button" value="确定(js版)" />
+		<input id="btn2" type="button" value="确定(jq版)" />
+	</body>
+</html>
diff --git a/Others/jQuery_day01/可见性选择器.html b/Others/jQuery_day01/可见性选择器.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				console.log($("tr:hidden").text());//Value 1
+				console.log($("input:hidden").val());//hiddenDemo
+				console.log($("tr:visible").text());//Value 2Value 3
+				console.log($("tr:visible").html());//<td>Value 2</td><td>Value 3</td>
+			});
+		</script>
+	</head>
+	<body>
+		<table>
+		  <tr style="display:none"><td>Value 1</td></tr>
+		  <tr><td>Value 2</td><td>Value 3</td></tr>
+		</table>
+		<form>
+		  <input type="text" name="email" value="textDemo"/>
+		  <input type="hidden" name="id" value="hiddenDemo"/>
+		</form>
+	</body>
+</html>
diff --git a/Others/jQuery_day01/基本操作.html b/Others/jQuery_day01/基本操作.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				console.log($("p").html())//返回p元素的内容。//<span>哈哈哈哈</span>
+				$("p").html("<b>加粗文本</b>");//设置p元素的内容，识别标签
+				$("p").text("<b>加粗文本</b>");//设置p元素的内容，不识别标签，会输出标签
+				$("form:first").submit(function(){//验证表达输入项是否为空
+					if($("#name").val()==""){
+						console.log("请输入用户名");
+						return false;
+					}
+				});
+				console.log($("img").attr("src"));//img/科比.jpg
+				$("img").attr("title","科比");
+				//$("img").attr({style:"display:none;title:科比"});
+				$("img").attr("title", function() { return this.src });//this获取当前元素的html属性
+			});
+		</script>
+	</head>
+	<body>
+		<p><span>哈哈哈哈</span></p>
+		<form >
+			<input id="name" name="username"/>
+			<input type="submit" />
+		</form>
+		<img src="img/科比.jpg"/>
+	</body>
+</html>
diff --git a/Others/jQuery_day01/基本过滤选择器.html b/Others/jQuery_day01/基本过滤选择器.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				$("li:first").css({ background: "yellow" });//第一个元素
+				$("li:last").css({ background: "yellow" });//最后一个元素
+				$("li:not(:first)").css({ background: "red" });//把selector排除在外 //$("li:not(:eq(3))")
+				$("li:even").css({ background: "yellow" });//挑选偶数行
+				$("li:odd").css({ background: "pink" });//挑选奇数行
+				$("li:eq(0)").css({ background: "red" });//挑选下标等于index的元素
+				$("li:gt(0)").css({ background: "red" });//挑选下标大于index的元素
+				$("li:lt(6)").css({ background: "red" });//挑选下标小于index的元素
+			});
+		</script>
+	</head>
+	<body>
+		<h2>基本过滤选择器</h2>
+		<ul>
+			<li>Number1</li>
+			<li>Number2</li>
+			<li>Number3</li>
+			<li>Number4</li>
+			<li>Number5</li>
+			<li>Number6</li>
+			<li>Number7</li>
+		</ul>
+	</body>
+</html>
diff --git a/Others/jQuery_day01/基本选择器.html b/Others/jQuery_day01/基本选择器.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				$("#myDiv").css({ color: "#ff0011", background: "blue" });//id选择器
+				$("div").css({ color: "#ff0011", background: "red" });//元素选择器
+				$(".ps").css({ color: "#ff0011", background: "blue" });//类选择器
+				$("*").css({ color: "#ff0011", background: "blue" });//通配符选择器
+				$("#myDiv,h1,.ps").css({ color: "#ff0011", background: "blue" });//复合选择器
+			});
+		</script>
+	</head>
+	<body>
+		<h1>基本选择器</h1>
+		<div id="notMe">
+			<p class="ps">id="notMe"</p>
+		</div>
+		<div id="myDiv">id="myDiv"</div>
+	</body>
+</html>
diff --git a/Others/jQuery_day01/层级选择器.html b/Others/jQuery_day01/层级选择器.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				$("div span").css({ background: "yellow" });//1,2,3
+				$("div > span").css({ background: "red" });//1,3
+				$("div+span").css({ background: "red" });//4,7
+				$("div~span").css({ background: "red" });//4,5,7,9
+			});
+		</script>
+	</head>
+	<body>
+		<h2>层级选择器</h2>
+		<div>
+			<span>Number1</span>
+			<p><span>Number2</span></p>
+			<span>Number3</span>
+		</div>
+		<span>Number4</span>
+		<span>Number5</span>
+		<div>Number6</div>
+		<span>Number7</span>
+		<p>Number8</p>
+		<span>Number9</span>
+	</body>
+</html>
diff --git a/Others/jQuery_day01/属性过滤选择器.html b/Others/jQuery_day01/属性过滤选择器.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				//$("div[id]").css({color:"yellow"});//匹配包含给定属性的元素。
+				//$("input[name='newsletter']").attr("checked", true);//匹配给定的属性是某个特定值的元素
+				$("input[name^='news']").attr("checked", true);//匹配给定的属性是以某些值开始的元素
+			});
+		</script>
+	</head>
+	<body>
+		<div>
+		  <p>Hello</p>
+		</div>
+		<div id="test2">World!</div>
+		<input type="checkbox" name="newsletter" value="Hot Fuzz" />
+		<input type="checkbox" name="newsletter" value="Cold Fusion" />
+		<input type="checkbox" name="accept" value="Evil Plans" />
+	</body>
+</html>
diff --git a/Others/jQuery_day01/表单属性过滤选择器.html b/Others/jQuery_day01/表单属性过滤选择器.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				$("input:enabled").css({background:"yellow"}); //匹配所有可用元素
+				$("input:disabled").css({background:"blue"}); //匹配所有不可用元素
+				$("input:checked:eq(1)").attr("checked",false); //匹配所有被选中元素(复选框、单选框等，不包括select中的option)
+				console.log($("select option:selected").text()); //匹配所有选中的option元素
+			});
+		</script>
+	</head>
+	<body>
+		<form>
+		  <input name="email" disabled="disabled" />
+		  <input name="id" />
+		</form>
+		<form>
+		  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
+		  <input type="checkbox" name="newsletter" value="Weekly" />
+		  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
+		</form>
+		<select>
+		  <option value="1">Flowers</option>
+		  <option value="2" selected="selected">Gardens</option>
+		  <option value="3">Trees</option>
+		</select>
+	</body>
+</html>
diff --git a/Others/jQuery_day02/img/科比.jpg b/Others/jQuery_day02/img/科比.jpg
diff --git a/Others/jQuery_day02/jQuery事件.html b/Others/jQuery_day02/jQuery事件.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			$(function(){
+				$("#username").focus(function(){
+					console.log("获得焦点");
+				});
+				$("#username").blur(function(){
+					console.log("失去焦点");
+				});
+				$("input").keyup(function(){//当按钮被松开时，发生keyup事件。
+				  $("input").css("background-color","#D6D6FF");
+				});
+				$("#phone").keyup(function(){
+					var v = $(this).val();//$(this).val() -->jQuery对象;this.value --> DOM对象
+					var reg = /\D/g;
+					if(reg.test(v)){
+						$(this).val(v.replace(/\D/g,""));////禁止用户输入非数字字符，将非数字字符替换成空串。
+					}
+				});
+				$("p").click( function () { 
+					$(this).hide(); 
+				});
+				$("#form1").submit(function(){
+					if($("#user").val()==""){
+						console.log("请输入用户名!");
+						return false;
+					}
+				});
+				$("#btn").click(function(){//普通按钮提交,不通过type为submit的方式进行提交
+					if($("#user").val()==""){
+						console.log("请输入用户名!");
+						return false;
+					}
+					$("#form1").submit();
+				});
+
+			});
+		</script>
+	</head>
+	<body>
+		用户名: <input id="username" /><br />
+		手机号: <input id="phone" /><br />
+		<p>段落</p>
+		<form id="form1">
+			用户名: <input id="user" name="username"/><br />
+			<input type="submit" />
+			<input id="btn" type="button" value="普通按钮提交"/>
+		</form>
+	</body>
+</html>
diff --git a/Others/jQuery_day02/jQuery全选.html b/Others/jQuery_day02/jQuery全选.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			body{
+				font:20px "微软雅黑";
+			}
+		</style>
+		<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
+		<script>
+			/*
+			 * 1、得上面那个复选框
+			 * 2、判断这个复选框是否被选中
+			 * 3、如果是选中，下面是全选
+			 * 4、如果不是选中，下面全部选
+			 */
+			$(function(){
+				$("#selAll").click(function(){
+					if($(this).prop("checked")){//判断全选是否被选中
+						$("input[name='language']").prop("checked",true);
+					}else{
+						$("input[name='language']").prop("checked",false);
+					}
+				});
+				$("input[name='language']").click(function(){//第一种
+					var L = $("input[name='language']").length;
+					var sel = $("input[name='language']:checked").length;
+					if(L==sel){
+						$("#selAll").prop("checked",true);
+					}else{
+						$("#selAll").prop("checked",false);
+					}
+				});
+				$("input[name='language']").click(function(){//第二种(较为规范)，对name='language'的元素进行遍历
+					var flag = true;
+					$("input[name='language']").each(function(){
+						if(!this.checked){
+							flag = false;
+							return;//结束遍历
+						}
+					});
+					if(flag){
+						$("#selAll").prop("checked",true);
+					}else{
+						$("#selAll").prop("checked",false);
+					}
+				});
+			});
+		</script>
+	</head>
+	<body>
+		<input type="checkbox" id="selAll"/>全选<br/>
+		<input name="language" type="checkbox" id="java" />java<br/>
+		<input name="language" type="checkbox" id="python" />python<br/>
+		<input name="language" type="checkbox" id="c" />c语言<br/>
+		<input name="language" type="checkbox" id="php" />php<br/>
+
+	</body>
+</html>