一、JavaScript概述
一、什么是JavaScript
JavaScript简称JS,是一种专门运行于JS解释器/引擎中的解释型脚本语言
二、JS发展史
一、1992年Nombas公司开发了一款运行在网页中的脚本语言,名称为CMM(c--),后来改名为ScriptEase
二、1995年Netscape(网景)为本身的浏览器Navigator2.0开发了另外一款脚本语言(LiveScript),改名为JavaScript
三、1996年,Microsoft为本身的IE3.0,发布了JavaScript的克隆版本JScript
四、1997年,Netscape找到了ECMA(欧洲计算机制造商协会),将JS提交给了ECMA。今后JS的核心改名为EMCA Script简称ES
JS的组成:
一、核心—EMCA Script:包含了JS的最基本的语法规范
二、文档对象模型(Document Object Model)简称DOM
容许JS操做HTML网页上的内容
DOM的规范是有W3C来制定的
三、浏览器对象模型(Browser Object MOdel)简称BOM
容许JS操做浏览器
二、使用JS(JS引用)
一、使用元素事件执行JS脚本代码
事件:用户在元素上所激发的行为操做
一、onclick事件:当用户点击元素时作的操做
语法:
<ANY onclick="JS脚本代码">
JS脚本代码:
console.log('向控制台中输出的内容');
二、嵌入在网页中的<script></script>
语法:<script></script>在任何位置均可以
特色:
网页加载的时候就开始执行
document.write():向网页输出一句话
注意:若是经过按钮的单击事件执行document.write()的话,则会刷新网页内容
示例:
<script>
document.write("<h1>hello world<h1>")
<script>
三、将JS脚本写在外部的JS文件中
步骤:
一、建立JS文件(XXX.js)并编写脚本
二、在网页中对js文件进行引入
<script src="js文件路径">此处不能写js代码</script>
三、JS基础语法
一、语法规范
一、JS都是由语句组成的
一、由运算符,表达式,关键字组成的称为语句
二、严格区分大小写
三、每条语句必须以;分号表示结束
二、JS中的注释
一、单行注释://注释内容
二、多行注释:/*注释内容*/
四、JS中的变量 和 常量
一、变量
一、声明变量的语法
声明:var 变量名;
赋值:变量名 = 值;
声明并赋值:var 变量名=值;
注意:
一、声明变量时,尽可能使用var关键字,若是省略,也能够,可是容易处问题(全局污染)
二、声明变量但未赋值的话,默认值为undefined
二、变量名的命名规范
一、不能使用JS中的关键字或保留关键字
二、有字母,数字,下划线(_)和$组成
三、不能以数字开头
四、尽可能不要重复
五、尽可能见名知意
六、如无特殊需求(团队要求)的话,尽可能使用小驼峰命名法
二、常量
一、什么是常量:一经声明就不容许修改的数据就是常量
二、语法
const 常量名 = 值;
注意:常量名采用全大写的形式
五、数据类型
一、做用:约束了数据在内存中所占空间大小问题的
二、JS数据类型分类
一、基本数据类型(值类型)
一、number类型
数字类型,能够表示32位的整数或64位的浮点数
整数:
表示十进制,八进制,十六进制
十进制:var num = 111;
八进制:var num = 010;
十六进制:var num = 0x10;
小数:
小数点计数法:var num = 123.456;
科学计数法:var num = 1.5e2;
二、string类型(所占内存为2-4字节)
字符串:都是由Unicode的字符,数字,标点组成的
一、查看字符的Unicode码(能够根据的Unicode码对应的二进制判断所占内存(多少字节))
var str = "张三丰";
var uCode =str.charCodeAt(0).toString(2)
二、若是将Unicode码转换成对应的字符(只能转16进制的,若是是二进制或八进制须要先转换成16进制)
已知Unicode码:5f20
var str = '\u5f20';
console.log(str);
三、文中范围
'\u4e00'~'\u9fa5'
四、转义字符
\n: 换行
\t: 制表符
\": "
\': '
\\: \
三、boolean类型
布尔类型,只用于表示真(true)或假(false)
注意:
在参与数字运算时,true当作1运算,false当作0
四、查看数据类型
使用typeof() 或 typeof 均可以查看变量的数据类型
二、引用数据类型
三、数据类型转换
一、隐式转换
不一样类型的数据在左加法运算时,会进行自动转换
一、字符串+数字:将数字转换为字符串
var num = 15;
var str = ‘18’;
var r = num+str;//1518
var r = '15'+18+15;//151815
var r = 15+18+'15';//3315
二、数字+布尔:将布尔转为数字作加法(true转为1,false转为0)
三、字符串+布尔:将布尔转为字符串作链接
var boo = true;
var str = ‘Hello’;
var r = boo+str;//trueHello
四、布尔+布尔:都转为数字作加法运算
二、强制转换(转换函数)
一、toString():将任意类型的数据转为字符串,并返回转换后的结果
语法:
var r = 变量.toString();
var r = 变量+'';
二、parseInt()
做用:将指定的数据尽可能转换为整数,若是实在没法转换的话,则返回NaN(Not a Number)
示例:
一、var r = parseInt(‘456’);
r:456
二、var r = parseInt(‘123.556’);
r:123
三、var r = parseInt(‘123Hello’);
r:123
四、var r = parseInt(‘hello123’);
r:NaN
三、parseFloat()
做用:尽可能将任意类型的数据转为小数,若是实在没法转换的话,那么结果为NaN
示例:
一、var r = parseFloat('3.14');
r:3.14
二、var r = parseFloat('3.14hello');
r:3.14
三、var r = parseFloat('hello3.14')
r:NaN
四、Number()
做用:将任意类型的数据转为数字,只要包含非法字符,结果就是NaN
示例:
一、var r = Number('123hello');
r:NaN
六、运算符
一、算数运算符
一、+ - * / %
二、++ --
++:自增运算符,在自身基础上作+1操做
--:自减运算符,在自身基础上作-1操做
后缀:
var num = 10;
num++;
特色:先使用num的值,而后再作自增运算
var num = 10;
console.log(num++);输出10
console.log(num); 输出11
前缀:
var num = 10;
++um;
特色:先对变量进行自增,而后再使用变量的值
var num = 10;
console.log(++num);输出11
console.log(num); 输出11
练习:
var num = 5;
var result = num + ++num + num++ + ++num +num;
5 + (6)6 + 6(7) + (8)8 + 8
二、关系运算符(比较运算符)
> < >= <= == != === !==
一、10>5:true
二、'10'>5:true
运算符两端若是有一个是数字的话,那么另一个会自动转换(经过Number)成数字,再进行比较
三、'10a' > 5:false
四、"10a" < 5:false
NaN除了 != 运算时为true,其余都为false
五、"10" > "5":false
比较的是字符1的ASCII 和 字符5的ASCII
六、"张三丰" > "张无忌":false
比较三和无的Unicode码的大小
七、’10‘ == 10 :true
===、判断数值和数据类型必须全相等时才返回true
!==、只要数值或数据类型中有一个不相等即返回true
三、逻辑运算符
!:逻辑非,等同于python中的not
&&:逻辑与,and
||:逻辑或,or
四、为运算符
一、按位与 &:两个数字的二进制进行比较,对应位都为1,则该结果为1,不然 为0
场合:奇偶性验证,将一个数与1按位求与,结果为1则为奇数,不然为偶数
7 & 1 =1
7:111
1:001
二、按位或 |:只要有1即为1,
三、按位异或^:不一样则为1,相同则为0
场合:不借助第三方变换两个数字
示例:
var a = 3;
var b = 5;
a = a ^ b; 110
3:011
5:101
b = b ^ a; 011
b(5):101
a(6):110
a = a ^ b; 101
a(6):110
b(3):011
五、条件运算符(三目运算)
语法:?:
条件表达式 ? 表达式1 :表达式2;
当条件表达式的结果为true的时候,执行表达式1中的内容,并将表达式1的结果做为总体表达式的结果,不然执行表达式2
练习:
BMI计算器
一、分两次从弹框中输入数据
一、第一次:输入 身高(m)
二、第二次:输入 体重(kg)
二、计算bmi
bmi = 体重 /(身高*身高)
三、
若是bmi的值小于20,提示偏瘦
若是bmi的值大于25,提示偏胖
不然:提示正常
六、赋值运算符
+= -= *= /= ^=
a ^= b 等价于 a =
a^b
七、流程控制
一、程序控制结构
一、顺序结构
二、分支结构/选择结构
三、循环结构
二、分支结构
一、if结构
一、if结构
语法:
if(条件表达式){
语句块;
}
二、if...else结构
语法:
if(条件表达式){
语句块1;
}else{
语句块2;
}
三、if ...else if...结构
语法:
if(条件表达式){
语句块1
}else if(条件表达式2){
语句块2;
}else if(条件表达式n){
语句块n;
}else{
语句块n+1;
}
练习:
一、分三次从弹框中输入年,月,日
二、判断该日是概念的第几天
二、switch结构
一、做用:等值判断
二、语法
switch(变量){
case 值1:
语句块1;
break;//跳出switch结构,能够选
case 值:
语句块2;
break;//跳出switch结构,能够选
.......
default:
语句块n;
/*全部case都未匹配上时,才执行default*/
}
注意:
一、变量 和 case后的值的判断,采用===来判断的
二、break,若是省略break的话,则从匹配的case块开始,依次向下执行(执行下面全部case块的内容,或default块内容)直到碰见break或执行结束
三、练习:
从弹框中输入1-7任意一个数字表示1-星期日
输入1:今天吃红烧肉
输入2:今天吃红烧鱼
输入3:今天吃清蒸甲鱼
输入4:今天吃红烧皮皮虾
输入5:今天吃红烧排骨
输入6:今天休息
输入7:今天休息
其余:输入有误!
三、循环结构
一、做用:重复执行相同或类似的代码
二、循环的二要素
一、循环条件:循环从何时开始,到何时结束
二、循环操做:循环中要作的事情(要执行的代码)
三、while循环
一、语法
while(循环条件){
循环操做
}
流程:
一、判断循环条件(boolean值/表达式)
二、若是条件为真,则执行循环操做
2.一、执行完操做后,再回来判断条件
三、若是条件为假,则退出循环
四、do...while循环
语法:
do{
循环操做;
}while(条件);
流程
一、先执行循环操做
二、再判断循环条件
三、若是条件为真,再继续执行循环条件,当条件为假时结束循环
五、循环的流程控制
一、break:跳出循环结构
二、continue:结束本次循环,继续执行下次循环
六、for循环
一、while
打印1-100之间的全部数字
var i = 1;//循环条件的初始化
while(i <= 100){//循环条件的判断
console.log(i);//循环操做
i++;//更新循环条件
}
二、语法:
for(表达式1;表达式2;表达式3){
循环操做;
}
表达式1:循环条件的初始化
表达式2:循环条件的判断
表达式3:更新循环条件
流程:
一、先执行表达式1,即循环条件初始化(执行1次)
二、判断表达式2的值,true 或 false
三、若是表达式2的结果为true则执行循环操做,若是为false则退出循环
四、执行循环操做后,再执行表达式3
五、再判断表达式2,同步骤2
for(var i = 1; i<=100; i++){
console.log(i)
}
七、循环嵌套
容许在一个循环中再出现另外一个循环
for(var i=1; i<=10;i++){//外层循环
for(var j=1;j<1=0;j++){//内层循环
}
}
外层循环走一次,内层循环走一轮
八、函数-function
一、函数的声明
function 函数名(参数列表){
函数体
}
一、参数列表
参数列表,容许声明0或多个参数,多个参数的话使用,逗号隔开,没有默认参数
二、返回值
返回值是可选的,若是须要返回值的话,经过return 值;进行返回
二、函数调用
在任意JS的合法位置处,都容许作函数调用
函数名(参数列表);
三、由ES提供的函数(内嵌函数)
在网页中无需声明,就能够直接使用
parseInt()/parseFolat()/Number()
一、isNaN(value):判断value是否为非数字,返回true表示不是数字,返回false表示是数字
示例:
一、isNaN(1)//false
二、isNaN(‘1’)//false
三、isNaN(‘hello’)//true
二、eval():执行由字符串来表示的JS代码
四、局部变量与 全局变量
一、全局变量:一经声明,在JS的任何位置处都能使用的变量就是全局变量
一、在<script></script>内部在函数体外边
二、或则在函数内部不适用var声明的变量也是全局变量(不建议使用)
二、局部变量:使用var关键字,而且声明在function中的变量
局部变量的做用于只在声明的函数内,出了函数就不能使用
九、数组(在python中称为列表)
一、什么是数组
数组(Array)是一个用于保存批量数据的结构,即一个变量中容许保存多个数据。是按照线性结构的方式来保存数据的
说明:字符串与数组相加,会将数组准变为字符串
示例:
‘names’+['张无忌','张翠山','张三丰','金毛狮王']
names张无忌,张翠山,张三丰,金毛狮王
二、建立数组
一、建立一个空数组
var 数组名 = [];
二、建立数组并初始化元素
var 数组名 = [元素1,元素2,... ,...];
三、建立一个空数组:
var 数组名 = new Array();
四、建立数组并初始化元素
var 数组名 = new Array(元素1,元素2,... ,...);
三、数组的使用
获取 或设置数组中的元素,一概都使用下标
下标范围:从0开始,到元素个数-1为止,若是超出下标不会报错,而是返回undefined
一、向获取元素的第二个元素
数组名[1];
二、为数组元素赋值
数组名[下标] = 值;
说明:若是下标越界,会将越界的下标赋值,前面的为undefined(空empty)
四、获取数组的长度
属性:length
用法:数组名.length;
使用场合:
一、配合循环,遍历数组中的每一个元素
二、可以找到数组中,最新要插入元素的位置
五、关联数组
一、什么是关联数组
JS中数组分为索引数组 和 关联数组
索引数组:由数字作下标
关联数组:由字符串作下标
二、声明和使用关联数组
var names = [];
names['x'] = '西游记';
names['y'] = '红楼梦';
三、注意
length只能统计索引数组,不能统计关联数组
四、使用for ... in遍历数组
可以遍历数组中全部的数字下标和字符串下标
for(var 变量 in 数组){
变量:数组中全部的数字下标和字符串下标(变量为字符串)
}
六、数组的经常使用API
一、toString():将数组转换为字符串并返回
console.log(['aa','bb','cc'].toString())//aa,bb,cc
二、join(seperator):返回一个由指定链接符链接的数组元素的字符串,链接符不能数\反斜杠,默认是逗号
console.log(['aa','bb','cc'].join('|'))//aa|bb|cc
三、concat
(arr,arr2,...):拼接多个数组到一块儿,并返回拼接后的结果
注意:该函数并不会改变数组,而是返回拼接后的一个副本
四、reverse():反转
语法:arr.reverse()
注意:该函数会改变现有数组的结构
五、sort():排序,默认状况下,按照元素的Unicode码进行排序(升序)
注意:该函数会改变现有数组的结构
容许经过自定义的排序函数来指定数字的排序规则
语法:arr.sort(排序函数名);
一、指定排序函数
function sortAsc(a,b){将数组的值依次传递给a,b
return a-b;//返回值大于0则交换a b的位置,
}
二、调用arr.sort(sortAsc)
三、使用匿名函数
arr.sort(function(a,b){a,b});
六、进出栈操做
栈式操做:提供了快速操做数组头部或尾部的方法
一、push():入栈,向数组的尾部添加新元素,并返回新数组的长度
二、pop():出栈,删除并返回数组尾部的元素
三、unshift():向数组头部增长新元素并返回新数组的长度
四、Shift():删除并返回数组头部的元素
七、二维数组
一、什么是二维数组
数组中的数组,在一个数组中的每一个元素又是一个数组
二、声明二位数组
var names = [['aa','bb'],['cc',dd]];
names[0][1] = 'bb'
十、字符串-string
一、声明字符串
一、var str1 = '字符串1';
二、var str2 = String(’字符串2‘);
三、var str3 = new String(’字符串3‘);
二、length-属性
做用:返回当前字符串中字符的个数
三、经常使用函数-string API
一、大小写转换函数
一、toUpperCase():返回字符串的彻底大写形式
二、toLowerCase():返回字符串的彻底小写形式javascript
String.prototype.equalsIgnoreCase = function (str) { if (str == null) return false; return this.toLowerCase() === str.toLowerCase(); }; //定义字符串忽略大小写比较的函数 "a".equalsIgnoreCase("A") //true
二、获取指定位置的字符 或 Unicode码
一、charAt(index):返回指定下标位置处的字符
二、charCodeAt(index)返回指定下标位置处的字符的Unicode码(十进制)
三、检索字符串
一、做用:查询子字符串在指定字符串中的起始下标
二、函数
一、indexOf(value,fromIndex)
value:要查询的子字符串
fromIndex:从哪一个位置处开始查,若是省略的话,则从头查找
返回值:返回第一次出现子字符串的下标,若是为找到,则返回-1
二、lastIndexOf(value,fromIndex)
做用:查找value最后一次出现的下标
注意:该函数的查找方式是从后向前找
fromIndex若是省略,则将从字符串的最后一个字符处开始检索
示例:
'avcdbabcd'.lastIndexOf('cd',7)//7
说明:若是在下标为7的位置上匹配到字符串的头部,则会继续向后面判断剩余部分是否能够匹配到
四、截取子字符串
函数:substring(start,end)
做用:返回从start到end-1之间的子字符串,若是end省略表示截取到字符串的结尾
五、分割字符串
函数:split(seperator)
做用:将字符串,经过seperator拆分红一个数组
六、模式匹配
一、做用:配合正则表达式来完成字符串的查找和替换...
二、正则表达式
语法:/正则表达式/修饰符
示例:/\d{6}/gim
修饰符:
i:忽略大小写匹配(Ignorcase)
g:全局匹配(Global)
m:容许多行匹配(Multiple)
三、函数
一、replace(substr/regexp,replacement)
做用:使用replacement替换substr/regexp的内容,并返回一个替换后的字符串
二、match(substr/regexp)
做用:返回知足substr 或 regexp格式的字符串,将这些字符串放在数组中进行返回
三、serach(substr、regexp)
做用:返回知足substr或regexp格式的子字符串第一次出现的下标。如为未找到,则返回-1
注意:search函数不支持全局匹配,将自动忽略g css
function combine(baseurl, pathname) { //bsaeurl是否以/结尾,pathname是否以/开始,拼接baseurl和pathname const separator = (/\/$/.test(baseurl) === false && /^\//.test(pathname) === false) ? '/' : '' return Array.prototype.slice.call(arguments, 0).join(separator) }
十一、其余内置对象
一、JS的对象分类
一、内置对象—ES提供
String,Array,... ...
二、外部对象
一、window(BOM)浏览器对象
二、document(DOM)文档对象
三、自定义对象
function 就是一个自定义对象
二、RegExp对象
RegExp:Regular Expression - 正则表达式
一、建立RegExp对象
一、var regExp = /匹配模式/修饰符;
二、var regExp = new RegExp(‘匹配模式’,‘修饰符’);
二、RegExp对象方法
一、regExp.test(string)
string:要验证的字符串,若是string符合regExp格式的话,返回true,不然返回false
三、Math对象
一、做用:执行与数学相关的运算和数据
二、属性:
Math.PI,
Math.E
三、函数
一、三角函数
Math.sin(x)
Math.cos(x)
Math.tan(x)
二、计算函数
Math.sqrt(x):开方
Math.log(x):对数
Math.pow(x,y):求x的有次方
三、数字比较函数
Math.abs(x):绝对值
Math.max():最大值
Math.min():最小值
Math.random():返回0-1之间的随机小数,包括0但不包括1
Math.round(x):将x四舍五入
四、Date对象
一、建立Date对象
一、获取当前系统日期时间
var now = new Date();
二、初始化自定义日期时间对象
var date = new Date(‘2018//01/01’);
二、函数
一、读取或设置当前时间的毫秒数
一、getTime():返回自1900-1-1 00:00:00以来的毫秒数
二、setTime(毫秒数):
二、读取时间份量函数
一、getFullYear():获取日期时间对象的年份
二、getYear():获取自1900年以来到当前日期时间对象所通过的年数
三、getMonth():返回0-11的数字来表示1-12月
四、getDate():返回当前日期对象对应的日
五、getDay():返回当前日期对象所对应的日期,0-6来表示星期日-星期六
六、获取时间
一、getHourse():
二、getMinutes():
三、getSeconds();
四、getMilliseconds():获取毫秒
七、转换为字符串
一、toString()
"Mon Aug 13 2018 12:14:38 GMT+0800 (CST)"
二、toLocaleString()
"2018/8/13 下午12:14:59"
三、toLocalTimeString()
"下午12:15:22"
四、tolocalDateString()
"2018/8/13"
十二、外部对象
一、BOM 和DOM
BOM:Browser Object Model-浏览器对象模型
DOM:Document Object Model-文档浏览器对象模型
二、BOM
一、做用:表示浏览器窗口,BOM提供了一个核心对象-window
二、window对象的使用
window对象会包含若干属性 和 方法
属性:document,location,history,navigator,screen
方法:alert(),prompt(),...
调用window对象的属性和方法时,能够省略window.不写
window中的对话框
一、警告框:window.alert()/ alert()
二、输入框:window.prompt()/ prompt()
三、确认框:window.confirm()/ confirm,按‘确认‘按钮的话,返回true,不然返回false
window中的定时器
一、定时器分类
一、周期性定时器:每隔必定时间就会执行一遍指定程序,返回执行
二、一次性定时器:在指定的时间间隔以后,只执行一次操做
二、周期性定时器
一、声明定时器
var ret = setInterval(fun,time);
fun:要周期性执行的操做,能够是匿名函数
time:时间间隔周期,以毫秒为单位
ret:返回已经建立好的定时器对象(用于中止定时器)
二、清除定时器
clearInterval(timer)
timer:建立好的,要中止的定时器对象
三、一次性定时器
一、声明一次性定时器
var ret = setTimeout(fun,time);
fun:指定时时间间隔后要执行的操做
time:时间间隔,以毫秒为单位
ret:返回已经启动的定时器对象
二、清除定时器
clearTimeout(timer);
timer:建立好的,要中止的定时器对象
Window的属性(了解)
一、screen:获取客户端显示器的相关信息
属性:
一、width/ height
二、availWidth/ availHeight
二、history:
一、做用:包含当前窗口所访问过的url地址
二、属性 和方法
一、属性
length:访问过的URL的数量
二、方法
一、back():后退
二、forward():前进
三、go(num):去往历史记录中的第num个页面
go(1)至关于forward
go(-1)至关于back
三、location
一、做用:表示浏览器地址栏上的信息
二、属性和方法
一、href:表示当前窗口中正在浏览的网页的地址,若是href设置值的话,则至关于浏览器页面跳转的功能
二、reload():从新加载当前页面,等同于刷新
四、navigator
一、做用:包含浏览器的相关信息
二、属性
一、userAgent:显示浏览器相关信息("Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0")
三、DOM-document对象(重点)
一、document的概述
document对象,是DOM中的顶级对对象。封装了和HTML相关的属性,方法和事件。
在网页加载HTML的时候,会在内存中生成一棵节点树(DOM树),DOM树的根就是document
每一个元素其实都是DOM树上的一个节点
DOM中所提供的操做:
一、查找节点的信息
二、读取节点的信息
三、修改节点的信息
四、删除节点的信息
五、建立节点的信息
二、查找节点
一、经过元素的id查找节点
var elem = document.getElementById("元素ID");
元素ID:要获取的元素的ID
elem:所获得的元素的对象-DOM对象/元素,若是没有找到匹配的元素,则返回null
DOM对象的经常使用属性
一、innerHTML:获取 或设置当前DOM对象的HTML文本值,会获取标签
二、innerText:获取 或设置当前DOM对象的文本值,只获取文本不获取标签
三、value:获取 或设置表单控件对象的值
说明:value获取的值只是表单控件框中输入的值,设置值也只是设置表单控件框中的值,不会改变value的默认值
二、经过标签名查询
语法:document.getElementsByTagName(标签名);或则 elem.getElementsByTagName(标签名);
示例:
一、document>getElementsByTagName('p')//查找网页中全部的p元素
二、var div = document.getElementById('d1');
div.getElementsByTagName('p')//查找id为d1的div内部的p元素
返回值:由指定标签元素所组成的数组(列表)
三、经过元素的name属性值来查询节点(优先使用在 单选框 和 复选框中)
语法:document.getElementsByName()
返回值:返回由指定name值的元素所组成的数组
四、经过元素class值查询节点
语法:documnet.getElementsByClassName(className) 或 elem.getElementsByClassName(className)
返回值:由指定className值的元素组成的数组
五、根据节点的层级关系查询节点
一、parentNode:返回当前元素的父节点
二、childNodes:返回当前元素的全部子节点组成的数组(子节点元素节点,属性节点,文本节点(包括空格和回车)、注释节点,文档节点)
三、children:返回当前元素的子节点组成的数(子节点中只包含元素节点)
四、nextSibling:返回当前元素的下一个兄弟节点
五、nextElementSibing:返回当前元素的下一个兄弟元素节点
六、previousSibling:返回当前元素的上一个兄弟节点
七、previousElementSibling:返回当前元素的上一个兄弟元素节点
三、读取节点的信息
一、节点的类型
一、元素节点:表示页面上的一个元素
二、属性节点:表示页面上元素的一个属性
三、文本节点:表示页面上元素的一个文本内容(包含空格和回车)
四、注释节点:表示网页上的一个注释
五、文档节点:表示html文档
属性:nodeType
取值:
返回1:元素节点
返回2:属性节点
返回3:文本节点
返回8:注释节点
返回9:HTML文档(文档节点)
二、读取节点名称
属性:nodeName
返回值:
元素节点 和属性节点:返回元素名 或 属性名
文本节点:#text
文档节点:#document
注释节点:#comment
四、获取 或设置元素节点的方法
一、getAttribute(attrName)
做用:获取某元素指定的属性值
attrName:要获取的属性的名称
返回值attrName属性名对应的值
注意:获取的属性值,必需要在标签中编写出来,不然值为null
二、setAttribute(attrName,attrValue)
做用:修改指定属性的值
attrName:要修改的属性的名称
attrValue:要修改属性名的值
说明:setAttribute("value","aa")只会改变value的默认值,若是此时表单控件框中有值是不会被修改的。与getAttribute()联合使用,不要和value属性混合使用。
三、removeAttribute(attrName)
做用:将attrName属性从元素中删除出去
练习:
一、网页中建立一个a标记,内容为 百度 ,连接地址为https://www.baidu.com
二、网页中建立一个按钮,文本为修改
三、点击按钮时,将超连接的文本修改成 腾讯,将超连接的地址修改成 http:www.qq.com
五、元素的样式
一、使用setAttribute()设置class属性值
elem.setAttribute(“class”,”类选择器名称“);
二、使用元素的className属性修改class值
elem.className="类选择器";
三、自定义元素样式
elem.style.css属性 = 值 ;
注意:若是CSS属性名中包含-连字符的话,连字符要取消,而且-后面的第一个字符要变大写
elem.style.color = 'red';
elem.style.fontSize = "18px";
elem.style.borderRightColor = 'yellow';
六、增长节点
一、建立元素节点
var elem = document.createElement(”元素名“);
elem:表示建立好的DOM元素
二、增长节点
一、document.boby.appendChild(elem):向body中追加新元素elem,在body中的最后一个元素
二、parentNode.appendChild(elem):将elem追加到parentNode的内部
parentNode:表示的是已经存在的一个元素
三、parentNode.insertBefore(newElem,oldElem)
将newElem元素插入到parentNode中oldElem以前
说明:建立一个元素节点,只能增长一次,不能屡次增长该元素
七、删除节点:
删除节点只能由父元素来发起
一、document.body.removeChild(elem):删除body中的elem元素
二、parentNode.removeChild(elem):在parentNode中删除elem元素
四、事件
一、什么是事件:容许经过特殊的行为来激发的操做
二、经常使用的事件
一、鼠标事件
一、click:鼠标单击事件
二、mousevoer:鼠标进入元素时激发的事件
三、mousemove:鼠标在元素内移动时激发的事件
四、mouseout:鼠标从元素内移出时激发的事件
二、键盘事件
一、keydown:键位按下时的事件
二、keypress:键位按下时的事件
三、keyup:键位抬起时的事件
三、状态改变事件
一、load:当元素加载完毕时触发的事件
二、change:当元素发生改变时触发的事件,通常用在select下拉框中
三、focus:当元素获取焦点时触发的事件
四、blur:当元素失去焦点时触发的事件
五、submit:当表单被提交时触发的事件
注意:在为html元素绑定事件时,必需要在事件名前加 on
三、绑定事件的方式
一、在元素中绑定事件
<button onclick=""></button>
<input onblur="">
二、在js中动态的为元素绑定事件
<script>
var div = $("d1");
div.on事件名 = function(){
}
div.onclick = function(){
}
</script>
或者
<script>
function func(){
}
var div = $("d1");
div.on事件名 = func;
</script>
四、事件行为详解
一、load事件
经常使用场合:当网页加载完毕时,要执行的操做
方式1:在元素中绑定事件
<body onload="函数()"></dody>
方式2:JS中动态绑定事件
<script>
window.onload = function(){
//网页中其余元素加载完毕时,才会执行
var div = $("d1");
div.onclick = function(){
this:指的是绑定事件的元素
}
}
</script>
二、submit事件
功能:表单被提交时要触发的事件
注意:经过一个boolean的返回值,通知表单是否被提交,返回值为true能够提交表单,为false不能提交
<form onsubmit="return 函数()">
三、focus事件
功能:当元素获取焦点时触发的事件
四、blur事件
功能:当元素失去焦点时触发的事件
五、事件对象(event对象)
一、什么是事件对象
事件对象中封装了事件中要用到的一些参数和一些操做
二、获取事件对象(event对象)
一、html元素中绑定事件
<ANY onclick="btnClick(event)">//event表示事件对象,是实参,不可修改
<script>
function btnClick(event){
//event表示事件对象,是形参,此处event能够修改,
}
</script>
二、使用JS动态绑定
<script>
d1.onclick = function(event){
}
</script>
三、事件对象的经常使用属性
一、事件源:触发当前事件的元素
获取事件源:
经过event.target获取事件源,返回DOM对象
二、鼠标事件
一、offsetX,offsetY
获取鼠标在 元素上的坐标,以元素的左上角(border内边缘)为(0,0)计算的
二、clientX,clientY
获取鼠标在网页上的坐标,以网页左上角为(0,0)计算的
三、screenX,screenY
获取鼠标在 显示器上的坐标点,以屏幕左上角为(0,0)计算的
三、键盘事件
一、event.key
获得按下键的字符
二、event.which :在keypress事件中 和在keydown事件中的含义不一样
一、在keypress中
event.which:表示按下字符的ASCII码
二、在keydown中
event.which:表示的是键位码,只记录键位,不记录字符(大小写英文字母的键位码是相同的,一些数字和标点的键位码有多是相同的)
四、事件冒泡
一、什么是事件冒泡
当激发了子元素的事件时,把父元素对应的事件也一并给执行了
场合:
一、必须是父子元素或具有层级关系的元素
二、为元素们设置了相同的事件
二、阻止事件冒泡
只让事件在当前元素中执行,不向上冒泡
event.stopPropagation();
jQuery
一、jQuery的简介
是一个轻量级的JS库-是一个封装好的JS文件。提供了更为简便的页面元素操做方式。
封装了 DOM,JS,CSS
核心理念: Write Less Do More
jQuery版本:
jQuery 3.3.1
jQuery 2.x:再也不支持IE6,7,8
jQuery 1.11.x
二、使用jQuery
一、引入jQuery文件
<script src='文件路径'></script>
注意:引入文件的操做必须放在其余jQuery操做以前
二、使用jQuery
三、jQuery对象
一、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的全部操做都只针对jQuery对象,其余对象不能使用(如DOM对象)
二、工厂函数 - $()
想要获取jQuery对象 或 转换为jQuery对象的话,就必需要使用工厂函数
三、DOM对象和jQuery对象之间的转换
DOM对象:以DOM的方式获取出来的节点对象,都是DOM对象,DOM对象只能使用DOM中所提供的方法和属性,是不能访问jQUery提供的属性和方法
jQuery对象:有jQuery封装而获得的对象。jQuery对象只能访问jQuery提供的属性和方法,是不能访问DOM提供的属性和方法
一、将DOM对象转换为jQuery对象
语法:var $obj = $(DOM对象);
注意:在为jQuery对象起名的时候,最好在变量名称前 + $;
二、将jQuery对象转换为DOM对象
一、var dom对象 = jQuery对象.get(0);
二、var dom对象 = jQuery对象[0];
四、JS中建立对象(补充)
一、使用Object 直接建立对象
var newObj = new Object();
newObj.property = value1;//添加属性
newObj.method1 = function(){
//添加无参方法
}
newObj.method2 =function(arg){
//添加含参方法
}
二、使用构造器建立对象
function 对象名(参数1,参数2,....){
//只能使用this来访问或建立当前对象的成员
//使用参数为属性赋值
this.属性1 = 参数1;
this.属性2 = 参数2;
//建立方法
this.funName = function(){
}
}
使用对象
var obj1 = new 对象名(参数1,参数2,...)
三、使用JSON建立对象
一、什么是JSON
JSON:JavaScript Object Notation - JS对象的表现形式
JSON一般会做为轻量级的数据交换格式
JSON通常表示只有属性没有方法的对象
二、声明JSON对象
一、使用键值对的方式来声明数据,键表示该对象的属性,值表示该对象的值
二、全部的属性,必须用""双引号引发来,若是值是字符串的话,也必须用""双引号引发来,单引号有时很差用
三、属性和值之间用:隔开
四、多对属性之间用,隔开
五、JSON对象使用{}来表示
var person = {"name":"张无忌","age":25,"gender":"Male"}
五、jQuery选择器
一、做用:获取页面上的元素们,返回jQuery对象所组成的数组
语法:$("选择器");
二、选择器的分类
一、基础选择器
一、ID选择器
用法:$("#ID值")
说明:返回HTML中指定ID的元素
二、类选择器
用法:$(".className")
说明:返回HTML中全部class为className的元素
三、元素选择器
用法:$("元素名称")
说明:返回HTML中全部指定标记的元素
四、通用选择器
用法:$("*")
说明:返回HTML中全部的元素
五、群组选择器
用法:$("selector,selector2,...")
说明:返回知足工厂函数内多有选择器的元素
二、层级选择器:
一、$("selector1 selector2"):后代选择器
二、$("selector1 > selector2"):子代选择器
三、$("selector1 + selector2"):相邻兄弟选择器
说明:匹配牢牢跟在selector1后面且知足selector2选择器的元素,若是selector1紧后面的元素不知足selector2时,则找不到
四、$("selector1 ~ selector2"):通用兄弟选择器
说明:匹配selector1后面且知足selector2选择器的全部元素
三、过滤选择器
一、基本过滤选择器
一、:first:只匹配到一组元素中的第一个
二、:last:只匹配到一组元素中的最后一个
三、:not(selector):在一组元素中,将知足selector的元素排除出去
四、:odd:匹配 (奇数索引1,3,5,7,...)的元素
五、:even:匹配(偶数索引0,2,4,...)的元素
六、:eq(index):匹配下标等于index的元素
七、:gt(index):匹配下标大于index的元素
八、:lt(index):匹配下标小于index的元素
二、内容过滤选择器
一、:contains(“text”):匹配包含指定文本的元素
二、:empty:匹配空元素(不包含任何子元素以及文本)
三、:has(selector):匹配含有指定选择器的元素
四、:parent:匹配自己是父元素的元素
三、可见性过滤选择器
一、:visible:匹配全部的可见元素
二、:hidded: 匹配全部不可见元素
四、状态过滤选择器
主要用在表单控件上
一、:enabled:匹配全部的可用元素
二、:disabled:匹配全部禁用元素
三、:checked:匹配全部被选中的元素(radio 和 checkbox)
四、:selected:匹配全部被选中的元素(select)
五、子元素过滤选择器
一、:first-child:匹配属于其父元素中的第一个子元素
二、:last-child:匹配属于其父元素中的最后一个子元素
三、:nth-child(n):匹配属于其父元素的第n个子元素
说明:n>=0的任意一个数,(n+1)表示大于0的任意整数,可是不能写成(1+n),n须要写在表达式以前
四、属性选择器
使用元素的属性来匹配页面的元素
一、[attr]:匹配具备attr属性的元素
示例:$["id"]匹配全部具备id属性的元素
二、[attr=value]:匹配attr属性值为value的元素
示例:匹配页面中全部文本框
一、$(":text")
二、$("input[type='text']")
三、[attr!=value]
四、[attr^=value]:匹配attr属性值是以value字符开始的元素们
五、[attr$=value]:匹配attr属性值是以value字符结束的元素们
六、[attr*=value]:匹配attr属性值中包含value字符的元素们
六、jQuery操做DOM
一、基本操做
一、html():等同于DOM中的innerHTML
做用:读取或者设置jQuery对象中的HTML内容,无参数表示获取,有参数表示设置
二、text():等同于DOM中的innerText
三、val():等同于DOM中的value
四、属性操做
一、attr():
做用:读取或设置jQuery对象的属性值
示例:
一、$("#main").attr("id");:获取id属性值
二、$("#main").attr("class","redBack");:设置class属性值为reBack
二、removeAttr(attrName)
做用:删除jQuery对象的指定属性
二、样式操做
一、attr("class","className"):为元素动态绑定class属性值
二、$obj.addClass("className"):追加类选择器
$obj.addClass("c1").addClass("c2").addClass("c3").html('测试文本');
三、removeClass(”className“):删除指定的类选择器
四、removeClass():删除全部的类选择器
五、toggleClass(”className“):
样式切换
元素若是具备className选择器,则删除
元素若是没有className选择器,则添加
六、hasClass(”className“):判断元素是否包含className选择器
七、css(”属性“,”值“):为元素动态的设置某css属性和值
$obj.css("background-color",'red');
八、css(JSON对象)
$obj.css({
"color":"red",
"font-size":"32px",
});
三、遍历节点
一、children() / children(selector)
获取jQuery对象的全部子元素或带有指定选择器的子元素
注意:以考虑子代元素,不考虑后代元素
二、next()/ next(selector)
获取jQuery对象的下一个兄弟元素或知足selector的下一个兄弟元素
三、prev() / prev(selcetor)
获取jQuery对象的上一个兄弟元素或知足selector的上一个兄弟元素
四、siblings()/ siblings(selector)
获取jQuery对象的全部兄弟元素 或知足selector的全部兄弟元素
五、find(selector)
查找知足selector选择器的后代元素
六、parent()
查找jQuery对象的父元素
四、建立和插入节点
一、建立对象
语法:$("建立内容")
示例:$("<div>文本内容</div>");
二、插入节点
一、内部插入
一、$obj.append($new):将$new做为$obj的最后一个子元素插入进来
二、$obj.prepend($new):将$new做为$obj的第一个子元素插入进来
二、外部插入
一、$obj.after($new):将$new做为$obj的下一个兄弟元素插入进来
二、$obj.before($new):将$new做为$obj的上一个兄弟元素插入进来
五、删除节点
一、remove()
语法:$obj.remove():删除$obj元素
二、remove(“selector”): 按选择器删除元素
三、empty()
语法:$obj.empty():清空$obj中全部的内容
六、替换和赋值(非重点)
一、替换
一、replaceWith
语法:$old.replaceWith($new)
使用$new元素替换$old元素
二、replaceAll
语法:$new.replaceAll($lod)
使用$new元素替换$old元素
二、赋值
一、clone()
$new = $old.clone();
七、jQuery事件
一、页面加载后执行
HTML页面加载流程:
一、向服务器发送请求
二、接收服务器的相应
三、在内存中生成DOM树
四、渲染-显示内容到网页上
五、执行window.onload
jQuery处理的时候
一、向服务器发送请求
二、接收服务器的相应
三、在内存中生成DOM树
四、执行 加载后的 操做
五、渲染-显示内容到网页上
如何实现页面加载后执行:
一、$(document).ready(function(){
//页面的初始化操做,DOM树加载完成后就开始执行
});
二、$().ready(function(){
//页面的初始化操做,DOM树加载完成后就开始执行
});
三、$(function(){
//页面的初始化操做,DOM树加载完成后就开始执行
});
二、jQuery实现事件的绑定
一、方式1
$obj.bind("事件名称",function(){
//事件操做
//容许使用this来表示当前元素(dom对象)
});
$obj.bind("事件名称",function(event){
//事件操做
//容许使用this来表示当前元素(dom对象),
//容许传递event对象,做为事件对象
});
二、方式2
$obj.事件名(function(){
//事件操做
//容许使用this来表示当前元素(dom对象)
});
$obj.事件名(function(event){
//事件操做
//容许使用this来表示当前元素(dom对象)
//容许传递event对象,做为事件对象
});
八、jQuery动画
一、基本显示 和 隐藏
语法:
显示:$obj.show(); / $obj.show(duration);毫秒为单位
隐藏:$obj.hide(); / $obj.hide(duration);毫秒为单位
二、滑动式显示 和 隐藏
语法:
显示:$obj.slideDown() / $obj.slideDown(duration);毫秒为单位
隐藏:$obj.slideUp() / $obj.slideUp(duration);毫秒为单位
三、淡入淡出式显示 和 隐藏
语法:
显示:$obj.fadeIn() / $obj.fadeIn(duration);毫秒为单位
隐藏:$obj.fadeOut() / $obj.fadeOut(duration);毫秒为单位 html
九、jQuery插件java
http://www.jq22.comnode
一、下载插件并引入(jquery,插件文件,css文件)python
二、结合当前网页修改cssjquery
三、去插件中修改数据(替换图片/图片名称)正则表达式
十、jQuery循环数组
each()函数浏览器
方式1:
$(遍历对象).each(function(下标,遍历出来的数据){})
方式2:
$.each(遍历对象,function(下标,遍历出来的数据){})
说明:若是遍历的是字典的话下标就表明 字典的键 ,遍历出来的数据就是 字典的值
<body> <script src="/static/js/jquery-1.11.3.js"></script> <script> var arr = [ { "name":"xdl", "age": 20, "gender":"男", }, { "name":"gj", "age": 18, "gender":"女", }, ] $(arr).each(function(i,obj){ console.log(i+":"+obj.name); }) $.each(arr,function (i,obj){ console.log(i+":"+obj.name); }) </script> </body>
<!doctype html> <html> <head> <meta charset="utf-8"/> </head> <body> <a href="https://www.baidu.com/s?wd=">图片</a> <a href="https://www.baidu.com/s?wd=">新闻</a> <script type="text/javascript"> <!--获取全部的a标签--> var as = document.getElementsByTagName("a") for(var i=0;i<as.length;i++){ <!--循环获取a每一个标签--> var a = as[i] <!--获取a标签的文本--> var text = a.innerText <!--获取url--> var url = a.href <!--将原先的url与text文本拼接造成新的URL--> a.href = url+text alert(a.href) } </script> </body> </html>