day13-web前端之JS與JQuery

時間 2019-12-10

標籤 day13 day web 前端 jquery 欄目 HTML 简体版

原文原文鏈接

第1章 JavaScript課堂總結

Blog連接：

JS語法基礎：http://www.cnblogs.com/liwenzhou/p/8004649.html

 

BOM和DOM:http://www.cnblogs.com/liwenzhou/p/8011504.html

 

jQuery：http://www.cnblogs.com/liwenzhou/p/8178806.html

 

 

# 今日內容

 

1. JavaScript 

 

    1. JS基礎語法

        1. 如何在網頁中引入JS?

       

        2. 變量

       

        3. 數據類型

            1. Number

            2. String

            3. Boolean

            4. undefined

            5. null

            6. Object

       

        4. 運算符

            強等於 和 弱等於 *****

            強等於： === 既判斷值相不相等還判斷類型相不相等

           

            弱等於： == 只判斷值相不相等

           

           

        5. 流程控制

            1. if else

            2. while

            3. for循環

            4. switch

       

            三元運算   *****

           

        6. 函數  *****

            1. 函數的定義（3種）

            2. 函數的返回值和參數

            3. 分析變量做用域

            4. 詞法分析（瞭解便可）

        7. 對象

            1. JSON.parse()/JSON.stringify() *****

            2. RegExp  ***** regObj.test()

View Code

第2章前端基礎之JavaScript

2.1 JavaScript的歷史

1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中)，後將其更名ScriptEase(客戶端執行的語言)。
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言。Sun和Netscape共同完成，後更名叫JavaScript。
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript。
爲了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。
ECMA-262 是 JavaScript 標準的官方名稱。

2.2 ECMAScript

年份css	名稱html	描述前端
1997node	ECMAScript 1python	第一個版本jquery
1998ios	ECMAScript 2git	版本變動github
1999正則表達式	ECMAScript 3	添加正則表達式添加try/catch
	ECMAScript 4	沒有發佈
2009	ECMAScript 5	添加"strict mode"嚴格模式添加JSON支持
2011	ECMAScript 5.1	版本變動
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增長指數運算符（**）增長Array.prototype.includes

注：ES6就是指ECMAScript 6。

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

JavaScript 很容易學習。

2.3 JavaScript引入方式

2.3.1 Script標籤內寫代碼

<script>

  // 在這裏寫你的JS代碼

</script>

2.3.2 引入額外的JS文件

<script src="myscript.js"></script>

2.4 JavaScript語言規範

2.4.1 註釋（註釋是代碼之母）

// 這是單行註釋

 

/*

這是

多行註釋

*/

2.4.2 結束符

JavaScript中的語句要以分號（;）爲結束符。

2.5 JavaScript語言基礎

2.5.1 變量聲明

JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。
聲明變量使用 var 變量名; 的格式來進行聲明

var name = "Alex";

var age = 18;

注意：

變量名是區分大小寫的。

推薦使用駝峯式命名規則。

保留字不能用作變量名。

################################保留字列表##########################

abstract

boolean

byte

char

class

const

debugger

double

enum

export

extends

final

float

goto

implements

import

int

interface

long

native

package

private

protected

public

short

static

super

synchronized

throws

transient

volatile

保留字列表

2.6 JavaScript數據類型

JavaScript擁有動態類型

var x;  // 此時x是undefined

var x = 1;  // 此時x是數字

var x = "Alex"  // 此時x是字符串

2.6.1 數字類型

JavaScript不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;

var b = 20;

var c = 123e5;  // 12300000

var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（Not a Number）。

經常使用方法

parseInt("123")  // 返回123

parseInt("ABC")  // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。

parseFloat("123.456")  // 返回123.456

2.6.2 字符串

var a = "Hello"

var b = "world;

var c = a + b;

console.log(c);  // 獲得Helloworld

經常使用方法：

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n)	返回第n個字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根據索引獲取子序列
.slice(start, end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(delimiter, limit)	分割

拼接字符串通常使用「+」

####################slice和substring的區別#############################

string.slice(start, stop)和string.substring(start, stop)：

 

二者的相同點：

若是start等於end，返回空字符串

若是stop參數省略，則取到字符串末

若是某個參數超過string的長度，這個參數會被替換爲string的長度

 

substirng()的特色：

若是 start > stop ，start和stop將被交換

若是參數是負數或者不是數字，將會被0替換

 

silce()的特色：

若是 start > stop 不會交換二者

若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)

若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

slice和substring的區別

2.6.3 布爾類型

區別於Python，true和false都是小寫。

var a = true;

var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

2.6.4 數組

相似於Python中的列表。

var a = [123, "ABC"];

console.log(a[1]);  // 輸出"ABC"

經常使用方法：

方法	說明
.length	數組的大小
.push(ele)	尾部追加元素
.pop()	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse()	反轉
.join(seq)	將數組元素鏈接成字符串
.concat(val, ...)	鏈接數組
.sort()	排序

注意：

#############################關於sort的問題############################

/*若是調用sort方法時沒有傳入參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。

 

若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

 

若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。

若 a 等於 b，則返回 0。

若 a 大於 b，則返回一個大於 0 的值。

*/

 

// 根據上面的規則自行實現一個排序函數：

 

 

function sortNumber(a,b) {

  return a - b

}

 

// 調用sort方法時將定義好的排序函數傳入便可。

stringObj.sort(sortNumber)

 

 

可使用如下方式遍歷數組中的元素：

var a = [10, 20, 30, 40];

for (var i=0;i<a.length;i++) {

  console.log(i);

}

關於sort的問題

2.6.5 null和undefined

null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。

2.6.6 類型查詢

typeof "abc"  // "string"

typeof null  // "object"

typeof true  // "boolean"

typeof 123 // "number"

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變量或值調用 typeof 運算符將返回下列值之一：

undefined - 若是變量是 Undefined 類型的
boolean - 若是變量是 Boolean 類型的
number - 若是變量是 Number 類型的
string - 若是變量是 String 類型的
object - 若是變量是一種引用類型或 Null 類型的

2.7 運算符

2.7.1 算數運算符

+ - * / % ++ --

2.7.2 比較運算符

> >= < <= != == === !==

注意：

1 == 「1」  // true

1 === "1"  // false

2.7.3 邏輯運算符

&& || !

2.7.4 賦值運算符

= += -= *= /=

2.8 流程控制

2.8.1 if-else

var a = 10;

if (a > 5){

  console.log("yes");

}else {

  console.log("no");

}

2.8.2 if-else if-else

var a = 10;

if (a > 5){

  console.log("a > 5");

}else if (a < 5) {

  console.log("a < 5");

}else {

  console.log("a = 5");

}

2.8.3 switch

var day = new Date().getDay();

switch (day) {

  case 0:

  console.log("Sunday");

  break;

  case 1:

  console.log("Monday");

  break;

default:

  console.log("...")

}

View Code

switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

2.8.4 for

for (var i=0;i<10;i++) {

  console.log(i);

}

2.8.5 while

var i = 0;

while (i < 10) {

  console.log(i);

  i++;

}

2.8.6 三元運算

var a = 1;

var b = 2;

var c = a > b ? a : b

2.9 函數

2.9.1 函數定義

JavaScript中的函數和Python中的很是相似，只是定義方式有點區別。

// 普通函數定義

function f1() {

  console.log("Hello world!");

}

 

// 帶參數的函數

function f2(a, b) {

  console.log(arguments);  // 內置的arguments對象

  console.log(arguments.length);

  console.log(a, b);

}

 

// 帶返回值的函數

function sum(a, b){

  return a + b;

}

sum(1, 2);  // 調用函數

 

// 匿名函數方式

var sum = function(a, b){

  return a + b;

}

sum(1, 2);

 

// 當即執行函數

(function(a, b){

  return a + b;

})(1, 2);

View Code

2.9.2 arguments

function add(a,b){

  console.log(a+b);

  console.log(arguments.length)

}

 

add(1,2)

輸出：

3

2

View Code

2.9.3 函數的全局變量和局部變量

局部變量：

在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量：

在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

變量生存週期：

JavaScript變量的生命期從它們被聲明的時間開始。

局部變量會在函數運行之後被刪除。

全局變量會在頁面關閉後被刪除。

2.9.4 做用域

首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

幾個例子：

var city = "BeiJing";

function f() {

  var city = "ShangHai";

  function inner(){

    var city = "ShenZhen";

    console.log(city);

  }

  inner();

}

 

f();  //輸出結果是？

View Code

var city = "BeiJing";

function Bar() {

  console.log(city);

}

function f() {

  var city = "ShangHai";

  return Bar;

}

var ret = f();

ret();  // 打印結果是？

View Code

3.閉包

var city = "BeiJing";

function f(){

    var city = "ShangHai";

    function inner(){

        console.log(city);

    }

    return inner;

}

var ret = f();

ret();

View Code

2.10 詞法分析

JavaScript中在調用函數的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數調用的前一瞬間，會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：

1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

函數內部不管是使用參數仍是使用局部變量都到AO上找。

看兩個例子：

2.10.1 第一題

var age = 18;

function foo(){

  console.log(age);

  var age = 22;

  console.log(age);

}

foo();  // 問：執行foo()以後的結果是？

2.10.2 第二題：

var age = 18;

function foo(){

  console.log(age);

  var age = 22;

  console.log(age);

  function age(){

    console.log("呵呵");

  }

  console.log(age);

}

foo();  // 執行後的結果是？

2.10.3 答案解析

##################答案解析########################

詞法分析過程：

一、分析參數，有一個參數，造成一個 AO.age=undefine;

2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理

三、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};

 

最終，AO上的屬性只有一個age，而且值爲一個函數聲明

 

執行過程：

注意：執行過程當中全部的值都是從AO對象上去尋找

 

1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數

二、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 2

三、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

答案解析

2.11 內置對象和方法

JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。

注意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

2.11.1 自定義對象

相似於（某方面相似）Python中的字典數據類型

var a = {"name": "Alex", "age": 18};

console.log(a.name);

console.log(a["age"]);

遍歷對象中的內容：

var a = {"name": "Alex", "age": 18};

for (var i in a){

  console.log(i, a[i]);

}

建立對象：

var person=new Object();  // 建立一個person對象

person.name="Alex";  // person對象的name屬性

person.age=18;  // person對象的age屬性

擴展：

#######################JavaScript面向對象之繼承#########################

// 父類構造函數

var Car = function (loc) {

  this.loc = loc;

};

 

// 父類方法

Car.prototype.move = function () {

  this.loc ++;

};

 

// 子類構造函數

var Van = function (loc) {

  Car.call(this, loc);

};

 

// 繼承父類的方法

Van.prototype = Object.create(Car.prototype);

// 修復 constructor

Van.prototype.constructor = Van;

// 擴展方法

Van.prototype.grab = function () {

  /* ... */

};

JavaScript面向對象之繼承

2.11.2 Date對象

建立Date對象

//方法1：不指定參數

var d1 = new Date();

console.log(d1.toLocaleString());

//方法2：參數爲日期字符串

var d2 = new Date("2004/3/20 11:12");

console.log(d2.toLocaleString());

var d3 = new Date("04/03/20 11:12");

console.log(d3.toLocaleString());

//方法3：參數爲毫秒數

var d3 = new Date(5000);

console.log(d3.toLocaleString());

console.log(d3.toUTCString());

 

//方法4：參數爲年月日小時分鐘秒毫秒

var d4 = new Date(2004,2,20,11,12,0,300);

console.log(d4.toLocaleString());  //毫秒並不直接顯示

View Code

Date對象的方法：

var d = new Date();

//getDate()                 獲取日

//getDay ()                 獲取星期

//getMonth ()               獲取月（0-11）

//getFullYear ()            獲取完全年份

//getYear ()                獲取年

//getHours ()               獲取小時

//getMinutes ()             獲取分鐘

//getSeconds ()             獲取秒

//getMilliseconds ()        獲取毫秒

//getTime ()                返回累計毫秒數(從1970/1/1午夜)

View Code

練習：

編寫代碼，將當前日期按「2017-12-27 11:11 星期三」格式輸出。

2.11.3 JSON對象

var str1 = '{"name": "Alex", "age": 18}';

var obj1 = {"name": "Alex", "age": 18};

// JSON字符串轉換成對象

var obj = JSON.parse(str1);

// 對象轉換成JSON字符串

var str = JSON.stringify(obj1);

2.11.4 RegExp對象

############################RegExp############################

//RegExp對象

 

//建立正則對象方式1

// 參數1 正則表達式(不能有空格)

// 參數2 匹配模式：經常使用g(全局匹配;找到全部匹配，而不是在第一個匹配後中止)和i(忽略大小寫)

 

// 用戶名只能是英文字母、數字和_，而且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。

 

// 建立RegExp對象方式（逗號後面不要加空格）

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

 

// 匹配響應的字符串

var s1 = "bc123";

 

//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。

reg1.test(s1);  // true

 

// 建立方式2

// /填寫正則表達式/匹配模式（逗號後面不要加空格）

var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

 

reg2.test(s1);  // true

 

 

// String對象與正則結合的4個方法

var s2 = "hello world";

 

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容

s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置

s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割

s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換

 

// 關於匹配模式：g和i的簡單示例

var s1 = "name:Alex age:18";

 

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"

s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配

s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫

 

 

// 注意事項1：

// 若是regExpObject帶有全局標誌g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。

// 該屬性值默認爲0，因此第一次仍然是從字符串的開頭查找。

// 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改成字符串中本次匹配內容的最後一個字符的下一個索引位置。

// 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。

// 所以，當咱們使用test()函數執行了一次匹配以後，若是想要從新使用test()函數從頭開始查找，則須要手動將regExpObject.lastIndex的值重置爲 0。

// 若是test()函數再也找不到能夠匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置爲 0。

 

var reg3 = /foo/g;

// 此時 regex.lastIndex=0

reg3.test('foo'); // 返回true

// 此時 regex.lastIndex=3

reg3.test('foo'); // 返回false

// 因此咱們在使用test()方法校驗一個字符串是否徹底匹配時，不推薦添加全局匹配模式g。

 

// 注意事項2(說出來你可能不信系列)：

// 當咱們不加參數調用RegExpObj.test()方法時, 至關於執行RegExpObj.test("undefined"), 而且/undefined/.test()默認返回true。

var reg4 = /^undefined$/;

reg4.test(); // 返回true

reg4.test(undefined); // 返回true

reg4.test("undefined"); // 返回true

RegExp

2.11.5 Math對象

#######################Math###########################

abs(x)      返回數的絕對值。

exp(x)      返回 e 的指數。

floor(x)    對數進行下舍入。

log(x)      返回數的天然對數（底爲e）。

max(x,y)    返回 x 和 y 中的最高值。

min(x,y)    返回 x 和 y 中的最低值。

pow(x,y)    返回 x 的 y 次冪。

random()    返回 0 ~ 1 之間的隨機數。

round(x)    把數四捨五入爲最接近的整數。

sin(x)      返回數的正弦。

sqrt(x)     返回數的平方根。

tan(x)      返回角的正切。

Math

2.12 JS課堂示例

2.12.1 JS引入示例

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>JS引入示例</title>

    <!--<link rel="stylesheet" href="">-->

    <style>

        div {

            color: red;

        }

    </style>

    <script src="./00.js"></script>

    <!--<script>-->

        <!--alert("Hello s20 again!");-->

    <!--</script>-->

</head>

<body>

 

 

</body>

</html>

View Code

2.12.2 00.js

/**

 * Created by Administrator on 2018-03-17.

 */

 

alert("hello S20");

console.log(123);

 

 

// 單行註釋

 

/*

多行註釋

*/

 

// 聲明變量

var name = "Alex";

var age = 9000;

var n = 11.11;  // JS中只有一個數字類型

 

var a1 = [11, 22,33, 44, 55]; // 數組

 

var b1 = true;

 

var nnn;

// undefined;  //聲明變量可是沒有賦值的時候；函數沒有指定返回值時，默認返回的也是undefined

// null;  // 多用在你手動把某個變量清空:b1 = null;

 

// 判斷變量的數據類型

console.log(typeof a1);

 

 

// 變量命名規範

var $ = "下雪了！";

00.js

2.12.3 python示例

# def foo():

#     print(s)

#     s = "Alex"

#

# foo()

 

# 這是單行註釋

l1 = [11, 22, 33, 44, 55]  # 行註釋

第3章前端基礎之BOM和DOM

3.1 課堂總結

   2. BOM (browser object model)

       

        1. location

       

        2. setTimeout和clearTimeout

        3. setInterval和clearInterval

   

    3. DOM （document object model）

   

        經過JS代碼 操縱 HTML

       

        1. 找標籤

            1. 基本查找

                1. 經過標籤名找

                2. 經過ID找

                3. 經過class類找

       

        2. 作操做

            1. 建立標籤

                document.createElement("p")     *****

           

            2. 修改標籤的屬性

                1. 設置屬性值：imgEle.setAttribute("屬性", "具體的屬性值")

                2. 獲取屬性值：imgEle.getAttribute("id")

                3. 刪除屬性：  divEle.removeAttribute("age")

           

            3. 修改標籤的內容

            4. 把標籤插入文檔樹中

View Code

3.2 前戲

到目前爲止，咱們已經學過了JavaScript的一些簡單的語法。可是這些簡單的語法，並無和瀏覽器有任何交互。

也就是咱們還不能製做一些咱們常常看到的網頁的一些交互，咱們須要繼續學習BOM和DOM相關知識。

JavaScript分爲 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。

DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。

Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write()。

3.3 window對象

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。全局函數是 window 對象的方法。

接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。

一些經常使用的Window方法：

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口

3.4 window的子對象

3.4.1 navigator對象（瞭解便可）

瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱

navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串

navigator.userAgent　　// 客戶端絕大部分信息

navigator.platform　　　// 瀏覽器運行所在的操做系統

3.4.2 screen對象（瞭解便可）

屏幕對象，不經常使用。

一些屬性：

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

3.4.3 history對象（瞭解便可）

window.history 對象包含瀏覽器的歷史。

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。

history.forward()  // 前進一頁

history.back()  // 後退一頁

3.4.4 location對象

window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

經常使用屬性和方法：

location.href  獲取URL

location.href="URL" // 跳轉到指定頁面

location.reload() 從新加載頁面

3.4.5 彈出框

能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

語法：

alert("你看到了嗎？");

確認框（瞭解便可）

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

語法：

confirm("你肯定嗎？")

提示框（瞭解便可）

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

語法：

prompt("請在下方輸入","你的答案")

3.4.6 計時相關

經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。

clearTimeout()

語法：

clearTimeout(setTimeout_variable)

舉個例子：

// 在指定時間以後執行一次相應函數

var timer = setTimeout(function(){alert(123);}, 3000)

// 取消setTimeout設置

clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

語法：

setInterval("JS語句",時間間隔)

返回值

一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的 timeout。

clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。

語法：

clearInterval(setinterval返回的ID值)

舉個例子：

// 每隔一段時間就執行一次相應函數

var timer = setInterval(function(){console.log(123);}, 3000)

// 取消setInterval設置

clearInterval(timer);

稍微大一點的示例：

#########################定時器示例##############################

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>定時器</title>

  <script>

    var intervalId;

 

    function f() {

      var timeStr = (new Date()).toLocaleString();

      var inputEle = document.getElementById("i1");

      inputEle.value = timeStr;

    }

 

    function start() {

      f();

      if (intervalId === undefined) {

        intervalId = setInterval(f, 1000);

      }

    }

    function end() {

      clearInterval(intervalId);

      intervalId = undefined;

    }

 

  </script>

</head>

<body>

 

<input type="text" id="i1">

<input type="button" value="開始" id="start" onclick="start();">

<input type="button" value="結束" id="end" onclick="end();">

</body>

</html>

定時器示例

3.5 DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹。

3.6 HTML DOM 樹

DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

文檔節點(document對象)：表明整個文檔
元素節點(element 對象)：表明一個元素（標籤）
文本節點(text對象)：表明元素（標籤）中的文本
屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
註釋是註釋節點(comment對象)

JavaScript 能夠經過DOM建立動態的 HTML：

JavaScript 可以改變頁面中的全部 HTML 元素
JavaScript 可以改變頁面中的全部 HTML 屬性
JavaScript 可以改變頁面中的全部 CSS 樣式
JavaScript 可以對頁面中的全部事件作出反應

3.7 查找標籤

3.7.1 直接查找

document.getElementById           根據ID獲取一個標籤

document.getElementsByClassName   根據class屬性獲取

document.getElementsByTagName     根據標籤名獲取標籤合集

注意：

涉及到DOM操做的JS代碼應該放在文檔的哪一個位置。

3.7.2 DOM查找標籤示例

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>查找標籤示例</title>

</head>

<body>

<div id="d1">div</div>

<div id="d2">div</div>

<p class="c1 c2 c3">p標籤</p>

<a class="c1" href="">a標籤</a>

 

<div id="d3">

    <p id="p1">d3內部的p標籤</p>

    <a href="">d3內部的a標籤</a>

</div>

</body>

</html>

View Code

3.7.3 間接查找

parentElement            父節點標籤元素

children                 全部子標籤

firstElementChild        第一個子標籤元素

lastElementChild         最後一個子標籤元素

nextElementSibling       下一個兄弟標籤元素

previousElementSibling   上一個兄弟標籤元素

3.8 節點操做

3.8.1 建立節點

語法：

createElement(標籤名)

示例：

var divEle = document.createElement("div");

3.8.2 添加節點

語法：

追加一個子節點（做爲最後的子節點）

somenode.appendChild(newnode)；

把增長的節點放到某個節點的前邊。

somenode.insertBefore(newnode,某個節點);

示例：

var imgEle=document.createElement("img");

imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");

var d1Ele = document.getElementById("d1");

d1Ele.appendChild(imgEle);

3.8.3 刪除節點：

語法：

得到要刪除的元素，經過父元素調用刪除。

removeChild(要刪除的節點)

3.8.4 替換節點：

語法：

somenode.replaceChild(newnode, 某個節點);

3.8.5 屬性節點

獲取文本節點的值：

var divEle = document.getElementById("d1")

divEle.innerText

divEle.innerHTML

設置文本節點的值：

var divEle = document.getElementById("d1")

divEle.innerText="1"

divEle.innerHTML="<p>2</p>"

attribute操做

var divEle = document.getElementById("d1");

divEle.setAttribute("age","18")

divEle.getAttribute("age")

divEle.removeAttribute("age")

 

// 自帶的屬性還能夠直接.屬性名來獲取和設置

imgEle.src

imgEle.src="..."

3.8.6 獲取值操做

語法：

elementNode.value

適用於如下標籤：

.input
.select
.textarea

var iEle = document.getElementById("i1");

console.log(iEle.value);

var sEle = document.getElementById("s1");

console.log(sEle.value);

var tEle = document.getElementById("t1");

console.log(tEle.value);

3.8.7 獲取值示例

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>獲取值示例</title>

</head>

<body>

 

<form action="">

    <p><label for="i1">用戶名</label>

        <input type="text" name="username" id="i1"></p>

 

 

    <p>

        <label for="i2">籃球</label>

        <input value="basketball" type="checkbox" name="hobby" id="i2">

 

        <label for="i22">足球</label>

        <input value="football" type="checkbox" name="hobby" id="i22">

        <label for="i222">雙色球</label>

        <input value="doublecolorball" type="checkbox" name="hobby" id="i222">

    </p>

 

    <p>

        <label for="i3">男</label>

        <input type="radio" name="gender" id="i3">

        <label for="i4">女</label>

        <input type="radio" name="gender" id="i4">

    </p>

 

    <p>

        <label for="s1">從哪兒來</label>

        <select name="from" id="s1">

            <option value="shahe">沙河</option>

            <option value="sanlitun">三里屯</option>

            <option value="wudaokou">五道口</option>

            <option value="wangjing">望京</option>

        </select>

    </p>

 

    <label for="t1">我的簡介</label>

    <textarea name="info" id="t1" cols="30" rows="10">

 

    </textarea>

 

</form>

</body>

</html>

View Code

3.8.8 class的操做

className  獲取全部樣式類名(字符串)

classList.remove(cls)  刪除指定類

classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加

3.8.9 指定CSS操做

obj.style.backgroundColor="red"

JS操做CSS屬性的規律：

1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。如：

obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily

3.8.10 樣式操做示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>樣式操做示例</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
            background-color: red;
            border-radius: 50%;
        }
        .c2 {
            background-color: green;
        }
    </style>
</head>
<body>

<div id="d1" class="c1 c2" onclick="changeColor(this)"></div>
<div id="d2" class="c1 c2"></div>
<script>
    function changeColor(ths) {
        ths.classList.toggle("c2");
    }

    // 找到d2這個標籤
    var d2Ele = document.getElementById("d2");
    d2Ele.onclick=function () {
//        alert(123);
        console.log(this);  // 指的是當前觸發事件的標籤
        d2Ele.style.background="blue";
        d2Ele.innerText="我是d2標籤";
    }
</script>
</body>
</html>

View Code

3.9 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。

3.9.1 經常使用事件

onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。

 

onfocus        元素得到焦點。               // 練習：輸入框

onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.

onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

 

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.

onkeypress     某個鍵盤按鍵被按下並鬆開。

onkeyup        某個鍵盤按鍵被鬆開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。

onmousemove    鼠標被移動。

onmouseout     鼠標從某元素移開。

onmouseover    鼠標移到某元素之上。

 

onselect      在文本框中的文本被選中時發生。

onsubmit      確認按鈕被點擊，使用的對象是form。

3.9.2 綁定方式：

方式一：

<div id="d1" onclick="changeColor(this);">點我</div>

<script>

  function changeColor(ths) {

    ths.style.backgroundColor="green";

  }

</script>

注意：

this是實參，表示觸發事件的當前元素。

函數定義過程當中的ths爲形參。

方式二：

<div id="d2">點我</div>

<script>

  var divEle2 = document.getElementById("d2");

  divEle2.onclick=function () {

    this.innerText="呵呵";

  }

</script>

3.9.3 事件示例：

############################搜索框示例##############################

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>搜索框示例</title>

 

</head>

<body>

    <input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">

   

<script>

function focus(){

    var inputEle=document.getElementById("d1");

    if (inputEle.value==="請輸入關鍵字"){

        inputEle.value="";

    }

}

 

function blur(){

    var inputEle=document.getElementById("d1");

    var val=inputEle.value;

    if(!val.trim()){

        inputEle.value="請輸入關鍵字";

    }

}

</script>

</body>

</html>

搜索框示例

###############################select聯動###############################

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>select聯動</title>

</head>

<body>

<select id="province">

  <option>請選擇省:</option>

</select>

 

<select id="city">

  <option>請選擇市:</option>

</select>

 

<script>

  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};

 

  var p = document.getElementById("province");

  var c = document.getElementById("city");

 

  for (var i in data) {

    var optionP = document.createElement("option");

    optionP.innerHTML = i;

    p.appendChild(optionP);

  }

  p.onchange = function () {

    var pro = (this.options[this.selectedIndex]).innerHTML;

    var citys = data[pro];

    // 清空option

    c.innerHTML = "";

 

    for (var i=0;i<citys.length;i++) {

      var option_city = document.createElement("option");

      option_city.innerHTML = citys[i];

      c.appendChild(option_city);

    }

  }

</script>

</body>

</html>

select聯動

3.9.4 select聯動示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select聯動</title>
</head>
<body>
<select id="s1">
  <option>請選擇省:</option>
</select>

<select id="s2">
  <option>請選擇市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};

  var p = document.getElementById("s1");
  var c = document.getElementById("s2");
  // 將省市信息從數據庫中提取出來，寫到第一個select中
    for (var i in data){
        console.log(i);
        // 建立option標籤
        var optionEle = document.createElement("option");
        optionEle.innerText=i;
        p.appendChild(optionEle);
    }
    // 給s1綁定事件，值發生變化觸發的時間(onchange事件)
    p.onchange=function () {
        // 先清空c下面的option
        c.innerHTML="";
        // 取到用戶選中的值
        var pValue = this.options[this.selectedIndex].innerText;
        var citys = data[pValue];
        // 遍歷數組
        for (var i=0;i<citys.length;i++){
        // 建立option標籤
        var optionEle = document.createElement("option");
        optionEle.innerText=citys[i];
        c.appendChild(optionEle);
    }

    }

</script>
</body>
</html>

View Code

3.9.5 補充的z-index屬性

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>補充的z-index屬性</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #4d4d4d;
            z-index: 998;
        }
        .modal {
            height: 400px;
            width: 600px;
            margin-top: -200px;
            margin-left: -300px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1000;
        }
    </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

練習

3.9.6 透明度相關屬性

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>透明度相關屬性</title>
    <style>
        .c {
            height: 200px;
            width: 200px;

        }
        .c1 {
            /*background-color: red;*/
            background-color: rgba(255,0,0,0.3);  /*僅限於修改背景的透明度，子標籤不會改變透明度*/
        }

        .c2 {
            background-color: rgb(255,0,0);
            opacity: 0.3;  /*自己及子標籤都會應用該透明的值*/
        }
    </style>
</head>
<body>

<div class="c c1">
 <p>div內部的p標籤</p>
</div>

<div class="c c2">
     <p>div內部的p標籤</p>
</div>
</body>
</html>

透明度相關屬性

第4章 jQuery

4.1 jQuery介紹

一、 jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。

二、 jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「

4.2 jQuery的優點

一、一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。

二、豐富的DOM選擇器,jQuery的選擇器用起來很方便，好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再好比要將一個表格的隔行變色，jQuery也是一行代碼搞定。

三、鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。

四、事件、樣式、動畫支持。jQuery還簡化了js操做css的代碼，而且代碼的可讀性也比js要強。

五、 Ajax操做支持。jQuery簡化了AJAX操做，後端只需返回一個JSON格式的字符串就能完成與前端的通訊。

六、跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。

七、插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。

4.3 jQuery內容：

一、選擇器

二、篩選器

三、樣式操做

四、文本操做

五、屬性操做

六、文檔處理

七、事件

八、動畫效果

九、插件

十、 each、data、Ajax

下載連接：jQuery官網

中文文檔：http://jquery.cuishifeng.cn/

4.4 jQuery版本

l 1.x：兼容IE678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)

l 2.x：不兼容IE678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)

l 3.x：不兼容IE678，只支持最新的瀏覽器。須要注意的是不少老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。

維護IE678是一件讓人頭疼的事情，通常咱們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減小，PC端用戶已經逐步被移動端用戶所取代，若是沒有特殊要求的話，通常都會選擇放棄對678的支持。

4.5 jQuery對象

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。若是一個對象是 jQuery對象，那麼它就可使用jQuery裏的方法：例如$(「#i1」).html()。

$("#i1").html()的意思是：獲取id值爲 i1的元素的html代碼。其中 html()是jQuery裏的方法。

至關於： document.getElementById("i1").innerHTML;

雖然 jQuery對象是包裝 DOM對象後產生的，可是 jQuery對象沒法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery裏的方法。

一個約定，咱們在聲明一個jQuery對象變量的時候在變量名前面加上$：

var $variable = jQuery對像

var variable = DOM對象

$variable[0]//jQuery對象轉成DOM對象

拿上面那個例子舉例，jQuery對象和DOM對象的使用：

$("#i1").html();//jQuery對象可使用jQuery的方法

$("#i1")[0].innerHTML;// DOM對象使用DOM的方法

4.6 jQuery基礎語法

$(selector).action()

4.6.1 jQuery導入示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery導入示例</title>

</head>
<body>

<div id="d1">111</div>
<p class="c2">p</p>
<div class="c1">c1</div>
<div class="c1 c2">c2</div>

<div id="d2">
    <p>ppp</p>
</div>

<!--<script>-->
    <!--var d1Ele = document.getElementById("d1");-->
    <!--console.log(d1Ele);-->
    <!--console.log(d1Ele.innerText);-->
<!--</script>-->
<script src="jquery-3.3.1.min.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script>

</script>
</body>
</html>

View Code

4.7 查找標籤

4.7.1 選擇器

id選擇器：

$("#id")

標籤選擇器：

$("tagName")

class選擇器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class類的div標籤

全部元素選擇器：

$("*")

組合選擇器：

$("#id, .className, tagName")

層級選擇器：

x和y能夠爲任意選擇器

$("x y");// x的全部後代y（子子孫孫）

$("x > y");// x的全部兒子y（兒子）

$("x + y")// 找到全部緊挨在x後面的y

$("x ~ y")// x以後全部的兄弟y

基本篩選器：

:first // 第一個

:last // 最後一個

:eq(index)// 索引等於index的那個元素

:even // 匹配全部索引值爲偶數的元素，從 0 開始計數

:odd // 匹配全部索引值爲奇數的元素，從 0 開始計數

:gt(index)// 匹配全部大於給定索引值的元素

:lt(index)// 匹配全部小於給定索引值的元素

:not(元素選擇器)// 移除全部知足not條件的標籤

:has(元素選擇器)// 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例子：

$("div:has(h1)")// 找到全部後代中有h1標籤的div標籤

$("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤

$("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤

$("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

4.7.2 練習：

自定義模態框，使用jQuery實現彈出和隱藏功能。

#######################jQuery版自定義模態框##########################

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>自定義模態框</title>

  <style>

    .cover {

      position: fixed;

      left: 0;

      right: 0;

      top: 0;

      bottom: 0;

      background-color: darkgrey;

      z-index: 999;

    }

    .modal {

      width: 600px;

      height: 400px;

      background-color: white;

      position: fixed;

      left: 50%;

      top: 50%;

      margin-left: -300px;

      margin-top: -200px;

      z-index: 1000;

    }

    .hide {

      display: none;

    }

  </style>

</head>

<body>

<input type="button" value="彈" id="i0">

 

<div class="cover hide"></div>

<div class="modal hide">

  <label for="i1">姓名</label>

  <input id="i1" type="text">

   <label for="i2">愛好</label>

  <input id="i2" type="text">

  <input type="button" id="i3" value="關閉">

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

  var tButton = $("#i0")[0];

  tButton.onclick=function () {

    var coverEle = $(".cover")[0];

    var modalEle = $(".modal")[0];

 

    $(coverEle).removeClass("hide");

    $(modalEle).removeClass("hide");

  };

 

  var cButton = $("#i3")[0];

  cButton.onclick=function () {

    var coverEle = $(".cover")[0];

    var modalEle = $(".modal")[0];

 

    $(coverEle).addClass("hide");

    $(modalEle).addClass("hide");

  }

</script>

</body>

</html>

jQuery版自定義模態框

4.7.3 選擇器和篩選器示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>選擇器和篩選器示例</title>
</head>
<body>

<ul id="u1">
    <li id="i1">001</li>
    <li id="i2">002</li>
    <li id="i3" class="c1">003</li>
    <li id="i4">004</li>
    <li id="i5" class="c1">005</li>
</ul>


<div><p>div中的p標籤</p></div>
<div><a>div中的a標籤</a></div>
<script src="jquery-3.3.1.min.js"></script>

</body>
</html>

View Code

4.7.4 屬性選擇器

屬性選擇器：

[attribute]

[attribute=value]// 屬性等於

[attribute!=value]// 屬性不等於

例子：

// 示例

<input type="text">

<input type="password">

<input type="checkbox">

$("input[type='checkbox']");// 取到checkbox類型的input標籤

$("input[type!='text']");// 取到類型不是text的input標籤

表單經常使用篩選：

:text

:password

:file

:radio

:checkbox

 

:submit

:reset

:button

例子：

$(":checkbox")  // 找到全部的checkbox

表單對象屬性:

:enabled

:disabled

:checked

:selected

例子：

<form>

  <input name="email" disabled="disabled" />

  <input name="id" />

</form>

 

$("input:enabled")  // 找到可用的input標籤

<select id="s1">

  <option value="beijing">北京市</option>

  <option value="shanghai">上海市</option>

  <option selected value="guangzhou">廣州市</option>

  <option value="shenzhen">深圳市</option>

</select>

 

$(":selected")  // 找到全部被選中的option

4.7.5 屬性選擇器示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>屬性選擇器示例</title>
</head>
<body>

<form action="">
    <input type="text">
    <input type="password">
    <input type="email">
    <input type="date">
    <input type="checkbox">

    <input name="gender" type="radio">
    <input name="gender" type="radio">

    <input type="submit">
    
</form>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

View Code

4.7.6 篩選器

下一個元素：

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

上一個元素：

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()

$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。

兒子和兄弟元素：

$("#id").children();// 兒子們

$("#id").siblings();// 兄弟們

查找元素：

$("#id").find()// 搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

補充：

.first()// 獲取匹配的第一個元素

.last()// 獲取匹配的最後一個元素

.not()// 從匹配元素的集合中刪除與指定表達式匹配的元素

.has()// 保留包含特定後代的元素，去掉那些不含有指定後代的元素。

4.7.7 示例：左側菜單

############################左側菜單示例###############################

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>左側菜單示例</title>

  <style>

    .left {

      position: fixed;

      left: 0;

      top: 0;

      width: 20%;

      height: 100%;

      background-color: rgb(47, 53, 61);

    }

 

    .right {

      width: 80%;

      height: 100%;

    }

 

    .menu {

      color: white;

    }

 

    .title {

      text-align: center;

      padding: 10px 15px;

      border-bottom: 1px solid #23282e;

    }

 

    .items {

      background-color: #181c20;

 

    }

    .item {

      padding: 5px 10px;

      border-bottom: 1px solid #23282e;

    }

 

    .hide {

      display: none;

    }

  </style>

</head>

<body>

 

<div class="left">

  <div class="menu">

    <div class="title">菜單一</div>

    <div class="items">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

    <div class="title">菜單二</div>

    <div class="items hide">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

    <div class="title">菜單三</div>

    <div class="items hide">

      <div class="item">111</div>

      <div class="item">222</div>

      <div class="item">333</div>

    </div>

  </div>

</div>

<div class="right"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

 

<script>

  $(".title").click(function (){  // jQuery綁定事件

    // 隱藏全部class裏有.items的標籤

    $(".items").addClass("hide");  //批量操做

    $(this).next().removeClass("hide");

  });

</script>

左側菜單示例

4.7.8 Python鏈式操做示例.py

class Person(object):

    def __init__(self, name, age):

        self.name = name

        self.age = age

 

    def say(self):

        print("旺旺~")

        return self

 

    def run(self):

        print("噠噠~")

 

p = Person("Alex", 9000)

p.say().run()

# p.run()

View Code

4.8 操做標籤

4.8.1 樣式操做

樣式類

addClass();// 添加指定的CSS類名。

removeClass();// 移除指定的CSS類名。

hasClass();// 判斷樣式存不存在

toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

示例：開關燈和模態框

CSS

css("color","red")//DOM操做：tag.style.color="red"

示例：

$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

位置：

offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置

position()// 獲取匹配元素相對父元素的偏移

scrollTop()// 獲取匹配元素相對滾動條頂部的偏移

scrollLeft()// 獲取匹配元素相對滾動條左側的偏移

.offset()方法容許咱們檢索一個元素相對於文檔（document）的當前位置。

和 .position()的差異在於： .position()是相對於相對於父級元素的位移。

示例：

#####################返回頂部示例###########################

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>位置相關示例之返回頂部</title>

  <style>

    .c1 {

      width: 100px;

      height: 200px;

      background-color: red;

    }

 

    .c2 {

      height: 50px;

      width: 50px;

 

      position: fixed;

      bottom: 15px;

      right: 15px;

      background-color: #2b669a;

    }

    .hide {

      display: none;

    }

    .c3 {

      height: 100px;

    }

  </style>

</head>

<body>

<button id="b1" class="btn btn-default">點我</button>

<div class="c1"></div>

<div class="c3">1</div>

<div class="c3">2</div>

<div class="c3">3</div>

<div class="c3">4</div>

<div class="c3">5</div>

<div class="c3">6</div>

<div class="c3">7</div>

<div class="c3">8</div>

<div class="c3">9</div>

<div class="c3">10</div>

<div class="c3">11</div>

<div class="c3">12</div>

<div class="c3">13</div>

<div class="c3">14</div>

<div class="c3">15</div>

<div class="c3">16</div>

<div class="c3">17</div>

<div class="c3">18</div>

<div class="c3">19</div>

<div class="c3">20</div>

<div class="c3">21</div>

<div class="c3">22</div>

<div class="c3">23</div>

<div class="c3">24</div>

<div class="c3">25</div>

<div class="c3">26</div>

<div class="c3">27</div>

<div class="c3">28</div>

<div class="c3">29</div>

<div class="c3">30</div>

<div class="c3">31</div>

<div class="c3">32</div>

<div class="c3">33</div>

<div class="c3">34</div>

<div class="c3">35</div>

<div class="c3">36</div>

<div class="c3">37</div>

<div class="c3">38</div>

<div class="c3">39</div>

<div class="c3">40</div>

<div class="c3">41</div>

<div class="c3">42</div>

<div class="c3">43</div>

<div class="c3">44</div>

<div class="c3">45</div>

<div class="c3">46</div>

<div class="c3">47</div>

<div class="c3">48</div>

<div class="c3">49</div>

<div class="c3">50</div>

<div class="c3">51</div>

<div class="c3">52</div>

<div class="c3">53</div>

<div class="c3">54</div>

<div class="c3">55</div>

<div class="c3">56</div>

<div class="c3">57</div>

<div class="c3">58</div>

<div class="c3">59</div>

<div class="c3">60</div>

<div class="c3">61</div>

<div class="c3">62</div>

<div class="c3">63</div>

<div class="c3">64</div>

<div class="c3">65</div>

<div class="c3">66</div>

<div class="c3">67</div>

<div class="c3">68</div>

<div class="c3">69</div>

<div class="c3">70</div>

<div class="c3">71</div>

<div class="c3">72</div>

<div class="c3">73</div>

<div class="c3">74</div>

<div class="c3">75</div>

<div class="c3">76</div>

<div class="c3">77</div>

<div class="c3">78</div>

<div class="c3">79</div>

<div class="c3">80</div>

<div class="c3">81</div>

<div class="c3">82</div>

<div class="c3">83</div>

<div class="c3">84</div>

<div class="c3">85</div>

<div class="c3">86</div>

<div class="c3">87</div>

<div class="c3">88</div>

<div class="c3">89</div>

<div class="c3">90</div>

<div class="c3">91</div>

<div class="c3">92</div>

<div class="c3">93</div>

<div class="c3">94</div>

<div class="c3">95</div>

<div class="c3">96</div>

<div class="c3">97</div>

<div class="c3">98</div>

<div class="c3">99</div>

<div class="c3">100</div>

 

<button id="b2" class="btn btn-default c2 hide">返回頂部</button>

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

<script>

  $("#b1").on("click", function () {

    $(".c1").offset({left: 200, top:200});

  });

 

 

  $(window).scroll(function () {

    if ($(window).scrollTop() > 100) {

      $("#b2").removeClass("hide");

    }else {

      $("#b2").addClass("hide");

    }

  });

  $("#b2").on("click", function () {

    $(window).scrollTop(0);

  })

</script>

</body>

</html>

返回頂部示例

尺寸：

height()

width()

innerHeight()

innerWidth()

outerHeight()

outerWidth()

4.8.2 左側菜單實例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>左側菜單實例</title>
    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div class="menu-title">菜單一</div>
<div class="menu-items hide">
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>
<div class="menu-title">菜單二</div>
<div class="menu-items hide">
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>
<div class="menu-title">菜單三</div>
<div class="menu-items hide">
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 綁定事件，點擊事件，給.menu-title綁定點擊事件
    // 1. 先找標籤
    var $titleEles = $(".menu-title");
    $titleEles.on("click", function () {
        // 2. 寫事件觸發以後要作的事兒
        // 2.1 把我下面的子標籤顯示出來，具體就是removeClass("hide");
        // console.log(this);  // this指的是觸發當前事件的標籤,是DOM對象
        $(this).next().toggleClass("hide");
        // 2.2 把其餘的.menu-items隱藏
        $(this).next().siblings(".menu-items").addClass("hide");
    });


</script>
</body>
</html>

左側菜單實例

4.8.3 位置相關示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>位置相關示例</title>
    <style>
        * {
            margin: 0;
        }
        .c1,
        .c2,
        #d3{
            height: 200px;
            width: 200px;
        }
        .c1 {
            background-color: red;
        }
        .c2 {
            background-color: green;
            position: relative;
            left: 200px;
        }
        #d3 {
            background-color: blue;
            position: absolute;
            left: 200px;
        }
    </style>
</head>
<body>

<div id="d1" class="c1"></div>
<div id="d2" class="c2">
    <div id="d3"></div>
</div>

<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

View Code

4.8.4 位置相關示例之返回頂部

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相關示例之返回頂部</title>
  <style>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回頂部</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 當屏幕滾輪向下滾動的時候就觸發scroll事件
  $(window).scroll(function () {
      // 判斷 window 距離屏幕頂部的距離是否大於100
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });

  $("#b2").on("click", function () {
      // 點擊返回頂部按鈕的時候，讓屏幕滾動到最上面
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

位置相關示例之返回頂部

4.8.5 文本操做

HTML代碼：

html()// 取得第一個匹配元素的html內容

html(val)// 設置全部匹配元素的html內容

文本值：

text()// 取得全部匹配元素的內容

text(val)// 設置全部匹配元素的內容

值：

val()// 取得第一個匹配元素的當前值

val(val)// 設置全部匹配元素的值

val([val1, val2])// 設置checkbox、select的值

示例：

獲取被選中的checkbox或radio的值：

<label for="c1">女</label>

<input name="gender" id="c1" type="radio" value="0">

<label for="c2">男</label>

<input name="gender" id="c2" type="radio" value="1">

可使用：

$("input[name='gender']:checked").val()

########################jQuery val賦值示例############################

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery val示例</title>

</head>

<body>

 

 

<label for="s1">城市</label>

<select id="s1">

  <option value="beijing">北京市</option>

  <option value="shanghai">上海市</option>

  <option selected value="guangzhou">廣州市</option>

  <option value="shenzhen">深圳市</option>

</select>

<hr>

<label for="s2">愛好</label>

<select id="s2" multiple="multiple">

  <option value="basketball" selected>籃球</option>

  <option value="football">足球</option>

  <option value="doublecolorball" selected>雙色球</option>

</select>

 

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

<script>

  // 單選下拉框

  $("#s1").val("shanghai");

  // 多選下拉框

   $("#s2").val(["basketball", "football"]);

</script>

</body>

</html>

jQuery val賦值示例

#############################自定義登陸校驗示例#################################

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>文本操做之登陸驗證</title>

  <style>

    .error {

      color: red;

    }

  </style>

</head>

<body>

 

<form action="">

  <div>

    <label for="input-name">用戶名</label>

    <input type="text" id="input-name" name="name">

    <span class="error"></span>

  </div>

  <div>

    <label for="input-password">密碼</label>

    <input type="password" id="input-password" name="password">

    <span class="error"></span>

  </div>

  <div>

    <input type="button" id="btn" value="提交">

  </div>

</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

  $("#btn").click(function () {

    var username = $("#input-name").val();

    var password = $("#input-password").val();

 

    if (username.length === 0) {

      $("#input-name").siblings(".error").text("用戶名不能爲空");

    }

    if (password.length === 0) {

      $("#input-password").siblings(".error").text("密碼不能爲空");

    }

  })

</script>

</body>

</html>

自定義登陸校驗示例

4.8.6 文本操做實例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文本操做實例</title>
</head>
<body>

<div id="d1">
    <p>我是div中的p標籤</p>
    <a>我是div中的a標籤</a>
</div>

<input id="i1" type="text">

<select name="" id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<textarea name="" id="t1" cols="30" rows="10"></textarea>

<p>
   <label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
</p>

<p>
       <label for="c3">籃球</label>
<input name="hobby" id="c3" type="checkbox" value="0">
<label for="c4">足球</label>
<input name="hobby" id="c4" type="checkbox" value="1">
    <label for="c4">雙色球</label>
<input name="hobby" id="c5" type="checkbox" value="2">
</p>

<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

文本操做實例

4.8.7 屬性操做

用於ID等或自定義屬性：

attr(attrName)// 返回第一個匹配元素的屬性值

attr(attrName, attrValue)// 爲全部匹配元素設置一個屬性值

attr({k1: v1, k2:v2})// 爲全部匹配元素設置多個屬性值

removeAttr()// 從每個匹配的元素中刪除一個屬性

用於checkbox和radio

prop() // 獲取屬性

removeProp() // 移除屬性

注意：

在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操做時會出bug，在3.x版本的jQuery中則沒有這個問題。爲了兼容性，咱們在處理checkbox和radio的時候儘可能使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">

<input type="radio" value="2">

<script>

  $(":checkbox[value='1']").prop("checked", true);

  $(":radio[value='2']").prop("checked", true);

</script>

示例：全選、反選、取消

4.8.8 屬性操做實例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>屬性操做實例</title>
</head>
<body>

<a id="a1" href="http://www.luffycity.com">點我直達！</a>

<input id="i1" type="checkbox">
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>

View Code

4.9 本週做業

4.9.1 全選、反選、取消做業分解

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>本週做業分解</title>
</head>
<body>
<table id="t1" border="1">
    <thead>
    <th>序號</th>
    <th>內容1</th>
    <th>內容2</th>
    </thead>
    <tbody>
    <tr>
      <td><input type="checkbox" id="c1"></td>
      <td>123</td>
      <td>346</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="c2"></td>
      <td>123</td>
      <td>346</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="c3"></td>
      <td>123</td>
      <td>346</td>
    </tr>
    </tbody>
  </table>
  <input id="b1" type="button" value="全選" >
  <input id="b2" type="button" value="反選" >
  <input id="b3" type="button" value="取消" >
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 點擊全選 把全部的checkbox設置成選中
    // 找到全選按鈕，給它綁定事件
    // 事件處理函數中要作的事兒：
    // 1. 找到全部的checkbox
    // 2. 選中--> prop("checked", true)

    // 取消
       // 找到取消按鈕，給它綁定事件
    // 事件處理函數中要作的事兒：
    // 1. 找到全部的checkbox
    // 2. 選中--> prop("checked", false)

    // 反選（根據checkbox不一樣的狀態 來分別處理）
    // 找到全部選中的，讓它們取消選中

    // 找到全部未選中的，讓它們選中
</script>
</body>
</html>

View Code

4.9.2 jQuery選擇器篩選器練習

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery選擇器篩選器練習</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>

    .my-padding {
      padding: 10px 0;
    }

    .my-dark {
      background-color: #f5f5f5;
    }

    .footer {
      background: #111;
      font-size: 0.9em;
      position: relative;
      clear: both;
    }
    .my-white {
      color: #ffffff;
    }

    body {
      margin: 0;
    }
    #progress {
      height: 2px;
      background-color: #b91f1f;
      transition: opacity 500ms linear;
    }
    #progress.done{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="progress"></div>
<!--導航欄開始-->
<nav class="navbar navbar-inverse my-nav">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://www.oldboyedu.com/"><strong>OldBoy Edu</strong></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Python學院<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Linux學院</a></li>
        <li><a href="http://luffy.oldboyedu.com">路飛學城</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">好好學習</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">聯繫咱們<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Rain</a></li>
            <li><a href="#">Egon</a></li>
            <li><a href="#">Yuan</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Q1mi</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--導航欄結束-->


<div class="container">

  <div class="jumbotron">
    <div id="j1" class="container">
      <h1 class="c1">沙河前端小王子</h1>
      <h1 class="c1">帶你學習jQuery</h1>
      <p id="p1"><a class="btn btn-primary btn-lg" href="https://q1mi.github.io/Blog/2017/07/10/about_jQuery/"
                    role="button">查看更多</a></p></div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-striped">
        <thead>
        <tr>
          <th>#</th>
          <th>姓名</th>
          <th>愛好</th>
          <th>操做</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th>1</th>
          <td>Eva_J</td>
          <td>茶道</td>
          <td>
            <button class="btn btn-warning">編輯</button>
            <button class="btn btn-danger">刪除</button>
          </td>
        </tr>
        <tr>
          <th>2</th>
          <td>Yuan</td>
          <td>日天</td>
          <td>
            <button class="btn btn-warning">編輯</button>
            <button class="btn btn-danger">刪除</button>
          </td>
        </tr>
        <tr id="tr3">
          <th>3</th>
          <td>Alex</td>
          <td>吹牛逼</td>
          <td>
            <button class="btn btn-warning">編輯</button>
            <button class="btn btn-danger">刪除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <hr>
  <div class="row">
    <div class="col-md-12">
      <form id="f1">
        <div class="form-group">
          <label for="exampleInputEmail1">郵箱</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密碼</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">上傳頭像</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">只支持img格式。</p>
        </div>
        <button id="btnSubmit" type="submit" class="btn btn-default">提交</button>
      </form>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <div class="checkbox-wrapper">
        <div class="panel panel-info">
          <div class="panel-heading">jQuery學習指南</div>
          <div id="my-checkbox" class="panel-body">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="0">
                jQuery一點都不難
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="1" checked>
                jQuery一學就會
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="2">
                jQuery就要多練
              </label>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="3" disabled>
                jQuery學很差
              </label>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div class="radio-wrapper">

        <div class="panel panel-info">
          <div class="panel-heading">我來老男孩以後...</div>
          <div class="panel-body">
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                個人心中只有學習
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                學習真的太TM有意思了
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div>
    <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i>
    <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <h2>練習題：</h2>
      <ol id="o1">
        <li>找到本頁面中id是<code>j1</code>的標籤</li>
        <li>找到本頁面中全部的<code>h2</code>標籤</li>
        <li>找到本頁面中全部的<code>input</code>標籤</li>
        <li>找到本頁面全部樣式類中有<code>c1</code>的標籤</li>
        <li>找到本頁面全部樣式類中有<code>btn-default</code>的標籤</li>
        <li>找到本頁面全部樣式類中有<code>c1</code>的標籤和全部<code>h2</code>標籤</li>
        <li>找到本頁面全部樣式類中有<code>c1</code>的標籤和id是<code>p3</code>的標籤</li>
        <li>找到本頁面全部樣式類中有<code>c1</code>的標籤和全部樣式類中有<code>btn</code>的標籤</li>
        <p id="p2" class="divider"></p>
        <li>找到本頁面中<code>form</code>標籤中的全部<code>input</code>標籤</li>
        <li>找到本頁面中被包裹在<code>label</code>標籤內的<code>input</code>標籤</li>
        <li>找到本頁面中緊挨在<code>label</code>標籤後面的<code>input</code>標籤</li>
        <li>找到本頁面中id爲<code>p2</code>的標籤後面全部和它同級的<code>li</code>標籤</li>
        <p id="p3" class="divider"></p>
        <li>找到id值爲<code>f1</code>的標籤內部的第一個input標籤</li>
        <li>找到id值爲<code>my-checkbox</code>的標籤內部最後一個input標籤</li>
        <li>找到id值爲<code>my-checkbox</code>的標籤內部沒有被選中的那個input標籤</li>
        <li>找到全部含有<code>input</code>標籤的<code>label</code>標籤</li>
      </ol>
    </div>
  </div>
</div>

<div class="my-dark my-padding">
  <div class="container">
    <div class="col-sm-8 my-center">
      <p>寫不多的代碼，作不少的事。</p>
      <h4>因此說</h4>
      <p>學好jQuery真的很重要，學好jQuery真的很重要，學好jQuery真的很重要。</p>
    </div>
  </div>
</div>

<div class="footer">
  <div class="row">
    <div class="col-md-12 text-center">
      <span class="my-white">&copy;2018 沙河前端小王子</span>
    </div>
  </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

View Code

4.9.3 選擇器篩選器答案

1. $("#j1")

 2. $("h2")

 3. $("input")

 4. $(".c1")

 5. $(".btn-default")

 6. $(".c1, h2")

 7. $(".c1, #p3")

 8. $(".c1, .btn")

 

 9. $("form input")

10. $("label>input")

11. $("label+input")

12. $("#p2~li")

 

13. $("#f1 input:first") 或者 $("#f1 input").first()

14. $("#my-checkbox input:last") 或者 $("#my-checkbox input").last()

15. $("#my-checkbox input:not(':checked')")

16. $("label:has(input)")