1. 替换/克隆:
克隆: var $newImg=$img.clone()
2. 事件:
标准:
1. 普通绑定: $().on("事件名",function(){ ... })
.addEventListener(...);
解绑: $().off("事件名",原函数对象)
2. 利用冒泡:
$parent.on("事件名","判断条件选择器",function(){
this->e.target
})
2个好处:
1. 自动使用"判断条件选择器"先筛选符合条件的元素再进入函数执行——不用自己写if判断
2. 将this->e.target，不用自己写e和e.target了
21种常见事件提供了简写: $().事件名(处理函数)
页面加载后执行:
1. 仅DOM内容加载后就提前执行: DOMContentLoaded
仅等待DOM内容: HTML和JS
可执行: 事件绑定，添加/删除/遍历/修改元素的内容
不能执行: 获取/修改CSS, 获取图片大小
如何: $(document).ready(function(){ ... })
$().ready(function(){ ... })
$(function(){ ... })
总结: 几乎所有jQuery代码都要放在$(function(){...})中
2. 所有页面内容加载完成后，才执行: window.onload
等待所有网页内容: HTML,CSS,JS,图片
都可执行
如何: $(window).load(function(){ ... })
总结: 只有依赖CSS和图片的代码才放在$(window).load()
鼠标事件:
mouseover mouseout的问题:
频繁进出子元素，也会冒泡触发父元素上的鼠标事件
jQuery改为用mouseenter和mouseleave代替
优点: 即使频繁进出子元素，也不会冒泡触发父元素上的鼠标事件。
如果同时绑定了mouseenter和mouseleave，其实只需要绑定一个hover就可以:
$().hover(//mouseenter+mouseleave
function(){ ... },//给mouseenter
function(){ ... } //给mouseleave
)
如果两个处理函数刚巧可以合并为一个处理函数，其实只写一个处理函数也行
模拟触发: 没有单击到按钮，也能执行按钮的处理函数，而不用将代码写2遍
$(btn).trigger("事件名") $(btn).trigger("click")
其实可简写为:$(btn).click()
3. 动画:
1. 简单动画: 写死的三种固定动画效果:
1. 显示隐藏: .show() .hide() .toggle()
不带参数，默认使用display:block/none控制显示隐藏，瞬间变化，没有动画效果
给一个持续时间参数: .show(ms) .hide(ms) .toggle(ms)
2. 上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle()
3. 淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle()
问题1: 用js代码写死的效果，不可维护
问题2: 用js定时器实现的动画效果，效率不如css动画
2. 万能动画: 可对任意css属性实施动画效果
$().animate({
css属性:目标值,
... : ...
},持续ms)
强调: 只支持单个数值的属性
不支持:不是数值的属性
不支持颜色渐变——不如transition
排队和并发:
排队: 多个css属性先后依次变化
并发: 多个css属性同时变化
放在一个animate函数内的多个css属性是并发变化
停止动画: $().stop();
问题: 默认只能停止队列中正在播放的一个动画，后续动画依然会执行
解决: $().stop(true) 停止当前动画并清空队列
选择器: :animated 选择和判断正在播放动画的元素
动画播放后执行:
每个动画API都有最后一个参数——回调函数
回调函数会在动画播放后自动调用执行
总结: 首选CSS: 效率高，可维护
和交互有关的动画，只能用JS定时器/JQUERY
和动态添加/删除DOM元素有关的动画，也必须用JS定时器/jQuery
4. 类数组操作:
2个API:
1. 遍历:
//实例方法
$()->jQuery()->new jQuery()
$().each(function(i,elem){ //forEach(function(elem,i,arr))
//i 获得当前位置
//elem 获得当前元素对象
})
//静态方法
//$->jQuery
$.each(类数组对象/数组,function(i,elem){
})
2. 查找:
$("所有元素").index("要找的元素")
在"所有元素"的jQuery对象中，查找"要找的元素"的位置
如果在同一个父元素下找子元素的位置:
$(要找的子元素).index()
5. 添加自定义API:
其实就是在jQuery的原型对象中添加自定义函数:
jQuery.fn=jQuery.prototype
定义新函数:
jQuery.fn.新函数=function(){
}
调用新函数:
$(...).新函数()