JS知识点与涉及反爬中的加密命令

JS知识点与涉及反爬中的加密命令

1 js介绍

组成 说明
ECMAscript js标准
dom 通过js操作网页元素
bom 通过js操作浏览器

2 引入方式、注释、规范

2.1 内嵌式

<script type="text/javascript">
    // js代码
</script>

2.2 外嵌式

<script type="text/javascript" src="myjs.js"></script>

2.3 注释

//单行注释
/* 
    多行注释
 */

注意:每行代码的句末,要加分号 " ; "

3 输出

3.1 消息框 alert

alert('弹出窗口');

在这里插入图片描述

3.2 确认框 confirm

ret = confirm('是否确定');

在这里插入图片描述

  • 确定:ret = true
  • 取消:ret = false

3.3 输入框 prompt

ret = prompt('输入内容');

在这里插入图片描述

3.4 向页面输出消息 document.write

document.write('页面显示的信息');

3.5 向控制台输出消息 console.log

console.log('向控制台输出的消息');

在这里插入图片描述

  • 控制台:按f12,点击console

4 基本数据类型

4.1 数字

类型 说明
十进制 默认
八进制 0开头,0-7
十六进制 0x开头,0-9 a-f
无穷大 infinity
// 十进制
var number1 = 1;
// 八进制
var number2 = 012;
// 十六进制
var number3 = 0x12// 无穷大
var number_infinity = iinfinity;

4.2 字符串

var string_1 = '字符串';

4.3 布尔

可取值:

  • true
  • flase

注意:首字母不大写

var boolean_1 = true;
var boolean_2 = false;

4.4 空null

  • 不占用内存
var nullObject = null

4.5 未定义undefined

  • 对象未定义,但占用内存
var undefinedObject = undefined;

4.6 保留字NaN

  • 指明这个对象不是数字
var nanObject = NaN;

4.7 查看对象类型

  • typeof()

4.8 集体变量声明

  • 多组变量用’ , '隔开
var numberObject = 1,arrayObject = [],dictObject = {};

注意:声明变量的时候,不用var也可以

5 基本数据类型转换

5.1 数字转字符串

5.1.1 String

var numberObject = 123;
var stringObject = String(numberObject);
>> '123'

5.1.2 toString

var numberObject = 123;
var stringObject = numberObject.toString();
>> '123'

5.2 字符串转数字

注意:

  • 字符串的范畴大于数字,所以不一定都能转换成功

5.2.1 Number

var stringObject1 = '123.456'
var stringObject2 = '1a2b3c.567';

var numberObject1 = Number(stringObject1);
>> 123.456
var numberObject2 = Number(stringObject2);
>> NaN

说明:

  • 如果字符串是"数字字符串",可以转换成功
  • 如果字符串中有除了数字的其他字符,结果为NaN

5.2.2 parseInt

var stringObject1 = '123.456';
var stringObject2 = '1a2b3c.456';
var stringObject3 = 'a12b3c.456';

var numberObject1 = parseInt(stringObject1);
>> 123
var numberObject2 = parseInt(stringObject2);
>> 1
var numberObject3 = parseInt(stringObject3);
>> NaN

说明:

  • 从左开始把字符串转换成数字(不包括"."),遇到不能转换的字符结束
  • 如果第一个字符就不符合规则,返回NaN

5.2.3 parseFloat

说明:同parseInt类似,但可以返回浮点数

5.3 转布尔 Boolean

ret = Boolean(【被转换的对象】)
类型 转换结果
null、undifined、0、空对象 false
空数组、空字典、空对象 true

6 运算符

6.1 算数运算符

运算符 描述
+
-
*
/
% 求余数
++ 累加
-- 递减

6.2 赋值运算符

运算符
=
+=
-=
*=
/=
%=

6.3 比较运算符

运算符 说明
== 值等于,1 == ’1‘ true
=== 全等于,1=== ’1‘ false
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于

6.4 逻辑运算符

运算符 说明
& 非短路与
| 非短路或
&& 短路与
|| 短路或
!

注:

  • 短路是指一旦前面的条件不满足,就不会再检验后面的条件

7 判断

7.1 if

if (条件){
	//代码
}elif (条件){
	//代码
}else{
	//代码
}

7.2 三元表达式

格式:

  • 【条件】?【条件成立执行的代码】:【条件不成立执行的代码】;
1 == '1'?alert('条件成立'):alert('条件不成立');

7.3 switch

var a = '2';
switch (a) {
	case '1':
		alert('a = 1');
		break;
	case '2':
		alert('a = 2');
		break;
	default:
		alert('如果case都不满足,执行')
}

8 循环

8.1 for

for (var i = 0 ; i < 5 ; i++ ){
	alert(i);
};
/*相当于:
for i in range(0,5):
	print(i)
*/

8.2 while

while (i < 5){
	alert(i);
	i ++;
};	

8.3 do while

var i = 1;
do {
	alert(i);
	i ++;
}while(i < 1);

9 循环

9.1 try catch finally

try{
	//执行一个有错误的代码
	var a = document.getElementById('aa')[0];
}catch (error){
	alert(error)
}finally{
	alert('finally')
}

注:

  • error是异常的原因

9.2 手动抛异常 throw

try{
	throw '异常原因';
}catch (error) {
	alert(error);
}

注:

  • throw后面的内容会传递给error

10 函数

10.1 普通函数

10.1.1 第一种创建方式

var func = function(param1,param2 = 2){
	//函数内容
};

10.1.2 第二种创建方式

function func(param1,param2 = 2){
	//函数内容
};

10.2 匿名函数

window.onload = function(){
	// do something
};

11 事件

11.1 事件种类

注:

  • 加粗的命令是经常使用的

11.1.1 焦点

命令 说明
onfocus 元素获得焦点
onblur 元素失去焦点

11.1.2 鼠标

命令 说明
onclick 鼠标单击对象
ondbclick 鼠标双击对象
onmousedown 鼠标按下
onmouseup 鼠标按键抬起
———————— ————————
onmouseover 鼠标移动某个元素上
onmouseout 鼠标从某个元素移开
onmousemove 鼠标移动

11.1.3 键盘

命令 说明
onkeydown 某个键被按下
onkeypress 某个键被按住
onkeyup 某个键被抬起

11.1.4 加载

命令 说明
onload 对象完成加载
onabort 图像加载被中断
onerror 加载文档或图像时发生某个错误

11.1.5 其他

命令 说明
onchange 域的内容被改变
onsubmit 表单提交
onreset 表单被重置
onresize 窗口或框架被调整尺寸

11.2 事件的调用

11.2.1 html中调用事件

<head>
	<script type="text/javascript">
		var func = function(){
			alter('事件被触发了');
		};
	</script>
</head>
<body>
	<input type='text' onfocus='func()'>
</body>

11.2.2 js中调用事件

<head>
	<script type='text/javascript'>
		window.onload = function(){
			var inputElement = document.getElementById('input_id');
        	inputElement.onblur = function(){
            	alert('事件触发了');
        	};
		};
	</script>
	<body>
		<input type='text' id='input_id'>
	</body>
<head>

11.3 表单提交的处理

11.3.1 通过js提交表单

<script type="text/javascript">
	window.onload = function(){
		var formElement = document.getElementById('form_id');
		var buttonElement = document.getElementById('button_id');
		buttonElement.onclick = function(){
			formElement.submit();
		};
	};
</script>
<body>
	<form action="//www.baidu.com" id="form_id">
		<input type="text" name="username">
		<input type="button" value='js提交按钮' id="button_id">
	</form>
</body>

11.3.2 修饰submit

<head>
<script type="text/javascript">
    window.onload = function(){
        var formElement = document.getElementById('form_id');
        formElement.onsubmit = function(){
            alert('submit事件发生了');
            return false;   // return false阻止submit提交
        };
    };
</script>
</head>

<body>
    <form action='//www.baidu.com' id='form_id'>
        <input type='text' name='username'>
        <input type='submit' value='submit提交'>
    </form>
</body>

12 Number

12.1 设置小数点有效数 toFixed()

var numberObject = 300.198
console.log(numberObject.toFixed(1))
>> 300.2

12.2 指数计数法 toExponential()

var a = 300;
b = a.toExponential();
console.log(b);         
>> 3e+2

b = a.toExponential(1);
console.log(b);
>> 3.0e+2

12.3 格式化指定长度 toPrecision()

var a = 123456789;
b = a.toPrecision(6);
console.log(b);    
>> 1.23457e+8

12.4 命令总结

方法 说明
toString(radix) 数字转字符串(默认转成10进制的)
toLocaleString() 数字转字符串(本地格式)
toFixed(fractionDigits) 数字转字符串(指定有效小数位)
toExponential(fractionDigits) 转为指数计数法(指定有效小数位)
toPrecision() 数字格式化指定长度

13 String

13.1 大小写

命令 说明
big() 转大写(通过加入标签)
small() 转小写(通过加入标签)
toLowerCase() 转小写
toUpperCase() 转大写
toLocaleLowerCase() 转小写(本地格式)
toLocaleUpperCase() 转大写(本地格式)
var a = 'abcABC';
console.log(a.big());                    -->    '<big>abcABC</big>'
console.log(a.small());                  -->    '<small>abcABC</small>'
console.log(a.toLowerCase());            -->    'abcabc'
console.log(a.toUpperCase());            -->    'ABCABC'
console.log(a.toLocaleLowerCase());      -->    'abcabc'
console.log(a.toLocaleUpperCase());      -->    'ABCABC'

13.2 索引与切片

命令 功能
split(str) 分割字符串为数组
slice(start,end) 切片(数组和字符串都可以操作)
substring(start,end) 切片(只能操作字符串)
substr(start,length) 切片(起始索引和指定长度)
charAt(index) 返回指定索引的字符
charCodeAt(index)(了解) 返回指定索引字符的Unicode编码

13.2.1 分割split()

  • 简单例子
var a = '1,2';
ret = a.split(',');
console.log(ret);   
>> ['1','2']
  • 分割get请求的url,得到参数
var url = 'http://www.baidu.com/?username=name1&password=passwd1';
params = url.split('?')[1];
key_value_s = params.split('&');
for (var i = 0 ; i < key_value_s.length ; i ++){
    console.log(key_value_s[i].split('=')[1]);
}

13.2.2 切片 slice()、substring()、substr()

var a = '01234';
a_slice = a.slice(0,2);
console.log(a_slice);           -->    '01'
a_substring = a.substring(0,2);
console.log(a_substring);       -->    '01'
a_substr = a.substr(2,2);
console.log(a_substr);          -->    '23'

13.2.3 索引字符 charAt()、charCodeAt()

var a = '01234';
a_charAt = a.charAt(0);
console.log(a_charAt);           -->    '0'
a_charCodeAt = a.charCodeAt(0);
console.log(a_charCodeAt);       -->    48  (注意是Number类型)

13.3 检索

命令 功能
indexOf(str) 从前向后查找str对应的索引
lastIndexOf(str) 从后向前查找str对应的索引
var a = '110';
a_indexOf = a.indexOf('1');
console.log(a_indexOf);           -->    0
a_lastIndexOf = a.lastIndexOf('1');
console.log(a_lastIndexOf);       -->    1

13.4 正则

命令 说明
match 返回匹配成功的字符串(返回第一个)
search 返回搜索成功的字符串(返回第一个索引)
replace 替换(替换第一个)

13.5 连接字符串

命令 说明
concat(strs) 连接多个字符串(也可以操作数组)
“” + “” 字符串直接相加
var str1 = 'a';
var str2 = 'b';
var str3 = 'c';
str4 = str1.concat(str2,str3);
str5 = str1 + str2 + str3;
alert(str4);    -->    'abc'
alert(str5);    -->    'abc'

13.6 锚

  • anchor()

13.7 样式

命令 说明
fontsize() 指定尺寸显示字符串
fontcolor() 指定颜色显示字符串
bold() 粗体显示字符串
italics() 斜体显示字符串
blink() 显示闪动字符串
link() 字符串显示为链接样式
fixed() 以打印机文本方式显示字符串

14 RegExp

14.1 创建

14.1.1 attribute可取值

attribute 说明
i 执行对大小写不敏感的匹配
g 全局匹配
m 执行多行匹配

14.1.2 两种创建方式

格式:

  • var myPattern1 = new RegExp(pattern,attribute);
  • var myPattern2 = /【pattern】/【attribute】
var myPattern2 = /【pattern】/【attribute】

14.2 RegExp对象

方法 说明
compile(了解) 编译正则表达式
exec() 检索正则表达式,返回object对象
test() 检索正则表达式,有:true,没有:false

14.2.1 exec()

var a = '<div class="c1"></div><div class="c2"></div>';
var pattern= /<div.*?>/g;
ret = pattern.exec(a);
console.log(ret);
alert(ret[0]);
alert(ret.index);
alert(ret.input);

在这里插入图片描述
注意:

  • exec()方法中的pattern虽然加了g,表示全局搜索,单还是匹配到第一个就返回

14.2.2 test()

var a = '<div class="c1"></div><div class="c2"></div>';
var pattern= /<div.*?>/g;
ret = pattern.test(a);
console.log(ret);

14.3 String对象中的4个方法

命令 说明
search(pattern) 返回匹配成功的第一个索引
match(pattern) 返回匹配成功的字符串(返回第一个)
replace(pattern) 替换
split(pattern) 分割

14.3.1 search()

var a = '<div class="c1"></div><div class="c2"></div>';
var pattern = /<div.*?>/g;
var ret = a.search(pattern);
console.log(ret);

14.3.2 match()

var a = '<div class="c1"></div><div class="c2"></div>';
var pattern= /<div.*?>/g;
var ret = a.match(pattern);
console.log(ret);         --> ['<div class="c1">','<div class="c1">']

14.3.3 replace()

var a = '<div class="c1"></div><div class="c2"></div>';
var pattern= /<div.*?>/g;
var ret = a.replace(pattern,'===');
console.log(ret);

14.3.4 split()

  • 反String中的split()

15 数组array

15.1 创建

命令 说明
var arrayObject = new Array(); 创建一个空数组
var arrayObject = []; 同上
var arrayObject = new Array(1,2,3); 创建并赋值
var arrayObject = [1,2,3]; 同上
var arrayObject = new Array(size); 创建数组,并用添加size个undefined

注:

  • new可以不写

15.2 对象属性

属性 解释
length 数组中元素的数目
constructor(了解) 返回对创建次对象的数组函数的引用
prototype(了解) 有能力对对象添加的属性和方法
var arrayObject = new Array(10);
console.log(arrayObject.length);   -->    10

15.3 对象方法

15.3.1 进出栈

命令 说明
pop() 右侧出栈
push() 右侧进栈
shift() 左侧出栈
unshift() 左侧进栈
var arrayObject = [1,2,3];
console.log(arrayObject.pop());
arrayObject.push(4);
console.log(arrayObject.shift());
arrayObject.unshift(5);
console.log(arrayObject)
  • 结果:
    在这里插入图片描述

15.3.2 顺序

命令 说明
sort() 从小到大排序
reverse() 翻转
var arrayObject = [1,4,2];
console.log(arrayObject.sort());
console.log(arrayObject.sort().reverse());
  • 结果:
    在这里插入图片描述

15.3.3 切片

命令 说明
slice(start,end) 包括start,不包括end
var a = [0,1,2,3];
alert(a.slice(0,1));    -->    [0]

15.3.4 替换

命令 说明
splice(start,end,objs) 删除从start开始到end索引对应的元素,然后把objs添加进去
var a = [0,1,2,3];
a.splice(0,1,'a','b','c');
alert(a);    -->    ['a','b','c',2,3]

15.3.5 拼接

命令 说明
concat(arrays) 拼接数组
var arrayObject_1 = [1,2,3];
var arrayObject_2 = [4,5,6];
var arrayObject_3 = [7,8,9];
var arrayObject_4 = arrayObject_1.concat(arrayObject_2,arrayObject_3);
alert(arrayObject_4);    -->    [1,2,3,4,5,6,7,8,9]

15.3.6 转字符串

命令 说明
toString() 转字符串
toLocaleString() 转字符串(本地格式)
join(str) 用str拼接字符串
var arrayObject = ["1",2,3];
arrayObject_string = arrayObject.toString();
arrayObject_localeString = arrayObject.toLocaleString();
arrayObject_join = arrayObject.join('--');

console.log(arrayObject_string);        -->    '1,2,3'
console.log(arrayObject_localeString);  -->    '1,2,3'
console.log(arrayObject_join);          -->    '1--2--3'

16 Date

16.1 创建日期对象

var date = new Date();
console.log(date);
  • 结果:
    在这里插入图片描述

16.2 设置与取值

属性 关键字
年(四位数) FullYear
月(0-11)(一月:0,十二月:11) Month
日(1-31) Date
小时(0-23) Hours
分钟(0-59) Minutes
秒钟(0-59) Seconds
毫秒(0-999) Milliseconds
星期(0-6) Day
时间戳毫秒(1970.1.1—今) Time
功能 命令
本地时间取值 get【关键字】()
本地时间设置 set【关键字】()
世界时间取值 getUTC【关键字】()
世界时间设置 setUTC【关键字】()

注意:

  • 有getTime()和setTime()
  • 没有getUTCTime()和setUTCTime()

补充命令:

  • parse() 返回1970年1月1日到指定日期的毫秒数
  • UTC() 返回1970年1月1日到指定日期的毫秒数(世界时间)
  • getTimezoneOffset() 返回本地时间与世界时间的分钟差
var date = new Date();
year = date.getFullYear();
month = date.getMonth();
date_ = date.getDate();
hours = date.getHours();
minutes = date.getMinutes();
seconds = date.getSeconds();
milliseconds = date.getMilliseconds();
day = date.getDay();

console.log(year,month,date_);
console.log(hours,minutes,seconds,milliseconds);
console.log(day);
  • 结果:
    在这里插入图片描述

16.3 转字符串

命令 说明
toString() Date转字符串
toTimeString() Date中的时间转字符串
toDateString() Date中的日期转字符串
toLocaleString() Date转字符串(本地时间规则)
toLocaleTimeString() Date中的时间转字符串(本地时间规则)
toLocaleDateString() Date中的日期转字符串(本地时间规则)
var date = new Date();
date_toString = date.toString();
date_toTimeString = date.toTimeString();
date_toDateString = date.toDateString();
date_toLocaleString = date.toLocaleString();
date_toLocaleTimeString = date.toLocaleTimeString();
date_toLocaleDateString = date.toLocaleDateString();


console.log(date_toString);
console.log(date_toTimeString);
console.log(date_toDateString);
console.log('-------------------------');
console.log(date_toLocaleString);
console.log(date_toLocaleTimeString);
console.log(date_toLocaleDateString);
  • 结果:
    在这里插入图片描述

17 Math

17.1 对象属性

属性 说明
E e(≈2.718)
PI PAI(≈3.14)
LN2 2的自然对数(≈0.693)
LN10 10的自然对数(≈2.302)
LOG2E 2为底e的对数(≈1.414)
LOG10E 10为底e的对数(≈0.434)
SQRT2 2的平方根(≈1.414)
SQRT1_2 2的平方根的倒数(≈0.707)
e = Math.E;
pi = Math.PI;
ln2 = Math.LN2;
ln10 = Math.LN10;
log2e = Math.LOG2E;
log10e = Math.LOG10E;
sqrt2 = Math.SQRT2;
sqrt1_2 = Math.SQRT1_2;

console.log(e);
console.log(pi);
console.log(ln2);
console.log(ln10);
console.log(log2e);
console.log(log10e);
console.log(sqrt2);
console.log(sqrt1_2);
  • 结果:
    在这里插入图片描述

17.3 对象方法

17.3 算数运算

命令 说明
exp(x) e的指数
log(x) x的自然对数
sqrt(x) 平方根
abs(x) 绝对值
max(x,y) 取最大值
min(x,y) 取最小值
round(x) 四舍五入
ceil(x) 上舍入
floor(x) 下舍入

17.2.2 三角函数

命令 说明
acos(x) 反余弦
asin(x) 反正弦
atan(x) 反正切
cos(x) 余弦
sin(x) 正弦
tan(x) 正切

17.2.3 随机数

命令 说明
random() 0-1的随机数

18 Function

18.1 顶层函数

18.1.1 编码

命令 说明
decodeURI() 解码某个编码的URI
decodeURIComponent() 解码某个编码的URI
encodeURI() 把字符串编码为URI
encodeURIComponent() 把字符串编码为URI组件
escape() 对字符串进行编码
unescape() 对escape()编码的字符串解码

18.1.2 运行字符串

命令 说明
eval 把字符串作为脚本来执行

18.1.3 转换类型

命令 说明
Number() 把对象转成数字
parseInt() 转成整数
parseFloat() 转成浮点数
String() 转成字符串

18.1.4 getClass()

命令 说明
getClass() 返回一个JavaObject的JavaClass

18.1.5 infinite和NaN的判断

命令 说明
isFinite() 检查是否是无穷大
isNaN() 检查是否是数字

18.2 顶层属性

命令 说明
Infinity 无穷大
java 代表java.*,包层级的一个JavaPackage
NaN 指示某个值是不是数字
Packages 根JavaPackage对象
undefined 指示未定义的值

19 Object

19.1 创建

var a = new Object();         //(new可以不写)

19.2 特殊用法

var a = Object();
a.func = function(){
    // do something
};
a.array = [1,2,3];
alert(a.array[1]);

20 Json

JSON 语法是 JavaScript 对象表示法语法的子集。

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组
var myJson = {
    "employees": [
                    { "firstName":"Bill" , "lastName":"Gates" },
                    { "firstName":"George" , "lastName":"Bush" },
                    { "firstName":"Thomas" , "lastName":"Carter" }
    ]

21 DOM

21.1 DOM树

在这里插入图片描述

21.2 节点

21.2.1 节点的含义

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

21.2.2 父节点、同胞节点、子节点

<div id='id1' class='class1'>
    <div id='id1_1' class='class2'>
    </div>
    <div id='id1_2' class='class2'>
        <a href='//www.baidu.com'>baidu</a>
        <a href='//www.taobao.com'>taobao</a>
    </div>
    <div id='id1_3' class='class2'>
        <a href='//www.vip.com'>vip</a>
    </div>
</div>

对于 <div id=“id1_2”>来说:

  • 父节点(parent):
    • parentNode:
  • 同胞节点(sibling):
    • 上一个同胞节点previoussibling:
    • 下一个同胞节点nextsibling:
  • 子节点(child):
    • 第一个子节点firstChild:
    • 最后一个子节点lastChild:

没有父节点的节点叫做根节点(root)

21.3 常用属性

命令 说明
parentNode(或者parentElement) 节点的父节点
childNodes(注意换行也是一个子节点) 节点的子节点
firstChild 第一个子节点
lastChild 最后一个子节点
attributes 节点的属性节点
innerHTML 节点内的内容
innerText 节点内的文本
nodeName 节点名字
nodeValue 节点属性值
nodeType 节点属性

21.3.1 父节点和子节点 parentNode和childNodes

element_id1_2 = document.getElementById('id1_2');
element_id1_2_parentNode = element_id1_2.parentNode;
element_id1 = document.getElementById('id1');
console.log (element_id1 === element_id1_2_parentNode);

element_id1_2_childNodes = element_id1_2.childNodes;
console.log(element_id1_2_childNodes);
  • 结果:
    在这里插入图片描述

21.3.2 属性节点 attributes

element_id1_2 = document.getElementById('id1_2');
attributes = element_id1_2.attributes;
console.log(attributes);
  • 结果:
    在这里插入图片描述

21.3.3 节点内容innerHTML(重点)

element_id1_2 = document.getElementById('id1_2');
html = element_id1_2.innerHTML;
console.log(html);
element_id1_2.innerHTML = '<a href = "#">空链接</a>';
html = element_id1_2.innerHTML;
console.log(html);
  • 结果:
    在这里插入图片描述

21.3.4 节点文本 innerText(区别innerHTML)

element_id1_2 = document.getElementById('id1_2');
text = element_id1_2.innerText;
console.log(text);
  • 结果:
    在这里插入图片描述

21.4 常用方法

21.4.1 得到节点

命令 说明
getElementById() 根据id返回节点
getElementsByTagName() 根据标签名字返回节点集合
getElementsByClassName() 根据class返回节点集合
element_div_id1 = document.getElementById('id1');
element_div_s = document.getElementsByTagName('div');
element_div_class2 = document.getElementsByClassName('class2');

console.log(element_div_id1);
console.log(element_div_s);
console.log(element_div_class2);
  • 结果:
    在这里插入图片描述

21.4.2 创建

命令 说明
createAttribute() 创建属性节点
createElement() 创建元素节点
createTextNode() 创建文本节点
——————————————————— ———————————————————
appendChild() 添加子节点
removeChild() 删除子节点
replaceChild() 替换子节点
insertBefore(插入的节点,引用的节点) 在指定子节点前插入新的子节点
insertAfter(插入的节点,引用的节点) 在指定子节点后插入新的子节点
——————————————————— ———————————————————
getAttribute() 返回指定的属性值
setAttribute() 把指定属性设置或改为指定的值
setAttributeNode() 设置属性节点
  • 添加案例1
var new_element = document.createElement('a');
new_element.setAttribute('href','#');

var text_node = document.createTextNode('新的链接');
new_element.appendChild(text_node);

element_div_1_1 = document.getElementsByClassName('class2')[0];
element_div_1_1.appendChild(new_element);

在这里插入图片描述

  • 添加案例2
var new_element = document.createElement('a');

var attribute = document.createAttribute('href');
attribute.value = '#';

var text_node = document.createTextNode('新的链接');

new_element.setAttributeNode(attribute);
new_element.appendChild(text_node);

element_div_1_1 = document.getElementsByClassName('class2')[0];
element_div_1_1.appendChild(new_element);
  • 添加案例3
element_div_1_2 = document.getElementsByClassName('class2')[1];
var new_element = document.createElement('a');
var textNode = document.createTextNode('新的链接');
new_element.appendChild(textNode);
new_element.setAttribute('href','#');

element_div_1_2.insertBefore(new_element,element_div_1_2.firstChild);
  • 删除案例1
element_div_1_2 = document.getElementsByClassName('class2')[1];
element_div_1_2.removeChild(element_div_1_2.childNodes[1]);
  • 删除案例2
element_a = document.getElementsByTagName('a')[0];
element_a.parentNode.removeChild(element_a);

22 Bom

22.1 window尺寸和windos.screen

命令 说明
window.innerHeight 浏览器窗口内置高度
window.innerWidth 浏览器窗口内置宽度
——————————————————— ———————————————————
window.screen.availHeight 可用的屏幕高度(可以不写window)
window.screen.availWidth 可用的屏幕宽度(可以不写window)

22.2 window.location

命令 说明
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.href 返回整个页面的url
location.port 返回web主机的端口号
locaiton.protocol 返回时用的web协议(http或者https)
location.assign() 加载新文档
location.open() 打开新的网页

22.3 跳转

22.3.1 location.href

location.href = '//www.baidu.com';

在这里插入图片描述

22.3.2 window.open()

window.open('//www.baidu.com');

22.3.3 location.assign()

location.assign('//www.baidu.com');

22.3.4 延时跳转

var func = function(){
    location.href = '//www.baidu.com';
};
setTimeout(func,3000);

22.4 history

命令 说明
history.back() 后退
history.forward() 前进

22.5 popupAlert

命令 说明
alert() 警告框
confirm() 确认框
prompt() 输入框

22.6 timing

命令 说明
setTimeOut(【js语句】,【毫秒】) 计时
clearTimeOut(【计时器】) 清除计时
<head>
	<script type="text/javascript">
		var func1 = function(){
    		t = setTimeout('alert("弹出内容")',2000);
		};
		var func2 = function(){
    		clearTimeout(t);
		};
	</script>
</head>

<body>
<input type="button" value='setTimeOut' onclick='func1()'>
<input type="button" value='clearTimeOut' onclick='func2()'>
</body>

猜你喜欢

转载自blog.csdn.net/kzl_knight/article/details/90638725