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

posted @ 2016-12-19 16:40  小破孩123  阅读(646)  评论(0编辑  收藏  举报