一、闭包: 在一个函数内部访问另一个函数的变量(函数套函数)
优点: 1、将变量较长时间的保存在内存中
2、节约命名空间
3、从一个函数内部去访问另外一个函数的变量 缺点:内存消耗过大
二、1、作用域:局部作用域、全局作用域
2、js引擎解析代码的过程:
1、预解析( var function 关键字)
2、逐行解析代码
3、全局作用域声明的函数和变量会自动变成window对象的属性和方法
三、tween.JS(补间动画类库) 的四个参数
t(当前步数) b(起始位置) c(变化量) d(结束步数) 变化量和起始位置互相影响(变化量由起始位置决定) easeIn 加速 easeOut减速 easeInOut先加速后减速
四、面向对象:根据需求建立一个“开发对象模型”,不知道其内部结构就能使用他的属性和方法。(具有抽象、封装、模块化、多态等特性) 对象:无序的数据集合(拥有属性和方法的一种数据类型)
五、创建对象的四种方式
:1、字面量创建对象
2、通过构造函数创建对象
3、工厂模式
4、构造函数模式
六、原型(prototype)原型中的属性和方法所有实例共享 原型、实例、构造函数之间的关系: 原型通过constructor属性指向构造函数、构造函数通过prototype属性指向原型、实例通过__proto__属性指向原型
七、继承:原型继承、类式继承、组合继承
原型继承:父类的实例赋值给子类的原型
类式继承:通过.call()或者.apply()方法在子类的内部调用父类
八、jquery选择器:
一、轻量级框架(类库)(引入文件)
二、jQuery === > $
三、window.onload = function(){ } 页面加载完成之后执行(包括图片等资源) $(document).ready(function(){ }) 页面布局加载完成之后执行(不包括图片等资源) ===》 $(function(){ })
四、dom对象和jquery对象之间的转换
dom对象转换成jquery对象 ===> $(jquery对象)jquery对象转换成dom对象 ===>
1、$(jquery对象)[下标]
2、$(jquery对象).get(下标)
五、基本选择器
$("#a") 获取到页面中id为a的元素
$(".b") 获取到页面中所有class为b的元素
$("p") 获取到页面中所有的p元素
$("*") 获取到页面中所有的标签(元素)
$("p,span,div") 获取到页面中所有p元素、span元素、div元素
六、层次选择器
$("div span") 获取到div中的所有span元素
$("div>span") 获取到页面中所有div的子元素,并且为span标签
$("p+span") 获取到页面中p元素后一个span元素
七、基础过滤选择器
$("tr:first") 获取到第一个tr元素
$("tr:last") 获取到最后一个
tr元素$("p:not(#a)") 获取到页面中id不为a的p元素
$("span:even") 获取到页面中索引(从0开始)为偶数的span元素
$("span:odd") 获取到页面中索引(从0开始)为奇数的span元素
$("div:eq(3)") 获取到页面中索引为3的div元素
$("div:gt(3)") 获取到页面中索引大于3(不包括3)的div元素
$("div:lt(3)") 获取到页面中索引小于3(不包括3)的div元素
八、内容过滤选择器$("div:contains(文本)") 获取到页面中含有“文本”两个字的div元素$("div:has(p)") 获取到页面中含有p标签的div元素
九、属性过滤选择器$("p[class=d]") 获取到页面中class为d的p元素$("div[id]") 获取到页面中有id属性的div元素
十、子元素过滤选择器$("tr:first-child") 获取到页面中为第一个子元素的tr$("tr:last-child") 获取到页面中为最后个子元素的tr
十一、表单选择器$(":input") 获取到页面中所有的表单元素$("input:checkbox") 获取到页面中所有的复选框
十二、表单对象属性过滤选择器$("input:checked") 获取到页面中被选中的复选框
一、.find() 与后代选择器相同
二、.children() 与子代选择器相同
三、.next() 获取指定元素的下一个兄弟元素
四、.nextAll() 获取指定元素的后面的所有兄弟元素
五、.prev() 获取指定元素的上一个兄弟元素
六、.prevAll() 获取指定元素的前面的所有兄弟元素
七、.siblings() 获取指定元素所有兄弟元素(不包括自身)
八、.parent() 获取指定元素的父元素
九、.index() 获取指定元素的索引
十、.eq() 获取指定索引的元素jqueryDOM操作
一、三部分:DOM Core(核心) HTML-DOM CSS-DOM
二、遍历节点 each(function(a,b){ this }) :a 下标 b 节点本身 this调用这个函数的节点 .next() .prev() .nextAll() .prevAll() 等等
三、attr 获取 元素.attr("属性名") 自定义属性 设置 元素.attr({"属性名":"属性值"});
四、prop() 设置固有属性(checked、selected)
五、.removeAttr("要移除的属性名") 移除属性
六、.addClass("要添加的class名") 添加样式(添加class属性)
七、.removeClass("要移除的class名"); 移除样式
八、.toggleClass("要切换的class名") 样式切换
九、.hasClass("class名") 判断是否存在该样式
十、$("<h1></h1>")创建一个h1标签
十一、元素1.append(元素2) 元素2添加到元素1,成为他的子节点,往后添加
十二、元素1.appendTo(元素2) 元素1添加到元素2,成为他的子节点,往后添加
十三、元素1.prepend(元素2) 元素2添加到元素1,成为他的子节点,往前添加
十四、元素1.prependTo(元素2) 元素1添加到元素2,成为他的子节点,往前添加
十五、元素1.after(元素2) 元素2添加到元素1,成为他的弟弟
十六、元素1.insertAfter(元素2) 元素1添加到元素2,成为他的弟弟
十七、元素1.before(元素2) 元素2添加到元素1,成为他的哥哥
十八、元素1.insertBefore(元素2) 元素1添加到元素2,成为他的哥哥
十九、元素1.clone() 复制元素1,(当括号内写上参数true时,则会复制该节点的事件)
二十、元素1.empty() 删除元素1中的所有文本和节点(清空指定节点)
二十一、元素2.remove() 删除指定节点
二十二、元素1.replaceWidth(元素2) 用元素2来替换元素1
动画
一、.hide(完成动画的时间,回调函数(动画完成后执行的函数)); 隐藏(高度、宽度变小,颜色变浅)
二、.show(完成动画的时间,回调函数(动画完成后执行的函数)); 显示(高度、宽度变大,颜色变深)
三、toggle(完成动画的时间,回调函数(动画完成后执行的函数)) 如果元素为显示,则隐藏,如果为隐藏,则显示
四、slideUp(完成动画的时间,回调函数(动画完成后执行的函数)) 隐藏(向上收起)
五、slideDown(完成动画的时间,回调函数(动画完成后执行的函数)) 显示(向下展开)
六slideToggle(完成动画的时间,回调函数(动画完成后执行的函数)) 如果元素为显示,则隐藏,如果为隐藏,则显示
七、fadeIn(完成动画的时间,回调函数(动画完成后执行的函数)) 显示(颜色渐渐变深)
八、fadeOut(完成动画的时间,回调函数(动画完成后执行的函数)) 隐藏(颜色渐渐变浅)
九、fadeToggle(完成动画的时间,回调函数(动画完成后执行的函数)) 如果元素为显示,则隐藏,如果为隐藏,则显示
十、fadeTo(完成动画的时间,目标透明,回调函数(动画完成后执行的函数)) 改变指定元素的透明度十一、animate({属性1:“属性值1”,属性2:“属性值2”,。。。},动画完成的时间,回调函数(动画完成后执行的函数));
十二、stop(bool(立即停止当前动画,并且清空动画队列),bool(立即完成当前动画,并且清空动画队列));
十三、delay("延迟时间") 停止指定时间后,继续执行之后的动画第
jquery事件
一、事件绑定的三种方式(以点击事件为例)
1、元素.click(function(){ 要执行的代码 });
2、元素.on("事件名",function(){ 要执行的代码 });
3、元素.bind("事件名",function(){ 要执行的代码 })
;二、取消事件绑定
1、元素.off("要取消的事件名");
2、元素.unbind("要取消的事件名");
三、鼠标事件:
鼠标放上 mouseover
鼠标放上(支持事件冒泡) mouseenter
鼠标移出 mouseout
鼠标移除(不支持事件冒泡) mouseleave
鼠标按下 mousedown
鼠标松开 mouseup
鼠标移动 mousemove
鼠标右键 contextmenu
四、键盘事件
keydown 键盘任意键按下
keyup 键盘抬起
event.keyCode 获取键码
五、表单事件失去焦点 blur 获得焦点 focus 域的内容发生改变 change
六、复合事件 hover(function(){ 鼠标放上时要执行的代码 },function(){ 鼠标移开时执行的代码});
七、事件对象event.type 事件类型(click、dblclick...)event.target 事件源(触发这个事件的元素)event.pageX event.pageY 鼠标距离页面左边缘和上边缘的距离event.stopPropergation() 阻止事件冒泡event.preventDefault() 阻止默认事件
八、事件委托: 子元素需要执行的事件,绑定在父元素上 优点:减少事件注册,
提高代码效率实现方法:
1、 delegate("要执行事件的子元素","事件名",function(){ 要执行的代码 });
2、 on("事件名","要执行事件的子元素",function(){ 要执行的代码 });
九、事件命名空间元素.on("click.example",function(){ 代码 });给绑定的点击事件命名为"example";元素.off(".example")
;封装插件的方法
一、$.fn.extend({方法名:function(){ },方法名:function(){ }})
二、$.fn.函数名 = function(){}ajax 数据交互的方式 (局部内容异步刷新<不用刷新页面就能刷新内容>,当部分内容需要刷新的时候事实刷新时,利用ajax实现)$.get()、$.post()、$.getJSON()$.ajax({ url:"请求数据的路径", type:"请求数据方式", dataType:"数据格式", async:true,//是否异步, success:function(data){ //请求成功的时候执行的函数data 请求到的数据 }, error:function(){请求失败执行的函数 }});
require.JS 模块化插件优势:
1、节省命名空间
2、解决各js文件之间的依赖问题
3、通过模块化实现冯巩明确常用方法:
1、requirejs.config() 配置路径
2、requirejs() 编辑主函数
3、define() 定义模块
网友评论