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 插件
瀑布流、图片懒加载、全屏滚动···
发表回复