Introduction to JQuery

Jquery is a js framework (JSd1 class library), which encapsulates traditional js.
Using JQuery can be compatible with various browsers, conveniently process HTML, Events, animation effects, etc., and conveniently provide AjAX interaction for websites.
The simplicity and ease of use of JQuery has greatly improved the people's use of it.
Using JQuery can be done, the html page code and control are separated, and the control code is completely put into a separate js file.
The use of JQuery requires the introduction of JQuery js files, which can be downloaded from https://jquery.com/

Jquery selector

Basic selector

Pay attention to the characteristics of grammar when using JQuery to locate, the "$" symbol is followed by parentheses

id selector: $("#id")

Class selector: $(.class)

Element selector: $("element name")

Wildcard selector: $("*")

Parallel selector: $("selector, selector, selector")

Hierarchy selector

Descendant selector: use spaces, all descendants contain elements below grandchildren

Child element selector: use> the first level element (son)

Next element: Use + next sibling element

Sibling element: use all sibling elements behind ~

Filter selector (filter selector starts with ":" or "[]")

Basic filter selector

Content filter selector

Visibility filter selector

Attribute filter selector

Form selector

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery选择器</title>
	<script src="Jquery.js"></script>
	<script>
		//初始化加载
		window.onload=function(){
			//基本选择器
			var $div1 =	$("#div1");//ID选择器
			alert($div1.text());
			var $div = $(".div");//class选择器
			//alert($div.length);
			var $div1 = $("div");//标签选择器
		//	alert($div.text());
			//console.info($("*"));//所有选择器
			$("#div1,.span").css("background-color","red");//并列选择器
			
			//层次选择器
			//console.info($("#div3 span"));//后代选择器
			console.info($("#span2>span"));//直接子元素	
			console.info($("#span2+span"));//下一个兄弟元素
			console.info($("#spa1~span"));//后面所有的兄弟元素
			//过滤选择器
			//1--基本过滤选择器
			console.info($(":first"));
			//2---将selected排除在外
			console.info($("div:not('#div3')"));
			//3---eq(i)/gt(i)/lt(i) 下标大于小于等于i
			console.info($("div:eq(0)"));
			console.info($("div:gt(0)"));
			console.info($("div:lt(0)"));
			//四，内容过滤选择器
			//1---包含给定文本内容
			console.info($(":contains('内联span2')"));
			//2--匹配所有不包含子元素或文本的元素
			console.info($(":empty"));
			//3--匹配包含资源或文本的元素
			console.info($(":parent"));
			//<五、可见性过滤选择器
			console.info($(":hidden"));//不可见元素
			console.info(("visible"));//可见元素，
			//属性过滤选择器
				console.info($("div[class!=div]"));
			
			
			//六】表单选择器
			console.info($("input"));
			console.info($(":text"));
			console.info($(":submit"));
			
		}
	</script>
</head>
<body>
	<div id="div1" class="div">我是div1</div>
	<div id="div2" class="div">我是div2</div>
	<span class="span">我是span1111</span>
	<div id="div3">
		<div>
			<span id="span1" class="span">我是内联span1</span>
		</div>
		<span id="span2" class="span">我是内联span2</span>
		<span id="span3" class="span">我是内联span3</span>
	</div>
	<div style="display: none" id="div4">111</div>
	<form action="">
		<input type="text" value="aaa"/>
		<input type="password" value="123456"/>
		<input type="submit" value="提交">
	</form>
</body>
</html>

jQuery implements checkboxes to select all and unselect all

<!doctype html>
<html lang=>
<head>
<meta charset="utf-8">
<title>复选框练习</title>
<script src="jQuery.js"	></script>
<script>
	window.onload=function(){
		//获得表格节点
		var tab = document.getElementById("tab1");
		//获得行
		var l = tab.rows.length;
		for(var i = 0;i < l;i++){
			if(i % 2 == 0)
			{
				tab.rows[i].style.backgroundColor = "yellow";			
			}
			else{
				tab.rows[i].style.backgroundColor = "pink";
			}		
		}
	}
	function checkAll(){
		//获得表头行的复选框
		var selectAll = $("#selectAll");
		//获得表格体中的所有复选框
		var ids = $("[name='ids']");
		//判断总复选框是否被选中
		if(selectAll.prop("checked")){
			//获得表格体集合，全选
			ids.prop("checked", true);
		}else{
			ids.prop("checked", false);
		}
	}
</script>
</head>
<body>
	<center>
		<h1>Js实现隔行换色</h1>
	</center>
	<table id="tab1" border="1" align="center" width="700px" height="200px">
		<thead>
			<tr>
				<th><input type="checkbox" id="selectAll" onclick="checkAll()"></th>
				<th>序号</th>
				<th>学科</th>
				<th>描述</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" name="ids"/></td>
				<td>1</td>
				<td>java</td>
				<td>万物皆对象</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
			  <td><input type="checkbox" name="ids" /></td>
                <td>2</td>
                <td>php</td>
                <td>php是最好的语言</td>
                <td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		<tr>
                <td><input type="checkbox" name="ids" /></td>
                <td>3</td>
                <td>Golang</td>
                <td>Golang发展前景巨大</td>
                <td><a href="#">修改</a>|<a href="#">删除</a></td>
            </tr>
		</tbody>
	</table>
</body>
</html>

Exercise: Use jQuery to achieve interlaced color change in tables

Change the background color of the table every other row: tbody tr:odd odd rows tbody tr:even even rows

Js realizes initial loading: window.onload = function()()

JQuery implementation: $(function())

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jQuery.js"></script>
<script>
	$(function(){
		$("tr:odd").css("background-color", "pink");
		$("tr:even").css("background-color","yellow");
	});
</script>
	
</head>
	
<body>
	<center>
		<h1>js实现隔行换色</h1>
	</center>
	<table id="tab1" border="2px" align="center" height="200px" width="600px">
		<tr style="background-color: yellow">
		<th>序号</th>
		<th>学科</th>
		<th>描述</th>
		<th>操作</th>
		</tr>
		<tr>
			
			<td>1</td>
			<td>java</td>
			<td>万事接对象</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>

			<td>2</td>
			<td>php</td>
			<td>php是最好的语言</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>	
		<tr>

			<td>3</td>
			<td>Golang</td>
			<td>Golang发展前景巨大</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>	
	</table>
</body>
</html>

jQuery events and effects

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery事件</title>
<script src="jQuery.js"></script>
<script>
	//都属于编程事件，之前学习的属于标签事件<br>
	$(function(){
		//click 单击事件
		$("#bt").click(function(){
			alert("按钮被点击");			  
		})
		//hover 鼠标移入 /移出
	  	$("#tx").hover(function(){
			alert("鼠标移入");
		},function(){
			alert("鼠标移出");
		})
		//console 元素发生改变事件
		$("#sel").change(function(){
			console.info($(this).val());//this代表当前对象，当前是dom对象，所以需要转换为Jquery对象
		})
		//鼠标其他事件 $("#xx").事件名(function(){})
		
	//	$("input, select:visible").hide();// hide 隐藏
	//	$("span:hidden").show();//hidden      显示
	//
		//toggle   单击切换.jQ1.9以后就移除
		/*$("#bt").toggle(function(){
			alert("点击第一次");
		},function(){
			alert("点击第二次");
		},function(){
			alert("点击第三次");
		} );*/
	
	});
	
	
	
</script>	
</head>
<body>
	<input type="button" id="bt" value="按钮" />
	<input type="text" id="tx" value="mary"/>
	<select id="sel">
		<option>选项一</option>
		<option>选项二</option>
		<option>选项三</option>
	</select>
	<span style="display: none">这里是span</span>
</body>
</html>

JQuery part of the content collation