1. Replace / Clone:
Clone: var $ newImg = $ img.clone ()
2. Event:
standard:
1. Ordinary binding: $ (). On ("event name", function () {...})
.addEventListener(...);
Unbinding: $ (). Off ("event name", original function object)
2. Use bubbling:
$ parent.on ("event name", "judgment condition selector", function () {
this->e.target
})
2 benefits:
1. Automatically use the "judgment condition selector" to filter the elements that meet the conditions before entering the function execution-no need to write if judgment yourself
2. Change this-> e.target without writing e and e.target
21 common events are provided with shorthand: $ (). Event name (handler function)
After the page loads, execute:
1. Execute only in advance after the DOM content is loaded: DOMContentLoaded
Only wait for DOM content: HTML and JS
Executable: event binding, adding / deleting / traversing / modifying the content of elements
Cannot execute: get / modify CSS, get image size
How to: $ (document) .ready (function () {...})
$().ready(function(){ ... })
$(function(){ ... })
Summary: Almost all jQuery code should be placed in $ (function () {...})
2. After all the page content is loaded, execute it only: window.onload
Wait for all web content: HTML, CSS, JS, pictures
All executable
How to: $ (window) .load (function () {...})
Summary: Only code that depends on CSS and images is placed in $ (window) .load ()
Mouse events:
The problem with mouseover mouseout:
Frequent entry and exit of child elements will also bubble to trigger mouse events on the parent element
jQuery is replaced with mouseenter and mouseleave
Advantages: Even if frequent entry and exit of child elements, it will not bubble to trigger mouse events on the parent element.
If you bind mouseenter and mouseleave at the same time, you only need to bind a hover:
$().hover(//mouseenter+mouseleave
function(){ ... },//给mouseenter
function(){ ... } //给mouseleave
)
If the two processing functions happen to be merged into one processing function, in fact, just write one processing function
Analog triggering: The button processing function can be executed without clicking the button, without writing the code twice
$(btn).trigger("事件名") $(btn).trigger("click")
In fact, it can be abbreviated as: $ (btn) .click ()
3. Animation:
1. Simple animation: Three fixed animation effects of writing dead:
1. Show hide: .show () .hide () .toggle ()
Without parameters, display: block / none is used by default to control display hiding, instantaneous change, and no animation effect
Give a duration parameter: .show (ms) .hide (ms) .toggle (ms)
2. Slide up and down: .slideUp (ms) .slideDown (ms) .slideToggle ()
3. Fade in and out: .fadeIn (ms) .fadeOut (ms) .fadeToggle ()
Question 1: The effect of writing dead code with js code is not maintainable
Question 2: The animation effect realized by js timer is not as efficient as css animation
2. Universal animation: Can implement animation effects on any css attribute
$().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(){
}
调用新函数:
$(...).新函数()