1.区分attr,prop,addClass ,css
注意区分,属性 和 样式属性 平常说的属性包括id class style lang dir title等,然后注意样式属性指的是设置在 style 属性里面或者 style 标签里面的 ,不要搞混.css() 只能获取是 style 里面的属性值;
注意语法:获取style样式属性值:对象.css(“属性名”),设置style样式属性值:对象.css(“属性名”),设置style样式属性值:对象.css(“属性名”,“属性值”)双引号必不可少
attr,prop 是操作属性,也就是id,class,style,lang,dir,title,alt--------------标签里面的属性
attr:我们自定义的DOM属性
2。class操作
1.添加样式
addClass(name);
name:类样式名字
$("li").addClass("bigger");
2.删除样式
.removeClass(name);
name:类样式名字
$("li").removeClass("bigger");
3.判断是否有样式
hasClass(name);
name:类样式名字
$("li").hasClass("bigger");
4.切换类样式
toggleClass(name);
name:类样式名字
$("li").toggleClass("bigger");
3.三种基本动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background: deeppink;
display: none;
}
</style>
</head>
<body>
<div></div>
<input type="button"value="显示">
<input type="button"value="隐藏">
<input type="button"value="卷出来">
<input type="button"value="卷出去">
<input type="button"value="切换1">
<input type="button"value="淡入">
<input type="button"value="淡出">
<input type="button"value="切换2">
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
$("div").show("fast",function () {
console.log("动画借宿了");
});
});
$("input").eq(1).click(function () {
$("div").hide("fast",function () {
console.log("动画隐藏了");
});
});
$("input").eq(2).click(function () {
$("div").slideDown("fast",function () {
console.log("动画卷出来");
});
});
$("input").eq(3).click(function () {
$("div").slideUp("fast",function () {
console.log("动画卷出去");
});
});
$("input").eq(4).click(function () {
$("div").slideToggle("fast",function () {
console.log("动画卷上卷下切换");
});
});
$("input").eq(5).click(function () {
$("div").fadeIn("fast",function () {
console.log("动画淡入");
});
});
$("input").eq(6).click(function () {
$("div").fadeOut("fast",function () {
console.log("动画淡出");
});
});
$("input").eq(7).click(function () {
$("div").fadeToggle("fast",function () {
console.log("动画淡入淡出切换");
});
});
})
</script>
</body>
4.play与load
load与play是DOM对象中的,不能用eq()
在出现音频,视频标签谷歌不支持,火狐和ie支持
5.有的对象可以链式操作,有的不能,
6.元素创建与追加
创建:$(”<span></span>“) 直接$(“html标签代码”)
追加append() 1.$(父级元素).append("创建的子集元素") 2.$("子集元素").appendTo("父级元素")
7.注意点
动画函数里面参数animate({属性:值},数值,“linear”function(){})
不要忘了linear加引号,对象里面属性与值可加可不加
有的对象可以链式操作,有的不能,
一定要用this
$(function () {
$("a").click(function () {
$("#image").attr("src",$(this).children("img").attr("src"));//将a标签中的小图的attr中的src属性传给给大图的src属性
$("#des").text($(this).attr("title"));//将a标签中的title属性传给p标签的text方法,它返回的是a标签title属性的值
return false;
});
})
重点注意,在点击事件中一定要用this,如果用this所指的对象名会达不到效果,
因为this指的是当前,而对象由于隐式迭代,它所指的是所有的对象
后代选择器与子代选择器区别:
后代选择器:作用在子代和子代所包含的与其相同标签的所有元素
子选择器:只作用到子代,子代所包含的所有标签都不会作用到
7.清除节点