1. js基础
通过获取元素的属性 来获取 标签中的元素
document.getElementById('id ')
document.getElementsByTagName('标签名')
document.getElementsByClass('class')
通过js方式为元素设置样式
所有的样式存在连字符,js中都去掉连字符,换成驼峰命名,
//例如: font-size ---> fontSize;
wrap.style.backgroundColor = 'green';
既可以设置元素的样式,也可以读取元素的样式,但是只能获取行间样式
1 .js代码运行环境 --> 浏览器
-
文档输出:
- document.wrap()
- 控制台输出:console.log()
- 弹窗输出: alert() -
变量
- js是一个弱类型语言
- typeof 变量名
- string ,number , boolean ,undefined , object ( null,array)
运算符
- 赋值运算符 =
- 算数运算符 + - * / %
- 符号在后,先赋值后运算;
1. 逻辑运算符
&& (与) 逻辑 : 当运算符左右条件都成立,整个逻辑运算的结果就是true,否则为false.
以下值会自动被判定为false:
- ’ '空字符
2. 0 : 数字 0
3. NaN
4. undefined
5. null 空值
|| (或) 逻辑 :
运算符两侧至少要有一个条件成立,否则就是不成立
- 或逻辑的运算符结果也不一定是布尔值
- 非逻辑一定是布尔值
! (非) 逻辑 :
非逻辑的结果一定是布尔值
优先级:
! > && > ||
算数 > 关系 > 逻辑 > 赋值
2. 关系运算符
. > , < , >= , <= .由关系运算符组成的式子为关系表达式
关系表达式的运算结果一定是一个boolean
NaN 和任何数值比较大小结果都是false,和任何数值进行算数运算结果还是NaN
== , != , === , !==
- ==只关心值是否相等
- ===不止判断值是否相等,也判断数据类型是否相等
关系运算符的运算规则
- 数字与数字的运算关系,正常运算
- 数字与字符串关系运算,会先将字符串转化成数字,在去进行关系运算
- 字符串与字符串关系运算,字符串中的字符按位置进行ASCII的比较.
- 一旦有了结果就停止运算直接作为整个关系表达式的结果.
优先级问题
- 比价大小的要高于比较等于的.
- 算数 > 关系 > 赋值
##循环
循环语句多用于已知循环次数的情况下 ,帮助我们解决一些重复或是有规律的事物
条件的判断需要分支语句
语法:
if(条件){
当判断条件成立时要执行的代码
}
条件:
可以是关系表达式.逻辑表达式,具体值,算数表达式
语法:
if(条件){
条件成立执行代码
}else{
条件不成立执行代码
}
语法：
if(条件1){
条件1成立执行的代码，并且结束分支语句
}else if(条件2){
条件2成立执行的代码，并且结束分支语句
}else if(条件3){
条件3成立。。。
}else{
上述条件都不成立时执行的代码
}
switch语句
语句:
switch(){
case:
break;
case:
break;
default:
break;
}
switch只适用于少量定值条件的判断，执行效率要高于elseif语句。
for循环
for循环语法
for( ; ; ){
}
for(表达式一;表达式二;表达式三){
code
}
表达式1 : 循环变量的声明
表达式2 : 对循环变量的限制条件,如果不符合条件,那么就立即结束循环结构
表达式3 : 循环变量值改变
code: 表达式2 成立时 执行的代码块
while循环:
在任何情况下都可以与for循环进行等价转换
语法:
循环变量
while(条件){
code
循环变量的改变
}
注意:在使用while时,更容易忘记循环体内循环变量的改变,进而导致出现死循环.
多用于未知循环次数 的情况
DO…while…
do…while… 循环
语法:
do{
code
}while(条件)
特点 :无论循环条件是否成立,必然会执行一次循环体.
循环控制语句 : break,continue
break:循环体内,遇见break就立即结束循环,不在执行剩余的循环体代码;
continue : 循环体内,遇见continue就立即跳过本次循环,不在执行本次循环中剩余的循环体代码,继续执行下一次循环.
三目运算符(三元运算符)
本质上就是对if…else…语句的形式改写
语法:
表达式一 ? 表达式二 : 表达式三;
当表达式1位true,执行表达式2 否则执行表达式3;
<script>
//循环嵌套
/*
1
1 2
1 2 3
*/
// for (var j = 1; j <= 3; j++) {
// for (var i = 1; i <= j; i++) {
// document.write(i = ' ')
// }
// document.write('<br>')
// }
//循环嵌套执行过程:外层循环执行1次,内层循环执行最大次数(执行到不符合条件跳出内层循环).
//然后外层循环继续执行.
//
//外层循环用来控制行,内层循环用来控制列.
//
//打印 99乘法表
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + '*' + i + '=' + j * i + ' ');
}
document.write('<br>')
}
</script>
JS提供的数学对象 Math
- Math.max(): 返回参数中的最大数
- Math.min(): 返回参数中的最小数
- Math.abs(): 返回一个数的绝对值
- Math.pow(x,y):计算x 的 y次方
- Math.floor():对小数进行向下取整操作.
- Math.ceil():对小数进行向上取整操作
- Math.round():对小数进行四舍五入取整
//生成指定区间的公式
Math.floor(Math.random() * ( max - min + 1)+min);
Math.round(Math.random() * ( max - min) + min);
####数组
一种数据结构,可以存储多个值,可以理解为一个大的容器
-
特点:
存储数据的空间连续且有序 -
元素
在数组中存放的值,称为数组的元素. -
索引
(下标):是对数组元素的顺序标记,索引从零开始.递增加一. -
就是数组中元素的个数.
JS中数组的特点:数组元素的数据类型没有要求,存什么都可以
//1 . 字面量创建
var arr = [];//创建了一个名为arr的空数组
//从数组中取出元素的值:通过去索引的方式
var s1 = arr[2];
//对数组的操作要注意,防止数组越界 (通过索引来访问数组元素时,索引不要超过最大值:索引最大值就是数组长度-1)
//如果越界 了虽然不报错,但是会得到undefined
//向数组中添加元素
arr[0] = '王辉';
//通过索引向数组中添加元素,一定要按顺序添加剂,不要跳跃添加,不然中间会出现多个undefined占位.
数组操作
-
.push():向指定数组的末尾添加一个或多个元素
-
.unshift()向指定数组的开头添加一个或多个元素
-
splice();对指定数组进行添加,修改,删除操作.
-
pop():删除指定数组末尾的元素,此方法没有参数,使用一次只能删除一个元素.
-
shift()删除指定数组开头的元素,同样没有参数,使用一次只能删除一个元素.
-
数组截取:slice():从指定数组中获取指定位子的元素并装入新数组返回
参数一:表示截取的开始位置
参数二:可选参数,表示截取的结束位置 (不包含结束位子上的元素),如果没有写结束位置,那么默认从开始位置截取到数组结束.
- concat():数组拼接
var newArr1 = arr.slice(0,2), newArr2 = arr.slice(5); var newArr= newArr1.concat(newArr2);
- indexOF():判断指定值是否为指定数组的元素,如果是返回元素索引,如果不是返回 -1.
- join():将数组转化成字符串
- reverse():将数组元素反转,返回一个翻转后的新数组
字符串的操作方法
- length属性:用来获取字符串长度(字符串中字符的数量).
在JS中 中文字符和英文字符所占的长度是一样的.
字符串和数组比较类似,所以也可以使用循环来遍历字符串,挨个获得字符串的每个字符.
- 字符串拼接:concat()
- indexOf():判断字符是否在字符串中,如果在返回下标,如果不在返回 -1.
- lastIndexOf():是从字符串末尾向前查找,是否存在.
- charAt(): 根据给出的下标返回指定字符串对应位置的字符.
- replace(): 将字符串中的指定字符替换成其他字符.
只能替换第一次存的字符
- substring(index,index);截取字符串,不包含结束位置上的字符
- substr(index,index):截取字符串
共同点:第二个参数都是可选参数,如果不写,那么默认截取到字符串结束.
- split():字符串转数组
- toUpperCase():将指定字符串中所有的字符转化成大写
- toLowerCase():将指定字符串中所有的字符转化成小写
//去除首位空格
var str = " abcdefg" ;
while (str[0] == ' '){
str =str.substring(1); // 取除首位空格
if(str[0] != ' '){
break;
}
}
while(str[str.lenggth - 1 ] == ' '){
str = str.substring(0,str.length - 1); // 去除尾部空格
if(str[str.length - 1 ] != ' '){
break;
}
}
冒泡排序
//冒泡排序:通过两两比价,位置交换,将最大或最小的元素放在末尾实现排序
for(var j=0;j<arr.length-1;j++){//五个数比四回结果就出来了
for(var i=0;i<arr.length-1-j;i++){
if(arr[i] > arr[i+1]){ //如果第一个数比第二个数大,那么交换两个数的位置.
var t= arr[i];
arr[i] = arr[i+1];
arr[i+1] = t;
}
}
}
###函数
一段可以重复执行的代码块,但是这段代码块不会自动随着脚本的加载自动执行,需要通过触发机制或调用才会被执行
语法:
声明函数:
function 函数名(){
//函数体.重复执行的代码块
}
//匿名函数
function(){
//函数体,重复执行的代码块
}
注意:
1. 语法规则上声明函数必须要有函数名,所以直接声明函数是会报错的
2. 但是匿名函数作为值赋予给其他属性或者变量
调用:
1. 被动调用:将函数绑定给事件;
2. 主动调用:函数名();
一旦执行到函数调用,那么代码的执行会立即跳转到对应函数体执行代码,函数体代码执行完才会接着刚才的代码继续向下执行;
函数除了函数名和函数体,还可以拥有参数以及返回值
- 无参数 ,无返回值
function sum(){
console.log(10+20);
}
- 有参数,无返回值
functoin sum2(x,y){
console.log(x+y);
}
sum(20,30);
- 无参数,有返回值
function sum3(){
return 10 + 20 ; //函数体内,通过return关键字来对外返回结果.
}
var a = sum3();
console.log(sum3());
- 有参数,有返回值
function sum4(x,y){//形式参数
return x+ y;//函数体内的return,就相当于循环中的break,会立即结束函数体代码的执行,也就是说,return下面的函数体代码是不会执行的.
}
var s = sum4(1,20); //实际参数,实参
声明函数是()里面写的都是形式参数,没有具体数值,只为了占位用,而调用函数是时()里面写的叫实际参数.此时函数体代码块的执行,形式参数会被实际参数所取代
#####变量的作用域
变量在脚本中起作用的区域
JS中作用域主要分为两部分:
- 函数外作用域;
- 又称全局作用域: 在全局作用域下声明的变量称为全局变量
- 可以在脚本的任何地方访问;
- 函数内声明的变量,正常情况下会在函数体执行完成自动销毁
- 函数内作用域:
- 又称局部作用域,在局部作用域下声明的变量称为局部变量
- 只能在当前作用域或当前作用域下的局部作用域访问.
- js中的变量及函数声明存在提升现象,会先将脚本中的变量及函数的声明提升到当前所在作用域的最顶端.
- 其中函数的提升要比变量的提升更靠上.
- 当全局变量和局部变量重名时,局部作用域的代码执行会优先使用当前作用域中声明的变量,这种现象称为变量的降低,也叫’就近原则’
- this关键字 :this值存在于函数内,函数外是无意义的.:this在函数内指向函数的拥有者.
- 在全局作用域下声明的全局变量以及全局函数,会自动被作为window对象的属性和方法.也可以说Window就是我们js 中的根对象.
- 函数的作用域在声明的时候就已经确定了与调用位置无关
#####闭包
闭包是js开发惯用的技巧，什么是闭包？
闭包指的是：能够访问另一个函数作用域的变量的函数。
清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。
- A 调用它内部声明的函数B,并且内部函数B还使用了外部函数A中声明的局部变量,这样形成的闭合环境称为闭包
- 闭包的作用: 用来对变量进行永久存储,或者防止变量污染
- 闭包的注意事项:正因为闭包会使变量永久驻扎在内存中不被销毁,那吗必然会造成内存的浪费.所以不要滥用闭包
eg:
function outer(){
var a = '变量1';
return function(){
count++;
console.log(count);
}
console.log(count);
}
outer()
//自调用函数
(function() { //用小括号 匿名函数
console.log('111')
})()
函数的一些其他功能和方式
//1.递归函数 (递归调用函数): 主要用于解决重复且有规律的问题.
回调函数:作为其他函数参数的函数,称为回调函数.
//回调函数更多的用于对函数 的包装或声明( 也应对异步操作)
定时器
用于解决重复的有规律的并且需要固定的时间间隔的问题.
setTimeout()方法用于设置在一定时间后执行的代码.也被叫做一次性定时器或者倒计时定时器.
- 参数一:需要一个函数作为参数.表示时间到了需要执行的代码
- 参数二:需要一个number作为参数.表示倒计时的时间.单位是 ms .毫秒
setInterval() ;定时器,每个指定的时间间隔会执行一次执行的代码
日期对象: Date
和Math不同的是,Date需要先手动创建一个对象实例.
通过关键字new 创建Date对象实例,包含了当前设备的系统时间信息.
1.获取当前时间的年
- var year= date.getFullYear();
- console.log(year)
2.获取当前时间月份,比真实月份少一
- var month = date.getMonth();
- console.log(month);
3.获取当前时间的日期
- var day = date.getDate();
- console.log(day);
4.获取当前时间的星期
- var week = date.getDay();
5.获取当前时间的时,24小时制
- var hour = date.getHours();
6.获取当前时间的分
- var minute = date.getMinutes();
- console.log(minute);
7.获取当前时间的秒
- var second = date.getSeconds();
- console.log(second)
8.获取当前时间的时间戳:表示当前时间距离1970年1月1日0时0分0秒的总毫秒数
- var time = date.getTime();
- console.log(time)
Date对象在创建的时候,可以通过添加参数来设置时间
- var newDate = new Date(2019,9,1,0,0,0);
- var week = date.getDay();
5.获取当前时间的时,24小时制
- var hour = date.getHours();
6.获取当前时间的分
- var minute = date.getMinutes();
- console.log(minute);
7.获取当前时间的秒
- var second = date.getSeconds();
- console.log(second)
8.获取当前时间的时间戳:表示当前时间距离1970年1月1日0时0分0秒的总毫秒数
- var time = date.getTime();
- console.log(time)
Date对象在创建的时候,可以通过添加参数来设置时间
- var newDate = new Date(2019,9,1,0,0,0);
- console.log(newDate);
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
