jQuery
2017-01-23 14:50:45 30 举报AI智能生成
jQuery
作者其他创作
大纲/内容
jQuery HTML
获取内容
<p class="p1">$("#test").text();</p>
<p class="p1">$("#test").html();</p>
<p class="p1">$("#test").val();</p>
获取属性
<p class="p1">$(“#test”).attr("href");</p>
设置内容
<p class="p1">$("#test1").text("Hello world!");</p>
<p class="p1">$("#test2").html("<b>Hello world!</b>");</p>
<p class="p1">$("#test3").val("Dolly Duck");</p>
设置属性
<p class="p1">$("#w3s").attr("href","http://www.w3school.com.cn/jquery");</p>
添加
<p class="p1">$("p").append("Some appended text.");</p>
<p class="p1">$("p").prepend("Some prepended text.");</p>
<p class="p1">$("img").after("Some text after");</p>
<p class="p1">$("img").before("Some text before");</p>
删除元素
<p class="p1">$("p").remove(".italic");</p>
<p class="p1">$("#div1").empty();</p>
jQuery CSS方法
<p class="p1">$("p").css({"background-color":"yellow","font-size":"200%"});</p>
遍历
祖先
<p class="p1">$("span").parent();</p>
<p class="p1">$("span").parents("ul");</p>
<p class="p1">$("span").parentsUntil("div");</p>
后代
<p class="p1">$("div").children("p.1");</p>
<p class="p1">$("div").find("span");</p>
同胞
<p class="p1">$("h2").siblings("p");</p>
<p class="p1">$("h2").next();</p>
<p class="p1">$("h2").nextAll();</p>
<p class="p1">$("h2").nextUntil("h6");</p>
<p class="p1">prev(), prevAll(), prevUntil()</p>
过滤
<p class="p1">$("div p").first();</p>
<p class="p1">$("div p").last();</p>
<p class="p1">$("p").eq(1);</p>
<p class="p1">$("p").filter(".intro");</p>
<p class="p1">$("p").not(".intro");</p>
事件
鼠标事件
click
dbclick
mouseenter
mouseleave
mousemove
hover
键盘事件
keydown
keyup
keypress
其他事件
focus
blur
change
submit
document.ready
事件
action
在head中放置单独的JS脚本
效果
隐藏/显示
<p class="p1">$(selector).hide(speed,callback);</p>
<p class="p1">$(selector).show(speed,callback);</p>
淡入淡出
<p class="p1">$(selector).fadeIn(speed,callback);</p>
<p class="p1">$(selector).fadeOut(speed,callback);</p>
<p class="p1">$(selector).fadeToggle(speed,callback);</p>
<p class="p1">$(selector).fadeTo(speed,opacity,callback);</p>
滑动
<p class="p1">$(selector).slideDown(speed,callback);</p>
<p class="p1">$(selector).slideUp(speed,callback);</p>
<p class="p1">$(selector).slideToggle(speed,callback);</p>
动画
<p class="p1">$(selector).animate({params},speed,callback);</p>
队列功能
<p class="p1"><span class="s1">编写多个</span> animate() <span class="s1">调用</span></p>
停止
<p class="p1">$(selector).stop(stopAll,goToEnd);</p>
回调函数Callback
<p class="p1"><b>Callback </b><span class="s1">函数在当前动画</span><b> 100% </b><span class="s1">完成之后执行</span></p>
chaining
<p class="p1">$("#p1").css("color","red").slideUp(2000).slideDown(2000);</p>
选取
元素
$("p").hide()
class
$(".test").hide()
id
$("#test").hide()
0 条评论
下一页
