<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> alert("test"); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js1.js"></script> </head> <body> </body> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //所有得变量都是使用var来定义 var num = 123; var name = "cling" alert(num+name) //console.log(变量):用来在网页中得控制台来打印变量 </script> </head> <body> </body> </html>
在script标签得第一行中添加 'use strict'。
括在table键上面哪个键的里面
a.slice()截取array中的一部分,规则也是左边闭区间右边开区间。
b.push():压入到尾部。pop:尾部弹出
unshift:压入到头部。shift:从头部弹出
c.sort()排序。reverce()倒序
d.concat():修改数组,返回一个新的数组。但是原来的数组没有被破坏
e.join():拼接数组
a.定义
var person = { 属性 :属性值 , 属性 :属性值, 属性 :属性值 }
b.动态添加、删除属性
delete person name //删除name属性 person.haha = "hahah" //添加haha属性
c.判断属性是否在对象中,其父类的属性也算 属性 in 对象 d.判断对象自己本身的属性:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 'use strict' var map = new Map([['tom',100],['jack',90]]); //Map的定义 var name= map.get("tpm") //通过key获取value map.set("cling",60) //新增或则修改 map.delete("cling") //删除 </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 'use strict' var set = new Set([1,2,3]); //创建set set.add(5); //添加 set.delete(4) //删除 </script> </head> <body> </body> </html>
for(let x of arr){ console.log(x) } for(let x of map){ console.log(x) } for(let x of set){ console.log(x) }
//第一种方式: function abs(x) { ... } //第二种方式 var abs = function (x) { ... }
因为定义的全局变量都会绑定到Windows上。所以在使用了不同的js文件,就会使相同的全局便量发生冲突。为了避免这种冲突就需要使用自己定义的唯一空间名字中,来降低全局命名的冲突问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var cling = {}; //定义自己的唯一空间 cling.name = "cling"; cling.age = 3 </script> </head> <body> </body> </html>
a.由于使用的var定义,所以在作用域之外后i还是可以使用。
b.使用let来定义后就使真的局部变量了
var user = { name:"cling", age:3, sex:'mail' } var jsonUser = JSON.stringify(user); //对象转换为json字符串 var obj = JSON.parse(jsonUser); //json字符串转化为对象
a.window(浏览器窗口)
window.innerHeight 763 window.outerHeight 834 window.innerWidth 522 window.outerWidth 1536 window.alert("asdf")
b.location(当前的页面URL的信息)
location Location {ancestorOrigins: DOMStringList, href: 'http://localhost:63342/JavaScript/lesson1/js1.html?_ijt=uj8je791vjtt6l1tg6jks02tms', origin: 'http://localhost:63342', protocol: 'http:', host: 'localhost:63342', …} ancestorOrigins: DOMStringList {length: 0} assign: ƒ assign() hash: "" host: "localhost:63342" hostname: "localhost" href: "http://localhost:63342/JavaScript/lesson1/js1.html?_ijt=uj8je791vjtt6l1tg6jks02tms" origin: "http://localhost:63342" pathname: "/JavaScript/lesson1/js1.html" port: "63342" protocol: "http:" reload: ƒ reload() replace: ƒ replace() search: "?_ijt=uj8je791vjtt6l1tg6jks02tms" toString: ƒ toString() valueOf: ƒ valueOf() Symbol(Symbol.toPrimitive): undefined [[Prototype]]: Location
c.document(文本内容)
document.title="cling" 'cling'
d.history
history.back() //后退 history.forward() //前进
var h1 = document. getElementsBytagName(hl), var p1= document. getElementById(p1); var p2 = document. getElementsByctassName(p2);
s.style.color='yellow'; //s使已经获取的一个节点 'yellow' s.style.fontSize='500px'; '500px'
<body> <div id="father"> <h1>h1</h1> <p id="p1">p1</p> <p class="p2">p2</p> <ul id="ul"> <li>li1</li> <li>li2</li> </ul> <script> </script> </div> </body>
注意:同时删除多个节点的时候,children的下表是时刻都在变化的。
创建一个新的标签:
var newp = document.createElement('p'); //创建一个p标签 ul.append(newp); //插入到ul中去 newp.id='newp' //设置id newp.innerText='cling' //设置名字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> <p> <span>username:</span> <input type="text" id="username"> </p> <p> <span>password:</span> <input type="password" id="pwd"> </p> <button type="button" onclick="click()">提交</button> </form> <script> function click() { var uname = document.getElementById("username"); var pwd = document.getElementById("pwd"); var pwd_md5 = md5(pwd); //使用md5进行加密 console.log(uname.value); //这里的value有点问题 console.log(pwd.value); } </script> </body> </html>
jQuery包含大量的JavaScript函数
可以引入下载的包也可以引用在线的CDN.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> //在线cdn </head> <body> <a href="" id="test-jquery">点击</a> <script> $("#test-jquery").click(function () { alert("a") }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <style> #divMouse{ height: 500px; width: 500px; border:1px solid red; } </style> <body> mouse:<span id="mouseMove">展示</span> <div id="divMouse">moveMouse</div> <script> $(function () { $("#divMouse").mousemove(function (e) { $("#mouseMove").text('X:'+e.pageX+',Y:'+e.pageY); }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <ul id="ul"> <li name="li1">one</li> <li class="class1">two</li> <li id="li3">three</li> <li id="li4">four</li> </ul> <script> $('#ul li[class=class1]').text(); //读取内容 $('#ul li[class=class1]').text("修改的内容"); //修改内容提供 $('#ul li[id=li3]').html("<strong>newStrong</strong>"); //修改HTML格式 $('#ul li[class=class1]').css({ "color": "#ff0011", "background": "blue" }); $('#ul li[class=class1]').hide(); //隐藏标签 $('#ul li[class=class1]').show(); //显示标签 </script> </body> </html>