jQuery

Posted 加号与剑豪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#p1").click(function(event){
                    alert(event.currentTarget === this);
                });  
                
                $("#p2,#p3").each(function(i){
                    $(this).on("click",{x:i},function(event){
                        alert("序号：" + $(this).index() + "。段落的数据为: " + event.data.x);
                    });
                });
                
                $("div").on("click","button",function(event){
                    $(event.delegateTarget).css("background-color", "pink");
                });
                
                $("a").click(function(event){
                    event.preventDefault();
                        alert("检查 preventDefault() 是否被调用: " + event.isDefaultPrevented());
                });
                
                $("div").click(function(event){
                    event.stopImmediatePropagation();
                        alert("检测 event.stopImmediatePropagation() 是否被调用: " +  event.isImmediatePropagationStopped());
                });
                
                $("p").bind("test.something", function(event) {
                    alert( event.namespace );  });
                $("button").click(function(event) {
                    $("p").trigger("test.something");
                });
                
                $(document).bind(‘mousemove‘,function(e){
                    $("#zong").text("e.pageX: " + e.pageX );
                });                
                
                $(document).bind(‘mousemove‘,function(e){
                    $("#zong2").text(" e.pageY: " + e.pageY);
                });
                
                
                
            });
    
            
            

        </script>    
    </head>
    <style>            
            
            
            
            
            
            
    </style>
    <body>            
            
        
        <p id="p1">点击弹出</p>
        <p id="p2">点击弹出</p>
        <p id="p3">点击弹出</p>    
            
        <div style="background:red;">
        <p>点击DIV检测</p>
        <button>更改背景颜色</button>
        </div>
            
        <a href="#" style="text-decoration:none;">检测</a>    
            <br />    
        <button>点击弹p</button>    
        
        
        <div id="zong"></div>
        
        <div id="zong2"></div>
        
        
    </body>
</html>

 

以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段