Jquery的事件操作和文档操作
生活随笔
收集整理的這篇文章主要介紹了
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")){//元素是否包含指定的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>三、移動端判斷用戶是否在微信中打開
近期由于公司移動端推廣，調用微信支付時，在非微信的瀏覽器中打開，無法調用微信支付接口，通過聯系微信客服，給出的回復時，H5支付處于內測階段，和微信簽署戰略協議的商家才有可能獲得內測接口，所以對于UC、谷歌、QQ等瀏覽器均無法直接調用到微信的支付接口。所以被迫在支付頁面將非微信端打開時，隱藏微信支付入口；在微信端打開時，顯示微信支付接口。那怎么才能知道用戶用的是微信打開，還是其他瀏覽器打開呢？
function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") {alert("微信瀏覽器");} else {alert("非微信瀏覽器");} }以上便是我總結的Jquery中我們經常使用到的操作，如果不能滿足您的需要，請移步w3school
轉載于:https://www.cnblogs.com/AndroidJotting/p/6198027.html
總結
以上是生活随笔為你收集整理的Jquery的事件操作和文档操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用浏览器LocalStorage缓存图
- 下一篇： shrio初体验（2）Realm