博客

jQuery对象

用jQuery方式获取过来的对象是jQuery对象.

 $("div");  // $("div")是一个jQuery 对象

jQuery 对象只能使用 jQuery 方法

jQuery对象转换为DOM对象

//加上索引号即可转为DOM对象，可以使用DOM对象的方法
$("div")[0]
$("div").get(0)

隐式迭代

隐式迭代就是把匹配的所有元素内部进行遍历循环.

<div>我们一起被修改</div>
<div>我们一起被修改</div>
<div>我们一起被修改</div>
<div>我们一起被修改</div>

<script>
$("div").css("background", "pink");
//隐式迭代直接把元素遍历了一遍，可以直接修改所有div样式
</script>

筛选选择器

$(function() {
    $("ul li:first").css("color", "red"); //:first :last
    $("ul li:eq(2)").css("color", "blue"); //选择第n个元素 :eq(n)
    $("ol li:odd").css("color", "skyblue"); //奇数
    $("ol li:even").css("color", "pink"); //偶数
  	//注意：索引号从0开始
})

筛选方法

parent()

查找最近父级

$("li").parent();

parents()

可返回指定父级，如果参数为空，返回所有父级.

$("li").parents("选择器");

children(“选择器”)

相当于$("ul>li")最近一级（亲儿子）

$("ul").children("li");

find(“选择器”)

相当于$("ul li"),后代选择器

$("ul").find("li");

siblings(“选择器”)

查找兄弟节点（不包括自己）

$(".first").siblings("li");

eq(index)

相当于$("li:eq(2)");方法里面可以换成变量，比较灵活

$("li").eq(2);

nextAll()

查找当前元素之后的所有同辈元素

$(".first").nextAll();

prevtAll()

查找当前元素之前的所有同辈元素

$(".last").prevtAll();

hasClass(“类名”)

查找元素是否含有某个类，返回值true or false.

$("div").hasClass("box");

得到当前元素索引号

方法

$(this).index();

排他思想

利用查找兄弟元素的方法

siblings("选择器") 选择兄弟节点，除了自己

$("div").eq(1).show();
$("div").eq(1).siblings().hide();

链式编程

//上个小节的代码可以改写为这样
$("div").eq(1).show().siblings().hide();

操作CSS方法

参数只写属性名，返回值是属性值.

$("div").css("color"); //#333

修改CSS样式

 $("div").css("属性名","属性值");
//逗号分隔，属性必须加引号，值是数字不用加单位和引号

修改多个CSS样式（利用对象）

 $("div").css({
   	 属性名:"属性值"  //如果值不是数字，则需要加引号
     width: 400,
     color:"lightblue"
     backgroundColor: "red" // 如果是复合属性则必须采取驼峰命名法
 });

设置类样式方法（原生的classList）

添加类

$("div").addClass("active");

移除类

$("div").removeClass("active");

切换类

$("div").toggleClass("active");
//有就移除，没有就添加

jQuery效果

[]内表示可以省略

speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.

fn:在动画完成时执行的函数，每个元素执行一次.

停止排队

stop()

必须写在动画的前面，相当于结束上一次动画.

显示 / 隐藏 / 切换

show([speed],[easing],[fn])

hide([speed],[easing],[fn])

toggle([speed],[easing],[fn])

滑动

slideDown([speed],[easing],[fn])

slideUp([speed],[easing],[fn])

slideToggle([speed],[easing],[fn])

事件切换

hover([overfn,]outfn)

相当于mouseover和mouseout

hover(fn1(){},fn2(){})
//over:鼠标移到元素上要触发的函数
//out:鼠标移出元素要触发的函数
//如果只写一个函数，则鼠标移入移出都会触发

淡入淡出

fadeIn([speed],[easing],[fn])

fadeOut([speed],[easing],[fn])

fadeToggle([speed],[easing],[fn])

fadeTo(speed,opacity,[easing],[fn]) //时间和透明度必须写

自定义动画

animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合

获取属性

获取元素固有属性值

获取属性值ele.prop("属性名")

修改属性值ele.prop("属性名",[值])

获取自定义属性值

自定义和自带的都能用

获取自定义属性值ele.attr("自定义属性名")

//类似原生 getAttribute()

修改自定义属性值ele.attr("自定义属性名",[值])

//类似原生 setAttribute()

H5新增的data-*也可以用这个方法得到

数据缓存

data([key],[value])

当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值，值得注意的是，如果浏览器支持HTML5，同样可以读取该DOM中使用 data-[key] = [value] 所存储的值.

设置

 $("span").data("uname", "andy");
 //不会出现在DOM上，存在内存中

使用

 $("span").data("uname"); //andy

读取的data-[key]值

<div data-test="this is test" ></div>

$("div").data("test"); //this is test!;
//不需要加data-

jQuery 内容文本值

获取设置元素内容 html()

console.log($("div").html());

修改内容

$("div").html("123");

获取设置元素文本内容 text()

console.log($("div").text());

修改内容

$("div").text("123");

获取设置表单值 val()

console.log($("input").val());

修改内容

$("input").val("123");

遍历元素

$().each(fn("索引号",对应DOM对象))

主要用于遍历DOM对象

两个参数均可自己命名

<div>1</div>
<div>2</div>

$("div").each(function(i, domEle) {

// 0 1
console.log(i);
  
//<div>1</div>
//<div>2</div>
console.log(domEle); 

})

$.each(arr,fn(索引号,ele){})

主要用于遍历数据，处理数据.

$.each({
    name: "andy",
    age: 18
}, function(i, ele) {
    console.log(i); // 输出的是 name age 属性名
    console.log(ele); // 输出的是 andy  18 属性值
})

创建添加删除元素

创建

$("<li> 小li </li>");

添加

内部添加（和获取元素是父子关系）

放到最后一个$("ul").append($("<li> 小li </li>"));

$("ul").prepend($("<li> 小li </li>"));放到第一个

外部添加（和获取元素是兄弟关系）

放到后面$("div").after("<div>新的div</div>");

$("div").before("<div>新的div</div>");放到前面

删除

删自己$("div").remove();

//删子元素

$("div").empty(); 相当于清空自己的所有内容

$("div").html(""); 相当于修改元素内的内容

jQuery 尺寸

width() / height()

获取设置元素 width和height大小

$("div").width()

innerWidth() / innerHeight()

获取设置元素 width 和 height + padding 大小

$("div").innerWidth()

outerWidth() / outerHeight()

获取设置元素 width 和 height + padding + border 大小

$("div").outerWidth()

outerWidth(true) / outerHeight(true)

获取设置 width 和 height + padding + border + margin

$("div").outerWidth(true)

jQuery 位置

获取设置距离文档的位置（偏移） offset

（与父级无关）

$("div").offset()

有两个属性left、top

获取$("div").offset().top;

设置偏移$("div").offset({top:100,left:30});

获取距离带有定位父级位置（偏移） position

（如果没有带有定位的父级，则以文档为准）

position方法不能设置偏移，其余用法和offset一样

被卷去的头部

被卷去的头部scrollTop()

被卷去的左侧scrollLeft()

填数值可以将页面跳转到对应位置

返回顶部小例子

（注意是获取body和html元素，而不是文档）

$("body, html").stop().animate({
    scrollTop: 0
});
// $(document).stop().animate({
//     scrollTop: 0
// }); 不能是文档而是 html和body元素做动画

jQuery 事件处理

单个事件注册

$("div").事件名(fn(){})

事件处理 on

绑定多个事件

//绑定多个事件，每个事件对应不同函数
$("div").on({

mouserenter:fn(){},

cilck:fn(){},

dbclick:fn(){},

})

//绑定多个事件，事件之间用空格隔开，对应相同函数
$("div").on("mouseenter mouseleave", function() {});

事件委派

$("绑定事件的元素").on("click", "触发的元素", fn() {});

$("ul").on("click", "li", function() {
    alert(11);
});
//click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

on可以给未来动态创建的元素绑定事件

$("ul").append("<li> </li>");
//新加的小li也绑定了事件

事件解绑 off

$("div").off();解除所有事件

$("div").off("click"); 解除某个事件

$("ul").off("click", "li"); 解除事件委托

绑定只触发一次的事件

$("p").one("click", function() {})

自动触发事件

默认行为 例：文本框focus会有光标闪烁

元素.事件()

$("div").click();会触发元素的默认行为

元素.trigger(“事件”)

$("div").trigger("click");会触发元素的默认行为

元素.triggerHandler(“事件”)

$("div").triggerHandler("click");不会触发元素的默认行为

jQuery 事件对象

和原生差不多

$("div").on("click", function(event) {
    // console.log(event);
    console.log("点击了div");
    event.stopPropagation(); //阻止冒泡
})

jQuery 拷贝对象

$.extend([deep], target, object1, [objectN])

参数

deep:如果设为true，则为深拷贝

target:待修改对象。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象（可选）。

var targetObj = {
    id: 0,
    msg: {
        sex: "男"
    }
};
var obj = {
    id: 1,
    name: "andy",
    msg: {
        age: 18
    }
};

浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象

• targetObj将会被obj中的同名属性覆盖
• 但是，obj中的msg属性值是对象，浅拷贝只会拷贝msg的地址，所以targetObj打印出来的msg和obj指向同一地址

$.extend(targetObj,obj);
targetObj.msg.age = 20; //两个对象中的msg指向同一地址，所以都会被修改

深拷贝把里面的数据完全复制一份给目标对象

（如果里面有不冲突的属性，会合并到一起）

• 因为是深拷贝，obj把属性复制一份给targetObj,所以如果targetObj中有和obj同名的属性，则会被覆盖
• 像obj的msg中的age则会合并到targetObj的msg里面
• 如果如targetObj中的msg原来有age，则会被覆盖

$.extend(true, targetObj, obj);
targetObj.msg.age = 20;

jQuery 多库共存

• 如果$符号冲突 我们就使用jQuery
• 让jquery释放对$控制权 自己来决定

var diy = jQuery.noConflict();
console.log(diy("span"));
diy.each();

jQuery 插件

jQuery之家 / jQuery插件库

瀑布流、图片懒加载、全屏滚动···

jQuery API 中文文档