详解Jquery的事件操作和文档操作

对于熟悉前端开发的小伙伴，相信对于Jquery一定不陌生，相对于JavaScript的繁琐，Jquery更加的简洁，当然简洁不意味着简单，我们可以使用Jquery完成我们想要实现全部功能，这里为小白们分享一下关于Jquery的事件和文档操作，便于小白们快速上手。
一、事件操作：

<html> <head><title>Jquery事件操作测试</title><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><style> .ul{min-width:300px;height:25px;} .ul2{margin-top:20px;} .ul li{float:left;min-width:50px;height:25px;line-height:25px;margin-left:10px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}</style> </head> <body><ul class="ul ul1" id="ul1"> <li class="li li1" id="li1">第一项</li> <li class="li li2" id="li2">第二项</li> <li class="li li3" id="li3">第三项</li> <li class="li li4" id="li4">第四项</li> <li class="li li5" id="li5">第五项</li></ul><ul class="ul ul2" id="ul2"> <li class="li li1" id="li1">第一项<span>span</span></li> <li class="li li2" id="li2">第二项</li> <li class="li li3" id="li3">第三项</li> <li class="li li4" id="li4">第四项</li> <li class="li li5" id="li5">第五项</li></ul><input type="text" value="text" id="text"><input type="password" value="password" disabled="disabled"><input type="number" value="number"><input type="radio" value="radio">radio<input type="checkbox" value="checkbox">checkbox </body> <script>var jq = jQuery.noConflict（）;//jQuery 名称冲突jq（document）.ready（function（）{ alert（"页面加载完成"）;}）;jq（".ul li"）.click（function（）{ //alert（jq（this）.text（））;//不带格式输出 //alert（jq（this）.html（））;//带格式输出}）;jq（"#ul1 li"）.click（function（）{ //alert（jq（this）.attr（"class"））; if（jq（this）.hasClass（"li1"））{//元素是否包含指定的classalert（true）; }else{alert（false）; }}）;jq（"#ul1 li.li1"）.click（function（）{ alert（"#ul1 li.li1-----------" + jq（this）.attr（"class"））;}）;jq（".ul1 li:first"）.click（function（）{ alert（".ul1 li:first-----------" + jq（this）.attr（"class"））;}）;jq（".ul1 li:last"）.click（function（）{ alert（".ul1 li:last-----------" + jq（this）.attr（"class"））;}）;jq（".ul1 li:even"）.click（function（）{ alert（".ul1 li:even-----------" + jq（this）.attr（"class"））;}）;jq（".ul1 li:odd"）.click（function（）{ alert（".ul1 li:odd-----------" + jq（this）.attr（"class"））;}）;jq（".ul1 li:eq（1）"）.click（function（）{ alert（".ul1 li:eq（1）-----------" + jq（this）.attr（"class"））;}）;jq（":input"）.click（function（）{ alert（":input-----------" + jq（this）.val（））;}）;jq（":text"）.click（function（）{ alert（":text-----------" + jq（this）.val（））;}）;jq（":enabled"）.click（function（）{ alert（":enabled-----------" + jq（this）.val（））;}）;jq（":disabled"）.click（function（）{ alert（":disabled-----------" + jq（this）.val（））;}）;jq（"#text"）.change（function（）{//控件失去焦点后，检查内容是否变化，变化激活 alert（".change（）-----------" + jq（this）.val（））;}）;jq（"#text"）.focus（function（）{//控件获得焦点 alert（".focus（）-----------" + jq（this）.val（））;}）; </script></html>

二、文档操作：

<html> <head> <title>jQuery文档操作</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <style>ul{display:inline-block;}li{float:left;min-width:80px;height:40px;line-height:40px;margin-right:20px;border-radius:5px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}p.select{color:#f54372;} </style> </head> <body> <p class="p p1" id="p1">第一段文字</p> <p class="p p2" id="p2">第二段文字</p> <ul class="ul1"><li>addClass（）</li><li>after（）</li><li>before（）</li><li>append（）</li><li>attr（）</li><li>empty（）</li><li>hasClass（）</li><li>html（）</li> </ul> <br/><br/> <ul class="ul2" style="position:relative;"><li>css（）</li><li>height（）</li><li>offset（）</li><li>offsetParent（）</li><li>position（）</li><li>scrollLeft（）</li><li>scrollTop（）</li><li>width（）</li> </ul> </body> <script> $（".ul1 li:eq（0）"）.click（function（）{$（".p1"）.addClass（"select"）; }）; $（".ul1 li:eq（1）"）.click（function（）{$（".p1"）.after（"after"）; }）; $（".ul1 li:eq（2）"）.click（function（）{$（".p1"）.before（"before"）; }）; $（".ul1 li:eq（3）"）.click（function（）{$（".p1"）.append（"append"）; }）; $（".ul1 li:eq（4）"）.click（function（）{alert（$（".p1"）.attr（"id"））; }）; $（".ul1 li:eq（5）"）.click（function（）{$（".p1"）.empty（）; }）; $（".ul1 li:eq（6）"）.click（function（）{alert（$（".p1"）.hasClass（"第一段文字"））; }）; $（".ul1 li:eq（7）"）.click（function（）{$（".p1"）.html（"html"）; }）; $（".ul2 li:eq（0）"）.click（function（）{$（".p1"）.css（"color","red"）;$（".p2"）.css（{"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"}）; }）; $（".ul2 li:eq（1）"）.click（function（）{alert（$（this）.height（））;$（this）.height（"50px"）; }）; $（".ul2 li:eq（2）"）.click（function（）{alert（"left:"+$（this）.offset（）.left+" top:"+$（this）.offset（）.top）; }）; $（".ul2 li:eq（3）"）.click（function（）{$（this）.offsetParent（）.css（"background-color", "red"）; }）; $（".ul2 li:eq（4）"）.click（function（）{alert（"left:"+$（this）.position（）.left+" top:"+$（this）.position（）.top）; }）; $（".ul2 li:eq（5）"）.click（function（）{alert（"scrollLeft:"+$（this）.scrollLeft（））; }）; $（".ul2 li:eq（6）"）.click（function（）{alert（"scrollTop:"+$（this）.scrollTop（））; }）; $（".ul2 li:eq（7）"）.click（function（）{alert（"widht:"+$（this）.width（））;$（this）.width（"200px"）; }）; </script></html>

以上便是我总结的Jquery中我们经常使用到的操作。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！