文章目錄

jQuery簡介
- 1. 介紹
- 2. 使用
- - - 1）引入
    - 2）工廠函數 - $()
    - 3）原生JS對象與jQuery對象
    - 4）jQuery擷取元素
    - 5）操作元素内容
    - 6）操作标簽屬性
    - 7）操作标簽樣式
    - 8）根據層級結構擷取元素
    - 9）元素的建立,添加,删除
    - 10）動畫
    - 11）jQuery事件處理
    - 11）周遊元素
  - 1. 頁面效果
  - 2. 代碼分析
  - - 1. 頁面元素
    - 2. 初始代碼
    - 3. 綁定省份
    - 4. 綁定城市

jQuery簡介

1. 介紹

jQuery是JS的工具庫，對原生JS中的DOM操作、事件處理、包括資料處理和Ajax技術等進行封裝,提供更完善，更便捷的方法。

2. 使用

1）引入

先引入jquery檔案，才能使用jquery文法

CDN 有網

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> -->
<!--<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">-->
</head>

本地檔案（常用）

<head>
<script src="./jquery-1.10.2.min.js"></script>
</head>

2）工廠函數 - $()

"$()"函數用于擷取元素節點，建立元素節點或将原生JS對象轉換為jquery對象,傳回 jQuery 對象。jQuery 對象實際是一個類數組對象，包含了一系列 jQuery 操作的方法。

例 :

//$()擷取元素節點,需傳入字元串的選擇器
 $("h1")
 $("#d1")
 $(".c1")
 $("body,h1,p")

3）原生JS對象與jQuery對象

原生JS對象與jQuery對象的屬性和方法不能混用。可以根據需要，互相轉換 :

原生JS轉換jQuery對象

$(原生對象) --> 傳回 jQuery 對象

jQuery對象轉換原生JS對象

+ 方法一 : 根據下标取元素,取出即為原生對象
  var div = $("div")[0];
+ 方法二 : 使用jQuery的get(index)取原生對象
  var div2 = $("div").get(0);

4）jQuery擷取元素

jQuery通過選擇器擷取元素，$(“選擇器”)

選擇器分類 :

基礎選擇器

标簽選擇器：$("div")
ID選擇器：$("#d1")
類選擇器：$(".c1")
群組選擇器：$("body,p,h1")

層級選擇器

後代選擇器： $("div .c1")
子代選擇器： $("div>span")
相鄰兄弟選擇器： $("h1+p")  比對選擇器1後的第一個兄弟元素,同時要求兄弟元素滿足選擇器2
通用兄弟選擇器： $("h1~h2") 比對選擇器1後所有滿足選擇器2的兄弟元素

過濾選擇器

需要結合其他選擇器使用。

:first
  比對第一個元素 例:$("p:first")
:last
  比對最後一個元素 例:$("p:last")
:odd
  比對奇數下标對應的元素
:even
  比對偶數下标對應的元素
:eq(index)
  比對指定下标的元素
:lt(index)
  比對下标小于index的元素
:gt(index)
  比對下标大于index的元素
:not(選擇器)
  否定篩選,除()中選擇器外,其他元素

子元素過濾選擇器

:first-child
   比對第一個子元素
:last-child
   比對最後一個子元素
:nth-child(n)
   比對第n個子元素(n從1開始計數)

5）操作元素内容

html() //設定或讀取标簽内容,等價于原生innerHTML,可識别标簽文法
text() //設定或讀取标簽内容,等價于innerText,不能識别标簽
val()  //設定或讀取表單元素的值,等價于原生value屬性

通用:
- 參數中有值表示指派-->jq對象.text('abc')
- 參數中無值表示取值-->jq對象.text()

6）操作标簽屬性

attr("attrName","value") 設定或讀取标簽屬性
prop("attrName","value")
設定或讀取标簽屬性

注意 :在設定或讀取元素屬性時,attr()和prop()基本沒有差別;但是在讀取或設定表單元素(按鈕)的選中狀态時,必須用prop()方法,attr()不會監聽按鈕選中狀态的改變,隻看标簽屬性checked是否書寫
removeAttr("attrName") 移除指定屬性

7）操作标簽樣式

為元素添加id/class屬性,對應選擇器樣式
針對類選擇器,提供操作class屬性值的方法

addClass("className")	//添加指定的類名
removeClass("className")//移除指定的類型,如果參數省略,表示清空class屬性值
toggleClass("className")//結合使用者行為,實作動态切換類名.如果目前元素存在指定類名,則移除;不存在則添加

<style>
    .red{
        color: white;
        background-color: red;
        width: 200px
    }
</style>

<div id="box">點我</div>
<script>
    $('#box').on('click',function(){
        // 實作樣式的切換
        $(this).toggleClass('red')
    })
</script>

操作行内樣式

css("屬性名","屬性值")  //設定行内樣式
css(JSON對象)			 //設定一組CSS樣式
/*
JSON對象:常用資料傳輸格式
文法 :
   {
    "width":"200px",
    "height":"200px",
    "color":"red"
   }
 *///可以省略key的雙引号

鍊式寫法：

jq.對象.方法.屬性.方法.屬性…

8）根據層級結構擷取元素

parent() 傳回父元素
parents('selector') 傳回滿足選擇器的祖先元素
children() / children("selector") 傳回所有直接子元素/傳回滿足選擇器的直接子元素
find("selector") 傳回所有的後代元素(包含直接與間接)
next() / next("selector") 傳回下一個兄弟元素/傳回下一個兄弟元素,必須滿足選擇器
prev() / prev("selector") 傳回前一個兄弟元素/傳回前一個兄弟元素,要求滿足選擇器
siblings() / siblings("selector") 傳回所有的兄弟元素/滿足選擇器的所有兄弟元素

9）元素的建立,添加,删除

建立

使用$(“标簽文法”)，傳回建立好的元素

var div = $("<div></div>");	//建立元素
div.html("動态建立").attr("id","d1").css("color","red"); //鍊式調用，設定内容和屬性
var h1 = $("<h1 id='d1'>一級标題</h1>");	//建立的同時設定内容，屬性和樣式

添加至頁面

1）作為子元素添加

$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作為第一個子元素添加至$obj中

2）作為兄弟元素添加

$obj.after(newObj);		//在$obj的後面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

3）移除元素

使用不同的方法在不同位置同時添加多個元素時，隻會添加最後一個

10）動畫

顯示和隐藏 show(2000,callback) / hide(2000,callback)
下拉和上推 slideDown() / slideUp() （塊元素才能實作）
淡隐淡現方式顯示 fadeOut() / fadeIn()
動畫函數，可以實作自定義動畫 animate 函數

11）jQuery事件處理

1. 文檔加載完畢（入口函數）

入口函數作用

這是為了防止文檔在完全加載（就緒）之前運作 jQuery 代碼，即在 DOM 加載完成後才可以對 DOM 進行操作。如果在文檔沒有完全加載之前就運作函數，操作可能失敗。

原生JS 方法：

window.onload = function () {
   // 執行代碼
}

jQuery:

//文法一 
$(document).ready(function (){
  //文檔加載完畢後執行
})
//文法二 
$().ready(function (){
  //文檔加載完畢後執行
})
//文法三 
$(function(){
  //文檔加載完畢後執行
})

差別：

原生onload事件不能重複書寫，會産生覆寫問題；
jquery中對事件做了優化,可以重複書寫ready方法,依次執行
jQuery 的入口函數是在 html 所有标簽(DOM)都加載之後，就會去執行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部圖檔之類的檔案加載完後，才會執行。

2. 事件綁定方式

事件名稱省略

on

字首

//on("事件名稱"，function)
  $("div").on("click",function(){});//新版本使用的多些
  //bind("事件名稱",function)
  $("div").bind("click",function(){});//1.6-1.8間的版本
  //事件名作為方法名
  $("div").click(function(){});

3. this

this表示事件的觸發對象，在jquery中可以使用，注意轉換類型。this為原生對象隻能使用原生的屬性和方法，可以使用

$(this)

轉換為jquery對象，使用jquery方法。

11）周遊元素

原生js： for
jQ： each()
jQ集合對象.each(function(i,ele){})

$.each()

<ul>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <li>DD</li>
    <li>EE</li>
</ul>

<script>
    var $lis = $('ul>li');
    var arr = [1, 2, 3, 4, 5];
    // jq集合對象的方法(周遊集合對象)
    $lis.each(function (index, elem) {
        console.log(index, elem)
    })
    // 周遊函數(專門周遊資料)
    $.each(arr, function (index, elem) {
        console.log(index, elem)
    })
</script>
 })

## 3.實作下拉清單框的三級關聯

1. 頁面效果

Web前端 | jQueryjQuery簡介

2. 代碼分析

1. 頁面元素

Web前端 | jQueryjQuery簡介

2. 初始代碼

Web前端 | jQueryjQuery簡介

3. 綁定省份

Web前端 | jQueryjQuery簡介

4. 綁定城市

Web前端 | jQueryjQuery簡介

Web前端 | jQueryjQuery簡介

文章目錄

jQuery簡介

1. 介紹

2. 使用

1）引入

2）工廠函數 - $()

3）原生JS對象與jQuery對象

4）jQuery擷取元素

5）操作元素内容

6）操作标簽屬性

7）操作标簽樣式

8）根據層級結構擷取元素

9）元素的建立,添加,删除

10）動畫

11）jQuery事件處理

11）周遊元素

1. 頁面效果

2. 代碼分析

1. 頁面元素

2. 初始代碼

3. 綁定省份

4. 綁定城市

繼續閱讀

jqGrid的使用筆記：5. 事件

attachEvent 與addEventListener 差別

jQuery實作百度搜尋框

聊一聊Swagger-UI的那些事情軟體簡介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的更新版的UI

javascript console對象解讀

用JS模拟實作二叉樹(含周遊)

2010年終總結--技術篇

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

關于 underscore 中模闆引擎的應用示例

JQuery--dom捕獲html元素

【JavaScript文法】函數對象的淺拷貝、深拷貝

JS--運算符

數組和類數組

JavaScript的那些坑之事件代理事件代理事件階段

jquery_126_demo