1、javascript基础
1.1数组
1.2对象
1.2.1自定义对象
1.2.2内置对象
Math,Date,Array,String
1.2.3浏览器对象
1.3简单类型和复杂类型
值类型和引用类型
栈和堆
值类型:string,number,boolean,undefined,null
引用类型:Object,Array,Date
1.4函数
1.4.1函数的返回值
break:结束当前的循环体(如for、while)
continue:跳出本次循环,继续执行下次循环(如for、while)
return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码。
1.4.2arguments的使用
1.4.3函数的两种声明方式
自定义函数方式(命名函数)
// 声明定义方式function fn() {...}
函数表达式方式(匿名函数)
// 这是函数表达式写法,匿名函数后面跟分号结束var fn = function(){...};// 调用的方式,函数调用必须写到函数体下面fn();
2、APIs
2.1Web APIs
页面文档对象模型DOM
浏览器对象模型BOM
2.2DOM
2.2.1DOM树

2.2.2获取元素
document.getElementById('id'); //根据iddocument.getElementsByTagName('标签名'); //根据标签名document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象document.querySelectorAll('选择器'); // 根据指定选择器返回
2.2.3事件基础
① 获取事件源(按钮)② 注册事件(绑定事件),使用 onclick③ 编写事件处理程序,写一个函数弹出 alert 警示框
var btn = document.getElementById('btn');btn.onclick = function() {alert('你好吗');};
2.2.4操作元素

2.2.5自定义属性
获取属性值:element.getAttribute('属性');
设置属性值:element.setAttribute('属性', '值');
移除属性:element.removeAttribute('属性');
H5自定义属性:element.setAttribute(‘data-index’, 2)
2.2.6节点操作

node.parentNodeparentNode.childNodes(标准)子节点parentNode.children(非标准)子元素节点parentNode.firstChild 子节点parentNode.lastChild 子节点parentNode.firstElementChild 子元素节点parentNode.lastElementChild 子元素节点parentNode.chilren[0]node.previousSiblingnode.nextElementSiblingnode.previousElementSiblingdocument.createElement('tagName')node.appendChild(child)node.insertBefore(child, 指定元素)node.removeChild(child)node.cloneNode()
2.3事件高级
2.3.1注册事件
传统方式:btn.onclick = function() {}
方法监听:eventTarget.addEventListener()、eventTarget.attachEvent()
2.3.2删除事件
传统方式:eventTarget.onclick = null;
方法监听:eventTarget.removeEventListener()、eventTarget.detachEvent()
2.3.3DOM事件流

2.3.4事件对象
eventTarget.onclick = function(event) {}eventTarget.addEventListener('click', function(event) {})// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt

2.3.5常用鼠标事件


2.3.6常用键盘事件


2.4BOM浏览器对象模型
2.4.1BOM概述


2.4.2window对象的常见事件
窗口加载事件
window.onload = function(){}或者window.addEventListener("load",function(){});
window.onresize = function(){}window.addEventListener("resize",function(){});
2.4.3定时器
window.setTimeout(调用函数, [延迟的毫秒数]);window.setInterval(回调函数, [间隔的毫秒数]);window.clearInterval(intervalID);
2.4.4执行机制
JS是单线程
2.4.5location对象


2.4.6navigator对象
2.4.7history对象
3、jquery
3.1常用API
3.1.1选择器
1.基础选择器

2.层级选择器

3.隐式迭代:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作, 方便我们调用。
4.筛选选择器

3.1.2样式操作
1.操作 css 方法
1. 参数只写属性名,则是返回属性值$(this).css(''color'');2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号$(this).css(''color'', ''red'');3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号$(this).css({ "color":"white","font-size":"20px"});
1. 添加类$(“div”).addClass(''current'');2. 移除类$(“div”).removeClass(''current'');3. 切换类$(“div”).toggleClass(''current'');
3.1.3效果

3.1.4属性操作
设置或获取元素固有属性值 prop();设置或获取元素自定义属性值 attr();数据缓存 data()
3.1.5文本属性值
1. 普通元素内容 html()( 相当于原生inner HTML)2. 普通元素文本内容 text() (相当与原生 innerText)3. 表单的值 val()( 相当于原生value)
3.1.6元素操作
1.遍历
$("div").each(function (index, domEle) { xxx; })$.each(object,function (index, element) { xxx; })
$(''<li></li>'')
内部添加:element.append(''内容''); //把内容放入匹配元素内部最后面,类似原生 appendChild。element.prepend(''内容''); //把内容放入匹配元素内部最前面。外部添加:element.after(''内容''); // 把内容放入目标元素后面element.before(''内容''); // 把内容放入目标元素前面① 内部添加元素,生成之后,它们是父子关系。② 外部添加元素,生成之后,他们是兄弟关系。
element.remove() // 删除匹配的元素(本身)element.empty() // 删除匹配的元素集合中所有的子节点element.html('''') // 清空匹配的元素内容① remove 删除元素本身。② empty() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
3.1.7尺寸、位置操作
1.尺寸

2.位置
位置主要有三个: offset()、position()、scrollTop()/scrollLeft()1. offset() 设置或获取元素偏移① offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。③ 可以设置元素的偏移:offset({ top: 10, left: 30 });2. position() 获取元素偏移① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。③ 该方法只能获取。3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧① scrollTop() 方法设置或返回被选元素被卷去的头部。② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
3.2事件
3.2.1事件注册
单个时间注册:$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
3.2.2事件处理
1.事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数element.on(events,[selector],fn);1. events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。2. selector: 元素的子元素选择器 。3. fn:回调函数 即绑定在元素身上的侦听函数。
三个优势:
1:可以绑定多个事件,多个处理事件处理程序。
$(“div”).on({ mouseover: function(){}, mouseout: function(){}, click: function(){} }); $(“div”).on(“mouseover mouseout”, function() { $(this).toggleClass(“current”); });2.可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$('ul').on('click', 'li', function() { alert('hello world!'); });3.动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事
$(“div").on("click",”p”, function(){ alert("俺可以给动态生成的元素绑定事件") }); $("div").append($("<p>我是动态创建的p</p>"));
2.事件处理 off() 解绑事件
$("p").off() // 解绑p元素所有事件处理程序$("p").off( "click") // 解绑p元素上面的点击事件$("ul").off("click", "li"); // 解绑事件委托如果有的事件只想触发一次, 可以使用 one() 来绑定事件。
3.自动触发事件 trigger()
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件,不需要鼠标点击
3.2.3事件对象
element.on(events,[selector],function(event) {})
3.3其他方法
3.3.1拷贝对象
$.extend([deep], target, object1, [objectN])1. deep: 如果设为true 为深拷贝, 默认为false 浅拷贝2. target: 要拷贝的目标对象3. object1:待拷贝到第一个对象的对象。4. objectN:待拷贝到第N个对象的对象。

被折叠的 条评论
为什么被折叠?



