文章目录
对象
时间对象
内置操作 不需要插件-Date
var date=newDate();
date.getFullYear();//年
date.getMonth()+1;//获取月份 取值为0-11 所以要＋1
date.getDate();//获取日期
date.getDay();//获取星期
date.getHours();//获取小时
date.getMinutes();//获取分钟
date.getSeconds();//获取秒
数学对象
Math 内置方法 不用引入插件
Math.ceil(1.1); //向上取整
Math.floor(1.9); //向下取整
Math.round(1.5); //四舍五入
Math.abs(-1);//绝对值
Math.max(2,3,1,77,33,23); //取最大值
Math.min(2,3,5,1,56); //取最小值
Math.pow(2,4); //幂运算 2的4次方
Math.sqrt(16); //开平方根
Math.random(); //随机数 [0,1)
定时器
一旦开始 不会自己结束 需要手动设置停止
间歇定时器
每隔一段时间发生一次
使用场景: 轮播 倒计时
/*
setInterval(function(){},时间ms为单位);
*/
setInterval(function(){
console.log(11);
},500);
//清除定时器
clearInterval();
延时定时器
只发生一次
使用场景: 广告
/*
setTimeout(function(){},时间ms为单位);
*/
setTimeout(function(){
console.log('延时出现');
},500);
函数
function
封装 : 当功能反复使用时–便于使用
调用才能执行
声明式和表达式的区别: 声明式可以先声明再调用 也可以先调用再声明, 表达式只能先声明在调用 否则无效
<script>
//声明式
function func(){
console.log(11);
}
func();
//表达式
var fn=function(){
console.log('function');
}
fn();
</script>
参数
形参 实参
参数一一对应
<script>
/*
function fn(形参){
操作;
}
fn(实参);
*/
function fn(a,b){
console.log(a+b);
}
fn(2,5);
</script>
arguments : 类数组
可以拿到实参的集合
<script>
function fn(){
console.log(arguments[0]+arguments[1]);
}
fn(2,5);
</script>
闭包
函数套函数
全局变量:全局都可以读取修改
局部变量:在声明的作用域内有效 作用域外无效
缺点:会造成内存泄漏 不会被销毁
<script>
function one(){
var i=1;
return function(){
console.log(i++);
}
}
var f = one();
f();
f();
//结果是1 2--因为是执行里边的函数
one()();
one()();
//结果是1 1--因为每次都是从头执行
</script>
BOM
浏览器对象模型
包含很多内置方法 事件,弹出框
<script>
console.log(window);
</script>
<button id="btn">btn</button>
<button id="back">go back</button>
<script>
var btn=document.getElementById('btn');
var back=document.getElementById('back');
btn.onclick=function(){
window.open('day2-8.html','_self');
//open默认新页面打开 传_self参数只在当前页面打开 传_blank参数在新页面打开(默认)
}
back.onclick=function(){
//弹出框:alert prompt confirm
history.go(1);//历史操作 可以执行上一步的操作 -n操作上n步 n操作下n步
window.close();//close 关闭页面
console.log(window.location);//查看地址信息
window.location='day2-8.html';//location跳转 默认当前页面跳转
window.navigator//查看浏览器信息
}
</script>
DOM
DOM 文档对象模型 document
获取元素
- 通过id获取
document.getElementById("元素id");
- 通过class类名获取
document.getElementsByClassName("类名");
- 通过标签名获取
document.getElementsByTagName("标签名");
获取子元素
父元素.children
var box=documen.getElementById('box');
box.children //所有子标签
childNodes //不常用 多一个文本节点
获取父元素
元素.parentNode
// 找有定位的父级元素 如果父级元素中都没有定位 则找到body
offsetParent
获取其他节点
firstElementChild //获取第一个子节点
previousElementSibling //获取上一个兄弟节点
nextElementSibling //获取下一个兄弟节点
删除节点
// remove
//元素.remove;
//removeChild 不常用
//元素.removeChild();
复制节点
cloneNode(true);
//传true:标签和内容一起复制
//不传/传false: 仅复制标签 不复制内容
//元素.cloneNode();
创建标签
document.createElement('标签');
document.createTextNode('');//创建文本 不常用
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<button id="btn">appened</button>
<script>
var btn=document.getElementById('btn');
var uls=document.getElementsByTagName('ul')[0];
var lis=document.getElementsByTagName('li');
btn.onclick=function(){
var newLi=document.createElement('li');
newLi.innerHTML='44';
uls.appendChild(newLi);
uls.insertBefore(newLi,lis[0]);//从中间插入(新标签,位置)
}
</script>
</body>
事件
常用事件
- onclick()点击事件
- onmouseover()鼠标滑过
- onmouseenter()鼠标划入
- onmouseout/leave()鼠标划出
- onmousedown/up()鼠标按下/抬起
- onmousemove()鼠标移动
- ondblclick()鼠标双击事件
- oncontextmenu()鼠标右键
- onkeydown/up()键盘按下/抬起
- onresize()窗口改变事件
- onfocus()聚焦事件
- onblur()失焦事件
- onscroll()滚动事件
事件的冒泡和捕获
有层级关系,点击最里层元素, 外层元素的时间逐一发生
<style>
#box1{
width: 300px;
height: 300px;
background: red;
}
#box2{
width: 200px;
height: 200px;
background: blue;
}
#box3{
width: 100px;
height: 100px;
background: yellow;
}
</style>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
var box3=document.getElementById('box3');
box1.onclick=function(){
alert('box1');
}
box2.onclick=function(){
alert('box2');
}
box3.onclick=function(){
alert('box3');
}
</script>
阻止冒泡[冒泡是默认的]
事件.stopPropagation(); —标准浏览器
事件.cancelBubble=true; —ie
捕获[需要设置]
在层级关系中,电机外层元素,里层元素事件逐一发生
事件绑定:addEventListener[事件监听] attachEvent()–ie没有捕获
普通的事件绑定 同个元素有多个同种事件类型,只有最后一个能生效
元素.addEventListener(‘事件类型’,‘函数名’,是否捕获-默认false冒泡 true捕获)
<script>//标准浏览器
btn.addEventListener('click',one,false);
btn.addEventListener('click',two,false);
function one(){
console.log(111);
}
function two(){
console.log(222);
}
</script>
<script>//IE
btn.attachEvent('onclick',one);
//区别:关键字不一样 值的个数不一样 事件类型书写方式不同
</script>
取消事件监听
[标准]removeEventListener(‘事件类型’,‘函数名’);
[IE]detachEvent(‘on事件类型’,‘函数名’);
取消默认行为
[标准]事件.preventDefault();
[ie]事件.returnValue= false;
<script>
document.oncontextmenu=function(ev){
console.log(ev);
}
</script>
面向对象
构造函数
特点:
函数名首字母大写
用this赋值
无需return
实例化新对象用new
<script>
function Fn(){
this.a=10;
}
var newObj=new Fn();
</script>
原型prototype
对象:__proto__属性
函数:prototype原型 也有__proto__属性 因为函数就是对象
原型上的属性和方法是共享的
面向过程
面向对象
jQuery
引入方式:在线引入 本地引入
选择器
<script>
$('div');
$('.box');
$('#box');
$('#box p');
</script>
<script>
$('ul li:eq(1)').css('background','red');//eq为下标 不支持[下标]
$('ul li:first').css('background','red');//first选中第一个 last最后一个
$('ul li:lt(2)').css('background','red');//lt下标小于2的 gt是大于
$('ul li:odd').css('background','red');//odd下标为奇数的 even下标为偶数
$('p[data=11]').css('color','blue');//通过p标签里的自定义属性data定位
</script>
DOM操作
<script>
//子元素:children
$('ul').children();
//父元素:parent()获取直系父元素 parents()获取祖先元素
$('p').parent();
$('p').parents('div');//可以具体找一个祖先
//兄弟标签
//div>p+span+ul
$('p').next().css('background','gold');//下一个兄弟元素
$('p').nextAll().css('background','gold');//所有下面的兄弟元素
$('p').prev().css('background','gold');//上一个兄弟元素
$('p').prevAll().css('background','gold');//所有上边的兄弟
//子孙元素
//div>p>a>span>b
$('div').find('b').css('background','red');//查找所有子孙元素 不包括它本身
</script>
实例:验证码-定时器
点名器-定时器
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
