Python 前端開發之jquery介紹
一、引述
需求一：有html標簽關系如下，請找到所有的含有a標簽的li標簽
????????
- ????????????
原生js實現：
jqeury實現：
$('li').has('a')
需求二：將上面的li標簽實現隔行換色效果
原生js實現：
var?objs?=?document.getElementsByClassName('city') ????for(var?i=0;i
jquery實現：
$('li:odd').css('background-color','lightblue') $('li:even').css('background-color','lightyellow')
需求三：點擊按鈕，顯示頁面中的三個div，并給div添加文本內容
????
原生js實現：
jquery實現：
盡管，你現在啥也不知道，你就知道用上了jquery咱們寫代碼節省了很多操作，便利了很多就OK了～～～
二、jqeury介紹
1、為什么要使用jQuery
鏈式編程：比如.show()和.html()可以連寫成.show().html()。
隱式迭代：隱式 對應的是 顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用我們自己再進行循環，簡化我們的操作，方便我們調用。
2、什么是 jQuery
jQuery 是 js 的一個庫，封裝了我們開發過程中常用的一些功能，方便我們調用，提高開發效率。
js庫是把我們常用的復雜功能封裝到簡單的方法中，我們用的時候，將庫直接引入然后調用方法即可。
初期，主要學習如何使用jQuery操作DOM，其實就是學習jQuery封裝好的那些功能API。
這些API的共同特點是：幾乎全都是方法。所以，在使用jQuery的API時，都是方法調用，也就是說要加小括號()，小括號里面是相應的參數，參數不同，功能不同。
jQuery 有三個大版本：
1.x版本：最新版為 v1.11.3。
2.x版本：最新版為 v2.1.4（不再支持IE6、7、8）。
3.x版本。
三、jQuery的使用
1、使用 jQuery 的基本步驟
下載?：jQuery有兩個文件，一個是jquery-3.4.1.js(未壓縮版)，一個是jquery-3.4.1.min.js(壓縮版,推薦項目上線時使用)
關于jQuery的相關資料：
官網：http://jquery.com/
官網API文檔：http://api.jquery.com/
漢化API文檔：http://www.css88.com/jqapi-1.9/
jquery 在線手冊 ：http://hemin.cn/jq/
注意：導包的代碼一定要放在js代碼的最上面。
2、jQuery 的入口函數和?$?符號
原生 js 的入口函數指的是：window.onload = function() {};?如下：
原聲js入口函數：
//原生?js?的入口函數。頁面上所有內容加載完畢，才執行。 ????????//不僅要等文本加載完畢，而且要等圖片也要加載完畢，才執行函數。 ???????window.onload?=?function?()?{ ???????????alert(1); ???????}
jQuery的入口函數，有以下幾種寫法：
寫法一：文檔加載完畢，圖片不加載的時候，就可以執行這個函數。
$(document).ready(function?()?{ ???????????alert(1); ???????})
寫法二：文檔加載完畢，圖片不加載的時候，就可以執行這個函數。（寫法一的簡潔版）
$(function?()?{ ???????????alert(1); ???????});
寫法三：文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。
$(window).ready(function?()?{ ???????????alert(1); ???????})
jQuery入口函數與js入口函數的區別：
區別一：書寫個數不同：
Js 的入口函數只能出現一次，出現多次會存在事件覆蓋的問題。
jQuery 的入口函數，可以出現任意多次，并不存在事件覆蓋問題。
區別二：執行時機不同：
Js的入口函數是在所有的文件資源加載完成后，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。
jQuery的入口函數，是在文檔加載完成后，就執行。文檔加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成。
文檔加載的順序：從上往下，邊解析邊執行。
jQuery 使用?$?符號原因：書寫簡潔、相對于其他字符與眾不同、容易被記住。
jQuery占用了我們兩個變量：$?和 jQuery。當我們在代碼中打印它們倆的時候：
從打印結果可以看出，$ 代表的就是 jQuery。
軟件開發 人工智能 云計算 機器學習
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
