初識jQuery

My_name_is_ZwZ發表於2018-10-28
jQuery

目錄

什麼是jQuery？

jQuery的特點？

jQuery如何使用？

jQuery物件和普通DOM物件的區別：

jQuery物件中的一些簡單方法：

什麼是jQuery？

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動 -------- 百度百科

說白了jQuery是一個JavaScript框架，主要是對DOM物件進行了封裝。它的語法簡單，使用更加方便。

學習jQuery其實就是學習jQuery物件的方法而已

jQuery的特點？

  1. 小巧，開源，免費；
  2. 功能強大，易於擴充套件；
  3. 實現了瀏覽器的相容。

jQuery如何使用？

第一種方式(將jQuery檔案下載到本地)：

//jQuery的使用只需要在<head></head>中加上下面這句話即可
//src標識jquery.min.js檔案存放在了哪裡(與平時<img />標籤中src用法相同)
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

 第二種方式(使用CDN資源，前提是客戶端可以聯網) ：

//在html檔案的<head>標籤中加上下面這句話(1.6.4表示的是jQuery的版本)
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>

 使用建議：在專案除錯階段使用本地的檔案，上線之後使用CDN資源。這樣可以減輕"我方"伺服器的壓力。

jQuery物件和普通DOM物件的區別：

DOM物件使用原生的js獲取或建立物件；

jQuery物件使用jQuery中的方式獲取或建立物件；

但是，兩種物件其實都是指同一個或者同一種標籤，只是用的不同的身份而已。

jQuery物件中的一些簡單方法：

1.jQuery物件和普通DOM物件之間的轉換：

<body>
	<input type="text" value="23" id="txt" />	
</body>
<script type="text/javascript">

	//使用原生js 通過id得到<input>元素的引用
	var x = document.getElementById("txt");
    alert(x.value);

    //使用jQuery獲取id="txt"的物件
	var y = $("#txt");

    //使用jQuery輸出得到的物件的value值 只有jQuery物件才可以使用val()方法
    alert(y.val());

    //將jQuery物件轉換成DOM物件
	var z = y.get(0);
	alert(z.value);

    //將普通的DOM物件轉換成jQuery物件 $()其實就是jQuery()的縮寫
    var m = $(x);
    alert(m.val());
</script>

2. 根據id找物件：

var x = $("#txt");// 使用jQuery獲取id為txt的物件

 3.根據標籤名字找物件：

var x = $("div");//找到<div>標籤

 4.根據.calss屬性找物件：

var x = $(".class");

 5.獲取或設定物件的innerHTML屬性：

<body>
	<!--<input type="text" value="23" id="txt" />-->
	<h1 id="cc">  23   </h1>
	<input type="button" value="累加"  onclick="add()"/>
</body>
<script type="text/javascript">
	function add()
	{
                 //innerHTML：表示的是標籤中間的內容
                 //value：表示的是標籤內部value屬性的值
		var x = $("#cc").html();//獲得<h1>標籤的innerHTML屬性(代表著標籤體中的內容)
		x++;
		$("#cc").html(x);
	}
</script>

 6.設定物件的行內樣式和物件的class屬性:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.cc{
				background: red;
				height: 100px;
				border-bottom: 4px dashed yellowgreen;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
		<div>aa</div>
		<div>aa</div>
		<div id="thrit">aa</div>
	</body>
	<script type="text/javascript">

		//給所有的div標籤加上.cc這個class屬性
		$("div").addClass('cc');

        //刪除第一個div標籤的.cc這個class屬性
		$("div:first").removeClass('cc');
        
        //給設定有.cc這一class屬性的標籤加上style屬性，也就是行內樣式
		$(".cc").css('font-size','30px');
        
        //給id="thrit"的標籤設定行內樣式
        $("#thrit").css({background:'red',height:'200px'});
	</script>
</html>

7.show( )  顯示標籤：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<img src="img/1.png" />
		</div>
		<input type="button" id="btn" value="按鈕"/>
	</body>
	<script type="text/javascript">
		// 給id="btn"的標籤新增click監聽事件
		$("#btn").click(function(){
			$("#box").show();//顯示此標籤內容 因為本來載入出來就顯示，所以這裡沒有什麼肉眼可見的效果
		})
		
	</script>
</html>

 之前使用標籤的onclick屬性加入監聽事件的缺點：大型專案開發的時候是團隊協作，隊員難免有js中函式名重複的情況發生，一旦這種情況發生，就要必定有人做出修改。而修改的時候是既要修改html中onclick屬性中的函式名，還要修改js中的函式名，修改兩次的話勢必造成效率的降低。現在是在js中這一處寫，到時候修改的時候只需要修改這一處就ok

 8.hide( )  隱藏標籤：

<!--上邊的程式碼和7中的相同  以下程式碼實現了點選一下隱藏照片的效果-->
<script type="text/javascript">
	// 給id="btn"的標籤新增click監聽事件
	$("#btn").click(function(){
		$("#box").hide();//隱藏此標籤內容
	})	
</script>

 9.toggle( )  顯示和隱藏轉換：

<!--上邊的程式碼和7中的相同  以下程式碼實現了點選一下隱藏照片，再點選一下就顯示的效果-->
<script type="text/javascript">
	$("#btn").click(function(){
		$("#box").toggle();
	})
</script>

 10.prop( )方法  獲取標籤指定的屬性值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="text" id="txt" value="23" />
		<input type="button" id="btn" />
	</body>
	<script type="text/javascript">
        //當點選按鈕時：輸出id="txt"的標籤的value屬性的值
		$("#btn").click(function(){
			alert($("#txt").prop('value'))
		})
		
	</script>
</html>

11.text()方法  獲取或設定物件的innerText屬性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div>hello</div>
			<h1>world</h1>
		</div>
	</body>
	<script type="text/javascript">
		var  x=$("#box").html()
		var y=$("#box").text()
		alert(x);//會將<div>.....</h1>這些全部內容輸出
		alert(y);//只會輸出hello world
		
	</script>
</html>

 

相關文章