本文详细介绍了jQuery的基础知识，包括入口函数的两种写法、DOM元素的选择与操作、jQuery对象与DOM对象的转换、常用选择器与筛选方法、事件处理和动画效果。此外，还讲解了如何获取元素位置、操作CSS样式、处理内容与属性以及事件绑定与解除。jQuery简化了JavaScript的许多操作，是前端开发中不可或缺的工具。
jQuery中的入口函数有两种写法：
第一种：更推荐使用
$(function(){
......此处是DOM加载完成之后执行的代码
});
第二种：
$(document).ready(function(){
......此处是DOM加载完成之后执行的代码
})
$ 是jQuery的别称（另外的名字）,$也是jQuery的顶级对象。
jQuery获取dom元素的方式：
$('dom元素')
jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）。
jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法。
DOM对象转换为jQuery对象：$('dom元素');
jQuery对象转换为Dom对象：$('video')[索引号].play(); $('video').get(索引号).play();
jQuery基础选择器是： $('选择器') ，里面选择器直接写CSS选择器即可，但是要加引号。
jQuery隐式迭代就是把匹配的所有元素内部进行遍历，给每一个元素添加css这个方法。
jQuery筛选选择器：
$('li:first') 获取第一个li元素。 $('li:last') 获取最后一个li元素。
$('li:eq(2)') 获取到li元素中索引号为2的元素，索引号从0开始。
$('li:odd') 获取索引号为奇数的所有li元素。
$('li:even') 获取索引号为偶数的所有li元素。
jQuery中的:checked选择器，:checked选择器查找被选中的表单元素。
jQuery筛选方法：
parent() 返回的是最后一级的父级元素。
parents(“类名”) 返回指定被指定的祖先元素。
children() 类似子代选择器 ul>li。
find() 可以选里面所有的孩子，包括儿子和孙子 。类似后代选择器。
siblings() 选择兄弟节点不包括自己本身
eq(index) 相当于$('li:eq(2)')，index从0开始
jQuery得到当前所引号的方法: $(this).index()
jQuery操作css方法：
$(this).css(width) 参数只写属性名，则是返回属性值。
$(this).css("color", "red"); 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必 须加引号，值如果是数字可以不用跟单位和引号。
$(this).css({"color":"white","font-size":“20px"}); 参数可以是对象形式，方便设置多组
样式。属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).addClass("类名") 添加类。
$(this).removeClass("类名") 移除类。
$(this).toggleClass("类名") 切换类。类名都不要加.号
jQuery动画效果：
显示效果：
show ([speed], [easing],[fn])
隐藏效果：
hide ([speed], [easing],[fn]])
下拉滑动效果：
slideDown ([speed], [easing],[fn])
上拉滑动效果：
slideUp ([speed], [easing],[fn])
淡入效果：
fadeIn ([speed], [easing],[fn])
淡出效果：
fadeOut ([speed], [easing],[fn])
淡出淡入切换效果：
fadeToggle ([speed], [easing],[fn])
参数都可以省略，无动画直接显示。speed:三种预定速度之一的字符串
(“slow”，“normal”,or“fast”)或表示动画时长的毫秒数值(如：1000)。
easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
动画队列及其停止排队方法：
动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队：stop()
(1)stop()方法用于停止动画或效果。
(2)注意：stop)写到动画或者效果的前面，相当于停止结束上一次的动画。
淡入淡出效果:
渐进方式调整到指定的不透明度: fadeTo([[speed], opacity, [easing],[fn]])
2.效果参数
(1)opacity透明度必须写，取值0~1之间。
(2)speed：三种预定速度之一的字符串(“slow”，“normal”，or“fast”)或表示动画时长毫秒数值 (如：1000)。必须写
(3)easing: (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
自定义动画 animate
1.语法
animate(params, [speed],[easing],[fn])
2.参数
(1)params：想要更改的样式属性，以对象形式{}传递，必须写。属性名可以不用带引号，如果 是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
(2)speed：三种预定速度之一的字符串(“slow”，“normal”，or “fast”)或表示动画时长的毫秒数值(如：1000)。
(3)easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。
(4)fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
jQuery属性操作：
设置或获取元素固有属性值 prop()。
所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。
获取固有属性语法:
prop("属性”)
设置固有属性语法:
prop("属性”，"属性值”)
元素的自定义属性，我们通过 attr() 来设置和获取。
jQuery内容文本值:
html() // 获取元素的内容
html("内容”) //设置元素的内容
text() //获取或设置文本内容
val() //获取或设置表单值
jQuery遍历元素：
语法1：
$("div").each(function (index, domEle) {xxx;})
1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jquery对象
3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)
语法2：
$.each(object,function (index，element) { xxx;})
1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2.里面的函数有2个参数：index是每个元素的索引号；element 遍历内容
jQuery创建元素：
$("<li></li>");
动态的创建了一个<li>
jQuery删除元素:
element.remove() //删除匹配的元素(本身)
element.empty() //删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容
jQuery添加元素:
外部添加
element.after("内容”) // 把内容放入目标元素后面
element.before("内容”)//把内容放入目标元素前面
①内部添加元素，生成之后，它们是父子关系。
② 外部添加元素，生成之后，他们是兄弟关系。
内部添加
element.append(“内容")
把内容放入匹配元素内部最后面，类似原生appendChild。
jQuery获得元素尺寸方法：
| width() / height() | 取得匹配元素宽度和高度值 只算width /height |
| innerWidth() / innerHieght() | 取得匹配元素宽度和高度值 包含padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值 包含 padding、border、margin |
| 以上参数为空，则是获取相应值，返回的是数字型。 如果参数为数字，则是修改相应值。 参数可以不必写单位。 |
jQuery 获取元素位置的方法：
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
offset()设置或获取元素偏移
① offset()方法设置或返回被选元素相对于 文档 的偏移坐标，跟父级没有关系。
② 该方法有2个属性 left、top，offset().top 用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
可以设置元素的偏移：offset({top:10, left:30});
position()获取元素偏移
① position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
① scrollTop()方法设置或返回被选元素被卷去的头部。
jQuery事件处理
事件处理 on()绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
element.on (events,[selector],fn)
1.events:一个或多个用空格分隔的事件类型，如"click”或“keydown”。
2.selector：元素的子元素选择器。
3.fn:回调函数 即绑定在元素身上的侦听函数。
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "red");
}
});on()方法优势2：
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click','li',function (){
alert('hello world!');
})；
on()方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。
事件处理 off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off()//解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件 后面的 click 是侦听函数名
$("ul").off("click","li") ; // 解绑事件委托
jQuery自动触发事件：
$("元素").trigger("事件名")
$("元素").triggerHandler("事件名")
jQuery 事件对象：
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event){}) 阻止默认行为：event.preventDefault()或者 return false。 阻止冒泡：event.stopPropagation()
jQuery 对象拷贝：
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法
语法：
$.extend([deep], target, object1, [objectN])
1.deep:如果设为true为深拷贝，默认为false 浅拷贝
2.target:要拷贝的目标对象
3.object1：待拷贝到第一个对象的对象。
1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象。2.深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性，会合并到一起。
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
