- A+
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({ width: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{ width: 100px;height: 200px;background-color: orangered; margin:0px auto; } .div2{ width: 100px;height: 300px;border: 1px solid fuchsia; margin:0px auto;position: relative; } .div3{ width: 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()方法中不写参数时表示“读取”元素的内容。
