javascript小记
2019-03-04 19:06
218 查看
- js标识符字母 下划线 美元符号 区分大小 忽视空格 Ctrl + / 注释
- var 定义字符串、数字、布尔、数组、对象、空、未定义、通过赋值null清除变量
- ==判断"10"==10结果为true ; ===判断"10"===10结果为false;！==同理
- 三目？：
条件语句 ifelse switch
循环for; for in;while; do while; for in 自动执行循环不需要++ ; break continue类似C - 弹出对话框 alert()；
function demo(){
var i=10;//局部变量
x=100;//全局变量
}
- 异常捕获：try catch // throw
- 事件
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
<script>
function onOver(ooj){//函数命名首字母小写 后单词首字大写
ooj.innerHTML="Hello";
}
function onOut(ooj){
ooj.innerHTML="World";
}
</script>
<div class="" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
- onChange 文本内容改变事件
- onSlect 文本框选中事件
<form><input type="text" onselect="changeDemo(this)"></form>
<script>
function changeDemo(bg){
bg.style.background="red";
}
</script>
- onFocus 光标聚集事件
<form><input type="text" onfocus="changeDemo2(this)"></form>
<script>
function changeDemo2(bg){
bg.style.background="blue";
}
</script>
- onBlur 移开光标事件
- onLoad 网页加载事件 //网页刷新完毕后弹出
<body "mgs()">
<script>
function mgs(){
alert("网页内容加载完毕");
}
</script>
-
onUnload 关闭网页事件
-
DOM对象简介
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） -
DOM操作HTML
javascript改变页面中所有HTML元素
javascript改变页面中所有HTML属性
js改变页面中所有的css样式
js对页面中的所有事件做出反应
1、改变HTML输出流（注意不要在文档加载完成之后使用document.write()，这会覆盖文档）
2、寻找元素：通过id找到HTML元素 document.getElementById("")
通过标签名找到HTML元document.getElementByTagName(“p”)
3、改变HTML内容 ：使用属性innerHTML
4、改变属性 atrribute？
<a id="aid" href="www.">hello</a>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href="www.";
}
</script>
- DOM操作CSS
语法：document.getElementById(id).style.property=new style
<div id="div" class="div">hi</div>
<button onclick="demo()">anniu</button>
<script>
function demo(){
document.getElementById("div").style.background="blue";
}
</script>
- DOM EventListener事件句柄
方法：addEventListener(): removeEventListener():
1、addEventListener()用于向指定元素添加事件句柄
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){alert("hello")});
</script>//不用担心修改名字 多个句柄不会覆盖
<button id="btn">按钮</button>
<script>
var x=document.getElementById("btn");
x.addEventListener("click",hello);//此处不是onclick注意
x.addEventListener("click",world);
function hello(){
alert("hello");
}
function world(){
alert("world");
}
</script>
2、removeEventListener()移除方法添加的事件句柄 x.removeEventListener(“click”,hello);
- 事件详解
事件流：描述的是在页面中接受事件的顺序
事件冒泡：由最具体的元素接受，然后逐级向上级传播至最不具体的元素的节点(文档)
事件捕获：最不具体的节点先接受事件，而最具体的节点应该是最后接受事件
事件处理：
1、HTML事件处理 直接添加到HTML结构中 button的onclick属性 修改一处需要修改两处
2、DOM 0级事件处理 把一个函数值赋值给一个事件处理程序属性
<div id="div">
<button id="btn1">按钮</button>
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function (){alert("DOM 0级事件处理1")}；//坏处 事件被覆盖掉
btn1.onclick=function (){alert("DOM 0级事件处理2")}；
btn1.onclick=null;
</script>
3、DOM 2级事件处理
addEventListener(“事件名”,“事件处理函数”,“布尔值”);//bool值当前版本忽略
true：事件捕获 false：事件冒泡 removeEventListener();
同上面案例DOM EventListener事件句柄add/remove
4、IE事件处理程序 小于等于ie8的版本 名词不同 参数同
attachEvent
detachEvent
<script>
var btn1 = document.getElementById("btn1");
if(btn1.addEventListener){
btn1.addEventListener("click",demo);//DOM 2级
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo);//IE8以下
}else{
btn1.onclick = demo();//DOM 0级
}
function demo(){
alert("Hi");
}
</script>
- 事件对象
在触发DOM事件的时候都会产生一个对象
事件对象event
type：获取事件类型
target：获取事件目标
<script >
document.getElementById("btn1").addEventListener("mouseover",showType);
function showType(event){
alert(event.type);//类型onmouseover
alert(event.target);// objectHTMLbuttonElement
}
</script>
stopPropagation：阻止事件冒泡
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>//点一下button 外部的div 的id识别也触发 事件冒泡
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
function showType(event){
alert(event.target);// objectHTMLbuttonElement
event.stopPropagation();//阻止事件冒泡
}
function showDiv(){
alert("div");
}
</script>
preventDefault():阻止事件默认行为
function showA(event){
event.stopPropagation();//阻止事件冒泡
event.preventDefault();//阻止默认事件如超链接点击后跳转
}
- JS内置对象
什么是对象
js中的所有事物都是对象：字符串、数值、数组、函数
每个对象带有属性和方法
js中允许自定义对象
自定义对象：
1、定义并创建对象实例
<script>
people = new Object();
people.name = "iwen";
people.age = "30";
document.write("name:"+people.name+",age:"+people.age);
/*people = {name:"iwen",age:"30"};也可以创建*/
</script>
2、使用函数来定义对象，然后创建新的对象实例
<script>
function people(name,age){
this._name = name;this._age = age;//用this索引
}
son = new people("iwen","30");
document.write("name:"+son._name+",name:"+son._age);
</script>
- String字符串对象
String对象用于处理已有的字符串
字符串可以使用单引号或双引号
indexOf查询字符串是否存在
内容匹配match
替换内容replace()
字符串大小写转换toUpperCase()/toLowerCase()
字符串转为数组：strong>split()
<script>
var str="hello world";
document.write("字符串长度："+str.length);
document.write(str.indexOf("world"));//返回位置或-1
document.write(str.match("world"));//打印出来或者空
document.write(str.replace("world","scuw"));//打印出来或者空
document.write(str.toLowerCase());
var str1 ="hello,seu,scu";
var s = str1.split(",");
document.write(s[1]);
</script>
- 字符串属性和方法：属性 length prototype constructor
方法 charAt() charCodeAt() concat() formCharCode() lastIndexOf() search() slice() substring() substr() valueOf() - Date日期对象
日期对象用于处理日期和时间
getFullYear()获取年份 getTime()获取毫秒
setFullYear()设置具体的日期 getDay()获取星期
<script>
var date = new Date();
document.write(date);
</script>
时钟实例
<body "startTime()">
<script>
function startTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
document.getElementById("timetxt"),innerHTML=h+":"+n+":"+s;
t = setTimeout(function(){startTime();},500);
}
function checkTime(i){
if(i<10){
i = "0"+i;
}
28a11
return i;
}
</script>
<div id="timetxt"></div>
</body>
- Array数组对象 [0]
数组常用方法：concat()合并数组；sort()排序；push()末尾追加元素；reverse()数组元素翻转
var c = a.concat(b); - Math对象
执行常见的算数任务
round()四舍五入 random()返回0-1随机数乘10转int max() min() abs() - js DOM对象控制HTML
方法：
getElementsByName()-获取name 相同则存在一个数组中
getElementsByTagName()-获取元素 相同则存在一个数组中
getAttribute()-获取元素属性
setAttribute()-设置元素属性
var anode = document.getElementById("");
anode.setAttribute(“属性名例如title”,“设置属性”)
childNodes()-访问子节点
<script>
function getChildNode(){
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);
}
getChildNode();
</script>
parentNodes()-访问父节点
createElement()-创建元素节点
<script>
function createNode(){
var body = document.body;
var input = document.createElement("input");
input.type="button";
input.value="按钮";
body.appendChild(input);
}
createNode();
</script>
createTextNode()-创建文本节点
insertBefore()-插入节点
<script>
function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode =document.createElement("p");
newnode.innerHTML="动态添加p元素";
div.insertBefore(newnode,node);
}
addNode();
</script>
removeChild()-删除节点
<script>
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}removeNode();
</script>
offsetHeight()-网页尺寸-不包含滚动条
<script>
function getSize(){
var width = document.body.offsetWidth;
//var width = document.documentElement.offsetWidth;
}getSize();
</script>
scrollHeight()-网页尺寸-包含滚动条
- JS浏览器对象-window对象
1、window对象：
window对象是BOM的核心，window对象指当前的浏览器窗口
所有js全局对象、函数以及变量均自动成为window对象成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
2、window尺寸：
window.innerHeight 浏览器窗口内部高度
window.innerWidth 浏览器窗口内部宽度
3、window方法：
window.open(可以设置新窗口大小位置各种属性) 打开新窗口
window.close() 关闭当前窗口 - JS浏览器对象-计时器
计时事件：通过使用js在一个设定的时间间隔后执行代码，而不是在函数被调用后立即执行，称之为计时事件
计时方法：①setInterval()-间隔指定的毫秒数不停地执行指定的代码
clearInterval()-方法用于停止setInterval()方法执行的函数代码
<button id="btn" onclick="stopTime()">按钮</button>
<p id="ptime"></p>
<script>
var mytime = setInterval(function(){
getTime();},1000);
function getTime(){
var d = new Date();
var t = d.toLocateTimeString();
document.getElementById("ptime").innerHTML=t;
}
function stopTime(){
clearInterval(mytime);
}
</script>
② setTimeout()-暂停指定的毫秒数后执行指定的代码
clearTimeout()用于停止执行setTimeout()的函数代码
<button id="btn" onclick="myWin()">按钮</button>
<script>
var win;
function myWin(){
win=setTimeout(function(){alert("hi")},3000);
}
</script>//垃圾网站不停弹窗口原理
- History对象
History对象:window.history对象包含浏览器的历史url集合
History方法：
history.back()-与在浏览器点击后退按钮相同
history.forward()-浏览器中点击按钮向前相同
<a href="#.html">跳转到#</a>
<button id="btn" onclick="goob()">按钮</button>
<script>
function goob(){
history.forward();
}
</script>
history.go()-进入历史中某个页面
<form>
<input type="text" id="username"></input>
<button id="btn" onclick="safe()">按钮</button>
</form>
<script>
function safe(){
var name=document.getElementById("username").value;
if(name=="hello"){
history.go(-1);//本html来自另一个html的超链接 若符合 则回到上一个html
}else{
alert("error input");
}
}
</script>
-
JS浏览器对象-Location对象
window.location对象用于获得当前页面的地址URL，并把浏览器重定向到新的页面
Location对象的属性：
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol返回所使用的web协议(http://或https😕/)
location.href属性返回当前页面的URL
location.assign()方法加载新的文档//达到超链接的效果
Screen对象
window.screen对象包含有关用户屏幕的信息
属性：
screen.availWidth-可用的屏幕宽度
screen.availHeight-可用的屏幕高度
screen.Width-屏幕宽度
screen.Height-屏幕高度 -
JS瀑布流效果-布局 //例如百度图片搜索的界面效果
-
JS面向对象
认识面向对象
一切事物皆对象 对象具有封装和继承特性 信息隐藏
基本面向对象
<script>
var person{
name:iwen,
age:30
}
alert(person.name);
</script>
函数构造器构造对象
<script>
function Person(){}
Person.prototype={
name:"iwen",age:30
}
var p = new Person();
p.name;
</script>
深入JavaScript面向对象
<script>
(function(){
var n ="ime";
function People(name){
this._name=name;
}
People.prototype.say=function(){
alert("peo-hello"+this._name+n);
}
window.People=People;//让全局调用
}());//function内套function封装 括号围起来执行
(function(){
function Student(name){
this._name=name;
}
Student.prototype=new People();//继承
var superSay=Student.prototype.say;
Student.prototype.say=function(){
superSay.call(this);
alert("stu-hello"+this._name);
}
window.Student=Student;//让全局调用
}());
var s =new Student("iwen");
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript小记2011/9/30
- javascript学习小记
- javascript 线程问题小记
- javascript语言结构小记(一)
- javascript小记3 2011/10/04
- javascript小记5 2011/10/05
- JavaScript中字符串转Json方法小记
- javascript小记4 2011/10/05
- <javascript>Number.prototype.toFixed小记
- JavaScript -小记
- javascript操作iframe小记
- JavaScript优化小记
- 编写高质量 JavaScript -- 知识点小记
- JavaScript原型（prototype）小记
- JavaScript 原型及原型链，闭包——小记
- javascript构造函数小记
- javascript 正则式小记
- javascript小记6 2011/10/08
- 编写高质量 JavaScript -- 知识点小记
- javascript小记-闭包理解