1.css()方法
用于更改 jq对象的css样式，本方法可读可写，相当于 js中的 style属性
语法：$("选择器") .css("key", "value");
css()方法的第二个参数为可选参数，
如果只有第一个参数，就是读取样式；
如果有两个参数或JSON样式参数就是设置样式。
示例，var $w=$("div").css("width");
console.log(parseInt($w)); //读取 jq对象尺寸的返回值包含单位，使用数字时需要转换。
注意，书写css属性名时可以使用“驼峰”格式，也可以使用“横杠”格式；
当css属性的值是以“px”为计量单位的数值时，可以不写px单位，写px时必须加引号！
特性，jq中css样式的宽度和高度可以直接在原值的基础上累加，示例如下：
$("div").css("width", "+=400px"); //可以配合监听事件使用
2.show()和hide()
show()，用于设置元素的显示，相当于 style中的 display：block；
hide()，用于设置元素的隐藏，相当于 style中的 display：none；
语法：$("选择器").show(timeValue) || hide(timeValue);
两种方法都可以设置参数，用于定义显示和隐藏的动画效果时间。
这两种方法可以配合“toggle()”方法使用，可以方便的实现元素的切换，包括显示/隐藏切换和内容切换。
语法：$("点击元素").toggle(function(){
$("选择器").show(timeValue);
$("选择器").html(“textContent”);
},
function(){
$("选择器").hide(timeValue);
});
toggle()方法内可以绑定多个事件处理函数，以响应被选元素的轮流的 click事件，
另外，还可以定义时间和效果参数（字符串），实现动画效果，但toggle()方法在高版本中已取消。
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
<button>显示Div元素</button>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<script>
var d1=$(".div1");
var d2=$(".div2");
var d3=$(".div3");
$("button").click(function () {
d1.css({"width":200,"height":"200px",backgroundColor:"gold"});
d2.css({"width":200,"height":"200px",backgroundColor:"gray"});
});
// 给div1添加鼠标进入、离开和点击事件
var colorArr=["red","yellow","blue","green","orange","indigo","purple","brown"];
d1.bind({
mouseenter: function () {
$(this).animate({
100,height:100,
"backgroundColor":"hotpink",
borderRadius:"50%",
},1000).css({ //链式声明
"backgroundColor":"hotpink",
"border":"2px solid white"
}); //不支持animate()方法？？
},
click:function () {
var i=Math.floor(Math.random()*8);
$(this).css("backgroundColor",colorArr[i]); //获取随机背景颜色
},
mouseleave:function () {
$(this).animate({
"width":200,"height":"200px",
borderRadius:"0",
},1000).css({
backgroundColor:"gold",
});
$(this).off("mouseenter"); //去除事件
}
});
// 给div2添加鼠标悬停
// 定义hover事件中的 in事件
d2.hover(function () {
$(this).animate({
"width":100,"height":"100px",
},1000).css({ //链式声明
"backgroundColor":"yellowgreen",
"border": "2px solid darkorange",
"cursor":"pointer",
});
d3.css({
"backgroundColor":"red",
"width":"100px","height":"100px",
"borderRadius":"50%",
"position":"absolute",
"display":"none",
"left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px",
"top":d2[0].offsetTop+2+"px",
});
// 在hover的in事件中定义click事件
$(this).click(function () { //存在问题：1.连续快速点击后，目标元素会一直移动停不下来？2.点击事件会逐次累加导致多次移动？
d3.show(2000) //动画显示
.animate({"left":"+=500px", //定义left属性的自增效果
},1000);
console.log(d3[0].offsetLeft);
console.log(d3[0].offsetTop);
});
},
// 定义hover事件中的out事件
function () {
d3.animate({"left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px"},2000);
d3.hide(1000); //动画隐藏
})
</script>
</body>
</html>
3.slideDown()和slideUp()
slideDown()，表示下拉显示，当元素的 style属性为“display:none”时，才能调用 slideDown()方法；
语法：$("选择器").slideDown(timeValue);
slideUp()，表示上滑隐藏，当元素为显示的时候，才能调用 slideUp()方法，
语法：$("选择器").slideUp(timeValue);
这两种方法都可以定义“时间”参数，实现动画效果，即使不设置时间参数也会有较短的动画效果。
注意，两种方法存在一个隐藏的属性“边界”，即下拉开始和上滑结束的位置， 默认是元素的上边框；
可以通过“定位”的方式来设置 jq对象的边界属性，改变动作开始和结束位置。
对于连续快速操作导致动画一直执行的现象称作“动画积累”，可以通过“stop()”方法解决这一问题。
stop()，用于停止所有在指定元素上正在运行的动画，如果队列中有等待执行的动画（并且
clearQueue没有设为 true），他们将被马上执行。
语法：$("选择器").stop(true||false);
参数为true，表示清空队列（立即结束动画），
默认为false，表示立即完成正在执行的动画，同时重设show和hide原始样式，调用回调函数等
4.fadeIn()和fadeOut()
这两种方法表示淡入、淡出效果。
语法：$("选择器").fadeIn(timeValue);
$("选择器").fadeOut(timeValue);
注意，fadeIn()的起点和fadeOut()的终点都是“display:none”，而不是“opacity:0”。
也就是说一个元素如果想实现淡入，一定要设置“display:none”属性，而不是“opacity:0”属性。
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示&隐藏</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
<style>
button{display:block;margin: 0px auto;letter-spacing: 2px;}
.div1{
100px;height: 200px;background-color: orangered;
margin:0px auto;
}
.div2{
100px;height: 300px;border: 1px solid fuchsia;
margin:0px auto;position: relative;
}
.div3{
100px;height: 200px;background-color: deepskyblue;
bottom:0px;position: absolute;
}
</style>
</head>
<body>
<button>Div操作</button>
<div class="div1"></div>
<div class="div2" style="display: none">
<div class="div3"></div>
</div>
<script>
var $d1=$(".div1");
var $d2=$(".div2");
var $d3=$(".div3");
var $btn=$("button");
$btn.toggle(function () {
$d1.hide(3000); //隐藏元素
$(this).html("显示Div1");
$d2.fadeIn(3000); //淡入元素
},function () {
$d1.show(3000); //显示元素
$(this).html("隐藏Div1");
$d2.fadeOut(3000); //淡出元素
});
$d2.hover(function () {
for (var i=0;i<5;i++){
$d3.slideUp(1000).slideDown(1000); //滑出&滑入元素
}
},function () {
$d3.stop(); //立即完成正在执行的动画
})
</script>
</body>
</html>
ps：上述示例中的滑入&滑出的“重复动画效果”，可以通过“from…to…”关键字实现。
5.addClass()和removeClass()
这两种方法用于“追加类”和“移除类”。
语法：$("选择器").addClass("className"); //追加类名，不改变已有类名
$("选择器").removeClass("className"); //删除指定类名，不影响其他类名
※ className前不需要加“点号”！！！
ps：可以通过增加和删除类名，操作元素样式。
6.attr()方法
在原生 js中通过类似如下方式修改元素属性：
document.getElementById("#pic").src="newUrl";
在 jQuery中使用 attr()方法“读写”元素的属性值。
语法：$("选择器").adttr("key", "value");
当 attr()方法只有一个参数时，表示“读取”元素的属性。
语法：$("选择器").adttr("property");
7.html()方法
用于“读写”元素内部的内容，相当于原生 js中的“innerHTML”。
语法：$("选择器").html("textContent");
当 html()方法中不写参数时表示“读取”元素的内容。