大型内容回顾
一.JavaScript
1.ECMAScript基础语法
(1).声明变量 var
(2).流程控制
if else if else
while
for
do-while
switch
(3).运算符
+= -= ++ -- = ==:比较的是值 ===:比较的是值和数据类型 != !== > <
(4).数据类型
1.基本数据类型
string
number
boolean
null
undefined
2.复杂的数据类型
(1).字面量方式创建
var arr = []
(2).new Array()
Array
(3).Object
(4).json
(5).字面量方式创建
var person = {
name:"娃哈哈"
age:18
fav:function(){
alert(this.name)
}
};
person.name;
person.fav();
{key1:value1,key2:def}
(6).Function
普通函数
function add(x,y){
return x+y;
}
add(1,2);
函数对象
var add = function(x,y){
return x+y;
}
add(3,4)
(7).arguments
实参,它是一个伪数组,它里面有索引length目的
DOM
var oDiv = document.getElementsByClassName("box");
2.DOM
(1).Document object Model
文档 对象 模型
(2).对象
属性和方法
属性:获取值和赋值
方法:赋值方法和调用方法
(3).DOM树
document
html
head body
title meta link.. div.header div.content div.footer
3.DOM的获取
(1).获取document对象
console.log(document);
(2).获取html对象
document.documentElement
(3).获取body对象
document.body
(4).提供三种方法来获取body中的DOM
div #box .box
(5).通过id获取
document.getElementById("box");
(6).通过类获取
var olis = document.getElementsByClassName("box"); for(var i=0; i<olis.length; i++){ olis[i].onclick = function(){ alert(this.innerText); } }
(7).通过标签获取
var oDivs = document.getElementsByTagName("div");
(8).DOM三步走
- 获取事件源
- 事件绑定 onclick
onmouseover | onmouseout : 穿过父元素或子元素就会调用
onmouseenter | onmouseleave : 只穿过父元素
- 事件驱动(业务逻辑)
(9).对标签样式属性的操作
oDiv.onclick = function(){
//点语法 set方法 get方法 readonly 只读
console.log(this.style);
this.style = null;
this.style.width = "200px";
this.style.marginLeft = "40px";
}
(10).对标签属性的操作
id
class
src
alt
href
title
type
name
(11).对值的操作
- innerText 只读文本
- innerHTML 获取文本和标签
- value 事件
(12).对DOM对象的操作(增删改查)
(13).模块字符串 `` 插入变量用${变量名}
let es6中声明变量: 没有变量提升,局部作用域
(14).控制元素显示隐藏
应用:网页中频繁性的切换建议使用这个
控制style.display属性显示隐藏
控制className对元素显示隐藏
问题:初识化的时候有渲染
应用:网页中少量的切换建议使用
对元素的创建和销毁
生命周期出生入死
(15).库和框架
库:小而精,JS的一部分的功能
框架:大而全,全家桶
交互:数据接口api
前后端交互非常重要
4.选项卡
var olis = document.getElementsByTagName('li'); var oPs = document.getElementsByTagName('p'); var i; for(i = 0; i < olis.length; i++){ olis[i].index = i; olis[i].onclick = function() { for(var j = 0; j < olis.length; j++){ olis[j].className = ''; oPs[j].className = '' } this.className = 'active'; // olis[this.index].className = 'active'; oPs[this.index].className = 'active'; } }
let olis = document.getElementsByTagName('li'); let oPs = document.getElementsByTagName('p'); for(let i = 0; i < olis.length; i++){ olis[i].onclick = function() { for(let j = 0; j < olis.length; j++){ olis[j].className = ''; oPs[j].className = '' } this.className = 'active'; oPs[i].className = 'active'; } }
5.定时器
(1).一次性定时器: 可以做异步
(2).循环周期定时器: 可以做动画
JS跟python一样都有垃圾回收机制
but 定时器对象,垃圾回收收不回
开一次性定时器
var timer = setTimeout(fn, 1000);
开循环定时器
setInterval(fn, 1000);
clearTimeout()
clearInterval()
/* var timer = null; document.getElementById('start').onclick = function() { // 未来 数据交互的时候 如果数据阻塞了，可以考虑 加一个一次性定时器来处理 timer = setTimeout(function(){ console.log(1111); },3000); console.log(2222); } document.getElementById('clear').onclick = function() { clearTimeout(timer); } */ var count = 0; var timer = null; document.getElementById('start').onclick = function() { var oDiv = document.getElementById('box'); clearInterval(timer); timer = setInterval(function() { count+=10; oDiv.style.marginLeft = count + 'px'; }, 50) }
6.JS面向对象
// new Array() // [] /* var person = new Object(); person.name = 'alex'; person.age = 18; person.fav = function() { alert(this.name); } person.fav(); */ /* // 1.字面量方式创建对象 var person = { name:'玖妖', age:18, fav:function() { alert(this.name) } }; person.fav(); */
//2.工厂模式创建 function createPerson(){ var person = new Object(); person.name = 'alex'; person.age = 18; person.fav = function() { alert(this.name); } return person; } function createFruit(){ var fruit = new Object(); fruit.name = 'alex'; fruit.age = 18; fruit.fav = function() { alert(this.name); } return fruit; } var p1 = createPerson(); var f1 = createFruit(); console.log(p1 instanceof Object); console.log(f1 instanceof Object);
//3.自定义构造函数 function Person(name,age) { this.name = name; this.age = age; this.fav = function() { alert(this.name); } } function Fruit(name,age) { this.name = name; this.age = age; this.fav = function() { alert(this.name); } } var p1 = new Person('alex',17); var f1 = new Fruit('wusir',19); console.log(p1 instanceof Object); console.log(f1 instanceof Object); console.log(p1 instanceof Person); console.log(f1 instanceof Fruit);
//4.原型对象创建对象 function Person(name,age) { this.name = name; this.age = age; } // Person.prototype 它是person的父类 // 原型 prototype Person.prototype.showName = function() { // this指的是person console.log(this.name) } var p1 = new Person('alex',18); console.log(p1); p1.showName();
7.BOM
本地信息对象
window,location
window.open()方法
二.jQuery
1.client offset scroll
2.jQuery的概念
(1).JS query
(2).库和框架
库: 小而精 直接操作DOM jQuery封装了JS的哪些操作(大量的api==方法) 事件 属性 DOM 选择器 ajax(交互的技术) 框架:大而全 事件, DOM, 属性操作, ajax, "模板引擎"
3.使用jQuery
(1).引用:<script src="jquery.js"></script>
(2).使用
<script>
//入口函数
$(function(){
//DOM操作三步走：事件源 事件 事件驱动
//选择器 就是来获取事件源的
id
$('#box')
class
$('.box')
标签
$('div')
//事件和事件驱动 在click方法中的函数称为回调函数
$('#box').click(function(){
//对样式的操作
.css()方法
})
});
</script>
入口函数: //等待文档加载完成之后才调用 $(function(){}); //简单推荐 $(window).ready(function(){});
(3).DOM事件的三步走
a.事件源
主要还是学习选择器 CSS大部分选择器都可以使用 $("div"); 获取出来的是jQuery对象 $("#box"); $(".active"); 选择器的方法
b.事件
JS: onclick onmouseover onmouseout onmouseenter onmouseleave onscroll onresize onchange onsubmit
jQuery的事件都不带on
click()参数是一个回调函数,当调用click方法之后,做完了事件操作,jQuery内部又返回了一个jQuery对象,所以我们又可以再次调用jQuery的方法
c.事件的回调函数是事件驱动
4.JS和jQuery对象的转换
JS==>jQuery对象 $(JS对象) jQuery(对象)==>JS JQ对象[0] JQ对象.get(0)
5.选择器
作用:选中标签中对应的JQ对象
jQuery的选择器 基本选择器 属性选择器 input[type=text] 筛选选择器(方法) .eq() .siblings() 除它之外,选取其它的兄弟元素(选项卡) .first() .last() .find() 查找后代 .children() 查找子代 .parent() 查找父亲
基本过滤选择器
$("li:eq(0)")
6.DOM的操作
(1).对样式属性的操作
.css('color')
.css({
color:'red',
width:300
})
- 如果有一个参数，并且该参数的类型是字符串，获取
- 如果有一个参数，并且该参数的类型是{}，设置多个属性值
.css('color'，'red')
.css('width'，300)
- 如果有两个参数，设置单个的属性值
(2).对标签属性的操作
建议:处理class属性,其他设置都使用attr或者removeAttr()
JS:
getAttribute()
setAttribute()
JQ:
attr()
removeAttr()
(3).对值得操作
text() innerText 对文本的操作 如果没有参数,表示获取值 如果有参数,赋值 同上 html innerHTML 对标签和文本的操作 val() value 一定是标签中有value属性的 表单控件
清空值: text("") html("") val("")
(4).对标签JSDOM对象属性的操作
prop()
removeProp()
单选框的应用 checked属性的获取是true或false
(5).对类名的操作
addClass()
removerClass()
toggleClass()
建议大家使用addClass()/removeClass()
(6).父子追加
父.append(子) 子: JS对象; 字符串(文本或者标签+文本); jQuery对象(相当于移到) 子.appendTo(父)
(7).兄弟添加
after()
insertAfter()
before()
insertBefore()
7.动画
(1).普通的动画
show(200,fn) hide(200,fn) toggle()
(2).淡入淡出
fadeIn()
fadeOut()
fadeToggle()
(3).滑入滑出
slideDown()
slideUp()
slideToggle()
(4).自定义动画
animate(队列的json,1000,fn)
(5).延迟动画
delay(时间)
(6).使用动画的规则
先stop()再开动画 $("a").mouseenter(function(){ $("div").delay(1000).show(2000); })
8.值得操作
text() 只对文本进行操作
html() 对文本和标签操作
val() 对表单控件进行操作
9.ajax
//get请求 $.ajax({ url:'请求的地址', type:'get', success:function(data){ }, error:function(err){ } });
10.位置信息
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
offset().top
offset().left
scrollTop()
scrollLeft()
三.事件流
事件流的概念 三个阶段: 1.事件捕获阶段 2.处于目标阶段 3.事件冒泡阶段 window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.addEventListener('click',function(){ console.log('btn处于事件捕获阶段'); }, true); oBtn.addEventListener('click',function(){ console.log('btn处于事件冒泡阶段'); }, false); document.addEventListener('click',function(){ console.log('document处于事件捕获阶段'); }, true); document.addEventListener('click',function(){ console.log('document处于事件冒泡阶段'); }, false); document.documentElement.addEventListener('click',function(){ console.log('html处于事件捕获阶段'); }, true); document.documentElement.addEventListener('click',function(){ console.log('html处于事件冒泡阶段'); }, false); document.body.addEventListener('click',function(){ console.log('body处于事件捕获阶段'); }, true); document.body.addEventListener('click',function(){ console.log('body处于事件冒泡阶段'); }, false); }; 事件对象event event.preventDefault()阻止默认事件 event.stopPropagation()阻止冒泡 event.target 事件对象
1.事件流
(1).事件捕获 (2).处于目标阶段 (3).事件冒泡
2.事件对象
每一个事件的回调函数都会默认有个事件对象
event.target 触发目标的对象
event.type 事件类型
event.keyCode 键码
3.事件冒泡
event.stopPropagation(); 阻止默认的事件 event.preventDefault(); return false;
4.事件代理
自己完成不了的事情,交给别人去做
原理:运行冒泡的机制
现有的p以及未来添加的p都能做事件操作
$("div").on("click","p",fn)
5.事件
click 单击事件
dblclick 双击事件
mouseenter
mouseleave
mouseout
mouseover
mousedown
mouseup
change()
select()
form表单的submit
addEventListener("click",fn)
6.合成事件
mouseenter
mouseleave
hover(fn1,fn2)
7.位置信息
width()
height()
innerWidth() 不包含border
outerWidth() 包含border
offset().top 对象 {top:xxx,left:ooo}
top:获取的是盒子到页面顶部的距离
scrollTop()
scrollLeft()
8.单双击问题
// 先做两次单击 一次双击 中间间隔 小于300ms var timer = null; $('button').click(function(event) { console.log(timer); clearTimeout(timer); // 定时器 300ms 一次性定时器 timer = setTimeout(function(){ console.log('单机了'); }, 300); }); $('button').dblclick(function(event) { console.log(timer); clearTimeout(timer); console.log('双机了'); });
浙公网安备 33010602011771号