1、样式写法
（1）
$(#dv).css("width","300px");
$(#dv).css("height","200px");
（2）链式编程
$(#dv).css("width","300px").css("height","200px");
（3）键值对
var json={"width":"300px","height":"200px"};
$(#dv).css(json);
2、链式编程（括号内没内容是获取，有内容则是设置）
对象.方法().方法().方法();
3、元素样式
元素样式添加：addClass()，括号里什么也没有/设置了内容，返回来仍是这个对象
元素样式移除：removeClass()
元素样式使用：css(),不能添加或移除
判断是否应用类样式：hasClass()
4、网页开关灯
（1）
$(function(){
$("#btn").click(function(){
$("body").toggleClass("cls"); //切换类样式
});
});
（2）
$(function(){
$("btn").click(function(){
if($("body").hasClass("cls")){
$("body").removeClass("cls");
}else{
$("body").addClass("cls");
}
});
});
5、获取兄弟元素方法
.next() 下一个兄弟元素
.prev() 上一个兄弟元素
.nextAll() 后面所有兄弟元素
.prevAll() 前面所有兄弟元素
.siblings() 当前所有兄弟元素
6、当前元素其他元素样式效果
$(function(){
$("ul>li").mouseenter(function(){
$(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
}).mouseleave(function(){
$(this).parent.find("li").css("backgroundColor","");
}).click(function(){
$(this).prevAll("li").css("backgroundColor","yellow").end().nextAll("li").css("backgroundColor","blue");
});
});
.end()修复断链，断链之前的状态，有断链不建议使用链式编程
7、tab切换
$(function(){ //获取所有li，添加鼠标进入事件
$(".tab>li").mouseenter(function(){
//设置鼠标进入添加li类样式，移除所有兄弟类样式
$(this).addClass("active").siblings("li").removeClass("avtive");
//获取当前鼠标进入索引
var index=$(this).index();
$(".rpoducts>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
});
});
8、动画方法
$(function(){
$("btn1").click(function(){
$("#dv").show(5000,function(){
alert("完了");
});
});
$("btn2").click(function(){
$("#dv").hide(5000,function(){
alert("好了");
});
});
.show 显示 .hide 隐藏
.slideUp 滑入 .slideDown 滑出
.slideToggle 切换滑入和滑出
.fadeIn 淡入 .fadeOut 淡出
.fadeToggle 切换淡入和淡出
.fadeTo(时间,透明值结束)
9、动画效果
$(function(){
$(#btn1).click(function(){ //隐藏
$("div>img:last").hide(300,function f1(){
$(this).prev.hide(300,f1);
});
});
$(#btn2).click(function(){ //显示
$("div>img:first").show(300,function f1(){
$(this).next.show(300,f1);
});
});
});
10、动画方法：参数1（css属性和值）参数2（时间）参数3（回调函数）
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#im").animate({"width":"300px","height":"300px"},3000);
});
</script>
<img src="" id="im" />
11、元素创建及添加
$(function(){
$("#btn").click(function(){
//父级元素.append(子级元素);
$("#dv").append($("<a href='#'>百度</a>"));
//创建一个子级元素直接加到父级元素
$("<a href='#'>百度</a>").appendTo($("#dv"));
});
});
12、创建多个标签
$(function(){
$("#btn").click(function(){
for(var i=0;i<10;i++){
$("#dv").append($("<p>百度</p>"));
}
});
});
13、动态创建列表
（1）
$(function(){
$("#btn").click(function(){
var ulObj=$("<ul style='list-style-type:none;cursor:pointer'></ul>");
$("#dv").append(ulObj);
$("<li>1</li> <li>2</li> <li>3</li>").appendTo$(ulObj).mouseenter(function(){
$(this).css("backgroundColor","green");});
});
});
（2）//数组中有十个人的名字
$(function(){
var array=["1","2","3","4","5","6"];
$("#btn").click(function(){ //根据id选择器获取按钮，添加点击事件
//创建ul加入到div中
varulObj=$("<ul style='cursor:pointer'></ul>").appendTo($("#dv"));
//创建li标签，加入到ul中---循环遍历数组
for(var i=0;i<array.length;i++){
$("<li>"+array[i]+"</li>").appendTo(ulObj).mouseenter(function(){
$(this).css("backgroundColor","green");
}).mouseleave(function(){
$(this).css("backgroundColor","");
});
}
});
});
append类似于剪切 想要都有运用clone