js的經常使用操做

時間 2019-12-06

原文原文鏈接

1. javascript基礎

javascript 在網頁中佔據很重要的地位
解釋型語言。與網頁交互的語言
Node.js
html描述的網頁結構、css描述網頁樣式、js網頁交互
ECMA4.1(瀏覽器上最多) ECMASript5.0

1. js的引入方式

1.1 行內

console.log(a)至關於print

//鼠標點擊後執行
<p id="" class="" onclick="console.log(2)">onclick</p>

1.2 內嵌

能夠寫在html中的任意位置
// 單行註釋，/**/ 多行註釋

<script type='text/javascript'></script>

1.3 外接

<script type='text/javascript' src='js文件路徑'></script>

2. js語法(分號結束)

變量名是由數字、字母、下劃線和$組成

2.1 global 對象

window

console.log('hello world');  //window.log+tab,window是全局對象
alert('hello world');
var weather = prompt(message:'請輸入今每天氣');

2.2 基本數據類型(5)

基本數據類型：棧存儲
- number、字符串、boolean、undefined、 null

var a = 2;             //num
var b = '2' + a;             // string
var c = true;                    // boolean
console.log(typeof(a));
var e;                  //先聲明後定義
console.log(e);         //值和類型都是undifined

var f = null;
console.log(f)                  // 類型是undefiend，數值爲null
console.log(typeof(f))  //空對象

若是s中有其餘字符，則會報錯NaN

// str轉num
var s = '123';
new_s = Number(s);

數字轉換爲字符串

var num = 123;
new_s = num.toString();

2.3 引用數據類型(3)

heap存儲，複雜數據類型
把變量置爲None即銷燬
全局做用域、函數做用域

Array

//Array
var arr = ['henry' 'echo' 'dean'];
// 修改元素
arr[2] = 'diane';
arr.length;

Object類型

//Object，定義在對象中的函數，即對象的方法
var obj = {name:'echo', age:19,
          fav:function(){
            console.log(this)
          }};
obj.fav()

函數類型

定義函數方式1

//function,定義在對象中的函數即對象的方法,{}表示做用域，也是對象
function add(形參1, 形參2){
  var c = 2；
  return a+b;
};

console.log(add{2, 5});

函數表達式

var add = function() {
};

自執行函數

(function(){})();

2.4 數字和運算符

++a 和 a++

//遞增、遞減
var a = 1;
a += 1;
a++;
console.log(a)；
// a++ 的迷惑
var a = 4;
//先賦值後++
var c = a++;
console.log(c);
console.log(a);
// ++a 的迷惑
var a = 4;
//先++後賦值
var c = ++a;
console.log(c);
console.log(a);

2.5 str拼接

var name = 'henry', age = 19;
var str = name  + '今年是' + age + '歲';
//es6的模版string,必須是反引號
var str = `${name}今年${age}歲`;

2.6 array

解釋器遇到var聲明的變量，會把var聲明的變量提高到全局變量做用域下，js文件最上方
函數名也會有此現象，函數中的變量沒有

數組的建立

var arr = [1, 2, 'henry'];
// 索引取值
arr[0];
// 遍歷
// 預解釋，變量提高
// var c=2; 
for (var i = 0; i < arr.length; i++){
        console.log(arr[i]);
}

多維數組

數組中包含數組的話稱之爲多維數組。(數組的嵌套)
能夠經過將兩組方括號連接在一塊兒來訪問數組中的另外一個數組。

arr[2][2];           //取到第二行，第二列

2.7 流程控制

與或非

&&;
||;
!;

If…else

var score = 70;
if (score > 80){
    console.log('play');
}else if(score > 60){
    console.log('stay at home');
}else{
    console.log('study');
};

switch

var weather = prompt('weather');
switch(weather){
  case 'nice':
    console.log('nice');
    break;
  case 'rain':
    console.log('rain');
    break;   
  default:
    console.log('bye')
    break;
}

== 和 ===

== 比較的是值，與數據類型無關 2 == '2' 爲true
=== 比較的是值和數據類型(即內存地址) 2 === '2' 爲false

// true
var a = 1 == '1';
// false
var a = 1 == 2;
var a = 1 == '1';

循環
- 初始化循環變量、循環條件、更新循環變量

// for循環
arr = [8, 9, 0]
for (var i = 0; i < arr.length; i++){
  
}
// while循環
var a = 1;
while (a < 100){
  console.log(a);
  a++;
}
// do...while
do{
  
}while(a < 100);

2.8 函數

在Javascript中另外一個基本概念是函數，它容許你在一個代碼塊中存儲一段用於處理一個任務的代碼，而後在須要的時候用一個簡短的命令來調用
一個函數定義(也稱爲函數聲明，或函數語句)由一些列的function關鍵字組成。

// function也會有變量提高現象
function fun(){
  console.log(arguments);
  switch(arguments.length){
    case 2:
      console.log(2);
        break;
    case 3:
      console.log(3);
      break;
    default:break;
  }
}
fun(1, 2);
fun(3, 4, 5);

構造函數new

new Object();
new Array();
new String();
new Number();

3. js經常使用對象

3.1 object

字面量建立方式

var Person = {
    name:'henry',
    age:19,
    fav:function(){
    console.log(this);
  }
};

Person.fav();
console.log(Person.name);
console.log(Person.age);

點語法,set&get

函數中的this不必定是widow
對象和綁定事件中的this指向當前obj
全局this指向window
一切皆對象

var obj = {};
obj.name = 'henry';
console.log(obj.name)
obj.fav = function(){
  console.log(this);            // this 指向obj對象
};
obj.fav();
console.log(this);              // this window

es6用class來建立對象

var obj = {name:'echo'};
var name = 'henry';
function add(x, y){
  this.x = x;
  this.y = y;
  console.log(this.name);
  console.log(this);
  console.log(x);
  console.log(y);
};

add();                           // 不能夠改變this指向
add.call(obj, 1, 2);             // 能夠改變this指向
add.apply(null, [1, 2]);         // 能夠改變this指向
console.dir(add);

構造函數建立對象

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

3.2 Array

new關鍵字實例化對象
構造函數

字面量和構造函數

var obj = new Array();
console.log(obj);

var = arr['red', 'yellow', 'green'];

檢測數組

// if 內只有一行代碼是能夠省略大括號
if (Array.isArray(arr))
  console.log('true');

3.3 Array(10)

join

var arr = ['red', 'green']
Array.isArray(arr);               // 判斷arr是不是數組，返回true則是
arr.toString();                   // 把數組中內容取出，用逗號拼接

num = 123;
num.toString();                   // 數字轉字符串
arr.join('||');                   // 以||拼接

棧方法

push()
pop()
var val = arr.pop();              // 返回刪除的內容
console.log(val);                                   // val是pop的返回值
console.log(arr);

console.log(arr.push('xixixi'));; // 返回值爲res，最新數組長度
console.log(arr);

unshift方法

shift()
unshift()
var val = arr.unshift('heiheihei', 'hahaha');// 往數組的前面填充內容
console.log(arr);
console.log(val);                            // 返回數組最新長度    
console.log(arr.shift());                    // 刪除第一個

splice

var names = ['henry', 'echo', 'dean'];
var val = names.splice(1, 0, 'diane');          // 在索引1位置添加
console.log(names);
console.log(val);
names.splice(1, 1);                            // 從索引1位置刪除1個值
names.splice(1, 1, 'xixixi');                  // 從索引1位置替換1個

reverse

var num = [5, 2, 3];
num.reverse();

sort

// 會轉換成字符串進行比較
a = [2,1,13,4,56,6, 'henry'];
console.log(a.sort());                       // [1, 13, 2, 4, 56, 6, "henry"]

concat

// 數組拼接,並不改變原來值
var new_num = num.concat(1, 2, 3);

slice

// 不會更改初始值
num = [1,2,3,4,5,4,3,2,1]
num.slice(5)                          // 索引5以後的全部值
num.slice(5,7)                        // 索引5-7 不包擴7
num.slice(-3,-1)                      // 倒數第三個到倒數第一個
num.slice(-3,-4)                      // 取不到值

位置方法indexOf(0)

返回索引
查不到返回-1
lastIndexof();

num = [1,2,3,4,5,4,3,2,1]
var a = num.indexOf(4);               // 3
var a = num.lastIndexOf(4);           // 5

迭代方法

every
some
filter
map
forEach

// 回調函數
arr.forEach(function(item, index){
  console.log(index);
  console.log(item);
  });

function fn(){
  console.log(arguments);                 // arguments不是數組，僞數組
  for (var i = 0; i < arguments.length; i++){
    console.log(arguments[i]);
  }
}

fn(2,3,4);
fn.length;                                                              // 形參個數

3.4 string方法(11)

length

s = 'henry';
console.log(s.length);

charAt(2);

console.log(s.charAt(2));

charCodeAt(2); 字符編碼

console.log(s.charCodeAt(2));

concat(),繼承

console.log(s.concat('&echo'));

slice(3, 7）
- 索引3-7

s = 'henry&echo';
s.slice(3,7);

substring(3, 7)
- 索引3-7

s = 'henry&echo';
s.substring(3,7);

substr(3, 7)
- 取7個

s = 'henry&echo';
s.substr(3,7);

indexof

s = 'henry&echo';
s.indexof('o');                   // 數據類型要一致

lastIndexof

s = 'henry&echo';
s.lastIndexOf('o');                   // 數據類型要一致

trim

s = '   he nry    ';
s.trim();
s.trimLeft();
s.trimRight();
s.trimEnd();

toLowerCase(), toUpperCase()

s = 'henry';
s.toLowerCase();
s.toUpperCase();

3.5 date內置對像

建立日期對象

var time = new Date();

getDate(): 1-31

time.getDate();                           // 返回日期對象的第幾天

getMonth()

time.getMonth();                           // 返回月份，須要 + 1

getFullYear()

time.getFullYear();

getDay():星期幾的第幾天，星期天是0
- document.write(getDay());

time.getDay();

getHours():0-23

time.getHours();

getMinutes():0-59

time.getMinutes();

getSeconds():0-59

time.getSeconds();

格式化方法 tolocalString

1.time.toString();
// Sun Jun 09 2019 17:13:35 GMT+0800 (CST)
2.time.toLocaleString(); 
//6/9/2019, 5:13:35 PM
3.time.toDateString();
// "Sun Jun 09 2019"
4.time.toLocaleDateString();
// "6/9/2019"
5.time.toTimeString()
// "17:27:04 GMT+0800 (CST)"
6.time.toLocaleTimeString()
// "5:27:04 PM"
7.time.toGMTString(); 
// "Sun, 09 Jun 2019 09:27:04 GMT"

時間綜合示例

var time = new Date();
console.log(time);
console.log(time.getDate());
console.log(time.getFullYear());
console.log(time.getMonth()+1);
console.log(time.getDay());
console.log(time.getHours());
console.log(time.getMinutes());
console.log(time.getSeconds());

console.log(time.toLocaleString());                 //2019/6/3 下午11:50:36
var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log(weeks[date.getDay()]);
var day = weeks[date.getDay()];
document.write(`<a href="#">${day}</a>`)

var a =  1 < 2 ? "yes": "no";
console.log(a);

3.6 三元運算

var a = 1 > 2 ? 'yes': 'no';

3.7 定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2 id="time"></h2>
<script>
    var timeObj = document.getElementById('time');
    console.log(time);

    function getNowTime() {
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var temp = "" + ((hour > 12) ? hour - 12 : hour);
        if (hour == 0) {
            temp = "12";
        }
        temp += ((minute < 10) ? ":0" : ":") + minute;
        temp += ((second < 10) ? ":0" : ":") + second;
        temp += (hour >= 12) ? " P.M." : " A.M.";
        timeObj.innerText = temp;
    }

    setInterval(getNowTime, 20);
</script>

</body>
</html>

3.8 字符串和數值轉換(6)

parseInt('123.123');

var s = '123';
parseInt(s);                     // 若是s中包含非數字，則只保留其數字部分，第一個字符爲非數字則會報NaN

parseFloat('123.123');

var s = '123.123';
parseFloat(s);

Var c = 6/0; infinity

var c = 6/0;                     // 會出現infinity

Number('123ad')

Number('123d');                  // NaN: not a number
Number('123');

String(123);

String(123);

toString(123);

var a = 2;
a = a + '';
// 或者
a.toString();

3.9 Math

Math.E
Math.LN10
min(), max()

arr = [1,2,3,4,5]
var max = Math.max.apply(null, arr);

Math.ceil(), Math.floor(), Math.round():四捨五入

var num = 25.7;
var num2 = 25.2;
alert(Math.ceil(num));           //26
alert(Math.floor(num));          //25
alert(Math.round(num));          //26
alert(Math.round(num2));         //25

random :（0-1）
- 產生min-max之間的隨機數

function random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
}

3.10 Global對象

不屬於任何其餘對象的屬性和方法，最終都是window的屬性和方法
isNaN()、isFinite()、parseInt()以及 parseFloat()，實際上全都是 Global 對象的方法。
Global 對象還包含其餘一些方法。
window.say

encodeURI(Componet)

通常來講，咱們使用 encodeURIComponent()方法的時候要比使用 encodeURI()更多，由於在實踐中更常見的是對查詢字符串參數而不是對基礎 URI 進行編碼。

var url = 'https://www.bai du.com';
var a1 = encodeURI(url);
var a2 = encodeURIComponent(url);
console.log(a1);
console.log(a2);
console.log(decodeURI(a1));
console.log(decodeURIComponent(a2))
// 使用 encodeURI()編碼後的結果是除了空格以外的其餘字符都原封不動，只有空格被替換成了 %20。
// 而 encodeURIComponent()方法則會使用對應的編碼替換全部非字母數字字符

3.11 window

var color = "red";
function sayColor(){
    alert(window.color);
}
window.sayColor();                  // red

3.12 示例

獲取隨機顏色

// 獲取0-256之間的隨機數
function random(min, max){
    return min + Math.floor(Math.random() * max);
}
function randomColor(){
    var r = random(0, 256),
        g = random(0, 256),
        b = random(0, 256);
    return `rag(${r},${g},${b} )`;
}
var color = randomColor();
console.log(color);

隨機驗證碼

function creationCode(){
    var code = '';
    var code_l = 4;
    var s_code = Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
  for (var i = 0; i < code_l; i++){
    s = s_code[random(0,37)]
    code += s;
  }
  return code;  
}
var code = creationCode();
console.log(code);

2. BOM&DOM

1. BOM

browser object model
系統對話框
頂層對象是window(核心對象)

1.1 alert()

var a = window.alert('肯定離開了')；

1.2 confirm()

// 有返回值，肯定爲true或取消爲false
var a = window.confirm('肯定刪除？')；

1.3 prompt()

var a = window.promopt('今每天氣怎麼樣？')

1.4 定時方法(重點)

一次性任務

setTimeout()

// 延時2秒,異步、非阻塞
var i = 0;
timer = setTimeout(function(){
  console.log('hello world');
}, 2000);
// 清除定時器
clearTimeout(timer);
timer = setTimeout(function(){
  console.log('test your speed');
}, 2000);
console.log('看看阻不阻塞')

週期性循環

垃圾回收機制，這裏回收不了
網頁動畫

var i = 0;
timer = setInterval(function(){
  i++;
  console.log(i);
  if (i === 10){
    // 清除定時器
    clearInterval(timer);
  }
}, 1000);

1.5 Location對象

window中的屬性
瀏覽器自帶緩存和記錄功能
hash模式：帶#
histroy模式：不帶#

console.log(window.location);
console.log(window.location.host);
console.log(window.location.hostname);
console.log(window.location.herf);
console.log(window.location.origin);
console.log(window.location.port);
// console.log(window.location.reload());
reload: f reload();                                    // 方法
location.reload();

ajax在不重載頁面的狀況下，對網頁就進行操做

// 刷新
setInterval(function(){
  // 通常用於測試
  // ajax用於局部刷新
  locatoin.reload();
}, 2000);

2. DOM

document object model
對象：用戶自定義對象、內建對象(native object)、宿主對象(window)(瀏覽器提供)
node節點。元素節點（p, a, div...）
節點對象(元素節點(屬性節點)(文本節點) (註釋節點))
document.body document.documentElement

2.1 獲取元素節點(3)

window.document

經過id獲取單個節點對象

var box = document.getElementById('box');
console.log(box);
console.dir(box);                                 // 查看box全部屬性和方法

經過標籤獲取節點對象

結果爲僞數組

var box = document.getElementsByTagName('div');
// 使用拍它思想，操做標籤，點擊任意一個改變樣式，即改變類名
var li = document.getElementsByTagName('li');
            for (var i = 0; i < li.length; i++){
                // console.log(li[i]);
                // 這裏的this指向當前對象
                this.onclick = function(){
                    for (var j = 0; j < li.length; j++){
                        this.className = '';
                    }
                    this.className='active-li';
                };

經過類名獲取

var lis = document.getElementsByClassName('active');
// 經過id獲取時，
var box = document.getElementById('box');
console.log(box.children);

事件

onclick()
onmouseover()
onmouseout()

2.2 文檔、body、html

// 當前文檔啊
console.log(document);
// html中的body
console.log(document.body);
// html
console.log(document.documentElement);

2.3 樣式操做

// 屬性所有使用駝峯式
box.style.color
box.style.backgroudColor

或者經過類名，利用索引找到具體某一個元素

var box = window.document.getElementById('box');
console.log(box);
// 綁定事件
box.onmouseover = function(){
  this.style.backgroundColor = 'red';
}
box.onmouseout = function(){
  this.style.backgroundColor = 'yellowgreen';
}

flag標誌

var isRed = true;
// 綁定事件
box.onclick = function(){
  if (isRed){
    this.style.backgroundColor = 'yellow';
    isRed = false;
  }else{
    this.style.backgroundColor = 'red';
    isRed = true;
  }
}
// 設置週期定時， 此時不能用this，由於this指向window
setInterval (function(){
  if (isRed){
    box.style.backgroundColor = 'yellow';
    isRed = false;
  }else{
    box.style.backgroundColor = 'red';
    isRed = true;}
},1000);

2.4 屬性設置(2)

追加類

var p = window.document.getElementById('p1');
console.dir(p);
p.className += ' b';
// 會覆蓋以前的類
p.className = 'b';

設置屬性方法

setAttribute(name, value);
getAttribute(name);
var p = document.getElementById('p1');
p.setAttribute('class', 'active');
// 自定義屬性設置，只能在節點對象上
p.setAttribute('self', 'active'); 
// 不會顯示到頁面中的elements中
p.self = '123';    
p.class;
p.title;

示例

var p = window.document.getElementById('p1');
console.dir(p);
// p.className += ' b';
// p.className = 'b';
p.self = '123';         
// p.setAttribute('self', 'active'); 
isTrue = true;
p.onmouseover = function(){
  if (isTrue){
    this.className += ' b';
    isTrue = false;
  }else{
    this.className = 'a';
    isTrue = true;
  }
}

2.5 節點操做

var ul = document.getElementById('box');
// 建立節點
var li1 = document.createElement('li');
var li2 = document.createElement('li');
// 只設置文本
li1.innerText = '123';
// 設置li中的html內容
li1.innerHTML = '<a herf = ''>123</a>';
// 設置類名
l1i.setAttribute('class', 'active');
// 設置樣式
li1.children[0].style.color = 'red';
li1.children[0].style.fontSize = 20px;
// 追加節點
ul.appendChild(li1);
// 在li1前插入li2
ul.insertBefore(li2, li1);
// 刪除節點
ul.removeChild(li1);

示例

var box = document.getElementById('box');
// 建立節點對象
var li1 = document.createElement('li');
var li2 = document.createElement('li');
// 設置節點內容和屬性（2中設置內容方式）
li1.innerText = '123';
li1.innerHTML = "<a href=''>456</a>";
li1.setAttribute('class', 'active')
// 添加節點到父節點
box.appendChild(li1);
box.insertBefore(li2, li1);
// 刪除孩子節點li1
box.removeChild(li1);

2.6 遍歷操做節點

var data = [
  {id:1, name:'henry', age:19},
  {id:2, name:'echo', age:18},
  {id:3, name:'dean', age:28},
  {id:4, name:'oleg', age:26},
  {id:5, name:'diane', age:27}
]
for (var i = 0; i < data.length; i++){
  console.log(data[i].name);
  var li = document.createElement('li');
  li.innerHTML = `<p>${data[i].id}</p> <p>${data[i].name}</p><p>${data[i].age}</p>`;
  box.appendChild(li)
}

2.7 示例

var box = document.getElementById('imgBox');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
num = 1;
next.onclick = function(){
  nextImg();
}
function nextImg(){
  if (num===4){
    num  = 1;
  }
  imgBox.src = `images/${num}.jpg`;
  num++;
}s
setInterval(function(){
  nextImg();
}, 1000);

3. 節點屬性

在文檔對象模型(DOM)中，每個節點都是一個對象。DOM節點有三個重要的屬性：

nodeName: 節點的名稱
nodeValue：節點的值
nodeType: 節點的類型

3.1 nodeName屬性

節點的名稱，是隻讀

元素節點的nodeName與標籤名相同
屬性節點的nodeName與屬性的名稱相同
文本節點的nodeName永遠是#text
文檔節點的nodeName永遠是#document

3.2 nodeValue屬性

節點的值

元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本自身
屬性節點的 nodeValue 是屬性的值

3.3 nodeType 屬性

節點的類型，是隻讀的。

如下經常使用的幾種結點類型:javascript

元素類型	節點類型
元素	1
屬性	2
文本	3
註釋	8
文檔	9

attributes屬性是獲取到該節點對象上的全部屬性的集合
childNodes屬性是獲取到該節點對象的全部子節點的集合

3.4 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節點屬性</title>
</head>
<body>
    <div id="box">我是一個文本節點<!-- 我是註釋 --></div>
    <script type="text/javascript">
        // 1.獲取元素節點
        var divNode = document.getElementById('box');
        console.log(divNode.nodeName + '|' + divNode.nodeValue + "/" + divNode.nodeType);
        // 2.獲取屬性節點
        var attrNode = divNode.attributes[0];
        console.log(attrNode.nodeName + '|' + attrNode.nodeValue + "/" + attrNode.nodeType);
        // 3.獲取文本節點
        var textNode = divNode.childNodes[0];
        console.log(textNode.nodeName + '|' + textNode.nodeValue + "/" + textNode.nodeType);
        // 4.獲取註釋節點
        var commentNode = divNode.childNodes[1];
        console.log(commentNode.nodeName + '|' + commentNode.nodeValue + "/" + commentNode.nodeType);
        // 5.文檔節點
        console.log(document.nodeName + '|' + document.nodeValue + "/" + document.nodeType);
    </script>
</body>
</html>

onchange
onselect
onsubmit
onload
onfocus
onblur

3. jquery

1. jQuery

bootstrap(twitter)
bootCDN(前端，在線外接資源)
vue：沒有html結構（ssr、nuxt）

1.1 簡介

html文檔遍歷和操做、事件處理、動畫和Ajax
- 操做：獲取節點元素、屬性、樣式、類名、節點對象建立刪除添加和替換
基於面向對象、封裝大量方法到對象(長度屬性)
js包含jQery(write less，do more)

1.2 jquery的使用

jquery.js(開發) / jquery.min.js(生產)
- 生產環境會對代碼優化
- jquery.min.js代碼文件大小會進行壓縮
- 嚴格模式和非嚴格模式(this指向問題)

// 非嚴格模式
function fn(){
  // this是window
  console.log(this);
}
// 嚴格模式
function fn(){
  'use strict';
  // this是undifinded
  console.log(this);
}

基礎選擇器

id、類、標籤

console.dir($);                           // jquery包含大量方法的對象
console.log($('#box'));                   // jquery對象，僞數組
console.log($('#box')[0]);                // jquery對象轉節點對像
var box = document.getElementById('box'); // js對象
$(box)；                                  // js轉jq對象

高級選擇器
- 子代、後代、組合、交集
- 沒有值表明沒有獲取到

console.log($('.box>p'))                  // 子代選擇器，jquery對象
console.log($('.box>p')[1])
// 組合選擇器
$('box,active')
// 交集選擇器
$('div.active')
// js對象
console.log($('input[type=text]'));       // 屬性選擇器

綁定事件
- 樣式操做是css方法
- $('#box.active').click(function(){})
- 綁定事件中的this指向當前的對象

$('#box.active').click(function(){
  // this指向當前js節點對象
  console.log(this);
  // 樣式操做
  this.style....
  // js轉換爲jq，操做樣式,不會覆蓋
  $(this).css('color', 'red');
  $(this).css('font-size'(或使用駝峯), '20px');
    // 或使用對象傳值，遍歷對象進行賦值
  $(this).css({'color':'red', 'font-size':40});
    console.log($(this).css('color'));
});

樣式修改之css()
- css('color')：是獲取屬性
- css({'color':'red', …}):設置屬性

// 單獨設置樣式。不一樣種類的樣式不會覆蓋
$(this).css('font-size', '40px');
$(this).css('color','lightblue');
// 共同設置樣式
$(this).css({
  'font-size':'40px',
  'color':'red',
})
// 獲取屬性值
console.log($(this).css('color'));\

過濾選擇器

// eq,gt,lt，odd，even，first，last
console.log($('ul li')[1];                        // js對象
console.log($('ul li:eq(1)'));                    // jq對象
console.log($('ul li:gt(1)'));                    // 。。。
console.log($('ul li:lt(1)'));                    // 。。。
console.log($('ul li:odd'));                      // 。。。
console.log($('ul li:even'));                     // 。。。
console.log($('ul li:first'));                    // 。。。
console.log($('ul li:last'));                     // 。。。

篩選選擇器

find、children、parent
獲取索引方法：$(選擇器).index()

// 選中後代全部的span/a .find()
console.log($('ul').find('span'));
console.log($('ul').find('a'));
// 選中子代中的元素
console.log($('ul').children());
// parent(), document-html-body-...
console.log($('span').parent());
// 
console.log($('ul li').eq(1));
// siblings(),實現選項卡，排他性
console.log($('li').addClass('active').siblings('button').removeClass('active'));
// 當前點擊元素索引
var index = $(this).index();
$('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active')

鏈式編程

console.log($('span').parent().parent().parent().parent().parent());

選項卡

let能夠把this限制在局部做用域中

// 選項卡方法一
for (var i = 0; i < btns.length; i++){
  btns[i].index = i;
  btns[i].onclick = function(){
    for (var j = 0; j < btns.length; j++){
      // console.log(this);
      btns[j].className = '';
      p[j].className = '';
    }
    this.className = 'active';
    p[this.index].className = 'active';
  } 
}
// 選項卡方法二
for (let i = 0; i < btns.length; i++){
  btns[i].onclick = function(){
    for (var j = 0; j < btns.length; j++){
      btns[j].className = '';
      p[j].className = '';
    }
    this.className = 'active';
    p[i].className = 'active';
  }
}

jq實現選項卡

addClass('類1 類2...')
removeClass('類1 類2...')
toggoleClass('類')：開關式切換類名

<!DOCTYPE html>
<html>
        <head>
        <meta charset="utf-8">
        <title>jq實現選項卡</title>
        <style type="text/css">
            button.active{
              color: red;
            }
            p{
              display: none;
            }
            p.active{
              display: block;
            }
                </style>
        </head>
<body>
    <button class="active">熱門</button>
    <button>電腦影音</button>
    <button>電腦</button>
    <button>家電</button>
    <p class="active">熱門</p>
    <p>電腦影音</p>
    <p>電腦</p>
    <p>家電</p>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        console.log($('button'));
        $('button').click(function(){
            // 處理點擊的選項卡
            console.log($(this));
            $(this).addClass('active').siblings('button').removeClass('active');
            // 獲取當前對象的索引
            console.log(($(this).index()));
            $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
    });
    </script>

    </body>
</html>

2. 動畫

2.0 操做值的方法

$('#btn').text('顯示')：修改btn的text內容爲顯示
- 沒有參數則是得到
$('#btn').html(
hellocss
)
- html()：既得到標籤，又得到文本
$('#btn').val()
- 只針對於表單控件

2.1 show/hide(毫秒,回調)

左上角，改變寬高

$('#button').click(function(){
  // $('#box').show(2000);
  if($(this).text() === '顯示'){
    
    $('#box').show(2000 function(){
      $('#button').text() === '隱藏');
    });
  })else{
    $(this).text() === '顯示');
    $('#box').hide(2000);
  }

2.2 slideDown/Up(毫秒,回調)

捲簾門，只改變盒子的高度

// 在開啓定時器時，須要先中止以前的定時器
$('#box').stop().toggle(2000);
$('#box').slideDown(2000);
$('#box').slideUp(2000);

2.3 fadeIn/Out(毫秒,回調)

淡入淡出，快速顯示，經過透明度控制
opacity:0-1 透明(0)

$('#box').fadeIn(2000);
$('#box').fadeOut(2000);
// 動畫不支持背景色，須要插件支持
$('#box').animater([params], speed, callback);

2.4 toggle(毫秒,回調)

動畫開關
slideToggole()

$('#box').toggle(2000, function(){});

2.5 自定義動畫

animate({樣式屬性},毫秒,callback())
display中的block和none的切換

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500,
                    "height": 500, 
                    "left": 300, 
                    "top": 300, 
                    "border-radius": 100};
                    
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>

4. jquery之ajax

1. 屬性操做

1.1 attri/removeAttr

setAttribute/get...
只能獲取標籤上的屬性

// 文檔加載jq中
$(document).ready(function(){$('p')});
// 文檔加載完成後，調用回調函數，無覆蓋現象
jQuery(function(){});
$(function(){
  $('p').attr('title', 'henry');
  $('p').attr({'title':'henry',
              'color':'red'});
  // 得到屬性,須要一個屬性名
  $('p').attr('title');
  // 移除(一個或多個)
  $('p').removeAttr('title id a');
})；

// js中使用,js中的事件有覆蓋現象
window.onload = function(){
  console.log(222);
};
window.onload = function(){
  console.log(111);
}

1.2 prop/removeProp

只能在對象內部能夠看到（console中）
用於input
獲取當前對象的屬性

$(function(){
  $('input[type=radio]').eq(0).prop('checked');
$('input[type=radio]').eq(0).prop('type');
// 只能操做標籤上的屬性
$('input[type=radio]').eq(0).attr('a'， 1);
// 能夠操做對象內部的屬性
$('input[type=radio]').eq(0).prop('type');  
});

1.3 h5

jq22.com

<h2>視頻</h2>
<video width="" height="" controls="controls">
  <source src="知乎.mp4" type="video/mp4"></source>
</video>
// controls表示播放按鈕
<h2>音頻</h2>
<audio src="海賊王%20-%20ビンクスの酒(獨唱).mp3" controls="controls">音頻</audio>

2. 文檔方法

2.1 插入

append

父元素.append(子元素)；
一般誰調用返回值就是那個對象

$('#box').append('henry');
// 追加一個標籤
$('#box').append('<h2>echo</h2>');
$('#box').append(js對象);
// 若是參數是jq對象至關於移動操做
$('#box').append(jq對象);

appendTo

子元素.appendTo(父元素)；

$('<a href="">百度一下  </a>').appendTo('#box');
// 鏈式編程思想，能夠直接修改樣式
$('<a href="">百度一下  </a>').appendTo('#box').css('yellow');

prepend

前置添加
用戶最新數據的插入(博客園)

$('#box').prepend('<h2>echo</h2>');

prependTo

前置添加

$('<a href="">百度一下  </a>').prependTo('#box');

before/after

$('h2'）.before('henry');

insertBefore/After

$('<a href="">百度一下  </a>').insertBefore('h2');

2.2 替換

replace
建立一個標籤並替換

$('#box ul').replaceWith('<a href="">百度一下</a>');
// .replaceAll()和.replaceWith()功能相似，可是目標和源相反。
$('<a href="">百度一下</a>').replaceAll('#box ul');

2.3 刪除

remove
既移除標籤又移除事件

// 刪除
$('button').click(function(){
    alert(111);
    $(this).css('color', 'red');
    $('#box').append($(this).remove());
})

2.4 detach

保留事件

// 不刪除事件
$('button').click(function(){
    alert(111);
    $(this).css('color', 'red');
    $('#box').append($(this).detach());
})

2.5 清空

$('#box').empty();
$('#box').html('');

3. 事件

3.1 click()

單擊事件

3.2 dblclick()

雙擊事件
解決單雙擊的衝突問題
setTimeout

3.3 mousedown()/up()

鼠標按下/彈起觸發事件

3.4 mouseover()/out()

父元素設置，會波及到自元素
鼠標穿過父元素和子元素都會調用

$('#box').mouseover(function(){
  console.log('進來了');
})
$('#box').mouseout(function(){
  console.log('出去了');
})

// mouseover的傳播效應
$('#box').mouseover(function(){
  console.log('進來了');
  $('#child').stop().slideDown(1000);
})
$('#box').mouseout(function(){
  console.log('出去了');
  $('#child').stop().slideUp(1000);
})

3.5 mouseenter()/leave()

鼠標移入、移出事件
只對綁定元素有效
使用動畫時，先使用stop()在使用動畫

// mouseenter
$('#box').mouseenter(function(){
  console.log('進來了');
  $('#child').stop().slideDown(1000);
})
$('#box').mouseleave(function(){
  console.log('出去了');
  $('#child').stop().slideUp(1000);
})

3.6 合成事件

$('#box').hover(function(){
  
},function(){})

3.7 聚焦和失焦

// 默認加載頁面，聚焦
$('input[type=text]').focus();
// 聚焦事件
$('input[type=text]').focus(function(){
  console.log('聚焦了');
})
// 失焦事件
$('input[type=text]').blur(function(){
  console.log('失焦了');
})

3.8 鍵盤按下

e爲jQuery對像，稱爲jq事件對象
keyCode爲按鍵的code

$('input[type=text]').keydown(function(e){
  console.log(e.keyCode);
  switch (e.keyCode){
        case 8:
        $(this).val('');
            break;
        default:
        break;
  }
})

3.9 change

表單元素髮生改變

3.10 select

3.11 submit

表單提交事件，默認的表單提交會優先響應
sumit會觸發form中的action行爲
preventDefault

// 阻止默認事件方法1
<a href='javascript:void(0);'>;
<a href='javascript:;'>;
<form action='javascript:;'>;

// 阻止默認事件方法2
<script type="text/javascript">
    $('form').submit(function(e){
        e.preventDefault();
        console.log('11111');
        })
</script>

4. ajax的使用

綁定事件須要等待響應後
請求頭/體
響應頭/體
XHR
ajax實現先後端分離

4.1 ajax的使用

// ajax，只針對與當前頁面的局部進行刷新
var name = $('input[type=text]').val();
var pwd = $('input[type=password]').val();
$.ajax({
  url:'',
  method:'post';
  data:{
    a:name,
    b:pwd
    },
  success:function(res){
    // {data:200}
    if (res.data==200){
      setTimeout(function(){
        windown.open('網址', '_self')
      },3000)
    }
    }
});

4.2 ajax實例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
        </div>
        
        <script type="text/javascript">
            $(function(){
                $.ajax({
                    url:'https://api.apeland.cn/api/banner/',
                    methods:'get',
                    success:function(res){
                        console.log(res);
            // 根據響應中的data，判斷響應是否成功，以及就數據進行操做
                        if (res.code === 0 ){
                            var name = res.data[0].name;
                            var cover = res.data[0].cover;
                            $('#box').append(`<img src=${cover} alt=${name}>`);
                        }
                    },
          // 出現錯誤時的操做
                    err:function(err){
                        console.log(err);
                    },
                    
                })
            })
        </script>
        
    </body>
</html>

ajax練習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ajax練習</title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <ul  type='none'></ul>
        </div>
        <div id="content">
            <ul></ul>
        </div1>
    
        <script type="text/javascript">
            // 獲取導航頭
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    console.log(res);
                    $(`<li style='font-weight:bold')>所有<\/li>`).appendTo('#box ul').attr('id', 0);
                    if (res.error_no===0){
                        res.data.forEach(function(item,index){
                            $(`<li type='none' style='font-weight:bold')>${item.name}<\/li>`).appendTo('#box ul').attr('id', item.id);
                            
                        })
                    }
                }
            })
            
            // 獲取課程
            var sub_category = 0;
            function get_course_list(sub_category){
                $.ajax({
                    url:`https:\/\/www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                    method:'get',
                    success:function(res){
                        $('#content ul').empty();
                        if (res.error_no===0){
                            res.data.forEach(function(item, index){
                                $(`<li>${item.name}<\/li>`).appendTo('#content ul').attr('id', item.id);    
                            })
                        }
                    }
                })
            }
            get_course_list(sub_category);
            // jq中的事件委託
            $('#box ul').on('click', 'li', function(){
                var sub_category = $(this).attr('id');
                get_course_list(sub_category);
            });
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。