JQuery部分內容整理

原創 冉筱 2020-07-04 03:38

JQuery簡介

  1. Jquery是一個js的框架(JSd1類庫），對傳統的js進行封裝。
  2. 使用JQuery可以兼容各種遊覽器，方便的處理HTML、Events、動畫效果等，方便的爲網站提供AjAX交互。
  3. JQuery寫法的簡單性，易用性大大提升了人民對它的使用。
  4. 使用JQuery可以做到，html頁面代碼和控制的分離，徹底將控制代碼放入一個單獨的js文件。
  5. 使用JQuery需要引入JQuery的js文件，可以從https://jquery.com/下載

 

Jquery選擇器

基本選擇器

  • 使用JQuery進行定位時注意語法的特點，“$”符號接小括號
  • id 選擇器：$("#id")
  • 類選擇器:$(.class)
  • 元素選擇器:$("元素名")
  • 通配符選擇器:$("*")
  • 並列選擇器:$("選擇器，選擇器，選擇器")

層次選擇器

後代選擇器：使用空格，所有後代包含孫子以下的元素

子元素選擇器：使用> 第一層的元素（兒子）

下一個元素： 使用+  下一個同輩元素

兄弟元素：使用~    後面所有的同輩元素

過濾選擇器（過濾選擇器以":" 或"[]"開始）

基本過濾選擇器

內容過濾選擇器

可見性過濾選擇器

屬性過濾選擇器

表單選擇器

<!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實現複選框全選全不選

<!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>

練習:使用jQuery實現表格隔行換色

表格隔行換背景顏色：tbody tr:odd 奇數行 tbody tr:even 偶數行

Js實現初始化加載:window.onload = function(){}

JQuery實現 : $(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事件和效果

 

<!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>

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML---標籤總結

這一階段的老師說話聲音真的好好聽，就是聽着聽着就有點困   重點內容單獨記，本單元主體框架及基本內容見下方。 HTML常用標籤： （1）結構標籤 （2）字體標籤 （3）排版標籤 標題標籤 h 段落標籤 p 字體加粗標籤 b 字體斜體標籤

冉筱 2020-06-22 16:27:19

html背景知識---及基本用法

冉筱 2020-02-23 14:21:45

vsCode安裝使用教程和插件安裝

冉筱 2020-02-23 14:21:25

HTML---標籤總結

這一階段的老師說話聲音真的好好聽，就是聽着聽着就有點困   重點內容單獨記，本單元主體框架及基本內容見下方。 HTML常用標籤： （1）結構標籤 （2）字體標籤 （3）排版標籤 標題標籤 h 段落標籤 p 字體加粗標籤 b 字體斜體標籤

冉筱 2020-06-22 16:27:19

html背景知識---及基本用法

冉筱 2020-02-23 14:21:45

Javascript對象歸納

冉筱 2020-02-23 14:21:25

vsCode安裝使用教程和插件安裝

冉筱 2020-02-23 14:21:25