十分钟看懂JS

一, 位置和性能

如果不是在js文件中的js代码,需要被<script></script>标签包括。
在html中存在形式以及区别:
(1)代码块放在<head></head>中,在页面渲染前执行,比在<body></body>中的先执行。
(2)外部链接的形式在<head></head>中,在<body>中被调用才执行。
(3)在<body>中的js在页面渲染时,读取到这段代码时被执行。
(4)在<body>后面的<script>, , 不会阻塞页面的渲染。
浏览器在下载js 时,会阻止其他一切活动,比如资源的加载,内容的呈现。结束后才继续其他活动,所以先渲染样式和页面,可以有效提高用户体验。
(5)。。。
【待】不同位置的加载顺序,执行顺序,加载阻塞等问题;
二, 变量

变量是用于存储数据的存储器,每个变量都有其独有的名字,每个变量都占有一段内存。
变量名:基本命名规则,不能用关键字,区分大小写;
变量类型:var / let 声明变量,在使用时确定变量类型;(字符串,数字,布尔,数组)
运算符:算数运算符,比较运算符,逻辑运算符(强调);
&&:逻辑与,同真则真
|| :逻辑或,同假则假
== :相等
!= : 不等
js中!=、== / !==、===的用法和区别。
前一组忽略类型(先强制转化),比较值;后一组先比较类型,再比较值
c?x:y 当为true时,返回x,否则返回 y;
& 按位与,两个数位同为1时,返回数据当前数位为1,其他为0;
| 按位或,两个数位同为0时,返回数据当前数位为0,其他为1;
^ 按位异或,两个数位有且只有一个为0,返回数据位为1,其他为0;
变量作用域:全局变量 在函数体外,作用域为整个js ;
局部变量 在函数体内,作用域为该函数体;
(通过闭包可实现从外部访问并保存局部变量, 【待】优缺点,具体实验
三, 流程控制

(1)条件:
if(条件){ 函数体 } else if(条件){ 函数体 } else(条件){ 函数体 } 。
switch( k ){ case 条件1:执行 ;break;case 条件2:执行 ;break;
default:前面没有满足时执行}
(2)循环:
for( var i = 0 ;i < length; i++ ){ 循环体 }
给 i 赋初始值执行循环体,然后执行 i ++,通过中间的判断则继续执行循环体,然后i++,直到不满足中间判断则停止;
while(条件){ 循环体 } 如果条件不满足,一次也不执行;
do{ 循环体 }while( 条件 ) 无论是否满足条件,都执行一次;
break:跳出循环;
continue:跳出本次循环;
forEach()
四, 函数

(1)基本函数格式:
function 函数名(参数1,参数2,……){
函数体;
return 返回值;
}
【思考】
1,同名:
变量与函数同名,函数与函数同名;变量与变量同名的情况。
(1)声明两个相同名称函数的情况(只要函数名相同,不管函数体和参数):
如果使用function声明了同名函数,则后面的函数会覆盖掉前面的函数;
js中函数相等的条件?(java中名称和参数值与类型都相同的情况下,才说两个函数相等。)
2,执行顺序:就如上图问题;
(2)箭头函数,回调函数,匿名函数等;

五, 事件

(1)常用事件类型:
单击:onclick,双击:ondblclick;
获得焦点:onfocus ,失去焦点:onblur
鼠标:onmouseover(移入),onmouseout(移出),
onmousedown(按下),onmouseup(松开)
键盘:onkeydown(按下),onkeyup(松开),onkeypress(按下并松开)
【离不开】:
1. alert(' ');弹出提示框;
2. this.innerHTML = ' ' —— 可用来实现购物车中点击编辑按钮时,页面样式的变化;

六, 对象

(1)String对象,Math对象,Array对象,Date对象等,要注意他们的内置属性和方法:
String 内置属性:length (长度包括所有的空格和符号);
String 内置方法:n位置的字符:charAt(n),计数从0开始;
第(n,m)的字符串:substring(n,m);
第(n,n+x)的字符串:substr(n,x);
转大写:toUpperCase();
转小写:toLowerCase();
第n个位置的ASCII码:charCodeAt(n);
包含 string 的位置:indexOf(string);(正序)
包含 string 的位置:lastIndexOf(string);(倒序)
分割并返回数组:split('分隔符');
Math 内置属性:
E :返回常数 e (2.718281828...)。
LN2 :返回 2 的自然对数 (ln 2)。
LN10 :返回 10 的自然对数 (ln 10)。
LOG2E :返回以 2 为低的 e 的对数 (log2e)。
LOG10E :返回以 10 为低的 e 的对数 (log10e)。
PI :返回π(3.1415926535...)。
SQRT1_2 :返回 1/2 的平方根。
SQRT2 :返回 2 的平方根。
Math 内置方法:
绝对值:abs(x)
四舍五入:round(x)
开平方:sqrt(x)
n的m次幂:pow(n,m);
e的x次幂:exp(x);
x的自然对数:log(x);
最小整数:ceil(x)
最大整数:floor(x)
较大数:max(a,b)
较小数:min(a,b)
随机数:random()——0,1之间的
正弦:sin(x)
余弦:cos(x)
正切:tan(x)
反正弦:asin(x)
反余弦:acos(x)
反正切:atan(x)
Array 内置属性:下标,length
往数组中添加一个元素: myArray[myArray.length] = ...;
Array 内置方法:
连接2个或多个数组:concat(array1,array2)
转字符串:toString()
转字符串并指定分隔符:join("指定字符串")
数组倒叙:reverse()
返回[n,m]:slice(n,m)
复杂排序:sort(SortFunction) 按照指定的SortFunction排序,
(2)创建自定义对象,
var student = {name: "ddd";age:"19";,……}
或 var student = {} ; student.name="ddd" ; student.age = "19";……
function student(name,age){this.name=name;this.age=age},通过方法创建对象,然后new
var student1 = new student("ddd","19")——适用于需要创建多个对象的情况;
(3)访问对象的属性和方法;student.name,student.study()
当需要反复访问某对象时,可使用with(){}简化代码,省去原本要写的 " 对象. ",如下:
with( student1 ){var x = name;var y = age;study() }相当于var x = student1.name 等;
七, Dom操作

(1)选取元素:可通过id,name, 标签名,来获取;
(2)获取元素属性:getAttribute()
设置元素属性:setAttribute()
(3)创建节点:createElement()
创建子节点:appendChild() —————创建和插入节点,实现动态Html;
获取父元素:parentNode();
删除节点:removeChild()


  • 7
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值