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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類