JavaScript
独立的语言,浏览器具有js解释器
js的书写方式:
1、js的第一种书写方式
<script> alert('fdsfdsf') </script>
2、js的第二种书写方式
<script src="a.js"></script>
ps:JS代码块放置在<body>标签的最下方
3、注释方式
/*fdsfdsf
dsfdsf
*/
4、变量
5、数据类型
5.1数字
5.2字符串
obj.length // 长度 obj.trim() // 移除空白 obj.trimLeft() obj.trimRight() obj.charAt(n) // 返回字符串中的第n个字符 obj.concat(value, ...) // 拼接 obj.indexOf(substring,start) // 子序列位置 obj.lastIndexOf(substring,start) // 子序列位置 obj.substring(from, to) // 根据索引获取子序列 obj.slice(start, end) // 切片 obj.toLowerCase() // 大写 obj.toUpperCase() // 小写 obj.split(delimiter, limit) // 分割
5.3列表 (数组)
obj.length // 数组的长度 obj.push(ele) // 尾部追加元素 obj.pop() // 尾部获取一个元素 obj.unshift(ele) // 头部插入元素 obj.shift() // 头部移除元素 obj.splice(start, deleteCount, value, ...) // 插入、删除或替换数组的元素 obj.splice(n,0,val) // 指定位置插入元素(从n开始删除0个元素,插入val) obj.splice(n,1,val) // 指定位置替换元素 obj.splice(n,1) // 指定位置删除元素 obj.slice( ) // 切片 obj.reverse( ) // 反转 obj.join(sep) // 将数组元素连接起来以构建一个字符串 obj.sort( ) // 对数组元素进行排序
5.4字典
var dict = {"name":"alex", "age":"22"} dict.name // 调用方式一 dict['name'] // 调用方式二
5.6 bool
6、基本的运算符
算术运算符:
+ - * / % ++ -- var total = num++; // total = num; num+1; var total = ++num; // num = num + 1; total = num; console.log(total);
比较运算符:
> >= < <= !=(值不相等就成立) ==(值相等就成立) ===(值跟类型都相等才成立) !==(值跟类型都不相等才成立)
逻辑运算符:
&& || !
赋值运算符:
= += -= *= /=
字符串运算符:
+ // 如果两边是数字就计算,两边操作数有一个或两个是字符串就做连接运算
7、流程控制
7.1、顺序结构
console.log(“吃饭”);
console.log(“睡觉”);
console.log(“打豆豆”);
7.2、分支结构
7.2.1单分支结构
if(表达式){ 命令 }
7.2.2双分支
if(表达式){ 命令 }else{ 命令 }
7.2.3多路分支
if(表达式){ 命令 }else if(表达式){ 命令 }else if(表达式){ 命令 }else{ 命令 }
7.2.4switch...case
switch (expression){ case label1 : statement1; break; case label2 : statement2; break; default : statementdefault }
7.3 循环结构
for循环
1.1列表循环时,循环的元素是索引
var a = [11,22,33,44]; for (var item in a){ console.log(a[item]) }
以上代码运行结果
11 22 33 44
1.2循环列表方式二
var a = [11,22,33,44];
for (var i = 0;i<a.length;i=i+1){
console.log(a[i])
}
以上代码运行结果:
11 22 33 44
2.字典循环时,循环的元素是key
var a = {'k1':'v1','k2':'v2'} for (var item in a){ console.log(a[item]) }
以上代码运行结果:
v1
v2
while循环(do...while)
var n = 0; do{ console.log('fdsfs') n = n + 1; }while(n<3);
7.4 函数三种书写方式
普通函数
function test(arg){ console.log(); } // 调用方式: test(arg);
函数当成变量
var func = function(){ console.log('fdsfs'); } // 调用方式: func();
匿名函数
setInterval(function () { console.log(123) },2000);
自执行函数
(function(arg){ console.log(arg) })(123) // 调用方式: // 直接执行上面的函数
7.5.系统函数
7.5.1、序列化
JSON.stringify(obj) // 序列化,把对象转换成字符串 JSON.parse(str) // 反序列化,把字符串转换成对象
7.5.2、转义
js将数据经过转义后,保存在cookie中
decodeURI( ) // URl中的字符转中文 decodeURIComponent( ) // URI中的字符转中文 encodeURI( ) // URI中的中文转字符 encodeURIComponent( ) // URI中的':/=?&'转字符 escape( ) // 对字符串转义 unescape( ) // 给转义字符串解码 URIError // 由URl的编码和解码方法抛出
7.5.3.eval
python: val = eval(表达式) exec(执行代码,不能获取返回值) JavaScript: eva(l既可以执行表达式,也可以执行代码。)
7.5.4时间
var d = new Date() d // 显示当前完整时间 d.getDate() //显示当前day d.getMinutes() //显示当前minutes
作用域:
<script> function func() { for (var i=0;i<3;i++){ setInterval(function () { console.log(i) },1000) } } func(); </script>
以上代码输出:很多个3
JavaScript 正则表达式
/.../ // 用于定义正则表达式 /.../g // 表示全局匹配 /.../i // 表示不区分大小写 /.../m // 表示多行匹配,默认多行匹配
search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,存在就返回子串的起始位置,不存在则返回-1。
'exc'.search(/e/) // 结果为0
replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
'exc'.replace(/xc/,'fg') // 结果为efg
test() 方法 用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
/e/.test('exc') // 检测字符e是否在字符串exc里,结果为true
exec() 方法 用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
/e/.exec('exc')[0] // 检测字符e是否在字符串exc里,结果为"e"
非全局模式 获取匹配结果数组,注意:第一个元素是第一个匹配的结果,后面元素是正则子匹配(正则内容分组匹配) var pattern = /\bJava\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) 全局模式 需要反复调用exec方法,来一个一个获取结果,直到匹配获取结果为null表示获取完毕 var pattern = /\bJava\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text) var pattern = /\b(Java)\w*\b/g; var text = "JavaScript is more fun than Java or JavaBeans!"; result = pattern.exec(text)
跑马灯实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">欢迎光临</div> <script> function f1() { var tag = document.getElementById('i1'); var tagtext = tag.innerText; var f = tagtext.charAt(0); var l = tagtext.substring(1, tagtext.length); var new_content = l + f; tag.innerText = new_content ; } setInterval('f1();', 1000) </script> </body> </html>
DOM
1.HTML Document Object Model(文档对象模型)
2.HTML DOM 定义了访问和操作HTML文档的标准方法
3.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)
一、选择器:
1.直接选择器
document.getElementById // 根据ID获取一个标签 document.getElementsByName // 根据name属性获取标签集合 document.getElementsByClassName // 根据class属性获取标签集合 document.getElementsByTagName // 根据标签名获取标签集合
实例:
document.getElementById('i1') //访问id为i1的元素 document.getElementsByName('aa') //访问所有包含name属性为aa的元素,返回一个列表 document.getElementsByTagName('input') //访问所有<input>元素,返回一个列表 document.getElementsByClassName('c1') 方法 //访问标签属性为c1的所有元素,返回一个列表 document.getElementById("main").getElementsByTagName("p"); //访问所有 <p> 元素的列表,并且这些 <p> 元素应该是 id="main" 的元素的后代(子、孙等等)
2.间接选择器
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签,得到一个列表 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
二、操作
1、内容
innerText // 文本 outerText innerHTML // HTML内容 outerHTML value // 值
2、属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById('n1').setAttributeNode(atr); */
3、class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
4.提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id='f1' action="http://www.baidu.com"> <a onclick="confirm();">跳转</a> </form> <script> function confirm() { document.getElementById('f1').submit() } </script> </body> </html>
5、弹出框和输出框
console.log //输出框 alert //弹出框 confirm //确认框
6、获取URL和刷新
// URL和刷新 location.href // 获取URL location.href = "url" // 重定向 location.reload() // 重新加载
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="confirm();">跳转</a> <script> function confirm() { location.href = 'http://www.baidu.com'; } console.log('href',location.href); // location.reload() </script> </body> </html>
7、定时器
// 定时器 setInterval // 多次定时器 clearInterval // 清除多次定时器 setTimeout // 单次定时器 clearTimeout // 清除单次定时器
setInterval('执行的代码',间隔时间) // setInterval会先执行eval('执行的代码')
<script>
function f1() {
s1 = setInterval("console.log(123);",2000); //这里的s1要设置成全局变量
}
function f2() {
clearInterval(s1)
}
f1();
// setInterval('f2()',6000) //方式一
setInterval(f2,6000) //方式二
</script>
8、事件
onclick、onfocus、onmouseover...
写一个行为(js)、样式(css)、结构(HTML)相分离的页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: pink; color: green; } </style> </head> <body> <div class="c1">dsfds</div> <div class="c1">hhhd</div> <script> var mydiv = document.getElementsByClassName('c1'); var len = mydiv.length; for (var i=0;i<len;i++){ mydiv[i].onclick = function () { this.innerText = 'gogogo'; //谁调用的this,this就是谁(这里的this如果改成mydiv[i],当点击的时候,触发的都是mydiv[1]) this.style.color = 'red' } } </script> </body> </html>
当绑定的两个事件重叠的时候,是冒泡方式执行的,先执行里面的,再执行外面的:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: pink; width: 300px; height: 200px; z-index: 10; } #i2{ background-color: aquamarine; width: 150px; height: 100px; z-index: 1; } </style> </head> <body> <div id="i1"> <div id="i2"></div> </div> <script> var mydiv1 = document.getElementById('i1'); var mydiv2 = document.getElementById('i2'); mydiv1.onclick = function () { console.log(1); }; mydiv2.onclick = function () { console.log(2); } </script> </body> </html>
同时绑定多个事件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: pink; color: green; } </style> </head> <body> <div class="c1" id="i1">dsfds</div> <script> var mydiv = document.getElementById('i1'); mydiv.addEventListener('click',function () { console.log('aaa') },false); //这里的false表示冒泡(从内到外),如果改成true就是捕捉(从外到内),就会先执行外面的,再执行里面的。 mydiv.addEventListener('click',function () { console.log('bbb') },false); </script> </body> </html>
左侧菜单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ height: 20px; width: 100px; background-color: pink; } .hide{ display: none; } </style> </head> <body> <div> <div class="item"> <div id="i1" class="header" onclick="func('i1')">标题一</div> <div class="content"> <div>内容</div> <div>内容</div> <div>内容</div> </div> </div> <div class="item"> <div id="i2" class="header" onclick="func('i2')">标题二</div> <div class="content"> <div>内容</div> <div>内容</div> <div>内容</div> </div> </div> <div class="item"> <div id="i3" class="header" onclick="func('i3')">标题三</div> <div class="content"> <div>内容</div> <div>内容</div> <div>内容</div> </div> </div> <div class="item"> <div id="i4" class="header" onclick="func('i4')">标题四</div> <div class="content"> <div>内容</div> <div>内容</div> <div>内容</div> </div> </div> </div> <script> function func(nid) { var p = document.getElementById(nid).parentElement.parentElement; var item = p.children; for (var i=0;i<item.length;i++){ var content = item[i].children[1]; content.classList.add('hide') } document.getElementById(nid).nextElementSibling.classList.remove('hide') } </script> </body> </html>