jQuery詳解
jQuery
一、jQuery的簡介
是一個輕量級的JS庫-是一個被封裝好的JS文件。提供了更爲簡便的頁面元素操做方式。
封裝了 DOM，JS ，CSS
核心理念：Write Less Do More
官網：https://jquery.com/
jQuery版本：
jQuery 3.3.1
jQuery 2.x ：再也不支持IE6,7,8
jQuery 1.11.x
二、使用jQuery
一、引入jQuery文件
<script src="jquery-1.11.3.js"></script>
注意：引入的操做必需要放在其餘jQuery操做以前
二、使用jQuery
... ...
三、jQuery對象
一、什麼是jQuery對象
jQuery對象是由jQuery對頁面元素進行封裝後的一種體現
jQuery中所提供的全部操做都只針對jQuery對象，其餘對象不能用(如:DOM對象)
二、工廠函數 - $()
想要獲取jQuery對象 或 轉換爲jQuery對象的話，就必需要使用工廠函數
三、DOM對象 和 jQuery對象之間的轉換
DOM對象：以DOM的方式獲取出來的節點對象，都是DOM對象,DOM對象只能使用DOM中所提供的方法和屬性，是不能
訪問jQuery提供的屬性和方法
jQuery對象：由jQuery封裝而獲得的對象。jQuery對象只能訪問jQuery提供的屬性和方法，是不能訪問DOM提供的屬性和
方法
一、將DOM對象轉換爲jQuery對象
語法：var $obj=$(DOM對象);
注意：在爲jQuery對象起名的時候，最好在變量名稱前 + $
二、將jQuery對象轉換爲DOM對象
一、var dom對象 = jQuery對象.get(0);
二、var dom對象 = jQuery對象[0];
JS中建立對象
一、使用Object 直接建立對象
var newObj = new Object();
//添加屬性
newObj.property1 = value1;
newObj.property2 = value2;
... ...
//添加方法
newObj.method1 = function(){
... ...
}
newObj.method2 = function(arg){
arg 就是參數
}
二、使用構造器建立對象
function 對象名(參數1,參數2,...){
//只能使用this來訪問或建立當前對象的成員
//使用參數爲屬性賦值
this.屬性1 = 參數1;
this.屬性2 = 參數2;
//建立方法
this.funName = function(){
}
}
使用對象
var obj1 = new 對象名(參數1,參數2);
三、使用JSON建立對象
一、什麼是JSON
JSON：JavaScript Object Notation - JS對象表現形式
JSON一般會做爲輕量級的數據交換格式
JSON通常表示只有屬性沒有方法的對象
二、聲明JSON對象
0、JSON對象使用{}來表示
一、使用鍵值對的方式來聲明數據的
二、全部的屬性，必須用""引發來，若是值是字符串的話，也必須用""引發來
三、屬性 和 值 之間用 : 隔開
四、多對屬性之間，使用 , 隔開
jQuery選擇器
一、做用
獲取頁面上的元素們，返回jQuery對象所組成的數組
語法：$("選擇器");
二、選擇器的分類
一、基礎選擇器
一、ID選擇器
用法:$("#ID值");
說明：返回HTML中指定ID值的元素
二、類選擇器
用法;$(".className");
說明：返回HTML中全部class爲className的元素
三、元素選擇器
用法:$("元素名稱");
說明:返回HTML中全部指定標記的元素
四、通用選擇器
用法:$("*");
說明:返回HTML中全部的元素
五、羣組選擇器
用法:$("selector1,selector2,... ...")
說明:返回知足工廠函數內全部選擇器的元素
二、層級選擇器
一、$("selector1 selector2")
後代選擇器
二、$("selector1>selector2")
子代選擇器
三、$("selector1+selector2")
名稱：相鄰兄弟選擇器
做用：匹配牢牢跟在selector1後面且知足selector2選擇器的元素
四、$("selector1~selector2")
名稱：通用兄弟選擇器
做用：匹配selector1後面且知足selector2選 擇器的全部元素
三、過濾選擇器
一、基本過濾選擇器
一、:first
只匹配到一組元素中的第一個
二、:last
只匹配到一組元素中的最後一個
三、:not(selector)
在一組元素中，將知足selector的元素排除出去
四、:odd
匹配 偶數行 元素(奇數索引)
五、:even
匹配 奇數行 元素(偶數索引)
六、:eq(index)
匹配下標等於 index 的元素
$("p:eq(0)").css();
七、:gt(index)
匹配下標大於 index 的元素
八、:lt(index)
匹配下標小於 index 的元素
二、內容過濾選擇器
一、:contains("text")
匹配包含指定文本的元素
$("p:contains('佳能')")
二、:empty
匹配空元素(不包含任何子元素以及文本)
三、:has(selector)
匹配含有指定選擇器的元素
四、:parent
匹配自己是父元素的元素
三、可見性過濾選擇器
一、:visible
匹配全部的可見元素
二、:hidden
匹配全部不可見元素
四、狀態過濾選擇器
主要用在表單控件上
一、:enabled
匹配全部的可用元素
二、:disabled
匹配全部禁用元素
三、:checked
匹配全部被選中的元素(radio 和 checkbox)
四、:selected
匹配全部被選中的元素(select)
五、子元素過濾選擇器
一、:first-child
匹配屬於其父元素中的第一個子元素
二、:last-child
匹配屬於其父元素中的最後一個子元素
三、:nth-child(n)
匹配屬於其父元素中的第n個子元素
四、屬性選擇器
使用元素的屬性來匹配頁面的元素
一、[attr]
匹配具備attr屬性的元素
ex:
一、匹配頁面中全部有id屬性的元素
$("[id]")
二、匹配頁面中全部有class屬性的元素
$("[class]")
二、[attr=value]
匹配attr屬性值爲value的元素
ex:匹配頁面中全部的文本框
$(":text");
$("input[type='text']")
三、[attr!=value]
四、[attr^=value]
匹配attr屬性值是以value字符開始的元素們
五、[attr$=value]
匹配attr屬性值是以value字符結尾的元素們
六、[attr*=value]
匹配attr屬性值中包含value字符的元素們
jQuery 操做 DOM
一、基本操做
一、html()
等同於dom中的 innerHTML
做用：讀取或設置jQuery對象中的HTML內容
二、text()
等同於dom中的 innerText
做用：讀取或設置jQuery對象中的普通文本內容
三、val()
等同於dom中的 value
做用：讀取或設置jQuery對象的value值(表單)
四、屬性操做
一、attr()
做用：讀取或設置jquery對象的屬性值
ex:
$("#main").attr("id");
$("#main").attr("class","redBack");
二、removeAttr(attrName)
做用：刪除jQuery對象的指定屬性
二、樣式操做
一、attr("class","className")
爲元素動態綁定class屬性值
二、$obj.addClass("className")
$obj.addClass("c1").addClass('c2').addClass('c3').html("測試的文本");
三、removeClass("className")
刪除指定的類選擇器
四、removeClass()
刪除全部的類選擇器
五、toggleClass("className")
切換樣式
元素若是具有className選擇器，則刪除
元素若是沒有className選擇器，則添加
六、hasClass("className")
判斷元素是否包含className選擇器
七、css("屬性","值")
爲元素動態的設置某css屬性極其值
$obj.css("background-color","red");
八、css(JSON對象)
$obj.css({
"color":"red",
"font-size":"32px",
"text-decoration":"underline"
});
三、遍歷節點
一、children() / children(selector)
獲取jQuery對象的全部子元素或帶有指定選擇器的子元素
注意：只考慮子元素不考慮後代元素
二、next() / next(selector)
獲取jQuery對象的下一個兄弟元素 / 知足selector的下一個兄弟元素
三、prev() / prev(selector)
獲取jQuery對象的上一個兄弟元素 / 知足selector的上一個兄弟元素
四、siblings() / siblings(selector)
獲取jQuery對象的全部兄弟 / 知足selector的全部兄弟
五、find(selector)
查找知足selector選擇器的後代元素
六、parent()
查找jQuery對象的父元素
四、建立 & 插入節點
一、建立對象
語法：$("建立內容");
ex:
一、建立一個div
var $div=$("<div></div>");
二、建立一個button，文本爲 測試按鈕
var $btn=$("<button>測試按鈕</button>");
二、插入節點
一、內部插入
一、$obj.append($new);
將$new做爲$obj的最後一個子元素插入進來
二、$obj.prepend($new);
將$new做爲$obj的第一個子元素插入進來
二、外部插入
一、$obj.after($new)
將$new做爲$obj的下一個兄弟插入進來
二、$obj.before($new)
將$new做爲$obj的上一個兄弟插入進來
五、刪除節點
一、remove()
語法：$obj.remove();
做用：刪除$obj元素
二、remove("selector")
語法：$obj.remove("selector")
做用：按選擇器刪除元素
三、empty()
語法：$obj.emptu()
做用：清空$obj中全部的內容
六、替換 和 複製
一、替換
一、replaceWith
語法:$old.replaceWith($new);
使用$new元素替換$old元素
二、replaceAll
語法：$new.replaceAll($old);
二、複製
一、clone()
$new = $old.clone();
jQuery 事件
一、頁面加載後執行
HTML頁面加載流程：
一、向服務器發送請求
二、接收服務器的響應
三、在內存中生成DOM樹
四、渲染 - 顯示內容到網頁上
五、執行window.onload
jQuery 處理的時候
一、向服務器發送請求
二、接收服務器的響應
三、在內存中生成DOM樹
四、執行 加載後的 操做
五、渲染 - 顯示內容到網頁上
如何實現頁面加載後執行：
一、
$(document).ready( function(){
//頁面的初始化操做
//DOM數加載完成後就開始執行
} );
二、
$().ready( function(){
//頁面的初始化操做
//DOM數加載完成後就開始執行
} );
三、
$( function(){
//頁面的初始化操做
//DOM數加載完成後就開始執行
} );
二、jQuery實現事件的綁定
一、方式1
$obj.bind("事件名稱",function(){
//事件的操做
//容許使用this來表示當前元素
});
$obj.bind("事件名稱",function(event){
//事件的操做
//容許使用this來表示當前元素
//容許傳遞event對象，做爲事件對象
});
二、方式2
$obj.事件名稱(function(){
//事件的操做
//容許使用this來表示當前元素
});
$obj.事件名稱(function(event){
//事件的操做
//容許使用this來表示當前元素
//容許傳遞event來表示事件對象
})
jQuery 動畫
一、基本顯示 / 隱藏
語法：
顯示：$obj.show(); / $obj.show(duration);
隱藏：$obj.hide(); / $obj.hide(duration);
二、滑動式 顯示/隱藏
語法：
顯示：$obj.slideDown() / $obj.slideDown(duration);
隱藏：$obj.slideUp() / $obj.slideUp(duration);
三、淡入淡出式 顯示/隱藏
語法：
顯示：$obj.fadeIn() / $obj.fadeIn(duration)
隱藏：$obj.fadeOut() / $obj.fadeOut(duration)
JSON ：
JavaScript Object Notation
JSON是一種輕量級的數據交換格式
聲明JSON格式的對象：
一、JSON格式的對象使用 {}
二、使用鍵值對的方式來聲明數據
鍵 - 表示該對象的屬性
值 - 表示該對象的值
三、屬性的屬性(鍵)，必須用""引發來，值也是字符串的話也須要使用""引發來
四、屬性 和 值之間使用 : 隔開
五、多對屬性之間，使用 , 隔開
var obj = {
"name":"sanfeng.zhang",
"age":"30",
"gender":"男"
};
Python工具 - pip
一、做用
Python的軟件包管理器，有一些python包被集成到了pip中。只要被集成到pip中的包，都容許經過pip直接安裝
二、安裝 pip
sudo apt install python-pip (python2)
sudo apt install python3-pip (python3)
三、使用 pip / pip3
一、安裝/更新/刪除 python包
一、安裝python包
sudo pip3 install SomePackage
ex:
sudo pip3 install pymysql==0.7.11
二、下載 python 包
sudo pip3 download SomePackage
三、刪除 python 包
sudo pip3 uninstall SomePackage
四、更新(升級)python包
sudo pip3 upgrade SomePackage
二、查看當前環境中所安裝的包
pip3 list
三、搜索
pip3 search SomePackage
四、展現
pip3 show SomePackage
五、記錄現有環境的python包
一、pip3 freeze > requirements.txt
將當前python環境中所安裝的內容打包成一個列表
二、pip3 install -r requirements.txt
容許在當前系統下，逐一安裝requirements.txt中所列出的內容
Python工具 - VirtualEnv
一、什麼是VirtualEnv - 虛擬環境
VirtualEnv,是Python中的虛擬環境，在作Python應用開發時，若是不想在大的Python環境中安裝各類各樣的包的話，則能夠虛擬
出一個Python環境，可讓虛擬環境專門爲某一個應用而存在。容許在虛擬環境中安裝各類包且不影響大的python環境
二、安裝 VirtualEnv
sudo pip3 install virtualenv
三、建立 和 使用 虛擬環境
一、準備工做
mkdir my_env
cd my_env
二、建立虛擬環境
virtualenv 虛擬環境名稱
ex:virtualenv default
建立指定版本的虛擬環境
virtualenv -p /usr/bin/python2.7 名稱
virtualenv -p /usr/bin/python3.5 名稱
三、啓動虛擬環境
注意：不能在 bin 目錄中啓動虛擬環境
source bin/activate
四、退出虛擬環境
deactivate
五、刪除虛擬環境
rm 虛擬環境目錄 -rf
注意：
在虛擬環境中使用pip安裝和卸載內容時，不要使用 sudo 進行受權
四、虛擬環境管理工具 - VirtualenvWrapper
一、做用
第三方的管理工具，可以快速，高效並且方便的管理虛擬環境
二、安裝虛擬環境管理工具
sudo pip3 install virtualenvwrapper
三、配置 virtualenvwrapper
在~目錄下，有一個終端管理文件 .bashrc (在~目錄下，輸入 ll)
配置 .bashrc ，以便在啓動終端時，就自動啓動虛擬環境管理工具
修改.bashrc : sudo vi .bashrc
在 .bashrc 最底部增長如下內容：
一、export WORKON_HOME=~/my_env
將 ~/my_env 做爲虛擬環境的管理目錄，全部使用virtualenvwrapper建立的虛擬環境都默認保存於此
二、若是系統中包含多個python執行環境的話，則添加如下內容
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
三、source /usr/local/bin/virtualenvwrapper.sh
四、在 ~ 目錄下，執行一遍 .bashrc
source .bashrc
四、使用虛擬環境管理工具
一、建立並進入虛擬環境
一、mkvirtualenv 虛擬環境名稱
ex: mkvirtualenv default
二、
mkvirtualenv --python=/usr/bin/python2.7 虛擬環境名稱
二、查看當前所維護的全部虛擬環境
workon
三、切換虛擬環境
workon 虛擬環境名稱
四、退出虛擬環境
deactivate
五、刪除虛擬環境
rmvirtualenv 虛擬環境名稱
WEB 與 服務器
一、WEB ：表示用戶能夠瀏覽的網頁(HTML,CSS,JS)
二、服務器
一、硬件 與 軟件
硬件範疇：一臺主機
軟件範疇：一個可以接受用戶請求並給出響應的程序
二、做用
一、存儲WEB上的信息(網頁，圖片，音視頻，css)
二、可以處理用戶的請求(request)並給出響應(response)
三、可以執行服務器端程序：如查詢數據庫
三、WEB與服務器的關係
參考圖 - WEB與服務器的關係
運行在服務器端的程序，能夠由不一樣的語言來編寫：
Java語言 -> JSP
C#語言 -> ASP.NET
php語言 -> php
Python語言 -> Django
四、網站請求的全過程
一、用戶：輸入域名，經過域名解析(DNS)器獲得IP地址
二、向服務器發送http/https請求
三、傳輸層TCP協議，通過網絡傳輸和路由解析
四、WEB服務器接收HTTP請求
五、服務器處理請求內容，並進行必要的數據交換
六、將響應的內容發回給瀏覽器(響應)
七、瀏覽器解析HTML
八、顯示解析好的內容
框架
一、什麼是框架
框架是一個爲了解決某些開放性問題而存在的一種結構。框架提供了最基本的功能，咱們只須要在這些基本功能的基礎上構建
本身的操做就能夠了。
二、框架的優勢
一、快速開發 - 基本功能已經提供好了
二、能夠解決大部分問題
三、bug少，穩定性較高
三、框架的分類
一、前端框架
處理前端內容(HTML,CSS,JS)
二、後端框架
處理服務器程序的
Spring - Java
三、全棧框架
包含WEB總體的解決方案，包含開發框架，運行環境
Rails (Ruby)
Django(Python)
四、Python的WEB框架
一、Django ：重量級的Python Web 框架
二、Tornado ：異步框架
三、Flask ：輕量級框架
四、Webpy ：輕量級框架
五、Web2py ：全棧框架，webpy的增強版
設計模式 與 框架模式
一、設計模式
設計模式，是一套被反覆使用，多數人知曉並通過分類的代碼設計經驗的總結，是爲了解決一些通用性問題的
目的：重用代碼並保證代碼的可靠性
官方認證的設計模式有23種：單例模式，抽象工廠模式，觀察者模式 -- 《大話設計模式》
二、框架模式
代碼的重用，框架模式是解決如何設計程序框架的代碼，在框架模式中會包含多種的設計模式
如：MVC，MTV，MVVM，ORM，... ...
一、MVC
M ：Models，模型層
在程序中主要處理數據，負責在數據庫中對數據進行存取操做(CRUD)
V ：Views , 視圖層
應用程序中處理顯示的部份內容(html,jsp)
C ：Controllers , 控制器層
處理用戶交互的部分，一般負責從模型中取出數據，再進行業務的處理，最後將數據給視圖，並將視圖給客戶端
二、MTV
M ：Models 模型層，功能同上
T ：Templates 模板層
用於處理用戶顯示的部份內容，如：html
V ：Views 視圖層
處理用戶交互部分，從模型中獲取數據，再將數據給模板，再顯示給用戶
M --- M
V --- T
C --- V
相關文章
- 1. jquery validate 詳解
- 2. jquery animate 詳解
- 3. jquery tmpl 詳解
- 4. Jquery Deferred 詳解
- 5. jQuery EasyUI 詳解
- 6. jquery validate 詳解二
- 7. jQuery 基礎詳解
- 8. jquery tmpl 詳解(轉)
- 9. JQuery技術詳解
- 10. 【jQuery教程詳解】
- 更多相關文章...
- • 免費ARP詳解 - TCP/IP教程
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • Flink 數據傳輸及反壓詳解
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jquery validate 詳解
- 2. jquery animate 詳解
- 3. jquery tmpl 詳解
- 4. Jquery Deferred 詳解
- 5. jQuery EasyUI 詳解
- 6. jquery validate 詳解二
- 7. jQuery 基礎詳解
- 8. jquery tmpl 詳解(轉)
- 9. JQuery技術詳解
- 10. 【jQuery教程詳解】