JavaScript

一.数据类型

1. 快速入门

1. 1引入JavaScript

• 是一种弱类脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

1.1.1内部标签

<script>
	//......
</script>>

1.1.2外部引入

abs.js

//....

test.html

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

1.2基本语法

• javaScript严格分区大小写
• 定义变量格式：
  var 变量名 = 变量值;
• 条件控制语法和java一样

2.严格检查格式

• 在浏览器的控制台console打印变量：
  console.log(变量名)、严格检查模式：‘use strict’
  前提：编译器需要设置支持ES6语法
  作用：避免不严谨的操作定义带来的问题
  注意：
  1）必须写在JavaScript的第一行
  2）局部变量建议都使用 let 去定义

3.数据类型

3.1number

js不区分小数和整数，Number

3.1.1 “==”

• =
• == 等于（类型不一样，值一样，也会判断为true）
• === 绝对等于（类型一样，值一样，结果true)
• js的缺陷，坚持不要使用==比较
• NaN===NaN，这个与所有的数值都不相等，包括自己
• 只能通过isNaN(NaN)来判断这个数是否是NaN

3.1.2浮点数问题

console.log((1/3) === (1—2/3）)

尽量避免使用浮点数进行计算，存在精度问题

3.1.3null和undefined

• null 空
• undefined 未定义

3.1.4数组

Java的数值必须是相同类型的对象，JS中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true]

new Array(1,12,3,4,5,'hello')

3.1.5对象

对象是大括号，数组是中括号
每个属性之间逗号隔开

3.2字符串

• 正常字符串需要使用单引号或双引号括起来
• 转义字符
  \n:换行
  \t:制表
  \b:空格
  \r:回车
  \:斜杠
  \':单引号
  \":双引号

3.2.1多行字符串编写

  <script>
    'use strict';
    //使用反引号（即tab键上面的按键，需要大写）来多行字符串
    let str = `你好
世界
hello
world`;
    console.log(str);
  </script>

3.2.2模板字符串

在反引号里面使用，使用el表达式，${变量名}

  <script>
    'use strict';
    let name = 'Yu';
    let age = 3;
    let msg = `你好呀，${name},`;
    console.log(msg);
  </script>

3.2.3字符串的不可变性

• 字符串一旦被创建，就不能根据arr[下标]的方式改变字符串。如果想改变字符串的值，需要把字符串整体重新赋值。

3.2.4大小写转换

//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

3.2.5indexOf(‘a’)方法

• 通过indexOf(‘a’)方法，来获取字符a在字符串中的下标

3.2.6字符串的截取

  <script>
    'use strict';
    let str = 'hello world';
    //substring(i):从i下标截取到最后一个字符串
    let sub1 = str.substring(4);
    //substring(a,b):从a下标截取到b下标，包前不包后
    let sub2 = str.substring(1,3);
    console.log(sub1);
    console.log(sub2);
  </script>

4.数组

4.1长度

arr.length

• 注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

4.2indexOf 通过元素获得下标索引

arr.indexof(2)
1

字符串的“1”和数字1不同

4.3slice（）

• 截取Array的一部分，返回一个新数组，类似于String中的substring

4.4push(),pop()尾部

push ：压入到尾部
pop：弹出尾部的一个元素

4.5unshift(),shift()头部

 unshift：压入到头部
shift：弹出头部的一个元素

4.6排序sort（）

["B","C","A"]
arr.sort()
["A","B","C"]

4.7元素反转reverse（）

["A","B","C"]
arr.reverse
["C","B","A"]

4.8concat()

["C","B","A"]
arr.concat([1,2,3])
["C","B","A",1,2,3]
arr
["C","B","A"]

• 注意：concat()并没有修改数组，只是会返回一个新数组

4.9连接符join

打印拼接数组，使用特定的字符串连接

["C","B","A"]
arr.join('-')
"C-B-A"

4.10多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

• 数组：存储数据（如何存。如何取）

5.对象

若干个键值对

var 对象名  = {
    属性名：  属性值；
    属性名：  属性值；
    属性名：  属性值；
    }

//定义了一个person对象，它有四个属性
var person  = {
name：“kuangshen”
age：3
email:"11111@qq.com"
score:0
}

• js中对象，{…}表示一个对象，键值对描述属性 XXXX：XXXX，多个属性 之间使用逗号隔开，最后一个属性不加逗号！
• js中的所有的键都是字符串，值是任意对象

5.1对象赋值

person.name = "qinjiang"
"qinjiang"
person.name
"qinjiang"

5.2使用一个不存在的对象属性，不会报错！undefined

person.haha
undefined

5.3动态的删减属性，通过delete删除对象的属性

delete person.name
true
person

5.4动态的添加，直接给新的属性添加值即可

person.haha ="haha"
"haha"
person

5.5判断属性值是否在这个对象中！ XXX in XXX！

'age' in person
true
//继承
'toString' in person
true

5.6判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

6.流程控制

if判断

var age = 3;
if (age>3){ //第一个判断
alert("haha")
}else if{age<5){ //第二个判断
alert("kuwa")
}else{  //否则
alert("kuwa")
}

循环

while循环,避免程序死循环

while（age<100）{
age = age + 1;
console.log(age)
}

do{
age = age + 1;
console.log(age)
}while（age<100）

for循环

for（let i = 0;i < 100;i++){
console.log(i)
}

forEach循环

var age = [12,3,12,3,12,3,12,31,23,123]
 //函数
 age.forEach(function (value){
 console.log(value)
 })

for…in

//for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
 console.log("存在")
  console.log(age[num])
}
}

7.Map和Set

ES6的新特性

Map：

//学生的成绩，学生的名字
// var names = ["tom","jack","haha"];
//var scores = [100,90,80];

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value
map.set('admin',123456);//新增或修改
map.delete('tom');//删除

Set ：无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

8.iterator

遍历数组

//通过for of  / for  in 下标
var arr = [3,4,5]
for(var x of arr){
console.log(x)
}

遍历map

var map = new Map([['tom',100],['jack',90],['haha',80]]);
for (let x of map){
console.log(x)
}

遍历set

var set = new Set([5,6,7]);
for (let x of map){
console.log(x)
}

二.函数及面向对象

1.定义函数

绝对值函数

function abs(x){
if(x>=0){
return x；
}else{
return -x;
}
}

一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs = function(x)

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数

调用函数

abs(10)  //10
abs(-10)  //10

参数问题：JavaScript可以传任意个参数，也可以不传递参数
假设不存在参数，如何规避

var abs = function(x){
//手动抛出异常来判断
if（typeof x!=='number'）{
throw 'Not a Number';
}
if(x>=0){
return x；
}else{
return -x;
}
}

arguments

代表，传递进来的所有的参数，是一个数组

var abs = function(x){
console.log("x=>"+x);
for(var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x；
}else{
return -x;
}
}

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function aaa(a,b,....rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}

rest参数只能写在最后面，必须用…标识

2.变量的作用域

在js中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用（闭包）

function qj(){
var x = 1;
x = x + 1;
}

x = x + 2;//Uncaught ReferenceError : x is not defined  

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj(){
var x = 1;
x = x + 1;
}
function qj2(){
var x = 'A';
x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function qj(){
var x = 1;

function qj2(){
var y = x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError : x is not defined
}

假设，内部函数变量和外部函数的变量，重名

function qj(){
var x = 1;

function qj2(){
var x = 'A';
console.log('inner'+x);//outer1
}
console.log('outer1'+x);//innerA
qj2()
}
qj()

假设在js中函数查处变量从自身函数开始，有“内”向“外”查找假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function qj(){
var x = "x" + y;
console.log(x);
var y = 'y';
}

结果：

xundefined

• 说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

function qj2(){
var y;
var x = "x" + y;
console.log(x);
 y = 'y';
}

这个是在js建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

function qj2(){
var x = 1;
y = x + 1
z,i,a; //undefined
//之后随意用
}

全局函数

//全局变量
x = 1;
function f() {
console.log(x);
}
f();
console.log(x);

全局对象window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

• alert（）这个函数本身也是一个window

var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
window.alert = function(){
};
window.alert(123);
window.alert = old_alert;
window.alert(456);
alert(window.x);

js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突

//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = 'kuangshen';
KuangApp.add = function(a,b){
return a + b;
}

把代码全部放入定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

function aaa() {
for (var i = 0;i < 100; i++){
console.log(i)
}
console.log(i+1); //i 出了作用域还可以使用
}

• let关键字解决局部作用域冲突的问题

function aaa() {
for (let i = 0;i < 100; i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError : x is not defined
}

常量 const

const PI = '3.14';// 只读变量
console.log（PI）;
PI = '123'; //TypeError: Assignment to constant variable
console.log(PI);

方法

定义方法

方法：就是把函数放在对象的里面
对象只有两个东西：属性和方法

    var Person = {
    name：'qinjiang'
      birth:2001,
      //方法
      age:function(){
      // 今年 - 出生的年
        var now = new Date().getFullYear();
        return now - this.birth;
      }
      }
      //属性
      kuangshen.name
      // 方法一定要带（）
       kuangshen.age()    

this

    function getAge(){
      var now = new Date().getFullYear();
      return now - this.birth;
    }
  
    var kuangshen = {
      birth:2001,
      age:getAge,
    }

this是无法指向的，是默认指向调用它的那个对象

apply

在js中可以控制this指向

    function getAge(){
      var now = new Date().getFullYear();
      return now - this.birth;
    }
    var kuangshen  = {
      birth:2002,
      age:getAge,
    }
    var Tony = {
        birth:1997,
        age:getAge,
    }
    getAge.apply(kuangshen ,[]);
    getAge.apply(Tony,[]);

三.常用对象

1.Date

• getFullYear():获取当前日期对象的年份(四位数字年份)
• getMonth():获取当前日期对象的月份(0 ~ 11)
• getDate():获取当前日期对象的日数(1 ~ 31)
• getHours():获取当前日期对象的小时(0 ~ 23)
• getMinutes():获取当前日期对象的分钟(0 ~ 59)
• getSeconds():获取当前日期对象的秒钟(0 ~ 59)
• getMilliseconds():获取当前日期对象的毫秒(0 ~ 999)
• getTime():时间戳，获取当前时间距离1970年1月1日的毫秒数

      var date = new Date();
      console.log(date.getFullYear());
      console.log(date.getMonth());
      console.log(date.getDate());
      console.log(date.getHours());
      console.log(date.getMinutes());
      console.log(date.getSeconds());
      console.log(date.getMilliseconds());
      console.log(date.getTime());
时间格式的转换
      var date = new Date(1578106075991);
      console.log(date);
      var localeDateString = date.toLocaleDateString();
      console.log(localeDateString);
      var toDateString = date.toDateString();
      console.log(toDateString);

JSON

1.什么是JSON

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2.JSON格式

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示

格式

对象都用 { }
数组都用 [ ]
所有键值对都是用 key:value

3.JSON字符串与JS对象的转化

• 1.对象转换为json字符串：
  JSON.stringify(对象名)

2. json字符串转化为对象
   JSON.parse(‘JSON字符串’)

    let Person = {
        name:'qinjiang',
        age:3,
        sex:'男'
    }
    let stringify = JSON.stringify(Person);
    console.log(stringify);//{"name":"qinjiang","age":3,"sex":"男"}
    var parse = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
    console.log(parse);

四.面向对象编程

原型继承

let Person = {
      name:'Tony',
      age:22,
      eat:function(){
        console.log("人是铁饭是钢");
      }
    };
    let Bird = {
      fly:function(){
        console.log("Bird can fly......");
      }
    }
    let Jerry = {
      name:'Jerry'
    };
    Jerry.__proto__ = Person;//语法格式
    console.log(Jerry.eat());
    Jerry.__proto__ = Bird;
    console.log(Jerry.fly());

class继承

定义

class关键字，在ES6引入

    class Person{
      constructor(name){
        this.name = name;
      }
    }
    let Tony = new Person('Tony');
    let Jerry = new Person('Jerry');
    console.log(Tony);
    console.log(Jerry);

继承

    class Person{
      constructor(name){
        this.name = name;
      }
    }
    class Student extends Person{
      constructor(name,grade){
        super(name);
        this.grade = grade;
      }
    }
    let Tony = new Person('Tony');
    let Jerry = new Student('Jerry','一年级');
    console.log(Tony);
    console.log(Jerry);

五.操作Bom元素

BOM：浏览器对象模型，使我们可以通过JavaScript来操作浏览器。
常见的BOM对象：
1.Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
2.Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
3.Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
4.History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
5.Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

1.window对象

常用窗口属性

• 1、 浏览器窗口的内高度（以像素计）
  window.innerHeight
• 2、浏览器窗口的内宽度（以像素计）
  window.innerWidth
• 3、浏览器窗口的外高度（以像素计）
  window.outerHeight
• 4、浏览器窗口的外宽度（以像素计）
  window.outerWidth

2.Navigator对象

.Navigator封装了浏览器的信息

Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

多数时候不会使用，因为会被别人修改

3.Screen对象

screen.width
1920px
screen.height
1080px

4.Location对象

location代表当前页面的URL信息

常用属性

1、输出location对象
console.log(location);
2、输出当前地址的全路径地址
console.log(location.href);
3、输出当前地址的来源
console.log(location.origin);
4、输出当前地址的协议
console.log(location.protocol);
5、输出当前地址的主机名
console.log(location.hostname);
6、输出当前地址的主机
console.log(location.host);
7、输出当前地址的端口号
console.log(location.port);
8、输出当前地址的路径部分
console.log(location.pathname);
9、输出当前地址的?后边的参数部分
console.log(location.search);

常用方法

1.assign()

location.assign("https://www.baidu.com");

2.reload()

location.reload(true);

3.replace()

location.replace("https://www.baidu.com");

5.document

document代表当前的页面，HTML DOM 文档树

document.title
"百度一下，你就知道"
document.title='狂神说'
"狂神说"

获取具体的文档树节点

<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>

<script>
var dl = document.getElementByID('app');
</script>

获取cookie

document.cooike

劫持cookie原理

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

服务器端可设置cookie ：httpOnly

6.History对象

history代表浏览器的历史记录

history.back()//后退
history.forward()//前进

六.操作Dom元素

1.获得DOM节点

核心

浏览器网页就是一个Dom树形结构！

• 更新：更新Dom节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

1、 通过元素 id 来查找元素
document.getElementById(id)
2、通过标签名来查找元素
document.getElementsByTagName(name)
3、通过类名来查找元素
document.getElementsByClassName(name)
4、获取父节点下的所有子节点
父节点.children

<body>
   <div id="father">
     <h1>一级标题</h1>
     <div id="div1">这是一个块</div>
     <p class="p1">这是一个段落</p>
   </div>

   <script>
     'use strict';
     let tagName = document.getElementsByTagName('h3');
     let byId = document.getElementById('div1');
     let className = document.getElementsByClassName('p1');
     let father = document.getElementById('father');
     let childrens = father.children;//获取父节点下的所有节点
     console.log(tagName);
     console.log(byId);
     console.log(className);
     console.log(childrens)
   </script>
</body>

2.更新节点

1、 获取 HTML 元素的 inner Text
元素节点.innerText
2、获取 HTML 元素的 inner HTML
元素节点 .innerHTML
3、获取 HTML 元素的属性值
元素节点.属性
4、获取 HTML 元素的行内样式值
元素节点.style.样式

<body>
    <h1 id="content">这是一个一级标题</h1>
<script>
    let byId = document.getElementById('content');
    byId.innerText = '123';
    byId.innerHTML = '<em>123</em>';
    byId.style.padding = '2em';
    byId.style.fontsize = '20px';
    byId.style.color = 'red';
</script>
</body>

3.删除DOM节点

• 删除节点得步骤：先获取父节点，再通过父节点删除自己

方法

• 1、返回元素的父元素
  元素节点.parentElement
• 2、删除 HTML 元素
  元素节点.removeChild(element)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="father">
      <h1>标题一</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
    </div>
<script>
    'use strict';
    let child = document.getElementById('p1');
    let father = child.parentElement;
    father.removeChild(child);
</script>
</body>

• 注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

4.创建和插入DOM节点

• 1、创建 HTML 元素节点
  document.createElement(element);
• 2、改变HTML元素的属性值
  元素节点.setAttribute(attribute, value)
• 3、添加 HTML 元素
  元素节点.appendChild(element);
• 4、在指定的子节点前面插入新的子节点
  元素节点.insertBefore(newNode, targetNode);

案例一：移动已经存在的标签元素

<body>
    <p id="p1">p1</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
<script>
    let p1 = document.getElementById('p1');
    let list = document.getElementById('list');
    list.appendChild(p1);
</script>
</body>

结果：

案例二：给body加背景色

<body>
<script>
    let newStyle = document.createElement('style');
    newStyle.setAttribute('type','text/css');
    newStyle.innerHTML = 'body{background-color:red}';
    let head = document.getElementsByTagName('head')[0];
    head.appendChild(newStyle);
</script>
</body>

案例三:insertBefore(newNode, targetNode)使用

<body>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
    <p id="js">JavaScript</p>
</div>
<script>
    let list = document.getElementById('list');
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    list.insertBefore(js,ee);
</script>
</body>

结果：

七.操作表单

获得和设置表单的值

<body>
<form action="post">
<p>
    <span>用户名 : </span><input type="text" id="username">
    </p>
    <p>
    <span>性别 : </span><input type="radio" name="sex" id="boy">男
    <input type="radio" name="sex" id="girl" checked>女
    </p>
</form>
<script>
    let userName = document.getElementById('username');
     let sex_boy = document.getElementById('boy');
    let sex_girl = document.getElementById('girl');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value = '123'
    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
   girl_radio.checked = true;//赋值
</script>
</body>

表单提交验证及前端密码MD5加密

<!--    MD5加密工具类-->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
    </script>
</head>
<body>
<form action="#" method="post" onsubmit="return MD5_check()">
  <p>
    <span>用户名 : </span><input type="text" id="username" name="username">
  </p>
  <p>
    <span>密码 : </span><input type="password" id="password" >
  </p>
  <input type="hidden" id="MD5_psd" name="psd">
  <!--绑定事件 onclick 被点击-->
  <button type="submit">提交</button>
</form>

<script>
  function MD5_check(){
    let username = document.getElementById('username');
    let psd = document.getElementById('psd');
    let MD5_psd = document.getElementById('MD5_psd');
    MD5_psd.value = mad5(psd.value);
    return true;
  }
</script>
</body>

八.jQuery

jQuery公式

• $( selector ) .action( )

  <script src="../lib/jquery-3.6.0.js"></script>
  <style>
    div{
      width:200px;
      height:200px;
      background:red;
    }
  </style>
</head>
<body>
<div></div>
<script>
  //1、格式一（推荐）：$(function(){.......});
  $(function(){
    $('div').hide();
  });
  //2、格式二：$(document).ready(function(){......});
  // $(document).ready(function(){
  //   $('div').hide();
  // });
</script>
</body>

jQuery选择器

基本选择器

id选择器 $(‘#id’) 获取指定ID的元素
全选选择器 $(‘*’) 匹配所有元素
类选择器 $(‘.class’) 获取同一类class的元素
标签选择器 $(‘div’) 获取同一类标签的所有元素
并集选择器 $(‘div,p,li’) 获取多个元素
交集选择器 $(‘li.current’) 交集元素

层次选择器

子代选择器 $(‘ul > li’) 使用>号，获取亲儿子层级的元素；注意：并不会获取孙子层级的元素
后代选择器 $(‘ul li’) 使用空格，代表后代选择器，获取ul下的所有li元素与，包括孙子等

<body>
    <div>我是div</div>
    <div class="box">我是box div</div>
    <p id="p">我是p</p>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ul 的li</li>
        <li>
            <li>我是li的li</li>
            <li>我是li</li>
            <li>我是li</li>
        </li>
        <li>我是ul 的li</li>
        <li>我是ul 的li</li>
    </ul>

    <script>
        $(function(){
           console.log($('.box'));
           console.log($('#p'));
           console.log($('ol > li'));
           console.log($('ul li'));
        });
    </script>
</body>

隐式迭代

</head>
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
  <li>相同的操作</li>
  <li>相同的操作</li>
  <li>相同的操作</li>
  <li>相同的操作</li>
</ul>

<script>
  $('div').css('background','red');
  $('li').css('color','blue');
</script>
</body>

筛选选择器

:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(‘li:eq(2)’) 获取到的li元素中，选择索引号为2的元素，索引号indexcong0开始
:odd $(‘li:odd’) 获取到的li元素中，选择索引号为奇数的元素
:even $(‘li:even’) 获取到的li元素中，选择索引号为偶数的元素

<body>
<ul>
  <li>ul的第一个li</li>
  <li>ul的第二个li</li>
  <li>ul的第三个li</li>
  <li>ul的第四个li</li>
  <li>ul的第五个li</li>
  <li>ul的第六个li</li>
</ul>
<ol>
  <li>ol的第一个li</li>
  <li>ol的第二个li</li>
  <li>ol的第三个li</li>
  <li>ol的第四个li</li>
  <li>ol的第五个li</li>
  <li>ol的第六个li</li>
</ol>

<script>
  $(function(){
    $('ul li:first').css('color','red');
    $('ul li:last').css('color','blue');
    $('ul li:eq(2)').css('color','pink');
    $('ol li:odd').css('color','green');
    $('ol li:even').css('color','gray');
  })
</script>

筛选方法

parent() $(‘li’).parent(); 查找父级
children(selector) ${(}^{\prime }u{l}^{\prime }).children{(}^{\prime }l{i}^{\prime })相当于$(‘ul>li’)，子类选择器
find(selector) ${(}^{\prime }u{l}^{\prime }).find{(}^{\prime }l{i}^{\prime });相当于$(‘ul li’),后代选择器
siblings(selector) $(‘.first’).siblings(‘li’); 查找兄弟节点，不包括自己本身。
nextAll([expr]) $(‘.first’).nextAll() 查找当前元素之后的所有元素
prevAll([expr]) $(‘.last’).prevAll() 查找当前元素之前的所有元素
hasClass(class) $(‘div’).hasClass(‘protected’) 检查当前元素是否包含某个特定的类，如果有，则返回true
eq(index) $(“li”).eq(2);相当于$(“li:eq(2)”),index从0开始

<body>
<div id="grandFather">grandFather
  <div id="father">father
    <div id="son">
      son
    </div>
  </div>
</div>
<ul>
  <li>ul的第一个li</li>
  <li>ul的第二个li</li>
  <li>ul的第三个li</li>
  <li>ul的第四个li</li>
  <li>ul的第五个li</li>
  <li>ul的第六个li</li>
</ul>

<ol>
  <li>ol的第一个li</li>
  <li>ol的第二个li</li>
  <li class="item">ul的第三个li</li>
  <li>ol的第四个li</li>
  <li>ol的第五个li</li>
  <li>ol的第六个li</li>
</ol>

<script>
  $(function(){
    console.log($('#son').parent());
    $('ul').children('li').css('color','red');
    $('body').find('div').css('background','green');
    $('ol .item').siblings('li').css('color','blue');
    $('ol li').eq(2).css('color','pink');
  })
</script>
</body>

jQuery样式操作

操作CSS方法

1、参数只写属性名，则是返回属性值
2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可不加单位引号
3、参数可以使对象形式，属性名和属性值用冒号隔开，属性不用加引号，复合属性名用驼峰命名法

  <style>
    div{
      width:200px;
      height:200px;
      background:red;
    }
  </style>
</head>
<body>
<div></div>

<script>
  $(function(){
   console.log($('div').css('width'));
   $('div').css('width','300px');
   $('div').css({
     height:300,
     backgroundColor:'blue'
   });
  })
</script>
</body>

设置类样式方法

添加类
$(this).addClass('current');
移除类
$(this).removeClass('current');
切换类，有这个类就移除，没有就添加
$(this).toggleClass('current');

jQuery效果

显示隐藏效果

  <style>
    div{
      width:200px;
      height:400px;
      background:red;
    }
  </style>
</head>
<body>
  <button>隐藏</button>
  <button>显示</button>
  <button>切换</button>
  <div></div>

  <script>
    $(function(){
      $('button').eq(0).click(function(){
        $("div").hide(1000,'linear',function (){
          alert(1);
        })
      })
      $('button').eq(1).click(function(){
        $("div").show('slow','swing',function (){
          alert(1);
        })
      })
      $('button').eq(2).click(function(){
        $("div").toggle('normal','swing')
      })
    })
  </script>
</body>

滑动效果

  <style>
    div{
      width:200px;
      height:400px;
      background:red;
    }
  </style>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换滑入滑出</button>
<div></div>

<script>
  $(function() {
    $('button').eq(0).click(function () {
        $('div').slideDown(2000,'swing',function(){
          alert(1);
        });
    })
    $('button').eq(1).click(function () {
        $('div').slideUp('normal','linear')
    })
    $('button').eq(2).click(function () {
        $('div').slideToggle('fast','linear')
    })
  });
</script>
</body>

事件切换

hover(function(){}, function(){})

淡入淡出动画

1、淡入动画
fadeIn([speed],[easing],[fn])
2、淡出动画
fadeOut([speed],[easing],[fn])
3、淡入淡出切换
fadeToggle([speed,[easing],[fn]])
4、透明度改变
fadeTo([[speed],opacity,[easing],[fn]])

自定义动画

  <style>
    div{
      position:absolute;
      width:200px;
      height:300px;
      background:red;
    }
  </style>
</head>
<body>
<button>自定义动画</button>
<div></div>

<script>
  $(function() {
    $('button').click(function () {
      $('div').animate({
        left:300,
        top:300,
        opacity:0.5
      },2000)
    });
  });
</script>
</body>

jQuery属性操作

获取/设置元素固定值

元素固有属性就是元素本身自带的属性，比如< a >元素里面的href，比如< input > 元素里面的type

获取属性
prop('属性')
设置属性
prop('属性','属性值')

获取/设置元素自定义属性值

获取属性
attr('属性')
设置属性
attr('属性','属性值')

数据缓存

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除

<body>
<a href="http://www.baidu.com" title="百度">百度一下</a>
<div index="1" data-index="10"></div>
<span></span>

<script>
    $(function (){
        //元素固有属性
        console.log($('a').prop('href'));
        $('a').prop('title','百度一下你就知道');
        //元素自定义属性
        console.log($('div').attr('index'));
        $('div').attr('index',4);
        console.log($('div').attr('index'));
        //数据缓存data()
        $('span').data('username','tony');
        console.log($('span').data('username'));
        console.log($('div').data('index'));
    })
</script>
</body>

JQuery内容文本

普通元素内容 html() //相当于原生 innerHtml

获取元素的内容
html()
设置元素的内容
html('内容')

普通元素文本内容 text() //相当于原生innerText

获取文本内容
.text()
设置文本内容
text('内容')

获取表单值 .val()

val方法用于设置和获取表单元素的值，例如input、textarea的值

<body>
<div>
  <span>span内容</span>
</div>
<input type="text" value="请输入内容">

<script>
  //1、获取设置元素内容
  console.log($('div').html());
  $('div').html('123');
  //2、获取设置元素文本内容
  console.log($('div').text());
  // $('div').text('123456')
  //3、获取设置表单值
  console.log($('input').val());
  $('input').val('123');
</script>
</body>

JQuery元素操作

遍历元素

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>

<script>
  $(function (){
    var colors = ['red','green','blue'];
    $('div').each(function(index, element){
      console.log(index);
      $(element).css('color',colors[index]);
      console.log(element);
    });
  })
</script>
</body>

创建元素

$('<li></li>')

添加元素

内部添加

将内容放入匹配元素最后面
element.append('内容')
将内容放入匹配元素最前面
element.prepend('内容')

外部添加

将内容放入目标元素后面
element.after('内容')
将内容放入目标元素前面
element.before('内容')

删除元素

<body>
<ul>
  <li id="former_li">我是原来的li</li>
</ul>
<div id="former_div">我是原来的div1</div>

<script>
  $(function (){
    //1、创建元素
    var li = $('<li>我是新来的li</li>')
    var div = $('<div>我是新创建的div</div>')

    //2、添加元素
    //内部添加
    $('ul').prepend(li);

    //外部添加
    $('#former_div').before(div);

    //3、删除元素
    $('#former_li').remove();
    // $('#former_div').empty();
    // $('#former_div').html('');
  })
</script>

JQuery位置大小操作

jQuery尺寸

jQuery位置

offset()设置或获取元素偏移

• offset()方法设置或返回被选元素相对于文档的偏移左边，跟父级没关系
• 该方法有2个属性left、top。top获取距离文档顶部的距离，left用于获取距离文档左侧的距离
• 可以设置元素的偏移：offset({top:10, left:30});

position()获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准

scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧

• scrollTop()方法设置或者返回被卷去的头部
• scrollLeft()方法设置或者返回被卷去的左侧