JavaScript学习笔记
来源:互联网 发布:肯尼迪 知乎 编辑:程序博客网 时间:2024/06/09 18:09
一、JS简介
1、JS是什么
JS是基于对象和事件驱动的脚本语言,它可以嵌入到html之中,实现与用户交互等功能,它不能够访问本地磁盘,本身是跨平台的
2、JS的作用
JS能够动态的修改html和css代码,还能够动态的校验数据
3、JS的组成
ECMAScript
BOM(浏览器对象模型)
DOM(文档对象模型)
4、JS被引入的方式
(1)内嵌引入
<input type="button" value="点我" onclick="alert('内嵌引入')"/>
(2)内部引入
写在head标签中
<script type="text/javascript"> alert("内部引入");</script>
(3)外部引入
写在head标签中
<script type="text/javascript" src="demo1.js"></script>
二、JS基本语法
1、变量
(1)JS中所有变量的类型都可以用var来表示
var x = 1;
x = 'dsaz';
var y = "abcd";
var b = false;
(2)也可以直接定义
x = 1;
2、基本数据类型
(1)number 数字类型
(2)string 字符串类型
(3)boolean 布尔类型
(4)null 空
(5)underfind 未定义
类型转换:
number/boolean转string利用toString()方法
string/boolean转number利用parseInt()方法与parseFloat() 对于string类型的,如果为数字字符串,则将转换为number时,将遇到的第一个字母之后的字符全部去除,只输出前面的字符。
强制转换:
Boolean() 强转为boolean型
Number() 转换为数字
3、引用数据类型
var obj = new Object();
4、运算符
(1)赋值运算符 "="
(2)算数运算符 + - * / %
+:遇到字符串时变成连接符
- * / %: 遇到字符串时先将字符串转为数字再进行运算
(3)逻辑运算符
与:&&
或:||
(4)比较运算符
> < >= <= == ===
===:全等于(类型与值都要相等才为true)
(5)三元运算符 1>0 ? true : false;
(6)类型运算符
typeof:返回数据类型 如 typeof 1 返回number
instanceof :判断是否为某种类型 如 x instanceof Object; 返回true
5、逻辑语句
(1)if-else
(2)for
(3)switch
(4)for in
var arr = [1,4,6,8];
for(index in arr) index 代表角标
三、JS的内建对象
(1)Number
创建方式:
var num = new Number(value);
vat num = Number(value);//强转
属性和方法:
toString():转为字符串
valueOf():返回一个Number对象的基本数字值
(2)Boolean
创建方式:
var bool = new Boolean(value);
vat bool = Boolean(value);//强转
属性和方法:
toString():转为字符串
valueOf():返回一个Boolean对象的基本值
(3)String
创建方式:
var str = new String(value);
vat str = String(value);//强转
属性和方法:
length:字符串的长度
charAt():返回指定位置的字符
charCodeAt():返回在指定位置的Unicode编码
indexOf():返回指定字符索引
lastIndexOf():逆向饭hi字符的索引
split():将字符串按照指定字符切割为数组
(4)Array
创建方式:
var arr = new Array();创建空数组
var arr = new Array(size); 创建一个指定长度的数组
var arr = new Array(element0, element1, ..., elementn);创建数组直接填入元素
var arr = []; 创建一个空数组
var arr = [1,3,5,7]直接创建一个已经实例化元素的数组
属性和方法:
length:数组的长度
join():将数组中的所有元素放入一个字符串,并且每一个字符用指定符号连接
pop():删除并返回最后的元素
push():向数组的末尾添加新元素
reverse():反转数组
sort():排序数组
(5)Date
创建方式:
var myDate = new Date();
属性和方法:
Date():返回当日的日期和时间
getDate():从Date对象返回一个月中的某一天
getDay():从Date对象返回一周中的某一天
getMonth():从Date对象返回月份
getFullYear():从Date对象以思维数字返回年份
(6)Math
Math对象没有构造函数,调用时将Math作为对象就可以调用其所有属性和方法
属性和方法:
PI:圆周率
E:返回常量e
sqrt(x):返回数的平方根
max(x,y):返回x和y中数值较大的那个
min(x,y):返回x和y中数值较小的那个
(7)RegExp
创建方式:
var reg = new RegExp(pattern); 中间传入的参数为正则表达式的字符串
var reg = /^正则规则$/
规则的写法:
[0-9] \d 代表数字
\D 代表非数字
[A-Z] 大写字母
[a-z] 小写字母
[A-z] 任意字母
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 代表出现至少一次
n* 出现0次或多次(包括一次)
n? 出现0次或一次
{n} 出现n次
{x,y} 出现x次到y次
方法:
text(str):检索字符串中指定的值,符合返回true,不符合返回false
比如:校验是否为邮箱
var email = whalewsj@gmail.com
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]$/;
reg.test(email);
四、JS的函数
1、JS函数定义的方式
(1)普通方式
语法:function 函数名(参数列表){方法体}
(2)匿名函数
语法:function(参数列表){函数体}
例如:var method = function() { };
(3)对象函数
语法:new Function(参数列表,函数体);
参数名称与函数体必须使用字符串,最后一个默认为函数体
2、函数的参数
(1)函数的形参没有类型修饰
(2)形参和实参的数量不一定匹配 自带的arguments对象会将传进来的参数进行 封装,它是一个数组。
3、函数的返回值
(1)在定义函数的时候不必标明是否具有返回值
(2)想要有返回值只需要写return就可以了
4、JS中的全局函数
(1)编码解码
将字符串编码为URI:encodeURI 解码某个编码的URI:decodeURI()
将字符串编码为URI组件:encodeURIComponent() 解码一个编码的URI组件:decondeURIComponent()
将某个字符串进行编码:escape() 对由escape()编码的字符串进行解码:unescape()
他们的区别:进行编码的符号的范围不同,实际开发中常使用第一种,第一种只编汉字
(2)强制转换
Number()
String()
Boolean()
(3)转换为数字的函数
parseInt()
parseFloat()
(4)eval()全局函数****
可以将一个字符串当作脚本进行解析运行
五、JS的事件
1、JS的常用事件
(1)onclick:鼠标点击
(2)onchange:域内容被改变
<body> <select id="city"> <option value="cq">重庆</option> <option value="qh">青海</option> </select> <select id="area"> <option>南岸区</option> <option>北碚区</option> <option>渝中区</option> </select> </body> <script type="text/javascript"> var city = document.getElementById("city"); city.onchange = function(){ var optionVal = city.value; switch(optionVal){ case 'cq': var area = document.getElementById("area"); area.innerHTML = "<option>南岸区</option><option>北碚区</option><option>渝中区</option>"; break; case 'qh': var area = document.getElementById("area"); area.innerHTML = "<option>西宁市</option><option>平安区</option>"; break; default: alert("error!"); break; } } </script>
(3)onfocus:获得焦点
(4)onblur:失去焦点
<body> <label for="txt">用户名:</label> <input id="txt" type="text"/><span id="action"></span></body><script type="text/javascript"> var txt = document.getElementById("txt"); txt.onfocus = function(){ var action = document.getElementById("action"); action.innerHTML = "获得焦点"; action.style.color = "green"; } txt.onblur = function(){ var action = document.getElementById("action"); action.innerHTML = "失去焦点"; action.style.color = "red"; }</script>
(5)onmouseover:鼠标悬浮
(6)onmouseout:鼠标离开
<style type="text/css"> #div1{ background-color: red; width: 100px; height: 100px; }</style></head><body> <div id="div1"></div></body><script type="text/javascript"> var div1 = document.getElementById("div1"); div1.onmouseover = function(){ this.style.backgroundColor = "green";//注意这里没有"-"且C变为了大写 } div1.onmouseout = function(){ this.style.backgroundColor = "red";//注意这里没有"-"且C变为了大写 } </script>
(7)onload:加载完毕
<script type="text/javascript"> window.onload = function(){ var span1 = document.getElementById("span1"); span1.innerHTML = "加载完毕"; };</script></head><body> <span id="span1"></span></body>
2、事件的绑定方式
(1)将事件和响应行为都内嵌到html中
<input type="button" value="绑定方式一" onclick="alert('内嵌到html中')"/>
(2)将事件内嵌至html中,响应行为用函数进行封装
(3)将事件和响应行为与html完全分离
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <input type="button" value="绑定方式一" onclick="alert('方式一')"/> <input type="button" value="绑定方式二" onclick="fun()"/> <input id="method3" type="button" value="绑定方式三"/></body><script type="text/javascript"> function fun(){ alert("方式二"); }; //以下是方式三 var btn3 = document.getElementById("method3"); btn3.onclick = function(){ alert("方式三"); }</script></html>
3、this关键字
this经过事件的函数进行传递的是html标签对象
<body> <input type="button" value="按钮" onclick="fun(this)"/> </body> <script type="text/javascript"> function fun(obj){ alert(obj.type);//输出button } </script>
4、阻止事件的默认行为
方式一:
早期的IE:window.event.returnValue = false;
W3C标准:传递过来的事件对象.preventDefault();
<body> <a href="http://www.baidu.com" onclick="fun(event)">点我</a><!-- event代表onclick这个事件 --></body><script type="text/javascript"> function fun(e){ if(e&&e.preventDefault){//W3C标准 alert("W3C标准"); e.preventDefault(); }else{//IE window.event.returnValue = false; } }</script>
方式二:
<a href="http://www.baidu.com" onclick="return false">点我吧</a><!-- 方式二 -->
5、阻止事件的传播
IE:window.event.cancelBubble = true;
W3C标准:传递过来的事件对象.stopPropagation();
<body> <div onclick="fun1()" style="width:50px;height:50px;background-color: pink;padding:20px;"> <div onclick="fun2(event)" style="width:50px;height:50px;background-color: red;"></div> </div></body><script type="text/javascript">/* IE:window.event.cancelBubble = true; W3C标准:传递过来的事件对象.stopPropagation(); */ function fun1(){ alert("fun1"); } function fun2(e){ alert("fun2"); if(e&&e.stopPropagation){ alert("W3C"); e.stopPropagation(); }else{ alert("IE"); window.event.cancelBubble = true; } }</script>
六、JSbom
(1)window对象
①弹出一个框的方法:
提示框:alert("提示信息");
确认框:confirm("确认信息"); 有返回值,点击确认返回true,点击取消返回false
输入框:prompt("提示信息"); 有返回值,点击query返回输入的内容,点击取消返回null
②打开一个网页的方法:
open方法:window.open("url地址");
③定时器:
setTimeout(函数 , 毫秒值); 创建定时器,在设定的毫秒值到达后执行函数
clearTimeout(定时器名称); 清除定时器
setInterval(函数,毫秒值); 创建定时器,按照设定的毫秒值自动重复执行函数
clearInterval(定时器的名称);清除定时器
<body> <span>页面将于<span id="span1" style="color:red">5</span>秒钟后跳转,如没有跳转,请<a href="http://www.baidu.com">点击此处</a></span></body><script type="text/javascript"> var time = 5; var timer; timer = setInterval(function(){ var span = document.getElementById("span1"); if(time >= 1){ span.innerHTML = time; time--; }else{ clearInterval(timer); location.href="http://www.baidu.com"; } },1000 );</script>
③location
页面跳转:location.href="要跳转的url地址"
④history
history.back();上一页
history.forword();下一页
七、JSdom
1、文档对象模型
html文件加载到内存之后会形成一颗dom树,在dom树中,一切皆为结点对象,根据这些结点对象可以进行脚本代码的动态修改
2、dom方法
(1)查找元素结点
①getElementById(); 寻找指定的id属性值的元素,返回值为指定id属性值的元素结点,如果这样的元素不存在,就返回null,,注意:该方法只能用于document对象
②gerElementByName(); 返回指定名称的对象集合(数组)
③getElementByTagName 返回指定标签名的对象集合(数组)
(2)查看是否存在子节点
①hasChildNodes();
(3)dom属性
①nodeName 一个字符串,内容为给定结点的名字,它是一个制度属性
②nodeType 返回一个整数,该数值代表着给定结点的类型,它是一个只读属性
1----代表元素结点 2----代表属性结点 3----代表文本结点
③nodeValue 返回给定节点的当前值,给定节点为一个元素节点时返回值为null,给定节点为文本节点时,返回的是该文本的内容,给定节点为属性节点时,返回的时这个属性的值
(4)属性节点
①getAttributeNode() 返回一个指定的属性节点
②getAttribute() 返回一个给定元素的给定属性节点的值
③setAttribute() 设置属性节点
(5)替换节点
①父元素.replaceChild() 将一个给定父元素里的一个子节点替换为另外一个子节点,该方法有两个参数,第一个参数为新的节点,第二个参数为被替换的节点
(6)创建新节点
①createElement() 按照给定的标签名创建一个新的元素节点
②createTextNode() 创建一个包i喊着指定文本的新文本节点
(7)插入节点
①父元素.appendChild() 为给定元素增加一个子节点,该方法通常于createElement()和createTextNode()配合使用
②insertBefore() 在一个节点之前插入一个节点,该方法有两个参数,前者为插入节点,后者为插入节点之后的节点
③父元素.removeChild() 删除给出父元素中的指定节点
(8)innerHTML
该属性可以用来度,写某个指定元素中的HTML内容
如:
<div id="in1">inner</div> <script> var div = document.getElementById("in1");//读 alert(div.innerHTML); div.innerHTML = "<h1>in1</h1>";//写 </script>
阅读全文
0 0
- javascript cookie学习笔记javascript
- javascript学习笔记
- Javascript学习笔记
- JavaScript学习笔记1
- JavaScript学习笔记2
- JavaScript学习笔记3
- JavaScript学习笔记4
- JavaScript学习笔记5
- JavaScript学习笔记6
- JavaScript学习笔记7
- JavaScript 学习笔记 1
- JavaScript 学习笔记 2
- JavaScript 学习笔记 3
- JavaScript 学习笔记 4
- javascript学习笔记
- javascript学习笔记
- JavaScript学习笔记 一
- javascript学习笔记
- 举例理解C#中的委托
- 1.查看linux下,Qt有是否有通道为关闭
- unity扩展菜单项排序序号
- webstorm注册码
- 网络通信socket连接数问题
- JavaScript学习笔记
- HTML文件中meta标签的使用
- Java面试题全集(上)
- codeforces 499B Lecture
- 08 在ZStack里的led灯控制
- linux下elasticsearch 安装、配置及示例
- Windows快速打开服务
- jdk版本错误 Unsupported major.minor version 51.
- Java面试题全集(下)