jQuey基礎(chǔ)思維導(dǎo)圖梳理1

jQuery具體內(nèi)容：

ECMAScript: 核心語法

變量聲明

數(shù)據(jù)類型:

原始類型: Null String Number Boolean Undefined

引用類型:

運(yùn)算符:

語句:

函數(shù):

普通函數(shù)

匿名函數(shù)

事件:

onload

onsubmit

onclick

onchange

onblur

onfocus

事件和事件源綁定:

綁定事件:

直接在事件源(標(biāo)簽)上添加事件屬性 <xxx onclick="函數(shù)()"></xxx>

派發(fā)事件:

<script>
 //1.獲取事件源對象
 //2.派發(fā)事件
    對象.事件名 = function(){
    
    }
</script>

BOM: 操作和控制瀏覽器

window: 窗口對象

使用該對象的方法或?qū)傩詴r(shí),window關(guān)鍵字可以省略不寫

方法:

alter()

prompt()

confirm()

定時(shí)器:

setInterval(函數(shù)名,毫秒值);

setTimeout("函數(shù)名()",毫秒值);

history: 歷史對象

go(1)

location: 連接對象

location.href : 獲取當(dāng)前頁面的完整路徑

location.href = 值; 跳轉(zhuǎn)到指定的頁面

DOM: 操作和控制整個(gè)html頁面

文檔節(jié)點(diǎn): 整個(gè)html頁面 document

元素節(jié)點(diǎn): 具體的標(biāo)簽對象

屬性節(jié)點(diǎn): 標(biāo)簽上的指定屬性

文本節(jié)點(diǎn): 標(biāo)簽體的文本信息

獲取元素對象:

document.getElementById("id");

.....

獲取元素對象上的屬性:

元素對象.屬性名;  獲取

元素對象.屬性名 = 值; 設(shè)置

文本:

元素對象.innerHTML; //獲取標(biāo)簽體的所有內(nèi)容(包含子標(biāo)簽)

元素對象.innerText; // 獲取標(biāo)簽體中的所有文本信息(不包含子標(biāo)簽)

元素對象.innerHTML = "值" ; //在設(shè)置值時(shí),可以解析值中的標(biāo)簽對象

元素對象.innerText = "值"; //在設(shè)置值時(shí),將值都充當(dāng)文本信息,放入標(biāo)簽體內(nèi)

概述

jQuery是一個(gè)優(yōu)秀的javascript框架(js類庫)，兼容css3和各大瀏覽器，提供dom，events，animate，ajax等簡易的操作。并且jQuery有非常豐富的插件，大多數(shù)功能都有相應(yīng)的插件解決方案。jQuery的宗旨是write less, do more. (寫的更少,做的更多)

jq本質(zhì)上就是一個(gè)外部的js文件(jQuery.js),在該文件中封裝了很多js代碼,實(shí)現(xiàn)了很多功能.

我們管jq文件叫做 js 框架或 js 類庫.

插件: 實(shí)現(xiàn)了指定功能的js代碼

jQuery入門

jQuery和html整合

• 下載

• 下載地址:www.jquery.com

• jQuery 2.0 以后不再支持ie 6 7 8.

• 使用script的src屬性即可eg:<script src="jquery-x.x.x.js"></script>

  ==語法==

  
  $("選擇器") 或  jQuery("選擇器")
   var  元素對象  = $("選擇器");
    eg: var 元素對象 = $("#id值"); 
     元素對象.val();  // 獲取當(dāng)前對象上value屬性的值
   需求: 獲取輸入框的value屬性的值
    js方式:
    jQuery方式:

javaScript和jquery區(qū)別

• 注意事項(xiàng): 使用jquery的方式獲取的對象稱為jquery對象,

  jQuery對象本質(zhì)上是js對象數(shù)組.

  使用dom的方式獲取的對象稱為dom(js)對象, 兩者的方法和屬性不能混用, 使用jquery的方法和屬性時(shí),必須保證對象是jquery對象.

• js對象和jquery對象之間的轉(zhuǎn)換

• 方式1:jQuery對象[index]

• 方式2:jQuery對象.get(index)

• $(js對象);

• jQuery(js對象);

• js對象  →  jquery對象

• jquery對象  →   js對象 (jQuery對象本質(zhì)上是js對象數(shù)組.)

事件(event)

回顧:

js的事件:

onload: 頁面加載事件

onclick: 單擊事件

onsubmit: 表單提交事件

onblur: 失去焦點(diǎn)

onfocus: 獲取焦點(diǎn)

onchange: 改變事件

鼠標(biāo)事件和鍵盤事件要求見到認(rèn)識(shí).

onkeyup:

js的事件和事件源綁定:

方式1: 綁定事件

<xxx onclick="fun()"></xxx>

方式2:派發(fā)事件

在js代碼中獲取事件源對象

var 元素對象 = document.getElementById("id");

  元素對象.事件名稱 = function(){}

在js的事件中,事件前加on,在jq的事件中沒有on,直接寫名稱即可

• 頁面加載成功事件

• 格式1:$(document).ready(function(){});

• 格式2:$(function(){});

• 注意:在同一個(gè)頁面內(nèi),jquery的頁面加載成功事件可以出現(xiàn)多次,隨機(jī)執(zhí)行(jQuery3.0以后),js的頁面加載成功事件能出現(xiàn)多次,但只有最后一個(gè)生效

• 2.0以前,先執(zhí)行jq的頁面加載成功事件(有序執(zhí)行的)

• 重點(diǎn)事件

• click(fun())

• change(fun())

• submit(fun())

• focus(fun())

• blur(fun())

• jquery事件和事件源的綁定

  如果你想將jq代碼寫在head標(biāo)簽中,那么要保證頁面加載成功后,才能使用jq的事件

• jquery對象.事件名稱(function(){});

jQuery的選擇器

基本選擇器:★

• * 所有

• # id

• .class

• 標(biāo)簽選擇器(標(biāo)簽名)

• 多個(gè)選擇器用","號隔開   a,b

層級選擇器:★

• a b:選擇a的b的后代

• a>b:選擇a的b孩子

• a+b:選擇a的b大弟弟

• a~b:選擇a的所有的b弟弟

屬性選擇器★

// [屬性名] 獲取元素上帶有該屬性名的元素對象
// [屬性名='值'] 獲取元素上帶有該屬性名且值為'zhi'的元素對象
屬性選擇器使用時(shí)一般都有和標(biāo)簽選擇器聯(lián)合使用
 div[屬性名='值']

基本過濾: ★

• :first 第一個(gè)

• :last  最后一個(gè)

• :even 偶數(shù)

• :odd 奇數(shù)

• :eq(index) 索引=

• :gt(index) 索引>

• :lt(index) 索引<

• :not(選擇器)

表單對象屬性★

• :enabled    可用的

• :disabled          不可用的

• :checked           選中的(針對的是單選框和復(fù)選框)

• :selected          選中的(下拉選)

jQuery的DOM操作

操作HTML代碼/文本/值 ★

• val() : 對value屬性的操作

• jq對象.val();       獲取value屬性的值

• jq對象.val("值");       設(shè)置value屬性的值

• html() : 對標(biāo)簽體的操作  (等同于js的innerHTML屬性)

• jq對象.html();      獲取標(biāo)簽體的內(nèi)容

• jq對象.html("值");     設(shè)置標(biāo)簽體的內(nèi)容

• text() : 對標(biāo)簽體的操作  (等同于js的innerText屬性)

• jq對象.text();       獲取標(biāo)簽體的內(nèi)容

• jq對象.text("值");     設(shè)置標(biāo)簽體的內(nèi)容

• html和text區(qū)別設(shè)置內(nèi)容: html可以將內(nèi)容解析,text只是作為普通文本獲取內(nèi)容:html獲取所有源碼內(nèi)容,text只是獲取文本內(nèi)容

文檔處理

內(nèi)部插入:  作為子標(biāo)簽插入

• append a.append(c)     將c插入到a的內(nèi)部的后面

• prepend        a.prepend(c)    將c插入到a的內(nèi)部的前面

外部插入: 作為兄弟標(biāo)簽插入

• after     a.after(c)         將c插入到a的后面

• before                a.before(c)         將c插入到a的前面

刪除:

• empty():清空元素 (清空所有的子標(biāo)簽)

• remove():移除 (自殺)

屬性

• attr():設(shè)置或者獲取元素的屬性

• 格式1:設(shè)置單個(gè)屬性jq對象.attr("屬性名","值");

• 格式2:設(shè)置多個(gè)屬性jq對象.attr({ "屬性":"值", "屬性1":"值1"});

• 設(shè)置屬性(給標(biāo)簽添加屬性)

• 獲取屬性的值 jq對象.attr("屬性名");

• 移除屬性(刪除屬性) jq對象.removeAttr("屬性名");

• prop():使用方式和attr一樣,優(yōu)先使用attr方法,若attr方法不能用,換prop方法(版本升級后的產(chǎn)物)checked 和 selected 使用prop獲取

class操作

• 元素.addClass("屬性值");添加class屬性

• 元素.removeClass():移除指定的樣式

• 元素.toggleClass("屬性值"): 有class屬性就刪除,沒有class屬性就添加.

css樣式

• css

• 格式1:設(shè)置單個(gè)屬性jq對象.css("屬性","值");

• 格式2:設(shè)置多個(gè)屬性jq對象.css({ "屬性":"值", "屬性1":"值1"});

• 設(shè)置css樣式

• 獲取css樣式的值 jq對象.css("屬性名稱");

• 獲取元素的寬和高

• jq對象.width()

• jq對象.height()

案例:

案例1-表格隔行換色

需求分析:
 當(dāng)頁面加載成功后,給表格的奇數(shù)行和偶數(shù)行添加不同的背景顏色,表頭除外.
技術(shù)分析:
 jQuery:
  頁面加載成功事件:
   $(function(){})
   $(document).ready(function(){});
  選擇器: 
  css樣式: css方法
 步驟分析:
 ....

案例2-全選和全不選

需求分析:
 當(dāng)點(diǎn)擊頭部的復(fù)選框時(shí),讓其他的復(fù)選框的狀態(tài)和頭部復(fù)選框狀態(tài)保持一致.
技術(shù)分析:
 jQuery
  單擊事件: click
   獲取checked屬性的值
   獲取其他復(fù)選框并設(shè)置值
步驟分析:
 //1.給頭部復(fù)選框添加點(diǎn)擊事件
 //2.獲取頭部復(fù)選框的狀態(tài)
 //3.獲取其他復(fù)選框,并設(shè)置狀態(tài)

案例3-QQ表情添加