jquery 簡單概括 -- 前端知識

時間 2020-05-25

標籤 jquery 簡單概括前端知識欄目 JQuery 简体版

原文原文鏈接

jquery

什麼是jQuery？

jquery是輕量級的JavaScript庫，核心是javascript，兼容css和各類瀏覽器，核心理念是寫得少作得多（write less do more）。javascript

爲何要學習jQuery?

由於它有不少優點：容易上手，強大的選擇器，節約開發時間，豐富的UI，完善的事件機制，Ajax的封裝。css

此外，補充jQuery的一些特性和方法：鏈式操做，回調函數，迭代器，延遲對象，隊列。html

帶min與不帶min兩個版本的區別：

a. jquery-1.11.3.js --- 開發版:編寫代碼的時候可能會出現一些問題,去看源碼的設計思路,讓本身的問題獲得解決,切記:只是參考,看看就夠了,千萬不要修改。
b. jquery-1.11.3.min.js --- 生產版:當咱們的編碼所有完成,測試經過,要上線,此時,換成該版本。java

內容和功能全都是相同的，只是文件大小的問題,帶min的是通過壓縮之後的,去掉了全部的空格和換行,主要是減少佔用的空間,形參進行了更改,經過工具進行的壓縮。jquery

jQuery版本

1.x.x 兼容性最好的
2.x.x 拋棄了IE9如下
3.x.x 濃縮的2.0的版本ajax

jQuery屬於說是企業的標準了
jquery的插件很是多,不少的動畫都是依賴於jquery完成的
jquery庫下載網站 --- http://www.jq22.com (免費的)編程

(注！jquery-2.0以上版本再也不支持IE 6/7/8) 並非最新的版本就最好的，而是根據您項目需求所適合的版本！)

引入jquery文件：

<script type="text/javascript" src="jquery-1.11.3.js"></script>數組

或者：

百度壓縮版引用地址:瀏覽器

< script src = "http://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></ script >

微軟壓縮版引用地址:less

< script src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js" ></ script >

官網jquery壓縮版引用地址:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

jQuery 的核心函數是： $ === jQuery

函數	說明
jQuery()	主要用於獲取HTML DOM元素並將其封裝爲jQuery對象

函數說明

jQuery():

jQuery()函數是jQuery庫的最核心函數，jQuery的一切都是基於此函數的。該函數主要用於獲取HTML DOM元素並將其封裝爲jQuery對象，以便於使用jQuery對象提供的其餘屬性和方法對DOM元素進行操做。

jQuery()函數的功能很是強大，它能夠將各類類型的參數智能地封裝爲jQuery對象。

var username = document.getElementsByClassName("username")[0]; console.log(username) //輸出的是一個DOM對象
username.style.backgroundColor = "#f00"; var $username = $(".username"); console.log($username) //輸出的是jquery對象，是類數組。 //無論你用什麼方式獲取過來的全都是類數組,jquery操做也是操做這個類數組
$username.css("color","#fff")

jQuery對象與DOM對象的區別，聯繫

DOM對象：使用JavaScript的方法獲取的對象就是DOM對象。

jQuery對象：使用jQuery的方法獲取的對象就是jQuery對象。

jQuery對象其實就是DOM對象的包裝集（包裝了DOM對象的集合（僞數組））

區別

DOM對象與jQuery對象的方法不能混用。

聯繫

jQuery對象與DOM對象能夠互相轉換。

DOM ——> jQuery $( domobj)

jQuery ——> DOM $li [ 0 ] 或 $li.get( 0 )

//jquery對象 -> dom對象
var $username = $("#username");   //jquery對象 //var username = $username[0]; //jquery對象就是一個類數組，裏面所放的每個元素都是dom對象 //console.log(username)


//dom對象 -> jquery對象
var username = document.getElementById("username");    //dom對象  //var $username = $(username); //直接把dom對象放到$()中進行包裝便可 //console.log($username)
        
//console.log(username.value)
console.log($username.val()) //jQuery是會去儘可能減小報錯,不報錯真的不必定是好事 //不報錯你可能永遠不知道錯在啥地方

先推薦一個很實用的參考手冊噢 --- jQuery1.11.3_20150618.CHM（我想通常大家都有吧），或者w3c……

多庫共存

多庫共存：jQuery佔用了$ 和jQuery這兩個變量。當在同一個頁面中引用了jQuery這個js庫，而且引用的其餘庫（或者其餘版本的jQuery庫）中也用到了$或者jQuery這兩個變量，那麼，要保證每一個庫都能正常使用，這時候就有了多庫共存的問題。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            //打印版本號。
            console.log($.fn.jquery);//1.11.1
            $.noConflict();//讓1.11.1放棄$的使用權，這樣1.8.2就會得到對$的使用權
            console.log($.fn.jquery);//1.8.2
            console.log(jQuery.fn.jquery);//1.11.1
        })
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            console.log($.fn.jquery);//1.11.1
            var MrLv = $.noConflict(true);//讓1.11.1放棄兩個符號的使用權，同時定義一個新的使用權
            console.log($.fn.jquery);//1.8.2
            console.log(jQuery.fn.jquery);//1.8.2
            console.log(MrLv.fn.jquery);//1.11.1
        })
    </script>
</head>
<body>
</body>
</html>

事件委託-原生

在綁定節點事件處理程序時遇到的問題：

每一個 函數都是對象，都會佔用內存；內存中的對象越多，性能就越差。

其次，必須事先指定全部事件處理程 序而致使的 DOM訪問次數，會延遲整個頁面的交互就緒時間。

採用事件委託的優勢:

document 對象很快就能夠訪問，並且能夠在頁面生命週期的任什麼時候點上爲它添加事件處理程序（無需等待 DOMContentLoaded 或 load 事件）。換句話說，只要可單擊的元素呈如今頁面上，就能夠當即具有適當的功能。
在頁面中設置事件處理程序所需的時間更少。只添加一個事件處理程序所需的DOM引用更少，所花的時間也更少。
整個頁面佔用的內存空間更少，可以提高總體性能。
綁定事件後,即便目標元素是之後再添加進來的也有效。

適合採用事件委託技術的事件包括click、mousedown、mouseup、keydown、keyup和keypress等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件委託-原生</title>
	</head>
	<body>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		
		<script type="text/javascript">
			
//			普通的寫法   綁定了六次
//			var lis = document.getElementsByTagName("li");
//			for(var i = 0;i<lis.length;i++){
//				lis[i].onclick = function(){
//					console.log(this.innerHTML)
//				}
//			}
		
		
//			把本身要作的事情委託給父元素來作,事件只須要綁定一次就夠了
			var ul = document.getElementsByTagName("ul")[0];
			ul.onclick = function(event){
				event = event || window.event;
				var target = event.target || event.srcElement;
//				console.log(target)
				console.log(target.innerHTML)
			}
			
		</script>
	</body>
</html>

jquery中的事件綁定　

1、用bind()方法來對匹配元素進行特定事件的綁定

在文檔裝載完成後，使用bind()方法來對匹配元素進行特定事件的綁定，bing() 方法的調用格式爲：

bind(type[,data],fn);

3個參數，說明以下

a. type：blur、focus、load、resize、scroll、unload、click、 dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、 mouseleaye、change、select、submit、keydown、keypress、keyup和error等，固然也能夠是自定義名稱。

b. data是可選參數：做爲event.data屬性值傳遞給事件對象的額外數據對象。

c. fn參數則是用來綁定的處理函數。

平時咱們寫像 click、mouseover 和 mouseout 這類事件，由於在程序中常常會使用到，jQuery 爲此提供了一套簡寫方法，以下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery中的事件綁定</title>
		<script src="jquery-1.11.3.min.js"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #f00;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>事件綁定</button>
		<div></div>
		<script type="text/javascript">
//			$("button").click(function(){
//				if($("div").css("display") == "none"){
//					$("div").show()
//				}else{
//					$("div").hide()
//				}
//			})
			
			$("button").bind("click",function(){
				if($("div").css("display") == "none"){
					$("div").show()
				}else{
					$("div").hide()
				}
			})
		</script>
		
	</body>
</html>

2、移除以前的綁定事件

用$("#result").unbind("click")

若是你要移除全部的綁定事件，直接用 $("#result").unbind()

例題中用 $("button").unbind("mouseout")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery中的事件綁定</title>
		<script src="jquery-1.11.3.min.js"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #f00;
				display: none;
			}
		</style>
	</head>
	<body>
		<button>事件綁定</button>
		<div></div>
		<script type="text/javascript">
//			鼠標移入btn是顯示,
//			移出btn是隱藏
			
//			移入     mouseover
//			移出     mouseout
			
//			jquery 屬於鏈式調用
//			$("button").mouseover(function(){
//				$("div").show()
//			}).mouseout(function(){
//				$("div").hide()
//			})
			
			$("button").bind("mouseover mouseout",function(){   //事件綁定是能夠綁定多個事件的
				if($("div").css("display") == "none"){
					$("div").show()
				}else{
					$("div").hide()
				}
			})
			
			
//			事件的解綁
			
//			$("button").unbind()    ///若是不寫就是解綁全部事件
			$("button").unbind("mouseout")   //寫指定的事件就是解綁指定的事件
		</script>
		
	</body>
</html>

　　自定義動畫

屬性對象

animate()方法的常規使用和以前介紹的3種常見動畫的使用方法相似

animate(properties[,duration][,easing][,complete])

　　animate()方法的第一個參數是一個必須參數，表示一個CSS屬性和值的對象，動畫將根據這組對象移動

　　全部用於動畫的屬性必須是數字的，除非另有說明；這些屬性若是不是數字的將不能使用基本的jQuery功能。例如，width、height或者left能夠執行動畫，可是background-color不能

　　固然，除了樣式屬性，一些非樣式的屬性，如scrollTop、scrollLeft以及自定義屬性，也可應用於動畫。

可選參數

　　animate(properties[,duration][,easing][,complete])方法中除了第一個屬性對象是必需參數，其他參數都是可選參數。接下來，介紹animate()方法的可選參數

持續時間

　　animate()方法的第二個參數持續時間，用一個字符串或者數字決定動畫將運行多久。默認值爲"normal"，有三種預約速度的字符串"slow"、"normal"、"fast"分別表示600ms、400ms和200ms

　　[注意]若是要自定義持續時間，須要設置爲數字(如400)，而不要設置爲字符串'400'，不然將不生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定義動畫</title>
		<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: #f00;
				position: relative;
				display: none;
			}
		</style>
	</head>
	<body>
		
		
		<div></div>
		
		
		<script type="text/javascript">
//			鏈式寫法
//			$("div").show().animate({
//				"width" : "100px",
//				"height" : "100px",
//				"top" : "100px",
//				"left" : "100px"
//			},3000)

			$("div").show().animate({
				"width" : "50px",
				"height" : "50px"
			},3000).animate({
				"left" : "500px"
			},3000)
		</script>
	</body>
</html>

　　jquery遍歷-each

固然咱們知道經過標籤獲取元素，返回的是一個類數組。

console.log(index); -- 返回的是當遍歷的索引

console.log(domElement) -- 輸出的是 <li>0</li> 當前索引的值

console.log(domElement.innerHTML) 和 console.log($(domElement).html()) -- 返回當前索引的文本內容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery遍歷-each</title>
		<script src="jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
		
		<script type="text/javascript">
//			var lis = document.getElementsByTagName("li");
//			for(var i = 0;i < lis.length;i++){
//				console.log(lis[i].innerHTML)
//			}

			var $lis = $("li");
			
			$lis.each(function(index,domElement){
				console.log(index);
				console.log(domElement)
				console.log(domElement.innerHTML)
				console.log($(domElement).html())
			})
		</script>
	</body>
</html>

　　結果以下：

最後吶，作了一個手風琴效果

代碼很簡單，也就是練練手。將如上內容融匯貫通，實際操做一遍。

代碼以下 :

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {padding: 0;margin: 0;}
    ul { list-style-type: none;}
    
    .parentWrap {
      width: 200px;
      text-align:center;
      
    }
    
    .menuGroup {
      border:1px solid #999;
      background-color:#e0ecff;
    }
    
    .groupTitle {
      display:block;
      height:20px;
      line-height:20px;
      font-size: 16px;
      border-bottom:1px solid #ccc;
      cursor:pointer;
    }
    
    .menuGroup > div {
      height: 200px;
      background-color:#fff;
      display:none;
    }
  
  </style>
  
  <script src="jquery-1.11.3.min.js"></script>
  <script>
      $(function () {
          //思路分析：
          //1. 給全部的span註冊點擊事件，讓當前span的兄弟div顯示出來
          $(".groupTitle").click(function () {
            //下一個兄弟：nextElementSibling
            
            //鏈式編程：在jQuery裏面，方法能夠一直調用下去。
            $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
          });
      });
  </script>
</head>
<body>
<ul class="parentWrap">
  <li class="menuGroup">
    <span class="groupTitle">標題1</span>
    <div>我是彈出來的div1</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">標題2</span>
    <div>我是彈出來的div2</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">標題3</span>
    <div>我是彈出來的div3</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">標題4</span>
    <div>我是彈出來的div4</div>
  </li>
</ul>
</body>
</html>

原文出處：https://www.cnblogs.com/xuxiaoyu/p/10177309.html