jQuery
What's the jQuery?
主要分为两个大版本
1.x -- 还支持ie6/ie7/ie8
2.x -- 已经不支持低版本浏览器了
一般分为两种类型
生产版本 --在开发阶段使用的，没有经过压缩，除了问题好调试；
jquery-2.2.2.js
发布版本 --网站发布之后使用的版本，经过压缩，可以优化网络传输；
jquery-2.2.2.min.js
How to use jQuery?
步骤：
1、引入jQuery的文件；
2、写入口函数；
3、写自己具体的逻辑实现；
<script src="js/jquery-1.12.2.js"></script>
<script>
//入口函数的第一种写法
$(document).ready(function () {
});
//入口函数的第二种写法
$(function () {
});
</script>
tips：script如果写在了body之上head之内，那么要让script自动执行，要加入 onload = function (){}；
script写在body标签的末尾则没有这个问题；
jQuery选择器
$(tagName); 获得的是一个伪数组；
$("#id"); 获得的是一个伪数组，但里面只有一个元素；
$(".className"); 获得的是一个伪数组；
jQuery操作样式
box.css(key,value);
eg:
$("#box").css("width",600);
$("#box").css({"width":600,"height":300,"font-size":"20px"});
tips：该操作有返回值，返回值为该对象；
jQuery操作class
addClass
removeClass
toggleClass
eg:
$("div").addClass("box box1");
$("div").removeClass("box box1");
$("div").toggleClass("box box1");
tips：toggleClass()，如果该class值不存在则加入，存在则删除；
添加删除操作都支持传入多个className；
jQuery节点操作
（1）、创建节点
$("<标签名>")，创建标签，返回一个标签对象；
eg：
var p1 = $("<p>");
var p1 = $("<p></p>");
（2）、插入节点
$(parent).append(div);
div.appendTo($(parent)); 将标签对象加入到父元素中，作为最后一个子元素；（用的有点少）
$(parent).prepend(div); 将标签对象加入父元素作为第一个子元素；
$(selector).after(node); 将一个子元素(node)添加到另一个子元素(selector)后面；
$(selector).before(node); 将node插入到selector之前；
（3）、删除节点
$(selector).remove(); 将selector及其子元素全部删除；
（4）、清空子节点
$(selector).empty(); 将selector的子元素全部删除，自身不删除；
（5）、克隆节点
$(selector).clone(true of false);
true 复制已经绑定的事件处理程序；
false 不复制已经绑定的事件处理程序；
tips：返回克隆的对象；
tips：
var index = $(this).index; 可以直接获取该对象在父元素中的索引；
$(parent).eq(index); 获取parent里面的索引为index的子元素，返回一个JQ对象；
jQuery对象是指可以调用jQuery方法的对象；
DOM对象指原生js获取到的对象，仅可调用js提供的DOM方法；
通过jQuery获取的对象都为jQuery对象，
this是DOM对象，因此不能直接在jQuery中使用，
jQuery用 $(this) 来指代当前对象；
tips：$(this).children(1); 其中的1指的是索引；
$(this).children().eq(1);
动画
（1）、隐藏和显示动画
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
eg：
$("#hide").click(function () {
$("#box").hide(2000,function(){
console.log("hideFunction");
});
});
$("#show").click(function () {
$("#box").show(2000,function () {
console.log("showFunction");
});
});
（2）、淡入或淡出
$("#box").fadeOut(2000,function () {
console.log("淡入，第一个是速度");
});
$("#box").fadeIn(2000,function () {
console.log("淡出");
});
$("#box").fadeToggle(2000,function () {
console.log("淡入或淡出");
})
$("#box").fadeTo(2000,0.5,function () {
console.log("淡入或淡出，第一个是speed，第二个是透明度");
});
（3）、滑动
向下滑动：$(selector).slideDown(speed,callback);
向上滑动：$(selector).slideUp(speed,callback);
向上或者向下滑动：$(selector).slideToggle(speed,callback);
（4）、多属性动画
作用：控制多个属性同时改变的动画
语法：
$(selector).animate({params},speed,callback);
参数：
params 动画属性键值对
speed 动画运行所需的毫秒数
callback 动画完成时的回调函数
eg:
$("#hide").click(function () {
$("#box").animate({
"width":600,
"height":100,
"opacity":0.3
},3000,function () {
console.log("我会七十二变");
})
});
（5）、停止动画：
$(selector).stop(stopAll,goToEnd);
作用：将jQuery的动画停止；
参数：
stopAll
true 清除所有的动画效果；
false 仅停止当前活动的动画，动画序列中下一个的动画继续执行；
goToEnd
true 停止之后立刻到达结束的效果，并执行callback；
false 停止之后不会立刻到达结束效果；
注册事件
（1）、eg：
$(select).hover(function_1,function_2);
tips：前一个函数为移入时候触发的函数，
后一个函数为移出时候触发的函数；
（2）、on的方式注册事件
$(selector).on(event,childSelector,data,callback);
参数：
event 事件类型 必须
childSelector 指定注册事件的子元素 可选（委托注册事件）
data 传入callback的额外参数 可选
callback 绑定的事件处理程序 可选
tips:委托注册事件方式原理为事件冒泡，给父元素注册事件，
委托给父元素指定的所有子元素都添加同一个事件，这时候如果继续添加了子元素，新的子元素仍然会有这个事件；
eg:
$("#father").on("click","#son",{msg:456},function(event){
console.log("123");
console.log(event.data.msg);
});
tips:{msg:456}为传入回调函数的额外参数，必须为对象字面量；
在回调函数内部，传入的参数用event.data.msg调用；
（3）、bind
$(selector).bind(event,data,callback)；
tips:与on没有什么区别，推荐用on；
（4）、delegate
$(parentSelector).delegate(childSelector,event,data,callback);
参数：
childSelector 子元素选择器
event 事件类型
data 额外参数
callback 绑定的处理程序
tips:委托方式注册事件，这种方式由父元素调用，给子元素添加事件；
parentSelector即为父元素，childSelector为子元素，其他参数与on类似；
仍然推荐用on的方式，简单直接；
eg:
click可以用这种方式直接注册事件
$(tabItem).click(function(){
});
tips:其他事件，
mouseenter，鼠标移入，移入瞬间触发；
mouseover，鼠标悬停，会不断触发；
解绑事件
（1）、off
$(selector).off(event,childSelector,callback);
参数：
event 事件类型；
selector 指定的子元素；
callback 解绑的处理程序；
（2）、unbind
$(selector).unbind(event,callback)；
参数：
event 事件类型
callback 要解绑的处理程序
（3）、undelegate
$(selector).undelegate(selector,event,callback);
参数：
selector 指定的子元素；
event 事件类型；
callback 解绑的处理程序；
tips:解绑事件不需要对事件进行一一对应，方式通用；
undelegate没有event则无法使用；
off方法如果不传参将会删除所有注册过·的事件；
推荐使用off方法解绑事件；
设置DOM元素属性
（1）、attr
$(selector).attr(attribute,value);
参数：
attitute 属性；
value 值；
tips：如果只有一个参数是获取，有两个参数就是设置；
（2）、prop
$(selector).prop(attribute,value);
参数：
attitute 属性；
value 值；
tips：如果只有一个参数是获取，有两个参数就是设置；
tips:prop只支持标准属性，自定义属性不支持获取和设置；
attr支持自定义属性；
（3）、val();
获取表单属性的值；
$(selector).val(value);
参数：
value 用于设置的值；
说明：不传参数就是获取，传了参数就是设置；
获取和设置标签中的内容
（1）、text
$(selector).text(content)；
参数：
content 用于设置内容（文本的形式）；
（2）、html
$(selector).html(content)；
参数：
content 用于设置内容（可以是标签）；
tips:不传参数为获取，传了参数为设置；
分别是设置内部文本和内部的html标签；
链式编程：
$("#navBar").css("position","fixed").css("width","100%");
宽高设置、位置操作
（1）、宽高
$(selector).width(number);
$(selector).height(number);
tips：国际惯例，不传参为获取，传参为设置；
（2）、位置操作
获取或者设置某个元素的偏移量
$(selector).offset({top:value,left:value});
eg:
$("#box").offset();
tips:如果括号内不传参，则获取一个包含了top和left的对象；
获取某个元素的位置
$(selector).position();
tips:获取的是定位下的top和left的值，以数组对象的形式存储；
只可获取，不可存储；
要设置其定位值，用css或offset；
（3）、操作滚动
为指定元素绑定滚动事件的处理程序；
$(selector).scroll()；
scrollTop();
scrollLeft();
jQuery选择器
（1）、基本选择器
标签选择器
$(标签名)
作用：选择所有同名标签；
返回值：包含所有满足条件的DOM对象的jQuery对象，是一个类数组对象；
class选择器
$(.class)
作用：选择指定class的页面上的标签；
返回值：所有满足条件的DOM对象集合——jQuery对象，一个类数组对象
id选择器；
$(#id)
作用：选择指定id的目标元素，只能获取到第一个id满足条件的元素；
返回值：包含有一个DOM对象的jQuery对象，也是一个类数组对象；
并集选择器
$(selector1,selector2,...);
作用：获取满足任意一个选择器的标签组成一个集合；
返回值：包含满足任意条件的DOM对象的集合、jQuery对象、类数组对象；
eg:
$("span,div,p")
交集选择器
$(selector1selector2....)
作用：选取满足所有选择器的标签元素；
返回值：包含满足所有条件的DOM对象，得到的是jQuery对象、类数组对象；
eg:
$(".box.box1.box2")
tips：跟css中的选择器是一样的，只不过作为字符串传入了jQuery的选择器中；
（2）、层级选择器
后代选择器
$(selector1 selector2 ...)
作用：选择类似css中后代选择器中选择的目标元素；
返回值：满足条件的最后代子元素的DOM对象集合，是jQuery对象；
eg:
$(".box a");
子代选择器
$(selector>selector)
作用：选取类似css中子的满足条件的代元素；
返回值：满足条件的所有DOM对象集合，是一个jQuery对象；
eg:
$("li>.box")
相邻选择器
$(selector1+selector2)
作用：选取selector1的下一个兄弟元素，同时要满足selector2的条件；
返回值：jQuerr对象；
eg:
$(".li_1+.li_2")
兄弟选择器
$(selector1~selector2)
作用：选取selector1后面的所有兄弟元素，并且要求满足selector2；
返回值：jQuery对象；
eg:
$(".li_1~.li_4")
（3）、过滤(筛选)选择器
$(selector:even)
作用：选择满足selector的index为偶数的元素；
eg:
$("li:even")
$(selector:odd)
作用：选择满足selector的index为奇数的元素；
eg:
$("li:odd")
（4）、查找元素的方法
parent方法
$(selector).parent()
作用：获取满足选择器的元素的父节点；
返回值：jQuery对象；
find方法
$(selector).find(selctor2);
作用：在满足selector1的元素的后代元素中查找满足selector2的后代元素；
返回值：jQuery对象
tips：find方法的效率是不高，所以少用，推荐children
children方法
$(selector1).children(selector2)
作用：在满足selector1的子代元素中查找满足selector2的子代元素；
返回值：jQuery对象；
eg:
$("#ul").children(".li_3")
siblings方法
$(selector1).siblings(selector2)
作用：获取满足selector1的兄弟元素中满足selector2的兄弟元素
返回值：jQuery对象
next方法
$(selector).next();
作用：获取满足选择器元素的下一个元素节点；
返回值：jQuery对象；
eg:
if($("?").next().length == 0)；
判断该元素是否为最后一个；
nextAll方法
$(selector1).nextAll(selector2)
作用：获取满足选择器1的元素之后的所有满足选择器2的元素；
返回值：jQuery对象；
prev方法
$(selector).prev()
作用：获取当前元素的上一个元素；
返回值：jQuery对象；
prevAll方法
$(selector1).prevAll(selector2)；
作用：获取当前元素中之前的兄弟元素，同时满足selector2；
返回值：jQuery对象；
eq方法
$(selector).eq(index);
作用：获取满足selector的jQuery对象中第index个jQuery对象
返回值：jQuery对象
index方法
1、 获取某个元素在兄弟元素之间的索引；
2、 语法格式：
$(seletor).index(elemnt)；
获取的是element在selector所选中的所有元素中索引；
eg:
$(".hot").index($("#favorite"))
tips:这时候，必须是hot和favorite两个条件都满足，
然后输出带有favorite的索引；
链式编程
在方法里，整个函数执行完毕之后，返回调用这个方法的对象，就可以一直点方法；
eg:
$("#box").css("width",200).css("height",200).css("background-color","blue");
tips:链式编程函数执行后，函数返回值为this，因此可以再次调用；
隐式迭代
隐式：隐藏；
迭代：遍历；
很多jQuery方法都是通过隐式迭代的方式实现的
$(“.box”).on(“click”,fun(){});
jQuery提供了遍历对象的方法；
each
$(selector).each(function(index, element){
})
index: 代表的是当前元素在整个jq对象中的索引；
element: 代表的是从jq对象中取出的当前元素，是一个DOM对象；
属性选择器
$([attribute]);
作用：筛选包含attribute的所有元素
$([atttribute = value]);
作用：筛选属性的值是满足条件的标签
$([attribute != value])
作用：凡是具有该属性，但是属性值不为value的都被选中；
多库共存
在同一个页面中导入了多个库，会发生$符号冲突的问题。
jQuery要调用要使用$，其他的库要调用也可能会使用该库。
（1）、method_1
使用jQuery代替。
eg:
jQuery(".box").on("click",function(){
console.log("test");
});
（2）、method_2
使用自定义的变量名来代替$符。
eg:
var its = jQuery.noConflict()
its(".box").ready(function(){
console.log("test");
});
jquery.color.js
jQuery.color插件是一个专门用于拓展jQuery的animate方法的js库文件；
原本jQuery是不具备让颜色渐渐改变的动画效果的，使用了它就可以了。
使用插件的步骤：
1 先引入jQuery文件
tips:必须在插件之前，因为jQuery.color是基于jQuery的拓展；
2 引入jQuery.color的js文件
3 写入口函数，$(function(){ })；
4 调用jQuery或者插件的API；
jquery.lazyload.js
jQuery.lazyload插件使一款用于实现图片懒加载的jQuery拓展库；
其中使用data-original属性来存储每一张图片将来要加载的图片的路径，
width和height属性也是必须的，否则可能jQuery.lazyload插件使用出问题；
eg:
<img class="lazyload" id="box" data-original="images/1.jpg" width="1280" height="800"/>
$("#box.lazyload").lazyload()；
tips：在滚动到的时候才会加载该内容；
jquery-ui.js
jquery提供的一套默认UI，详情见API；
eg:
//先实现拖动功能
$(".drag-wrapper").draggable({handle:".drag-bar"});
//实现缩放功能 -- 只能在底部缩放
$(".resize-item").resizable({handles:"s"});
//实现排序功能
$(".sort-item").sortable({opacity:0.3});
tips:CSS属性，cursor:pointer; 设置该项可以改变鼠标手势；
扫一扫
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
