显示隐藏
siblings()
addclass()
给元素添加class,如果元素上已经有其他的classname,那么新的会追加到现有classname后面
用法:$("li").addClass("bigger")
removerClass()
removerClass():可以将元素的某个class移除,如果未传参数,则可以将元素上的所有class删除
$("li").removerClass("bigger");
hasClass(类名)
hasClass(类名):用来判断元素上是否有某个class,如果有,则返回true,反之返回false
用法:alert($("li").hasClass("bigger"));
toggleClass()
判断被选元素是否有该类名,如果有就移出他,如果没有,添加他
用法:$("li").toggleClass("basic");
<div></div><div></div><div id="div0"></div><input type="button" value="隐藏" id="btn1"><input type="button" value="显示" id="btn2">
</head>
<body><script>$(function(){$("#btn1").click(function(){//hede()隐藏$("div:visible").hide(1000)})$("#btn2").click(function(){//show()显示$("div:hidden").show(1000)})})
添加元素
注意:append()/append to()/prepend() /prependto() 都是给某元素前面/后面添加子元素 before()/after():指的是给某元素前面/后面添加兄弟元素
append()
给某个元素添加子元素
用法:$("ul").append("<li>浏览</li>")
append to()
将某个元素添加到父元素中(添加到某个目标元素中)
用法:$("<li>浏览</li>").append("ul")
prepend()
目标元素在最前面添加子元素
用法:$("ul").prepen("<li>浏览</li>")
prepend to()
目标元素在最前面添加子元素
用法:$("<li>浏览</li>").prepen("ul")
before()
在最前面添加兄弟元素
$("ul").before("<h2>浏览</h2>")
after():
在最后面添加兄弟元素
用法:$("<li>浏览</li>").append("ul")
移除元素
remove()
移除指定元素,包括它本身。删除被选元素(及其子元素)
用法:$("ul li").remove(":eq(2)")
empty()
移除的是所有元素中的内容以及子元素,不包括他本身
用法:$("ul").empty()
<body><button id="btn1">append添加</button><button id="btn2">append to添加</button><button id="btn3">prepend添加</button><button id="btn4">prepend to添加</button><button id="btn5">before添加</button><button id="btn6">after添加</button><button id="btn7">remove删除</button><button id="btn8">empty移除</button><ul><li>香蕉</li><li class="aa">香蕉</li><li>香蕉</li></ul><script>$(function(){$("#btn1").click(function(){$("ul").append("<li>西瓜</li>")})$("#btn2").click(function(){$("<li>西</li>").appendTo("ul")})$("#btn3").click(function(){$("ul").prepend("<li>瓜</li>")})$("#btn4").click(function(){$("<li>西西</li>").prependTo("ul")})$("#btn5").click(function(){$("ul").before("<li>瓜瓜</li>")})$("#btn6").click(function(){$("ul").after("<span>西西瓜瓜<span>")})$("#btn7").click(function(){$("ul li").remove(":eq(2)")})$("#btn8").click(function(){$("ul").empty()})})</script>