jQuery入門

来源:https://www.cnblogs.com/stanwuc/archive/2019/03/04/10469395.html
-Advertisement-
Play Games

一、入門 1、jquery 就是一個js的框架； 2、好處就是能讓我們的js代碼寫的更少； 3、基本使用：引入script，後面使用即可； 4、關於版本選擇：1.* 版本的相容性比較好，大公司用的多； 5、關於壓縮版和為壓縮版：開發用未壓縮的便於看源碼學習，生產環境用壓縮版可以提高速度； 二、jQu ...


一、入門

1、jquery 就是一個js的框架；

2、好處就是能讓我們的js代碼寫的更少；

3、基本使用：引入script，後面使用即可；

4、關於版本選擇：1.* 版本的相容性比較好，大公司用的多；

5、關於壓縮版和為壓縮版：開發用未壓縮的便於看源碼學習，生產環境用壓縮版可以提高速度；

 

二、jQuery函數

1、入口函數

（1）入口函數：開發中一般用第三種

//1
$(document).ready(function () {
	alert("hello3")
});

//2
jQuery(document).ready(function () {
	alert("hello4")
})

//3
$(
	function () {
		alert("hello1");
	}
);

//4
jQuery(
	function () {
		alert("hello2");
	}
);

（2）載入模式

  • jquery 的 ready 只會等待 dom 元素載入完畢，不等圖片載入完；原生js 的 onload 會等 dom 和圖片一起都載入完；
  • 存在多個入口函數的話，jQuery 的不會覆蓋，而原生的會發生覆蓋；

（3）衝突解決

  • 第一種使用jQuery 代替 $；
  • 第二種使用自定義的符號進行替代；
var $ = 123;
var jq = jQuery.noConflict();
jq(function (ev) {
	alert("haha");
})

2、核心函數

（1）核心函數

  • $（）就代表調用jQuery 的核心函數；
  • 核心函數的參數可以是：
  • 1、函數：就是入口函數；
  • 2、字元串選擇器：包選擇器選擇到的元素包裝為一個 jQuery 對象；
  • 3、字元串代碼塊：將代碼塊代表的元素包裝為一個 jQuery 對象；
  • 4、dom元素：將原生的 dom 元素包裝為一個 jQuery 對象；

（2）jQuery對象

  • jQuery 對象的本質是一個偽數組；
  • 偽數組就是有 index 和 length 的類似於數組的對象
var arr = {0:'2',1:'haha',2:'kk',length:3}

3、工具方法

（1）js 的靜態方法和實例方法

  • 靜態方法：
  • 直接加給類的就是靜態方法，可以通過了類名調用；
  • 實例方法：
  • 添加給 prototype 的方法就是實例方法，通過實例調用；
function MyClass() {}
MyClass.staticTest = function () {
	alert("static method");
};
MyClass.prototype.insTest = function () {
	alert("instance method");
};
MyClass.staticTest();
var mycalss = new MyClass();
mycalss.insTest();

（2）遍歷相關的方法

  • each方法：
  • 原生的 forEach 方法只能遍曆數組，不能遍歷偽數組；而 jquery 的 each 方法都可以；
  • map方法：
  • 原生的 map 方法只能遍曆數組，不能遍歷偽數組；而 jquery 的 map 方法都可以；
var arrlike = {0:'2',1:'haha',2:'kk',length:3};
var arr = [9,8,3,2,1];

arr.forEach(function (value,index) {
	console.log(index,value);
});
$.each(arr,function (index, value) {
	console.log(index,value)
});
$.each(arrlike,function (index, value) {
	console.log(index,value)
});

arr.map(function (value,index,array) {
	console.log(index,value,array);
});
$.map(arr,function (value, index) {
	console.log(index,value);
});
$.map(arrlike,function (value, index) {
	console.log(index,value);
});


//each返回遍歷的數組，map返回空的數組
var arr = [9,8,3,2,1];
var each1 = $.each(arr,function (index, value) {});
var map1 = $.map(arr,function (value, index) {});
console.log(each1);
console.log(map1);

（3）其他常用的工具方法

  • trim方法：去掉字元串的空格，返回沒有空格的結果；
  • isWindow方法：判斷是否為 window 對象；
  • isArray方法：判斷是不是真數組的方法，偽數組是返回 false；
  • isFunction方法：判斷是不是函數；jQuery框架的本質就是一個匿名函數；
  • holdReady方法：暫時阻止 document 的 ready 方法的執行；
$.holdReady(true);
$(
	function (ev) {
		console.log('ready');
	}
);
var but = document.getElementsByTagName('button')[0];
but.onclick = function (ev) {
	console.log('click');
	$.holdReady(false);
}

（4）WS的簡化操作：添加常用的快捷鍵（settings-livetemplate-html/xml）記得最後要應用

 

三、jQuery的屬性操作

1、內容選擇器

（1）其他的選擇器基本和 css 的選擇器是一致的

（2）內容選擇器

  • div：empty：找到沒有文本和子元素的div
  • div：parent：找到有文本或者子元素的div
  • div：contains（text）：找到包含指定文本的div
  • div：has（selector）：找到包含指定子元素的div

2、屬性和屬性節點

（1）屬性和屬性節點

  • 屬性：對象身上保存的變數
  • 屬性節點：html標簽中添加的屬性就是屬性節點
  • 二者區別：
  • 1、任何對象都有屬性，dom對象才有屬性節點；
  • 2、瀏覽器開發工具的source的watch中選擇得到的dom元素展開都是屬性，其中 attributes 屬性中保存的才是屬性節點；
  • 屬性的操作：
  • 1、設置：obj.attr = value      obj["attr"] = value
  • 2、獲取：obj.attr    obj["attr"]
  • 屬性節點的操作：
  • 1、設置：span.setAttribute('name','haha')
  • 2、獲取：span.getAttribute('name')

（2）attr 和 removeAttr 方法

  • attr：設置或者獲取屬性節點的值，傳參一個就是獲取，傳參二個就是設置；獲取只能獲取到第一個匹配元素的屬性，設置的話可以設置全部匹配的，沒有的話就新增；
  • removeAttr ：移除屬性節點的值；刪除所有

（3）prop 和 removeProp 方法

  • prop ：特點和 attr 基本一致；
  • removeProp ：也是一樣的；
  • 註意：
  • 1、prop 既能操作屬性節點，也能操作屬性；
  • 2、官方推薦操作屬性節點的時候：像 checked、selected 和 disabled 這樣屬性值為 true 或者 false 的就用prop；其他的都用attr；

3、類操作和文本值操作

（1）類操作

  • addClass：添加多個，多個之間用空格隔開；
  • removeClass：刪除多個也是這樣的；
  • toggleClass：切換的概念就是有就刪除，沒有就加上；

（2）文本值操作

  • html（）：等同於原生的 innerHTML；
  • text（）：等同於原生的 innerText；
  • val（）：等同於原生的 value；這三個都是既可以設置也可以獲取；

4、樣式和尺寸位置的操作

（1）樣式

  • 可以逐個設置，也可以鏈式設置，還可以批量設置；
  • 開發中一般批量設置用的多：
$('span').css({
	display:'inline-block',
	width:'100px',
	height:'100px',
	background:'red'
})

$('span').css('height','200px');
console.log($('span').css('height'))；

（2）尺寸

$('span').width("500px");
console.log($('span').width());

（3）位置

  • offset（）：獲取元素相對文檔的偏移；有 left 和 top；能獲取也可以設置；
var offset = $('.zi').offset();
var left = offset.left;
var top = offset.top;
console.log(left,top);
$('.zi').offset({
	top:300,
	left:400
});
  • position（）：獲取元素相對定位元素的偏移；有 left 和 top；只能獲取；
var top = $('.zi').position().top;
var left = $('.zi').position().left;
console.log(top,left);
  • scrollTop（）：獲取網頁滾動的偏移位；能設能取；取和設都要考慮相容性；
  • 1、局部滾動的寫法
$('.content').scrollTop(100);
console.log($('.content').scrollTop());
  • 2、網頁滾動的相容寫法
$('body,html').scrollTop(300);
console.log($('body,html').scrollTop());

 

四、jQuery事件相關

1、事件的綁定和解綁

（1）綁定

$('button').click(function () {
	console.log('haha1')
});
$('button').on('click',function () {
	console.log('haha2')
})
  • 第一種方法的效率高，但是有的事件 jQuery 沒有實現；第二種方法效率低，但是所有的事件都可以用；
  • 同一個對象綁定多個事件不會被覆蓋 ；

（2）解綁

$('button').off();          
$('button').off('click');            
$('button').off('click',test2);
  • 不傳任何參數就是移除所有的事件；
  • 傳一個參數就是移除指定類型的事件；
  • 傳兩個參數就是移除指定類型指定回調函數的事件； 

2、事件冒泡和預設行為

（1）冒泡

  • 冒泡就是子父元素擁有相同的事件，子元素的事件觸發會自動觸發父元素的相同類型的事件；
  • 通常需要阻止事件的冒泡：return false；event.stopPropagation（）；

（2）預設行為

  • 預設行為就是比如 a 標簽點擊之後會跳轉，但是我們人為並沒有給它添加點擊的事件；
  • 有時候需要阻止事件的預設行為：return false；preventDefault（）；

3、事件自動觸發和自定義事件

（1）自動觸發

  • trigger：會觸發冒泡和預設行為；
  • triggerHandler：不會觸發冒泡和預設行為；
  • a 標簽的特殊情況：a 標簽用這個兩個都不會觸發預設行為；想要觸發預設行為的話可以把其中的文字用 span 包裹，再對 span 元素進行操作；

（2）自定義事件

  • 必須用 on 綁定；
  • 必須用 trigger 觸發；

4、事件命名空間和事件委托

（1）命名空間

  • 命名空間的作用就是用來區別相同類型的事件的（如 click.zs）；
  • 命名空間有效的兩個條件：
  • 1、必須用 on 綁定；
  • 2、必須用 trigger 觸發；
  • 說明：
  • 1、用 trigger 觸發子元素帶命名空間的事件，父元素帶相同命名空間的同類事件會被觸發，沒有命名空間的同類事件不會被觸發；
  • 2、用 trigger 觸發子元素不帶命名空間的事件，父元素同類事件都會被觸發；

（2）事件委托（delegate）

  • 含義：就是把事情給別人做，然後將結果反饋回來；
  • 必備知識：通過核心函數獲取到的元素不止一個的時候綁定事件的話會給每個元素都綁定；
  • 應用場景：入口函數載入的時候不存在的元素，我們用核心函數獲取到的相同的元素數組中是不含這個一開始不存在的元素的，所以添加事件的時候自然也就添加不上，這時候就要用到事件委托；
  • 示例如下：
$('ul').delegate('li','click',function () {
	var index = $(this).index();
	alert("hello="+index);
});
$('button').click(function () {
	var $li = $('<li>i am insert li</li>');
	$('ul').append($li);
});
  • 說明：
  • 1、這裡就是讓 ul 幫 li 監聽 click 事件；
  • 2、能監聽是因為 ul 早就存在不是後來添加的；
  • 3、其中的 this 是來自事件的始發者，就是 li；

5、移入移出事件和練習

（1）移入移出

  • mouseover、mouseout：會有冒泡；
  • mouseenter、mouseleave：不會有冒泡，用的多；
  • hover：出入都是他，可以裡面指定兩個回調函數，一個代表移入，一個代表移出；也可以只有一個回調，出入都是這個函數；

（2）練習

  • 電影排行榜：
  • tab 選項卡：jQuery 對象的 index（）方法；jQuery 對象的 eq（）方法返回 jq 對象；jQuery 對象的 get（）方法；

 

五、jQuery動畫效果

1、顯示隱藏

（1）show（time，fn）、hide、toggle

（2）參數：time 是設置動畫的時間；fn是回調函數，會在動畫完成後執行；

（3）練習：對聯廣告

  • 獲取網頁滾動的偏移位： 
    $('body,html').scrollTop();
  • 設置網頁滾動的偏移位： 
    $('body,html').scrollTop(300);

2、展開收起

（1）slideDown、slideUp、slideToggle

（2）說明：

  • 方法的參數和顯示隱藏的一致；
  • jQuery使用動畫前建議先調用 stop 方法；
  • children(selector)：返回直接子元素，不會返迴文本節點，可以在裡面加選擇器對子元素進行過濾；

3、淡入淡出

（1）fadeIn、fadeOut、fadeToggle、fadeTo（time，tar，fn）

（2）說明：

  • 本質就是調 opacity；
  • 參數前三個和其他都是一樣的，fadeTo多了一個 tar，就是要調到的目標透明度；

4、自定義動畫

（1）語法：animate（json，time，speed，fn）

$span.animate({top:-50},function () {
	$span.css('top','50px');
}).animate({top:0});

（2）說明：

  • 參數第一個是要添加動畫的屬性，後面的依次是動畫時長、速度和回調； 
  • 疊加動畫：json里類似這樣寫{width:'+=10'}；
  • 切換動畫：json里類似這樣寫{width:'toggle'}；
  • json 里支持多屬性的同時修改；

5、stop 和 delay

（1）delay：就是延遲動畫的執行，裡面傳一個時間參數；

（2）stop：停止動畫，有四種情況

  • 停止當前執行後續：不傳參或者傳入的參數都是 false；
  • 停止所有動畫：stop（true）、stop（true，false）；
  • 完成當前執行後續：stop（false，true）；
  • 完成當前停止後續：stop（true，true）；

 

六、jQuery節點操作

1、節點操作

（1）添加：

  • 內部插入：
  • 1、append：指定元素內部最後插入；
  • 2、prepend：指定元素內部最前面插入；
  • 外部插入：
  • 1、before：指定元素外部前面；
  • 2、after：指定元素外部後面；

（2）刪除：

  • remove（detach）：刪除指定元素；
  • empty：刪除指定元素的內容和子元素；

（3）替換：replaceWith

（4）複製：

  • 淺複製：clone（false）；只複製元素；
  • 深複製：clone（true）；既複製元素又複製元素的事件；

（5）微博案例：

*2、游戲開發

*3、網頁開發

*4、jQuery原理

 

七、jQuery實現AJAX

1、php基本語法

（0）php文件：<?php   code   ?>

（1）兩種註釋：和 js 一樣；

（2）變數定義：$count = 10；

（3）列印內容：echo count；

（4）集合定義和使用

  • 數組：$arr = array(1,3,5)        print_r($arr)         $arr[1]
  • 字典（對象）：$dict = array("name"=>"stan","age"=>"35")

（6）控制語句：

  • if、switch、for、while 基本都是和 js 一樣的；
  • 迴圈中數組長度的獲取：count（$arr）；

（*）wampserver安裝

2、get 和 post 請求（略）

3、Ajax基本封裝

  • 在 js 部分的封裝前提下，還需註意以下幾點：
  • ie 緩存問題；
  • 參數的傳遞問題；
  • 成功的代碼不只 200；
  • 添加超時的參數，利用定時器實現；
  • 中文參數的處理：用encodeURIComponent（）方法編碼；
  • 參數全部轉化為對象的屬性；

4、jQuery 的 Ajax 封裝

​

5、前後端數據的交互

（1）xml：操作 xml 和 操作 html 差不多；

（2）json：

  • 基本概念

​

  • 標準和非標準 json 串：var obj= eval("("+jsonstr+")")  都可以用這個方法轉換為對象；

（3）cookie

  • 特點：一個cookie 保存一條數據；cookie 有大小和數量的限制；
  • 三個重要的參數：
  • 1、expires：設置過期時間，預設的生命周期是一次會話；設置的時間為過去的時間的話 cookie 會立即刪除；
  • 2、path：設置作用範圍的，預設是同瀏覽器同路徑，下級目錄可以訪問，上級不能；
  • 3、domain：設置 cookie 的有效功能變數名稱的，瀏覽器在訪問設置的功能變數名稱的時候會攜帶 cookie；
  • cookie 的封裝（新增獲取刪除和 jQuery 插件封裝）
document.cookie = 'name=stan;expires=;path=/;domain=127.0.0.1';
console.log(document.cookie);

（4）hash

  • 作用：和 cookie 一樣可以保存一些數據，cookie 不能跨瀏覽器，而 hash 可以；
  • 使用：
location.hash = 3;
console.log(location.hash);
console.log(location.hash.substring(1));

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一個C#程式員學習微信小程式的筆記
    客戶端打開小程式的時候，就將代碼包下載到本地進行解析，首先找到了根目錄的 app.json ，知道了小程式的所有頁面。 在這個Index頁面就是我們的首頁，客戶端在啟動的時候，將首頁的代碼裝載進來，通過微信的機制，就渲染出來了頁面。 小程式在啟動的時候，首先通過 App() 定義的 App() 實例 ...
  • 阿裡巴巴矢量圖標庫（Iconfont）-利於UI和前端的搭配
    前端時間，做一個小網站的時候，需要用到很多小圖標，UI設計好之後不知道如何使用，如果使用圖片那會很麻煩，相信一些前端更喜歡iconfont這樣的標簽直接調用，這樣包括顏色和大小以及使用都更方便快捷，於是我們經過交流之後決定使用阿裡巴巴適量圖標庫，這是我們第一次使用，也順便把經驗分享給大家，希望可以對 ...
  • 前端水波紋往外展開4
    來自：https://blog.csdn.net/qq_38658877/article/details/78092649 侵刪 Document ...
  • 前端水波紋往外展開1
    來自：https://blog.csdn.net/qq_38658877/article/details/78092649 侵刪 Document ...
  • 前端實現水波圖動態效果
    來自：https://blog.csdn.net/sheng_li/article/details/84347987 侵刪<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont ...
  • Vue的href動態拼接綁定
    註意的是： 加上了冒號是為了動態綁定數據，等號後面可以寫變數。如果不使用冒號，等號後面就可以寫字元串等原始類型數據。這是就無法進行動態綁定數據了 ...
  • js中瀏覽器相容startsWith 、endsWith 函數
    在做js開發的時候用到了startsWith函數時，發現各個瀏覽器不相容問題，因為對開發來說，chrome瀏覽器最好用，就一直在chrome瀏覽器中使用這兩個函數沒有任何問題，但在ie瀏覽器訪問就直接報錯，因為ie沒有這兩個函數，要麼修改方法，換別的方法，但是一兩個還好改，多了就不好改，這個時候就只 ...
  • 2017-10-29 用中文命名API的意義和途徑
    ""中文編程"知乎專欄原鏈" 在前文 "對在代碼中使用中文命名的質疑與回應" 中闡述了在代碼中使用中文命名的益處. 此文將從軟體使用者的角度闡述對API中文化的意義並探討實現途徑. 當然, 文中面向的用戶是以中文為母語的開發者. 首先請看一個 "實例" , 演示效果在 "此" : 這個庫提供了一系列 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類