Web前端基礎：
Web前端工具：
概念
jQuery是一個JavaScript函數庫。jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。 jQuery庫包含以下功能:
-
HTML 元素選取
-
HTML 元素操作
-
CSS 操作
-
HTML 事件函數
-
JavaScript 特效和動畫
-
HTML DOM 遍歷和修改
-
A JAX
-
Utilities
提示: 除此之外，jQuery還提供了大量的插件。
目前網絡上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的擴展。
知識框架
安裝
版本問題
jQuery版本有很多，分為1.x 2.x 3.x
1.x版本:能夠兼容IE678瀏覽器
2.x版本:不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本。 3.x版本:不兼容IE678，更加的精簡(在國內不流行，因為國內使用jQuery的主要目的就是兼容IE678)
國內多數網站還在使用1.x的版本
該總結中所用版本為1.1的版本
下載
jQuery有兩個版本:
生成環境使用的和開發測試環境使用的。
Production version - 用于實際的網站中，已被精簡和壓縮。
Development version - 用于測試和開發(未壓縮，是可讀的代碼)
以上兩個版本都可以從 jquery.com 中下載。
這里給個國內的下載地址：
JQuery 下載
jQuery的使用
jQuery 庫是一個 JavaScript 文件，我們可以直接在 HTML頁面中通過script 標簽引用它，跟引用自己的 外部JavaScript腳本文件一樣的語法。
<head> <script src="jquery-1.11.1.js"></script> </head>了。
jQuery語法結構
jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作(actions)
基礎語法
$(selector).action() 說明:美元符號定義 jQuery 選擇符(selector)"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作
文檔就緒事件
文檔就緒事件，實際就是文件加載事件。
這是為了防止文檔在完全加載(就緒)之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。 所以我們盡可能將所有的操作都在文檔加載完畢之后實現。
寫法一：
$(function(){ });
寫法二：
$(document).ready(function(){ });
jQuery的ready方法與JavaScript中的onload相似，但是也有區別 :
|
區別
|
window.onload
|
$(document).ready()
|
|
執行次數
|
只能執行一次，如果執行第二次，第一次的執行會被覆蓋
|
可用執行多次，不會覆蓋之前的執行
|
|
執行時機
|
必須等待網易全部加載挖完畢(包括圖片等)，然后再執行包裹的代碼
|
只需要等待網頁中的DOM結果加載完 畢就可以執行包裹的代碼
|
|
簡寫方式
|
無
|
$(function(){ });
|
jQuery選擇器
jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"(或選擇)HTML 元素。 它基于已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭:$()。
元素/標簽選擇器
Query 元素選擇器基于元素/標簽名選取元素。
語法:$("標簽名稱")
<div>div1</div> <div>div2</div> <div>div3</div> <script type="text/javascript" src="js/jquery-1.11.1.js" > <script> $(document).ready(function(){ }); $(function(){ var divList=$("div"); console.log(divList); console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]); console.log($(divList[i])); } }); </script>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
id 選擇器
jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，所以在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如下:
$("#p1")
class 選擇器
jQuery 類選擇器可以通過指定的 class 查找元素
$(".mydiv")
全局選擇器
匹配所有元素
$("*")
并集選擇器
將每一個選擇器匹配到的元素合并后一起返回
$("div,ul,li,.mydiv")
后代選擇器
在給定的祖先元素下匹配所有的后代元素
$("form input"
子選擇器
在給定的父元素下匹配所有的子元素
$("form > input")
相鄰選擇器
匹配所有緊接在 prev 元素后的 next 元素
$("label + input")
同輩選擇器
匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")
屬性選擇器
jQuery中的事件
頁面對不同訪問者的響應叫做事件
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法
常用DOM事件列表
|
鼠標事件
|
鍵盤事件
|
事件
|
文檔/窗口事件
|
|
click
|
keydown
|
submit
|
load
|
|
dblclick
|
keyup
|
change
|
|
|
mouseover
|
|
focus
|
|
|
mouseout
|
|
blur
|
|
|
hover
|
|
|
|
常用的 jQuery 事件方法
在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法
轉自：csdn論壇
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
