JavaScript与jQuery(上篇)

JavaScript与jQuery笔记(上篇)

    • 一、引入JavaScript
    • 二、快速入门
    • 三、数据类型快速过一遍
    • 四、严格检查模式strict
    • 五、详解字符串
    • 六、数组详解
    • 七、对象详解
    • 八、流程控制,判断,循环
    • 九、Map、Set集合(ES6才出来的)
    • 十、iterator 遍历(ES6才出来的)
    • 十一、函数的定义和参数获取(ES6参数 rest)
    • 十二、变量的作用域
    • 十三、全局对象 window
    • 十四、局部作用域 let(ES6才出来的)
    • 十五、常量 const(ES6才出来的)
    • 十六、方法的定义和调用、apply
    • 十七、Date日期对象
    • 十八、JSON对象
    • 十九、面向对象(ES6 关键字 class)
    • 二十、操作BOM对象(重点)
    • 二十一、操作DOM对象(重点)
      • 1、获得dom节点
      • 2、更新节点
      • 3、删除节点
      • 4、删除节点
      • 5、创建一个新的标签,实现插入
      • 6、在前面插入节点:insertBefore
    • 二十二、 操作表单(验证)
        • ————————
        • 创作不易,如觉不错,随手点赞,关注,收藏(* ̄︶ ̄),谢谢~~

一、引入JavaScript

ECMAScirpt他可以理解为是JavaS的一个标准

1.1 内部使用

<script>
    window.alert("你好,王小姐");
</script>

1.2 外部引入

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

1.3 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--script标签内写JavaScript代码,script标签必须成对出现,不用显式定义type,默认就是JavaScript-->
    <script type="text/javascript"></script>
    
    <!--第一种方式,内部引用
	<script>
     window.alert("嘻嘻嘻");
 	</script>-->
 	
    <!--第二种方式,外部引用-->
    <script src="js/cjg.js"></script>
    
</head>
<body>
</body>
</html>

二、快速入门

因为JS是弱语言,里面不用声明类型。

统一用 var 来声明变量

在ES6新增加了let 和const来声明变量。

2.1 测试代码

<!--JavaScript严格区分大小写!-->
    <script>
        1. 定义变量    变量类型  变量名  = 变量值;
        注:在JavaScript中不存在变量类型,一切的变量都叫var,对于var并没有一个固定的变量类型的限制
        var score = 71;// 此时score就是一个数字类型的变量
        var name='qqqdweob';// 此时name就是一个字符串类型的变量
        alert(score);
        
        // 2. 条件控制
        if (score>60 && score<70){
            alert("60~70")
        }else if(score>70 && score<80){
            alert("70~80")
        }else{
            alert("other")
        }

		console.log(score)在浏览器的控制台打印变量! system.out.print1n();
    </script>

2.2 浏览器控制台调试

在页面上可以按F12调出控制台,可以在这里输出当前页面的变量值(或者写脚本),非常方便。

最常用的就是这几个

JavaScript与jQuery(上篇)_第1张图片

三、数据类型快速过一遍

数值,文本,图形,音频,视频….

3.1 变量

var a = 1;

3.2 number

js不区分小数和整数,Number

123//整数
123.1//浮点数
-99//负数
NaN//not a number
Infinity//表示无限大

3.3 字符串

‘abc’ “abc”

3.4 布尔值

true false

3.5 逻辑运算符

&&  两个都为真,结果为真
||    一个为真,结果为真
!    真即假,假即真

3.6 比较运算符

=   赋值预算法
==    等于(类型不一致,值一样,也会判断为true  即判断1=='1'===        绝对等于(类型一样,值一样,结果为true

这是一个JS的缺陷,坚持用===进行比较

须知:

NaN,与所有的数值都不相等,包括自己
只能通过isNaN()来判断这个数是不是NaN

3.7 浮点数问题

console.log(1/3)===(1-2/3) //结果为false

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

Math.abs(1/3-(1-2/3))<0.00000001 //结果为true
abs绝对值   //abs表示绝对值

3.8 null和undifined

nullundefined 未定义

3.9 数组

Java的数组必须是相同类型的对象。JS中不需要这样!

保证代码的可读性,尽量使用[],尽量使用第一种
var arr = [1,2,3,'hello',null,true];
new Array (1,12,3,4,4,5 , 'he11o ');
取数组下标:如果越界了,就会报undefined

3.10 对象

对象是大括号,数组是中括号

每一个属性之间使用逗号隔开,最后一个不需要加逗号

var person = {
    name: "王小姐",
    age: 16,
    tags: ['可爱','樱桃小嘴', '柳叶眉', '大眼睛']
}

取对象的值

person.name
"王小姐"
person.tags[0]
"樱桃小嘴"

四、严格检查模式strict

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
前提:Idea,设置支持ES6语法
'use strict';严格检查模式,预防JavaScript随意性导致产生的一些问题
必须写在script标签内的第一行!
局部变量建议都使用let去定义
-->
<script>
    'use strict';
    let i = 1;
</script>
</body>
</html>

设置idea支持ES6

JavaScript与jQuery(上篇)_第2张图片

五、详解字符串

5.1 正常字符串我们使用单引号或者双引号包裹

5.2 注意转义字符 \

\'    打印一个点
\n 		换行
\t        tab缩进
\u4e2d   \u#### Unicode 字符
\x41       Ascll字符

5.3 多行字符串编写

tab 和ESC键中间的字符`` 包裹
var msg = `
        hello
        world
        你好
        `

5.4 模板字符串

let name = '王小姐';
let msg = `你好呀,${name}`;

5.5 字符串长度

str.length

5.6 字符串不可变

let student = "student"; student[1] = 1;
>1
console.log(student)
>student

5.7 大小写转换

let student = "student";
console.log(student.toUpperCase());    小写转大写
console.log(student.toLowerCase());		大写转小写

5.8 获取字符串下标

sutdent.indexOf(‘t’);

5.9 截取字符串

let student = "student";
//左闭右开[0,3),从第一个字符串取到第二个 stu;
console.log(student.substring(0,3));

六、数组详解

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]
-- 通过下标取值和赋值
arr[0]
arr[0] = 1;

6.1 长度

arr.length

注意:假如给arr.length赋值,数组的大小就会发生变化,如果赋值过小,元素就会丢失

6.2 indexOf,通过元素获得下标索引

arr.indexOf(2);
1

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

6.3 slice() 截取Array的一部分,返回一个新的数组,类似于String中的substring

6.4 push() , pop() 尾部

-- push(); 压入到尾部
let arr = [1,2,3,4,5,"6","a"];
arr.push("b");
[1, 2, 3, 4, 5, "6", "a", "b"];
-- pop();删除尾部
arr.pop();
[1, 2, 3, 4, 5, "6", "a"];

6.5 unshift() , shift() 头部

-- unshift() 头部增加
let arr = [1, 2, 3, 4, 5];
arr.unshift(0);
[0, 1, 2, 3, 4, 5];
-- shift(),删除头部
arr.shift();
[1, 2, 3, 4, 5];

6.6排序 sort()

let arr = [6, 2, 8, 4, 5];
arr.sort();
[2, 4, 5, 6, 8];

6.7 元素反转

let arr = [2, 4, 5, 6, 8];
arr.reverse();
[8, 6, 5, 4, 2];

6.8 concat() 拼接数组

let arr = [8, 6, 5, 4, 2];
arr.concat(['a','b','c']);
-- 返回一个新的数组 [8, 6, 5, 4, 2, "a", "b", "c"];
-- 并未改变原来的数组arr
[8, 6, 5, 4, 2];

6.9 连接符 join

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

let arr = [8, 6, 5, 4, 2];
arr.join("-");
"8-6-5-4-2";

6.10 多维数组

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

let arr = [[1,2], [3,4], ['a','b']];
arr[1][1];
4;

七、对象详解

若干个键值对

-- 
var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
} 
--
var person = {
    name : "王小姐",
    age : 16,
    email : "[email protected]",
    score : 100
}

js中的对象, {……}表示一个对象,键值对描述属性xx : xx,多个属性之间使用逗号隔开,最后一个属性不加逗号!

JavaScript 中的所有键都是字符串,值是任意对象!

7.1 对象赋值

var person = {
    name : "",
    age : 16,
    email : "[email protected]",
    score : 100
}
person.name="王小姐";
>"王小姐"
person.name;
>"王小姐"

7.2 使用一个不存在的对象属性,不会报错!会报undefined

var person = {
    name : "",
    age : 16,
    email : "[email protected]",
    score : 100
}
person.dog;
undefined

7.3 动态的删减属性,通过delete删除对象的属性

var person = {
    name : "",
    age : 16,
    email : "[email protected]",
    score : 100
}
delete person.score;
person
>{name: "王小姐", age: 16, email: "[email protected]"}

7.4 动态的添加,直接给新的属性添加值即可

var person = {
    name : "",
    age : 16,
    email : "[email protected]",
    score : 100
}
person.dog = "tom";
person.tom;
>tom

7.5 判断属性值是否在这个对象中! xx in xx

var person = {
    name : "王小姐",
    age : 16,
    email : "[email protected]",
    score : 100
};
"age" in person;
>true;
-- 继承
'toString' in person
>true;

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

var person = {
    name : "王小姐",
    age : 16,
    email : "[email protected]",
    score : 100
};
person.hasOwnProperty("toString");
>false
person.hasOwnProperty("age");
>true

八、流程控制,判断,循环

8.1 if 判断

var age = 3;
if(age > 3){
    alert("哈哈");
}else if(age < 5){
    alert("kuwa~");
}else{
    alert("heihei");
}

8.2 while循环,避免程序死循环

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



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

8.3 for循环

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

8.4 forEach循环

var age = [12,3,4,22,23,55];
-- 传一个函数
age.forEach(function (value) {
    console.log(value);
})

8.5 fo…in

//for(var index in object)
var age = [12,3,4,22,23,55];
for (var num in age){
    console.log(age[num]);
}

九、Map、Set集合(ES6才出来的)

9.1 Map:

var map = new Map([['tom',100],['jack',90],['tim',80]]);
var name = map.get('tom');	-- 通过key获取value
map.delete('tom');   -- 删除元素
map.set('kate',70);		-- 增加或者修改

9.2 Set: 无序不重复的集合

var set = new Set([3,2,1]);
set.add(5);	-- 增加元素
set.delete(3);	-- 删除元素
set.has(1);	-- 判断是否包含元素
set.size;	-- 长度

十、iterator 遍历(ES6才出来的)

10.1 遍历数组

--	通过for of遍历值 
	--  for in 遍历下标
var array = [1,2,3];
for (let x of array){
    console.log(x);
}

10.2 遍历map

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

10.3 遍历set

var set = new Set([3,2,1]);
for (var x of set){
    console.log(x);
}

十一、函数的定义和参数获取(ES6参数 rest)

11.1 定义函数

定义方式一

-- 绝对值函数
function abs(x){
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return 代表函数结束,返回结果!

如果没有执行return , 函数执行完也会返回结果,结果就是undefined

定义方式二

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

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

方式一和方式二等价!

11.2 调用函数

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

参数问题:JavaScript 可以传任意多个参数,也可以不传

参数传多个问题

function abs (x){
    if(typeof x!== "number"){
        throw "Not A Number";
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

11.3 关键字 arguments

arguments 是一个JS免费赠送的关键字

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

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

arguments 包含所有的参数,想使用多余的参数操作,需要排除已有参数

11.4 参数 rest

获取除了已定义的参数之外所有的参数 …

function abs (x,y...rest){
    console.log(rest);
}

十二、变量的作用域

在JavaScript中,用var声明的变量实际上是有作用域的

12.1 在函数体内声明的变量,在函数体外不可以访问 (非要想实现的话,后面可以研究一下闭包)

'use strict';
function foo() {
    var x = 1;
    x = x + 1;
}
x = x + 2;

输出:
--  ReferenceError: x is not defined
--	无法在函数体外引用变量x

12.2 访问不存在的变量名会报 xxx is defined

function abs(x) {
    var a = 1;
}
a = a +2;

--	报错:ReferenceError:a is not defined

12.3 如果两个函数使用了相同的变量名,只要在各自的函数内部,就不冲突;换句话说,不同函数内部的同名变量相互独立,互不影响;

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

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

function qj(){
    var x = 1;
    --	内部函数可以访问外部函数的成员,反之则不行
    function qj2(){
        var y = x + 1; //2
    }
    var z = y + 1;	--	Uncaught ReferenceError: y is not defined
}

12.5 假设,内部函数变量和外部函数变量重名

function qj() {
    var x = 1;
    function  qj2() {
        var x = 'A';
        console.log('inner'+x);
    }
    console.log('outer'+x);
    qj2();
}
qj()

//返回的结果:
outer1
innerA

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

12.6 变量提升

JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:

'use strict'; 
function foo() { 
    var x = 'Hello, ' + y;
    console.log(x); 
    var y = 'Bob'; 
}
foo();

--	结果:Hello, undefined
--	说明 y 的值为 undefined
--	这正是因为JavaScript引擎自动提升了变量 y 的声明,但不会提升变量 y 的赋值。

对于上述foo()函数,JavaScript引擎看到的代码相当于:

function foo(){
    var y;
    var x = 'Hello,' + y;
    console.log(x);
    y = 'Bob';    
}

由于JavaScript这一特性,我们在函数内部定义变量时,要严格遵守规范:在函数内部首先申明所有变量。最常见的做法是用一个var声明函数内部用到的所有变量:

function foo() { 
    var x = 1, 	//  x初始化为1 
        y = x + 1, 	//  y初始化为2 
        z, i; 	//  z和i为undefined 
    //  其他语句: 
    for (i=0; i<100; i++) {
        ... 
    } 
}

12.7 全局函数

--	全局变量
var a =1;
function f(){
    console.log(a);
}
f();
console.log(a);

十三、全局对象 window

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

alert()这个函数本身也是一个window变量;

var x= 'xxx ';

window. alert(x);

var old_alert = window.alert;

//o1d_alert(x);

window. alert = function ( i

};

//发现alert() 失效了
window.a1ert(123);

//恢复
window.alert = old_alert;window.a1ert(456);

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

规范

由于我们所有的全局变量都会绑定到我们的window 上。如果不同的js文件,使用了相同的全局变量,冲突~>如果能够减少冲突?

--	唯一全局变量
var KuangApp = {i};3

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

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

十四、局部作用域 let(ES6才出来的)

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

ES6 let关键字,解决局部作用域冲突问题!

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

建议大家都是用let去定义局部作用域的变量;

十五、常量 const(ES6才出来的)

在ES6之前,怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

var PI = '3.14';
console.1og(PI);
PI = '213';	-- 可以改变这个值 
console.log(PI);

在ES6引入了常量关键字const

const PI = '3.14';  --只读变量
conso1e.1og(PI);
PI = '123'; -- TypeError: Assignment to constant variable.
console.log(PI);

十六、方法的定义和调用、apply

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

var kuangshen = {
	name: '秦疆'bitrh: 2000,
	//方法
	age: function (){
		//今年-出生的年
		var now = new Date().getFu77Year;
		return now-this.bitrh;
	}
}

//属性
kuangshen. name
//方法,一定要带()
kuangshen.age()

this.代表什么?拆开上面的代码看看~

function getAge() {
	//今年–出生的年
	var now = new Date().getFu17Year();
	return now-this.bitrh;
}
var kuangshen = {
	name : '秦疆'bitrh : 2000,
	age : getAge
}

// kuangshen.age()	  ok
// getAge()		 NaN 	window

this是无法指向的,是默认指向调用它的那个对象; 因为第二个调用是windows,所以为NaN

apply

在js 中可以控制this指向!

function getAge() {
	//今年-出生的年
	var now = new Date().getFu77Year();
	return now-this.bitrh;
}
var kuangshen = {
	name: '秦疆'bitrh: 200o,
	age : getAge
};

// kuangshen. age() ok

getAge.apply(kuangshen,[]);		// this,指向了kuangshen,参数为空

十七、Date日期对象

17.1 标椎对象,如何判断是什么类型,用 typeof

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

17.2 Date

基本使用

var now = new Date();//Tue Nov 10 2020 17:49:16 GMT+0800 (中国标准时间)
now.getFullYear()//年份
now.getMonth()//月份0-11
now.getDate()//日期
now.getDay()//星期几
now.getHours()//时
now.getMinutes()//分
now.getSeconds()//秒
now.getTime()//时间戳  1970年1月1号0:00到现在的毫秒数

console.log(new Date(1605002232224));//时间戳转时间

转换

now = new Date(1605002232224)
Tue Nov 10 2020 17:57:12 GMT+0800 (中国标准时间)

now.toLocaleString	//注意:这是一个方法,不是属性
ƒ toLocaleString() { [native code] }

now.toLocaleString()
"2020/11/10 下午5:57:12"		//这个是获取本地电脑的时间

now.toGMTString()
"Tue, 10 Nov 2020 09:57:12 GMT"

十八、JSON对象

早期,所有数据传输习惯使用XML文件!

  • JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
  • 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…

格式:

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

json字符串和js对象的转换

var user = {
    name :
    "qinjiang",
    age: 3,
    sex: '男'
    }

//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user); 
//输出为{"name" : "qinjiang","age":3,"sex" :"男"}

//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"qinjiang" , "age" :3,"sex":"男"}');
//输出为{name:"qingjiang",age:3,sex:"男"}

json和js对象的区别:

var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'

Ajax

  • 原生的js写法 xhr 异步请求
  • jQuery 封装好的方法 $(“#name”).ajax(“”)
  • axios 请求

十九、面向对象(ES6 关键字 class)

19.1 面向对象原型继承

javascript、java、c#。。。面向对象,javascript有些区别!

  • 类:模板 原型对象
  • 对象:具体的实例

在javascript这个需要大家换一下思维方式!

原型:

var Student = {
    name: "ding",
    age: "3",
    run: function () {
        console.log(this.name + "run.....")
    }
};

var xiaoming = {
    name: "xiaoming"
};

// 原型对象
xiaoming.__proto__ = Student;

var Bird = {
    fly: function () {
        console.log(this.name+ "fly....")
    }
}

// 小明的原型 是Bird 
xiaoming.__proto__ = Bird ;

19.2 面向对象class继承

class关键字,是在ES6引入的

class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()

继承

//ES6之后====
//定义一个学生的类
class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    mygrade() {
        alert('我是一名小学生')
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong",1);

本质:查看对象原型

二十、操作BOM对象(重点)

20.1 浏览器介绍

JavaScript和游览器的关系

javascript诞生就是为了能够让他在游览器中运行

BOM:游览器对象模型

  • IE 6~11
  • Chrome
  • Safari
  • FireFox
  • Opera

第三方

  • QQ游览器
  • 360

20.2 window

window 代表游览器窗口

window.alert(1)
undefined
window.innerHeight
258 
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗口试试

20.3 Navigator

Navigator,封装了游览器的信息

navigator . appName
"Netscape"

navigator . appVersion		//第二个,当前浏览器的版本
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML, like Gecko)
Chrome/63.0.3239.132 Safari/537.36"

navigator . userAgent
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML, like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"

navigator. platform		//第四个,系统版本
"Win32"

大多数时候,我们不会使用navigator对象,因为会被人为修改~

不建议使用这些属性来判断和编写代码

20.4 screen

screen.width
screen.height
//代表屏幕尺寸

20.5 location(重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https"
reloadLf reload() //刷新网页
// 设置新的地址
location.assign('新的网站')

location属性:

  • 主机:host
  • 当前指向的位置:href
  • 协议:protocol
  • 重新加载的方法:f reload() //location.reload()刷新网页
    (设置新的地址:location.assign(‘想要跳转的地址’))

20.6 document

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

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

获取具体的文档树节点

<body>
<dl id="app">
    <dt>java</dt>
    <dd>python</dd>
    <dd>ding</dd>
</dl>
</body>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie原理:把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了

<script src='劫持cookie'></script>
<!-- 获取你的cookie上传到他的服务器 -->
//服务器端可以设置cookie为httpOnly

20.7 document

history代表浏览器的历史记录

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

二十一、操作DOM对象(重点)

浏览器网页就是一个Dom树形结构(与div包围的标签差不多)

  • 更新dom节点
  • 遍历dom节点
  • 删除dom节点
  • 添加dom节点

要操作一个dom节点,就必须先获得这个dom节点

1、获得dom节点

<div>
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>
<script>

//对应css选择器
var h1 = document.getElementByTagName('h1'); 	//这里就是获取到了这个dom节点
var p1 = document.getElementByID('p1');
var p2 = document.getElementByclassName('p1');
var father = document.getElementByID('father');

var childrens = father.children;// 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点

</script>

这是原生代码,之后都用jQuery

2、更新节点

<div id="id1">
    
</div>

<script>
    var id1 = document.getElementByID('id1')
</script>

操作文本

  • id1.innerText = ‘123’ ---- innerText方法修改文本内容
  • id1.innerHTML = ‘123’ ----- innerHTML解析HTML超文本的 可以修改id的样式

操作CSS

  • id1.style.color = ‘red’ — style.什么:style方法修改css样式。即可以在js里操作修改样式
  • id1.style.padding = ‘2em’ — 属性使用字符串包裹

3、删除节点

删除节点的步骤: 先获取父节点,通过父节点删除自己

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p2 class="p2">p2</p2>
</div>
<script>
    var self = document.get ElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
    //删除时一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

注意:删除多个节点是,children是时刻变化的,不能直接father.removechild(father.children[0])这样从第一个索引开始删

4、删除节点

我们获得了某哦个DOM节点,假设DOM节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素,我们就不能这样做了,因为会覆盖。

追加

<p id="js">Javascript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="py">JavaEM</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

JavaScript与jQuery(上篇)_第3张图片

5、创建一个新的标签,实现插入

<script>
    //第一个方法:通过js创建一个新节点
    var new = document.creatElement('p'); //创建一个p标签
    new.id = 'new';
    new.innerText = 'hello'; //在这个标签上输入文本
    list.appendchild(new); //在父节点下加进去

    //用第二种方法创建一个有自己属性的标签节点
    var myScript = document.creatElement('script');//创建一个script标签节点
    myScript.setAttribute('type','text/javascript'); /*setAttribute方法加入属性和属性值。第一个参数为属性名,第二个参数为属性值。生成效果为
                    
                    

你可能感兴趣的:(前端,javascript,jquery,前端,bom对象,dom对象)