码迷,mamicode.com
首页 > Web开发 > 详细

JS基础

时间:2018-05-02 10:03:35      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:html标签   局部变量   大写   字符串类型   屏幕   path   clear   主机   而不是   

【使用JS的三种方式】
(1.)直接在HTML标签中使用事件属性调用JS代码
(2.)在页面的任意位置使用script标签插入JS代码

(3.)引入外部的JS文件:

【注意事项】
(1.)JS代码可以放在页面的任意位置使用,但是放置的位置不同,将影响JS的执行顺序
(2.)引入外部JS得script标签不能在包含任何的JS代码
【JS中的变量】
(1.)变量的声明:
var num=1; 使用var声明的变量属于局部变量,只在当前作用域有效
num="哈哈"; 不用var声明的变量,默认是全局变量,在整个JS文件中可用
var a=1,b,c=2; 使用一行代码,声明多个语句。其中b为undefind
[js中变量声明的注意事项]
①JS中声明变量的关键字只有var。变量的类型取决于所赋的值。如果声明后未赋值,则为undifind类型
②JS中同一个变量,可以在多次赋值中,被修改数据类型。
var num=1;
num="哈哈哈";
③变量可以用var声明,也可以直接赋值声明
区别:使用var声明的作用域为局部变量
④在JS中一个变量可以多次使用var声明,后面的声明相当于直接赋值,没有任何卵用。
⑤JS变量区分大小写,大写和小写不是一个变量。

(2.)JS中数据类型:
undefind:使用var声明,但是没有赋值的变量
null:表示空的引用
Boolean:真假
Number:数值类型,包括整型和浮点型
String:字符串
Object:对象

(3.)常用数值函数
①isNaN:用于检测一个变量,是不是非数值(Not aNumber),isNaN在检测时,会先调用Number函数,尝试将变
量转为数值类型,如果最终能转为数值,则不是isNaN
②Number函数:用于将各种数据类型转为数值类型。
>>>undefind:无法转换,返回NaN
>>>null:转为0
>>>Boolean:true转为1,false转为0
>>>字符串:
如果字符串是纯数值字符串,可以转换。"123"-------->123
如果字符串包含非数值字符,不能转换。"123a"------->NaN
如果是空字符串,转为0。 " “/.""----->0

③parseInt():将字符串转为数值类型
>>>如果是空字符串,不能转。""--->NaN;
>>>如果是纯数值类型字符串,可以转换,且小数点直街舍去,不保留。 "123"--->123 "123.9"----->123
>>>如果字符串包含非数值字符,则将非数值字符前面的整数进行转换。 "123a"--->123 "a123"----->NaN
④praseFloat():转换机制与parseInt()相同。
不同的是:转换数值字符串时,如果字符串为小数则可以保留小数点。 "123.5"-------->123.5 "123"------->123
⑤typeof():检测一个变量的数据类型。
字符串-->String 数值-->Number true/false-->Boolean 未定义-->Undefind 对象/null-->Object
函数-->function
【JS中常用的输入输出语句】
(1.)alert():弹窗输出
(2.)prompt():弹窗输入,接收两部分参数:①输入输入提示内容: ②输入框的默认文本。(两部分都可省略),输入的内容默认为字符串。
(3.)document.write():在浏览器屏幕上面打印。
(4.)console.log():浏览器控制台打印。
【JS中运算符】
(1.)除号:无论符号两边是整数还是小数,除完后都将按照实际结果保留小数。
(2.)a++和++a区别

(3.)===:要求等式两边的数据类型和值必须相同,如果类型不同,直接返回false。
==:只判断两边的数据,值是否相同,并不关心等式两边是否是同一种数据类型。
!=:不等 !==:不全等
(4.)& | 只能进行按位运算,如果两边不是数值类型,将转为数值类型在运算。
&& || 进行逻辑运算

 

【JS中真假判断】
(1.)Boolean类型:true为真 false为假
(2.)数值类型:0为假 非0为真
(3.)字符串类型:""为假 非空字符换为真
(4.)Null/Undefind/NaN:全为假
(5.)Object:全为真
【switch】
(1.)switch结构的括号中()可以放各种数据类型;比对时,采用“===”进行判断,要求数据类型完全相等。

 

 

【JS中函数的声明与调用】
(1.)函数声明的格式
function 函数名(参数一,参数二){
//函数体代码
return 返回值;
}
函数调用:
①直接调用: 函数名(参数一,参数二);\
②通过事件调用: 在HTML标签中通过事件属性进行调用:

(2.)函数声明与调用的注意事项:
①函数中有没有返回值,只取决于函数中有没有return,无需刻意声明。
在JS中,有返回值刻意不接收;没有返回值,也可以接收,结果为Undefind。
②JS中函数的形参列表与实参列表没有任何关联。
也就是说,有参数可以不赋值(未赋值Undefind);没有参数也可以赋值。函数的实际参数个数,取决于实参列表
③JS中,函数是变量的唯一作用域,那么,函数的形参属于函数的局部变量。
④函数的声明与调用语句没有先后之分,即,可以先写调用语句,在声明函数。
func();
function func(){}
【匿名函数的声明与调用】
(1.)匿名函数表达式:var func=function(){};
调用:func();

注意:函数的调用语句,必须放在声明语句之后!!!
(2.)直接将匿名函数,赋值给一个时间:
windoew.onload=functon(){}
文档就绪函数,确保函数中的代码,在HTML文档加载完成之后执行。
document.getElementBy("id").onclick=function(){}
(3.)自执行函数:
① !function(){}(); 开头用!表明这是自执行函数 推荐
② (function(){}()); 用()将匿名函数声明与调用包裹在一起
③ (function(){})(); 用()将匿名函数声明语句进行包裹。
【JS代码执行顺序】
(1.)JS代码的执行分为两个阶段:检查编译阶段、代码执行阶段。
检查编译阶段:主要检查语法的错误,进行变量的声明、函数的声明等声明操作。
代码执行阶段:变量的赋值、函数的调用等执行语句,属于代码执行阶段。

【arguements对象】
(1.)作用:用于保存函数的所有实参。
>>>当函数存在实参时,可以使用数组下标访问函数的所有实参。
>>>alert(arguements[6]);
(2.)arguements中元素个数取决于实参列表,与形参个数无关。
(3.)一旦函数调用时,传入了实参,那么对应位数的形参,将与arguements对应的元素进行绑定。
修改形参,arguements中对应的元素将被改掉。反之,也成立。
但是,如果某一位置,没有传入实参,则该位置的形参和arguements将不进行关联。
(4.)arguements.callee(); 指向当前函数的引用,用于在函数中使用递归调用自身。
【screen对象】
(1.)screen.availWidth 可用宽度
screen.availHeight 可用高度=可用高度-底部任务栏高度
【location对象】
(1.)location.href 完整的URL路径
(2.)location.protocol 协议名
(3.)location.hostname 主机名
(4.)location.port 端口名
(5.)location.host 主机名+端口名
(6.)location.pathname 文件路径
(7.)location.search 从?开始的参数部分
(8.)location.hash 从#开始的锚点部分

 


【history对象】
(1.)history.length 用于记录当前页面跳转的历史页面个数
(2.)history.forward(); 点击去前一页。相当于浏览器前进按钮
(3.)history.back(); 点击去后一页
(4.)history.go(0); 表示跳转到浏览历史的任意一个页面。+1表示前面一页,相当于history.forward();
-1表示后面一页,相当于history.back(); 0表示当前页,history.go(0);相当于刷新
【navigator对象】
了解!!返回关于浏览器的各种信息
【window对象常用方法】
(1.)prompt(); 弹窗输入
alert(); 弹出输出
(2.)confirm(""); 带确定、取消的提示框,分别返回true/false
(3.)close(); 关闭当前浏览器窗口
(4.)window.open("http://www.baidu.com","baidu","width=500px,height=600px");
打开一个新窗口
参数一:新窗口的地址
参数二:新窗口的名字,没用
参数三:新窗口的各种配置属性
(5.)setTimeout();延时器,表示延时多少ms执行一个函数。
参数一:可以穿入匿名函数,也可以传入参数名
参数二:延时的毫秒数
参数三~参数n:传给回调函数的参数。

(6.)setInterval(); 定时器,表示每隔多少ms执行一遍函数,其他用法与setTimeout完全相同。

(7.)clearInterval(); clearTimeout();分别清除定时器、延时器。
声明定时器时,可以接收返回的ID,并将ID传给clearInterval即可清除
【DOM树的节点】
(1.)DOM节点分为三大类:元素节点(标签节点)、属性节点、文本节点。
属性节点和文本节点都属于元素节点的子节点,因此操作时,需先选中元素节点,在修改属性和文本。
【查看元素节点】
(1.)使用getElement系列方法
注意事项:
①ID不能重名,如果ID重复,只能取到一个。
②获取元素节点,必须等到DOM树加载完成后才能获取。
两种方式:a.将JS写在文档最后 b.将代码写入window.onload函数中
③通过getElements系列取到的为数组格式,操作时必须取到其中的每一个元素,才能进行操作,而不是直接对数组进行操作
document.getElementsByClassName("cls")[0].onclick=function(){}
④这一系列方法,也可以先选中一个DOM节点,再从选中的DOM节点中,选择需要的节点:
document.getElementById("first").getElementsByTagName("li");
(2.)通过document.querySelector();系列方法:
传入一个选择器名称,返回第一个找到的元素。通常用于查找ID
document.querySelector("#id");
传入一个选择器名称,返回所有找到的元素,无论找到几个,都返回数组格式,如果需要第一个,需要【0】
document.querySelectorAll("#div1 li");
选中HTML文档中input标签中所有带有value属性的标签

【查看设置属性节点】
(1.)查看属性节点:.getAttribute();
(2.)设置属性节点:.setAttribute();
(3.)注意事项:
.setAttribute();在老版本的IE中会存在兼容性问题,可以使用 . 符号代替。


【JS修改样式的几种方式】
(1.)使用setAttribute()设置class和style
document.getElementById("first").setAttribute("class","cla1");
document.getElementById("first").setAttribute("style","color: red;");
(2.)使用.className添加一个class选择器
document.getElementById("first").className="class1";
(3.)使用.style样式直接修改单个样式。注意样式名必须使用驼峰命名法
document.getElementById("first").style.fontSize="18px";
(4.)使用.style或.style.cssTest添加一串行级样式表
document.getElementById("first").style="color:red;"; IE不支持
document.getElementById("first").style.cssText="color: red;"; IE支持


【查看/设置文本节点】
(1.).innerHTML:取到或设置一个节点中的HTML代码
(2.).innerText:取到或设置一个节点中的文本,不能设置HTML代码。

 

JS基础

标签:html标签   局部变量   大写   字符串类型   屏幕   path   clear   主机   而不是   

原文地址:https://www.cnblogs.com/cuteboy/p/8978804.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!