jquery概述
主要学习如何来使用jQuery操作DOM,当中主要封装的是API方法，所以要加（）
使用步骤
- 引包
- 入口函数
- 功能实现代码（事件处理）
入口函数
-
原生js的入口函数window.onload，是在所有的文件资源加载完成后才执行（页面文档，外部的js文件、css文件、图片等）且只能出现一次，重复出现会覆盖
-
jQuery的入口函数，可以出现任意多次，不会覆盖。在文档加载完成后，就执行。
- 文档加载完成指的是：DOM树加载完成后，就可以操作dom了，不用等所有的外部资源都加载完成。
- 文档加载的顺序：从上往下，边解析边执行
-
jQuery对象是一个数组，数组中包含着原生js中的dom对象
-
js命名规范容许出现的字符有：数字，字符，下划线，$
-
js命名规范容许作为变量名开头的字符有：字符，下划线，$
$===jQuery
1、$(document).ready(function(){})
2、$(function(){})
3、$(window).ready(function(){}) 所有加载完成后，再执行
特点
- 链式编程
- 隐式迭代
jquery和js的相互转换
- js转成jquery：$(js对象)
- jquery转成js：
- jquery对象[索引值]
- jquery对象.get(索引值)
jquery选择器
基本选择器
id选择器 #
类选择器 .
标签选择器
通配符选择器 *
层级选择器
并集选择器 ，
后代选择器 空格
子代选择器>
基本过滤选择器
:odd 奇数
:even 偶数
:eq(index)
筛选选择器
.find() 后代查找
.parent() 查父元素
.children() 子代查找
.siblings() 所有的兄弟元素
.eq(index) 相等查找
.prev() 查找前一个兄弟元素
.next() 查找后一个兄弟元素
操作dom
样式操作
样式属性操作 .css()
设置样式属性
.css(属性，值)
.css(json)
获取样式属性
.css(属性)
类操作
addClass（） 添加类
removeClass（） 删除类
hasClass（） 判断类是否存在
toggleClass（） 切换类
动画操作
隐藏显示动画
通过改变宽高和不透明度实现的---display：none
show（）显示动画
1、无参，默认是400ms
2、带参：毫秒值
3、带参：fast normal slow
4、带参（毫秒值，回调函数）
hide（）隐藏动画
toggle（）切换动画
滑入滑出动画
通过高度的改变实现的---display：none
slideDown（）滑入
slideUp（）滑出
slideTaggle（）切换
淡入淡出动画
通过不透明度的改变实现---display：none
fadeIn（） 淡入
fadeOut（）淡出
fadeToggle（）切换
fadeTo（）
参数1：时长，必须带有
参数2：透明度0-1
参数3：回调函数
自定义动画
animate（json，speed，callback）
停止动画
stop（）
参数1：后续动画是否要执行
true：后续动画不执行
false：后续动画执行
参数2：当前动画是否执行
true：立即执行完成当前动画
false：立即停止当前动画
默认参数都为false
节点操作
动态创建元素
$()
.html()
添加元素
append（）在盒子的最末尾添加一个元素
.appendTo（）
.prepend（）在盒子最前面添加元素
.prependTo（）
after（）放在元素之后
before（）放在元素之前
清空元素
empty（）
.html（“”）
删除元素
remove（）
复制元素
.clone（）
属性操作
.attr（属性，值） 设置属性
.attr（属性）获取属性
.remove（属性）移除属性
注意：checked，selected，disabled要使用.prop（）方法，prop方法通常用来影响dom元素的动态状态，而不是改变HTML属性
实例：input.prop("checked",true) $("input:checkbox") $("input:checked")
值和内容
.val（）
获取或设置表单元素input,select,textarea的value值
.text（）
获取或设置双闭合标签的中的文本值，不识别标签
.html（）
获取或设置双闭合标签的文本值，识别标签
尺寸位置操作
高度和宽度操作
高度
node.height()
获取和设置高度，返回值是number类型
宽度
node.width()
获取和设置宽度，返回值是number类型
坐标值操作
offset（）
获取或设置元素相对于文档的位置
返回值为json类型：{left:num, top:num}
设置offset后，如果元素没有定位(默认值：static)，则被修改为relative
position()
获取相对于最近的定位的父元素的位置
只能获取，不能设置
返回值为json类型：{left:num, top:num}
获取的就是定位值，和margin/padding无关
scrollTop()
获取或设置元素垂直方向滚动的位置
scrollLeft()
获取或设置元素水平方向滚动的位置
事件机制
事件绑定
简单事件绑定
click(handler) 单击事件
blur(handler) 失去焦点事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
dbclick(handler) 双击事件
change(handler) 改变事件，如：文本框值改变，下来列表值改变等
focus(handler) 获得焦点事件
keydown(handler) 键盘按下事件
不会出现层叠
bind事件
bind(事件类型，事件处理程序)
可以同时绑定多个事件
delegate事件
$(.parentbox).delegate(后代元素，事件，事件驱动程序)
可以同时绑定多个事件
支持动态创建的元素
on事件
$(.parentbox).on(多个事件空格隔开，后代元素，json，事件处理程序)
json中的属性数据，事件触发时使用 event.data.属性 调用
事件解绑
unbind
解绑bind事件
undelegate
解绑delegate事件
off
解绑on事件
事件触发
简单事件触发
$(selector).click();
触发浏览器行为
执行程序，触动事件
trigger事件触发
$(selector).trigger("click");
触发浏览器行为
triggerHandler事件触发
$(selector).trigger("click");
不触发浏览器行为
执行程序，不触动事件
事件对象
event.data
传递给事件处理程序的额外数据
event.currentTarget
等同于this，当前的DOM对象
event.target
事件触发源，不一定===this
event.pageX
鼠标相对于文档左部边缘的位置
event.stopPropagation()
阻止事件冒泡
event.preventDefault()
阻止默认行为
event.type
事件类型
event.which
鼠标的按键类型：左 1 中 2 右 3
event.keyCode
键盘按键代码
链式编程和隐式迭代
链式编程原理：方法的返回值都是 return this
end() 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值
each方法
如果要对每个元素做不同的处理，遍历jQuery对象集合，为每个匹配的元素执行一个函数
$(selector).each(function(index,element){})
index:当前元素的索引号
element:当前元素，是js对象，使用时需要转换成jquery对象
多库共存
多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
解决方法
引包时一般将低版本的放在前面，高版本的放到后面
$.noConflict();
让$放弃对最新引包的使用权
console.log($.fn.jquery)
打印版本号
示例
放弃一个使用权
$.noConflict();
console.log($.fn.jquery);
console.log(jQuery.fn.jquery);
放弃两个符号的使用权，同时定义一个新的使用权
var MrLv = $.noConflict(true);
console.log($.fn.jquery);
console.log(jQuery.fn.jquery);
console.log(MrLv.fn.jquery);
此时$和jquery都放弃了使用权，MrLv成为新的使用权
插件
第三方插件
jQuery.color.js 改变背景色
animate()自定义动画：不支持背景的动画效果
animate动画支持的属性列表
jQuery.lazyload.js 懒加载
使用步骤：
引入jQuery文件
引入插件
使用插件
自定义插件
绑定到原型上,调用者是jquery对象
$.fn.setColorRed = function () {
this.css({"color":"red"});
}
$("button").on("click", function () {
$(this).setColorRed();
})
绑定到$上，调用者是$
$.setColorRed = function (e) {
e.css({"color":"red"});
}
$("button").on("click", function () {
$.setColorRed($(this));
})
2562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
