對于熟悉前端開發的小伙伴，相信對于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")){//元素是否包含指定的class alert(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中我們經常使用到的操作。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
