javascript知识点总结

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的使用

arguments展示形式是一个伪数组,因此可以进行遍历。
具有 length 属性;按索引方式储存数据;不具有数组的 push , pop 等方法

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'); //根据id
document.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.parentNode
parentNode.childNodes(标准)子节点
parentNode.children(非标准)子元素节点
parentNode.firstChild 子节点
parentNode.lastChild 子节点
parentNode.firstElementChild 子元素节点
parentNode.lastElementChild 子元素节点 
parentNode.chilren[0]
node.previousSibling
node.nextElementSibling
node.previousElementSibling
document.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"});
2.设置类样式方法
1. 添加类
$(“div”).addClass(''current'');
2. 移除类
$(“div”).removeClass(''current'');
3. 切换类
$(“div”).toggleClass(''current'');

3.1.3效果

jQuery 给我们封装了很多动画效果,最为常见的如下:

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(objectfunction (index, element) { xxx; }
2.创建
$(''<li></li>'')
3.添加
内部添加:
element.append(''内容''); //把内容放入匹配元素内部最后面,类似原生 appendChild。
element.prepend(''内容''); //把内容放入匹配元素内部最前面。
外部添加:
element.after(''内容''); // 把内容放入目标元素后面
element.before(''内容''); // 把内容放入目标元素前面
① 内部添加元素,生成之后,它们是父子关系。
② 外部添加元素,生成之后,他们是兄弟关系。
4.删除
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个对象的对象。

3.3.2多库共存

问题概述:
jQuery使用$作为标示符,随着jQuery的流行,其他 js 库也会用这$作为标识符, 这样一起使用会引起冲突。
客观需求:
需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。

3.3.3插件

jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。
jQuery 插件常用的网站:
1. jQuery 插件库 http://www.jq22.com/
2. jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤:
1. 引入相关文件。(jQuery 文件 和 插件文件)
2. 复制相关html、css、js (调用插件)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

隆里卡那唔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值