jQuery的引入
<script src=“http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
jQuery选择器
//指定ID选择器
$("#d")
//全选选择器
$("*")
//类选择器
$(".class")
//标签选择器
$("div")
//群组选择器
$("div,span,a")
//后代选择器
$("ul li")
// 子选择器
$("div>p")
//next选择器
$("div+p")
//nextAll选择器
$("div~p")
//属性选择器
$("input[name]")
jQuery过滤选择器
//选取第一个元素
$("li:first")
//选取最后一个元素
$("li:last")
//选取class不是red的元素
$("li:not(.red)")
//选取偶数的所有元素
$("li:even")
//选取所有奇数的元素
$("li:add")
//选择对应下表的元素
$("eq(index)")
//可见性选择器
$("ul:visible").css("border","solid 5px red");
$("ul:hidden").css("border","solid 5px red");
// 判断一个元素身上是否具有某个class或id
console.log($("#aaa").is(".msg"))
// 判断一个元素身上是否具有某个class
console.log($("#aaa").hasClass("msg"))
//判断是否有某个属性名
$("li").is(".red")
$("ul:has(.pink)").css("border","solid 5px red");
//关系过滤器方法
$(".box h2").css("background","red");
$(".box").find("h2").css("background","red");
$(".box>h2").css("background","red");
$(".box").children("h2").css("background","red");
$("#box+span").css("background","red");
$("em").next("span").css("background","red");
$("#box~span").css("background","red");
$("em").nextAll("span").css("background","red");
$(".cont:first").css("background","red");
$(".cont").first().css("background","red");
$(".cont:last").css("background","red");
$(".cont").last().css("background","red");
$(".cont:eq(2)").css("background","red");
$(".cont").eq(1).css("background","red");
$("div:not(.box)").css("background","red");
$("div").not(".box").css("background","red");
$("ul:has(.pink)").css("border","solid 5px red");
$("ul").has(".pink").css("border","solid 5px red");
jQuery动画
//内置动画
$("#box").hide() //显示
$("#box").show() //隐藏
$("#box").toggle() //显示隐藏切换
$("#box").slideUp(); //上拉
$("#box").slideDown(); //下拉
$("#box").slideToggle(); //切换
$("#box").fadeOut(); //淡出
$("#box").fadeIn(); //淡入
$("#box").fadeToggle(); //淡入淡出切换
$("#box").fadeTo(); //修改透明度
方法有两种用法:
-
一种是不传参数,代表直接显示隐藏。
-
另一种是向方法中传递一个参数,这个参数为number类型,代表动画的执行时间。会有显示隐藏的动画效果。
示例:show(100)、hide(100)、toggle(100)
-
不仅如此,jQuery还为动画方法提供了三种字符串形式的参数,分别是:fast、slow、和空字符串’’
show(‘fast’)、hide(‘slow’)、toggle(’’)
三种参数的执行时间,分别为 ,‘fast’ :200毫秒 ‘’(默认值):400毫秒 ‘slow’:600毫秒
fadeTo()
方法接受两个参数。
第一个参数是动画执行的时间,第二个参数是期望达到的透明度。
自定义动画
animate()
方法
animate()方法有三个参数。分别是动画目标(target),动画执行时间,回调函数。只有第一个参数是必填参数。
animate()方法的使用:
animate({
'width':'200px',
'height':'200px'
})
将元素属性变换为自定义动画中的目标属性,所有参数中的属性一起改变。
animate({
'width':'+=200px'
})
设置的属性,支持运算
动画执行顺序
如果想要动画按照顺序执行(执行完第一个动画之后,再执行下一个动画)有三种方法:
- 借助动画的回调函数。
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
},function(){
$('div').animate({
'width':'200px',
'height':'200px'
})
})
})
- 将动画效果分开写。
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
})
$('div').animate({
'width':'200px',
'height':'200px'
})
})
- 连缀
$('input').click(function(){
$('div').animate({
'width':'400px',
'height':'400px',
}).animate({
'width':'200px',
'height':'200px'
})
在操作同一元素的时候,推荐使用连缀。在操作不同元素的时候,推荐使用回调函数。
动画执行顺序
- 动画方法与动画方法之间是同步执行
- 动画方法与其他方法之间是异步执行
动画队列
动画或效果一旦触发多个,就会执行,如果多次触发,就会造成多个动画或效果排队执行。
解决方案:
使用stop()
stop()方法写到动画或者效果的前面,相当于停止结束上一次动画
动画全局方法
$.fx.interval
属性可以调整动画每秒的运行帧数,默认为 13 毫秒。数字越小越流畅,但可能影响程序性能。
$.fx.interval=1000;动画的帧数设置。
$.fx.off=true;
动画关闭。
Dom元素及属性操作
- 设置(获取)元素内容
html(); //获取
html("值") //设置或修改
//原生innerHTML
- 设置(获取)文本内容
text(); //获取
text("值") //设置
- 表单内容获取
val() //获取
val("值") //设置
CSS操作
/ 元素.get/set/removeAttribute
console.log($(".box").attr("abc"));
$(".box").attr("qwe","world");
$(".box").attr({
a:10,
b:20,c:30
});
$(".box").removeAttr("b");
// 元素.css 参数可是对象格式
$(".box").css("width","200px");
$(".box").css({
width:100,
height:200,
background:"pink"
});
console.log($(".box").css(["width","height","border"]))
$(".box").css({
width:"+=200px"
});
元素尺寸的获取和设置
内容的尺寸
console.log($(".box").width());
$(".box").width(200);
内容的尺寸 + padding
console.log($(".box").innerWidth());
$(".box").innerWidth(200);
内容的尺寸 + padding + border
console.log($(".box").outerWidth());
$(".box").outerWidth(300);
(margin + position)其实是相对于包含块偏移的位置
console.log($(".box").offset());
$(".box").offset({left:200,top:200})
position
console.log($(".box").position())
Class操作
$("#box").addClass("blue abc qwe asd zxc"); //添加类名
$("#box").removeClass("asd"); //删除类名
document.onclick = function(){
$("#box").toggleClass("blue"); //类名切换,有就删除,没有就设置
元素的操作
// body被div插入了
$("body").append(div);
// 把div插入到body
div.appendTo($("body"));
$("body").prepend(div)
div.prependTo($("body"))
//this的指向不同,根据需求选择
//把div插入到上一个兄弟
$("body").before(div)
//把div插入到下一个兄弟
$("body").after(div)
// 切记,创建一个元素,只能被插入一次
// 删除元素的方式
$("em").remove() //删除指定元素
$("p").html("") //覆盖所有元素,相当于删除全部
$("p").empty(); //覆盖单个元素
$("p").replaceWith("<div>"+ $("p").html() +"</div>");
//相当于outHTML
// 克隆(复制)元素
clon()//参数为ture时候,事件也可以被复制
$(".btn").click(function(){
$(".btn").clone(true).appendTo($("body"));
})
jQuery事件
// 1. 常规绑定:一般事件都支持,某些事件不支持
$("#box").click(function(){
console.log(1)
})
$("#box").click(function(){
console.log(2)
})
// 2. on绑定,off删除
$("#box").on("click.a",function(){
console.log(1)
})
$("#box").on("click.b",function(){
console.log(2)
})
$("#box").on("click.c",function(){
console.log(3)
})
$("#box").off("click.b");
// 3. one
$("#box").one("click",function(){
console.log(1);
})
// 4. hover (enter+leave)
$("#box").hover(function(){
console.log("鼠标进入")
},function(){
console.log("鼠标离开")
})
// 5. bind绑定+unbind删除
$("#box").bind("click.a",function(){
console.log(1)
})
$("#box").bind("click.b",function(){
console.log(2)
})
$("#box").bind("click.c",function(){
console.log(3)
})
$("#box").unbind("click.b");
//目前已被弃用
// 6. bind和on的区别
// on可以直接支持事件委托
$("ul").on("click","li",function(){
console.log(this);
})
$("#box").on("click",function(){
console.log(1)
})
setInterval(() => {
// 自动触发事件执行
$("#box").trigger("click");
// $("#box").triggerHandler("click");
}, 500);