文章目录
JQ原理:
1.jQuery的本质是一个闭包
2.jQuery为什么要使用闭包来实现?
为了避免多个框架的冲突
3.jQuery如何让外界访问内部定义的局部变量
window.xxx = xxx;
4.jQuery为什么要给自己传递一个window参数?
为了方便后期压缩代码
为了提升查找的效率
5.jQuery为什么要给自己接收一个undefined参数?
为了方便后期压缩代码
IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined
在window域下undefined不能修改,在局部变量中可以修改
jquery入口函数的测试:
1.传入 '' null undefined NaN 0 false, 返回空的jQuery对象
'' null undefined NaN 0 false经过!后都变成false,直接返回创建的新对象即可
2.字符串:
代码片段:会将创建好的DOM元素存储到jQuery对象中返回
选择器: 会将找到的所有元素存储到jQuery对象中返回
3.数组:
会将数组中存储的元素依次存储到jQuery对象中立返回
4.除上述类型以外的:
会将传入的数据存储到jQuery对象中返回
apply和call方法的作用:
专门用于修改方法内部的this
格式:
call(对象, 参数1, 参数2, ...);
apply(对象, [数组]);
真伪数组的转换:
伪数组转换成真数组:[].push.apply(真数组名,伪数组名);
真数组转换成伪数组:[].slice.call(真数组名);
slice()若什么都没有传,会将数组中的元素放到一个真数组中原样返回
slice(start,end);用于返回数组中的指定元素,从开始到结束,包含开始,不包含结束
join(separator):
将JS数组中的所有元素放入一个字符串中
separator表示分隔符,默认为逗号
change与propertychange的区别:
change 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;
propertychange 事件却是实时触发,即每增加或删除一个字符就会触发。
动画的显示、隐藏、切换、创建:
显示动画:show(time,easing,fn);
隐藏动画:hide(time,easing,fn);
切换动画:toggle(time,easing,fn);
slow历时600ms,fast历时200ms;
easing:默认为swing表示弧线运动,缓动,先慢中间快后慢,也可以为linear,表示匀速
展开和收起动画:
sideDown(time,easing,fn);展开动画
sideUp(time,easing,fn);收起动画
sideToggle(time,easing,fn);切换动画
animate(obj,time,easing,fn)
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
可以在对象中修改属性时注意:
设置宽度高度时width:"200" width:"+=100"
宽度还可以设置为"hide" "toggle" "show"
delay方法的作用就是用于告诉系统延迟时长
立即停止当前动画, 继续执行后续的动画
$("div").stop();
$("div").stop(false);
$("div").stop(false, false);
立即停止当前和后续所有的动画
$("div").stop(true);
$("div").stop(true, false);
立即完成当前的, 继续执行后续动画
$("div").stop(false, true);
立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
淡入淡出:
fadeIn(time,easing,fn)淡入
fadeOut(time,easing,fn)淡出
fadeToggle(time,easing,fn)切换
fadeTo(time,opcity,easing,fn)淡入到opcity透明度
jQ原型上的核心方法和属性:
1、jquery 获取jQ版本号
2、selector 实例默认的选择器取值
3、length 实例默认的长度
3、push 给实例添加新元素
4、sort 对实例中的元素进行排序
5、splice 按照指定下标指定数量删除元素,也可以替换删除的元素
6、toArray 把实例转换为数组返回
即将真数组转换成伪数组
7、get 获取指定下标的元素,获取的是原生DOM
没传参数则返回该数组,传入复数则相当于数组倒数的第几个,正数就返回第几个
8、eq 获取指定下标的元素,获取的是jQuery类型的实例对象
9、first 获取实例中的第一个元素,是jQuery类型的实例对象
10、last 获取实例中的最后一个元素,是jQuery类型的实例对象
11、each 遍历实例,把遍历到的数据传给回调使用
12、map 遍历实例,把遍历到的数据传给回调使用,然后把回调的返回值收集起来组成一个新的数组返回
DOM元素的加载:
onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调
document.readyState属性有如下的状态:
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载,文档与用户可以开始交互
complete - 载入完成
onreadystatechange事件就是专门用于监听document.readyState属性的改变的
DOM 操作:
1、empty ==> 清空指定元素中的所有内容
2、remove ==> 删除所有的元素或指定元素
3、html ==> 设置所有元素的内容,获取第一个元素的内容
4、text ==> 设置所有元素的文本内容,获取所有元素的文本内容
5、元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
特点:
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
6、指定元素.append.元素 ==> 将元素添加到指定元素内部的最后
7、元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面
调用者.insertBefore(插入的元素, 参考的元素);
insertBefore方法, 调用者是谁就会将元素插入到谁里面
8、指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面
9、元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
调用者.insertBefore(插入的元素, 参考的元素);
insertBefore方法, 调用者是谁就会将元素插入到谁里面
10、next([expr]) 获取紧邻的后面同辈元素的元素
11、prev([expr]) 获取元素紧邻的前一个同辈元素
实现insertAfter需要用到原生JavaScript的nextSibling属性
12、元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面
指定元素.after.元素 ==>将元素添加到指定元素外部的后面
元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
指定元素.before.元素 ==>将元素添加到指定元素外部的前面
13、元素.replaceAll.指定元素 ==> 替换所有指定元素
14、指定元素.replaceWith.元素 ==> 替换所有指定元素
15、clone ==> 复制节点(true深复制,false浅复制)
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点,则 nodeType 属性将返回 1。
如果节点是属性节点,则 nodeType 属性将返回 2。
元素的操作:
内部插入:
append(content|fn)
appendTo(content) 注意这两个To方法使用时是新增的元素. appendTo(选择器)
会将元素添加到指定元素内部的最后
prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面
外部插入:
after(content|fn)
insertAfter(content) 注意这两个To方法使用时是新增的元素. appendTo(选择器)
会将元素添加到指定元素外部的后面
before(content|fn)
insertBefore(content)
会将元素添加到指定元素外部的前面
删除元素:
remove([expr]) / detach([expr])
删除指定元素
区别:
利用remove删除之后再重新添加,原有的事件无法响应
利用detach删除之后再重新添加,原有事件可以响应
empty()
删除指定元素的内容和子元素, 指定元素自身不会被删除
替换元素:
replaceWith(content|fn)
replaceAll(selector) 注意这个方法使用时是新增的元素. replaceAll(选择器)
替换所有匹配的元素为指定的元素
复制元素:
clone([Even[,deepEven]])
如果传入false就是浅复制, 如果传入true就是深复制
浅复制只会复制元素, 不会复制元素的事件
深复制会复制元素, 而且还会复制元素的事件
nth-child()的用法:
nth-child(-n+x)就是前x项
nth-child(2n)就是偶数项
nth-child(2n-1)就是奇数项
nth-child(x)就是第x项
有关索引的几种方法:
index()获取当前对象的索引
eq(x)获取索引为x的元素,并将其封装成对象返回
get(x)获取索引为x的元素,不会其封装成对象,而是直接返回成对象
父、子元素的选择:
children(.selected)通过可选的表达式来过滤所匹配的子元素,只考虑子元素而不考虑所有后代元素
find(.selected)通过可选的表达式来过滤所匹配的后代元素
parent(.selected)将查找过滤所匹配的所有父元素
parents()将查找过滤所匹配的所有祖辈元素
jQery属性相关的操作:
1.attr(): 设置或者获取元素的属性节点值
2.prop(): 设置或者获取元素的属性值
3.css(): 设置获取样式
4.val(): 获取设置value的值
5.hasClass(): 判断元素中是否包含指定类
6.addClass(): 给元素添加一个或多个指定的类
7.removeClass(): 删除元素中一个或多个指定的类
8.toggleClass(): 没有则添加,有则删除
jQuery事件操作的相关方法:
1.on(type, callback): 注册事件
1.注册多个相同类型事件, 后注册的不会覆盖先注册的
2.注册多个不同类型事件, 后注册的不会覆盖先注册的
2.off(type, callback): 移出事件
1.不传参, 会移除所有事件
2.传递一个参数, 会移除对应类型所有事件
3.传递两个参数, 会移除对应类型对应事件
看到这里,那么说明你的JQ就学习的差不多了,不妨自己动手做几个实例,测试一下看自己是否真正掌握这些知识点。 over!