百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

《锋利的jQuery》观后记（锋利的jquery第三版）

toyiye 2024-09-09 08:57 4 浏览 0 评论

API文档 https://api.jquery.com/

网页中所有 DOM结构绘制完毕后就执行，而不是在页面所有内容（例如图片等占用宽带的内容）加载完毕之后才执行事件。它允许用户在第一眼看到元素的时候，就能立即看到元素产生的一些隐藏效果、显示效果和其它效果。

若要访问图像的高度等属性，可以考虑jquery提供的load（）事件。

$(document).ready(function(){ 
    //code  
});
缩写形式：
(function () {
    //jquery代码
})();

链式操作风格

对于同一个对象的较多操作，建议每行写一个操作。

//等待dom元素加载完毕.
$(document).ready(function(){
    $(".level1 > a").click(function(){
        $(this).addClass("current") //给当前元素添加"current"样式
        .next().show()  //下一个元素显示
        .parent().siblings().children("a").removeClass("current")//父元素的兄弟元素的子元素<a>移除"current"样式
        .next().hide();//它们的下一个元素隐藏
        return false;
    });
});
</script>

jQuery对象和DOM对象

<script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function(){
        var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
        var $jQueryObj = $(domObj);  //jQuery对象
        alert("DOM对象："+domObj.innerHTML);
        alert("jQuery对象："+$jQueryObj.html());
    });
</script>

jQuery对象和DOM对象的相互转换

  <script>
  //等待dom元素加载完毕.
    $(document).ready(function(){
        var $cr = $("#cr");  //jQuery对象
        var cr = $cr.get(0); //DOM对象，获取 $cr[0]
        $cr.click(function(){
            if($cr.is(":checked")){ //jQuery方式判断
                alert("感谢你的支持!你可以继续操作！");
            }       
            if(cr.checked){ //DOM方式判断
                alert("感谢你的支持!你可以继续操作!");
            }
        })
    });
</script>

解决jQuery和其它库的冲突

<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
  <script type="text/javascript">
  var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
  $j(function(){//使用jQuery
      $j("p").click(function(){
          alert( $j(this).text() );
      });
  });

  $("pp").style.display = 'none';//使用prototype.js隐藏元素
  </script>
</body>

jQuery选择器「完善的处理机制」

<script type="text/javascript">
  if(document.getElementById("tt")){//需要判断，如果不判断，找不到ID为tt会报错
     document.getElementById("tt").style.color="red";
   }
   //用jQuery，无需判断$('#tt')是否存在
    $('#tt').css("color","red");
 </script>
需要注意的是，$(‘#tt’)获取的永远是对象，
  即使网页上没有此元素。所以判断应该根据获取到元素的长度来判断，代码如下：
<script type="text/javascript">
        if($('#tt').length > 0){
            // do something 
        }
        // 或者转换为DOM对象来判断
        if($('#tt')[0]){
            // do something 
        }
    </script>

选择器

层次选择器
//选择 所有class为one 的下一个div元素.
      $('#btn3').click(function(){
        $('.one + div').css("background","#bbffaa");
      })
      //选择 id为two的元素后面的所有div兄弟元素.
      $('#btn4').click(function(){
          $('#two ~ div').css("background","#bbffaa");
      })
基本过滤选择器
//选择第一个div元素.
      $('#btn1').click(function(){
          $('div:first').css("background","#bfa");
      })
      //选择最后一个div元素.
      $('#btn2').click(function(){
          $('div:last').css("background","#bfa");
      })
      //选择class不为one的 所有div元素.
      $('#btn3').click(function(){
          $('div:not(.one)').css("background","#bfa");
      })
      //选择 索引值为偶数 的div元素。
      $('#btn4').click(function(){
          $('div:even').css("background","#bfa");
      })
      //选择 索引值为奇数 的div元素。
      $('#btn5').click(function(){
          $('div:odd').css("background","#bfa");
      })
      //选择 索引等于 3 的元素
      $('#btn6').click(function(){
          $('div:eq(3)').css("background","#bfa");
      })
      //选择 索引大于 3 的元素
      $('#btn7').click(function(){
          $('div:gt(3)').css("background","#bfa");
      })
     //选择 索引小于 3 的元素
      $('#btn8').click(function(){
          $('div:lt(3)').css("background","#bfa");
      })
       //选择 所有的标题元素.比如h1, h2, h3等等...
      $('#btn9').click(function(){
          $(':header').css("background","#bfa");
      })
      //选择 当前正在执行动画的所有元素.
      $('#btn10').click(function(){
          $(':animated').css("background","#bfa");
      });
      //选择 当前获取焦点的所有元素.
      $('#btn11').click(function(){
          $(':focus').css("background","#bfa");
      });
内容过滤选择器
//选取含有文本"di"的div元素.
      $('#btn1').click(function(){
          $('div:contains(di)').css("background","#bbffaa");
      })
      //选取不包含子元素(或者文本元素)的div空元素.
      $('#btn2').click(function(){
          $('div:empty').css("background","#bbffaa");
      })
      //选取含有class为mini元素 的div元素.
      $('#btn3').click(function(){
          $("div:has('.mini')").css("background","#bbffaa");
      })
      //选取含有子元素(或者文本元素)的div元素.
      $('#btn4').click(function(){
          $('div:parent').css("background","#bbffaa");
      })
属性过滤选择器
//选取含有 属性title 的div元素.
      $('#btn1').click(function(){
          $('div[title]').css("background","#bbffaa");
      })
      //选取 属性title值等于 test 的div元素.
      $('#btn2').click(function(){
          $('div[title=test]').css("background","#bbffaa");
      })
      //选取 属性title值不等于 test 的div元素.
      $('#btn3').click(function(){
          $('div[title!=test]').css("background","#bbffaa");
      })
      //选取 属性title值 以 te 开始 的div元素.
      $('#btn4').click(function(){
          $('div[title^=te]').css("background","#bbffaa");
      })
      //选取 属性title值 以 est 结束 的div元素.
      $('#btn5').click(function(){
          $("div[title$=est]").css("background","#bbffaa");
      })
      //选取 属性title值 含有 es  的div元素.
      $('#btn6').click(function(){
          $("div[title*=es]").css("background","#bbffaa");
      })
      //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
      $('#btn7').click(function(){
          $("div[id][title*=es]").css("background","#bbffaa");
      })
子元素过滤选择器
//选取每个父元素下的第2个子元素
      $('#btn1').click(function(){
          $('div.one :nth-child(2)').css("background","#bbffaa");
      })
      //选取每个父元素下的第一个子元素
      $('#btn2').click(function(){
          $('div.one :first-child').css("background","#bbffaa");
      })
      //选取每个父元素下的最后一个子元素
      $('#btn3').click(function(){
          $('div.one :last-child').css("background","#bbffaa");
      })
      //如果父元素下的仅仅只有一个子元素，那么选中这个子元素
      $('#btn4').click(function(){
          $('div.one :only-child').css("background","#bbffaa");
      })
表单选择器
var $alltext = $("#form1 :text");
    var $allpassword= $("#form1 :password");
    var $allradio= $("#form1 :radio");
    var $allcheckbox= $("#form1 :checkbox");

  var $allsubmit= $("#form1 :submit");
  var $allimage= $("#form1 :image");
  var $allreset= $("#form1 :reset");
  var $allbutton= $("#form1 :button"); 
// <input type=button />  和 <button ></button>都可以匹配
  var $allfile= $("#form1 :file");
    var $allhidden= $("#form1 :hidden"); 
// <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
    
  var $AllInputs = $("#form1 :input");
  var $inputs = $("#form1 input");
表单对象属性过滤选择器
//使用:selected选择器，来操作下拉列表.
      $("select").change(function () {
              var str = "";
              $("select :selected").each(function () {
                    str += $(this).text() + ",";
              });
              $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
      }).trigger('change');
        // trigger('change') 在这里的意思是：select加载后，马上执行onchange.
        // 也可以用.change()代替.
//对表单内 可用input 赋值操作.
      $('#btn1').click(function(){
          $("#form1 input:enabled").val("这里变化了！");  
          return false;
      })
      //对表单内 不可用input 赋值操作.
      $('#btn2').click(function(){
          $("#form1 input:disabled").val("这里变化了！");
          return false;
      })
      //使用:checked选择器，来操作多选框.
      $(":checkbox").click(countChecked);

      function countChecked() {
          var n = $("input:checked").length;
          $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
      }

操作节点

插入节点
//<![CDATA[
  $(function(){
    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //  创建第一个<li>元素
    var $li_2 = $("<li title='雪梨'>雪梨</li>");    //  创建第二个<li>元素
    var $li_3 = $("<li title='其它'>其它</li>");    //  创建第三个<li>元素

    var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点
    var $two_li = $("ul li:eq(1)"); //  获取<ul>节点中第二个<li>元素节点
   
    $parent.append($li_1);  //  append方法将创建的第一个<li>元素添加到父元素的最后面
    $parent.prepend($li_2);  //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面
    $li_3.insertAfter($two_li); //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

  });
  //]]>
移动节点
//<![CDATA[
  $(function(){
    var $one_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
    var $two_li = $("ul li:eq(2)");   //  获取<ul>节点中第三个<li>元素节点
    $two_li.insertBefore($one_li);    //移动节点
  });
  //]]>
删除节点
//<![CDATA[
  $(function(){
      $("ul li").click(function(){
         alert( $(this).html() );
      })
      $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容

      var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
      $li.appendTo("ul");   //把刚刚删除的节点又重新添加到ul元素里
        //  对比 remove() 与detach();
      var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后，将它从网页中删除。
      $li.appendTo("ul");   //重新追加元素，发现之前绑定的事件还在，如果使用remove（），之前绑定的事件将失效。
  });
  //]]>
复制节点
<script type="text/javascript">
  $(function(){
     $("ul li").click(function(){
         //同时复制元素中所绑定的事件
         $(this).clone(true).appendTo("ul"); // 注意参数true
         //可以复制自己，并且他的副本也有同样功能。 
     })   
  });
  </script>
替换节点
//<![CDATA[
  $(function(){
     $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
     // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
  });
  //]]>
包裹节点
$(function(){
      $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来
      $("strong").wrapAll("<b></b>");//将所有匹配的元素用b元素包裹起来
      $("strong").wrapInner("<b></b>");//用b包裹strong的字内容
  });

实战提示效果

<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
    var x = 10;  
    var y = 20;
    $("a.tooltip").mouseover(function(e){
        this.myTitle = this.title;
        this.title = "";    
        var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
        $("body").append(tooltip);  //把它追加到文档中
        $("#tooltip")
            .css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX  + x) + "px"
            }).show("fast");      //设置x坐标和y坐标，并且显示
    }).mouseout(function(){     
        this.title = this.myTitle;
        $("#tooltip").remove();   //移除 
    });
});
//]]>
</script>
</head>
<body>
 
</body>

jQuery中的事件与动画

事件绑定
  <script type="text/javascript">
  $(function(){
      $("#panel h5.head").mouseover(function(){
          $(this).next().show();
      }).mouseout(function(){
          $(this).next().hide();
      })
  })
  $(function(){
      $("#panel h5.head").bind("click",function(){
          var $content = $(this).next();
          if($content.is(":visible")){
              $content.hide();
          }else{
              $content.show();
          }
      })
  })
  </script>
合成事件
	jQuery有两个合成事件-----hover()方法和toggle()方法。
    <script type="text/javascript">
    $(function(){
        $("#panel h5.head").toggle(function(){
                $(this).addClass("highlight");
                $(this).next().show();
        },function(){
                $(this).removeClass("highlight");
                $(this).next().hide();
        });
    })
    </script>
事件冒泡
// 为span元素绑定click事件
    $('span').bind("click",function(event){//event：事件对象
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
        event.stopPropagation();    //  阻止事件冒泡=return false
    });

    $("#sub").bind("click",function(event){
             var username = $("#username").val();  //获取元素的值
             if(username==""){     //判断值是否为空
               $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
               event.preventDefault();  //阻止默认行为 ( 表单提交 )=可以return false
           }
       })

事件对象的属性
    <script>
    $(function(){
        $("a[href='http://google.com']").click(function(event) {
        alert(event.type);//获取事件类型
        alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
        alert(event.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键

            var tg = event.target;  //获取事件对象
            alert( tg.href ) ;
            return false;//阻止链接跳转
            });
        })
    </script>
移除事件
    <script type="text/javascript">
        $(function(){
           $('#btn').bind("click", function(){
                         $('#test').append("<p>我的绑定函数1</p>");
                  }).bind("click", function(){
                         $('#test').append("<p>我的绑定函数2</p>");
                  }).bind("click", function(){
                         $('#test').append("<p>我的绑定函数3</p>");
                  });
           $('#delAll').click(function(){
                  $('#btn').unbind("click");//移除按钮元素上以前注册的事件
           });
        })
    </script>
    <script type="text/javascript">
        $(function(){
           $('#btn').bind("click", myFun1 = function(){
                         $('#test').append("<p>我的绑定函数1</p>");
                  }).bind("click", myFun2 = function(){
                         $('#test').append("<p>我的绑定函数2</p>");
                  }).bind("click", myFun3 = function(){
                         $('#test').append("<p>我的绑定函数3</p>");
                  });
           $('#delTwo').click(function(){
                  $('#btn').unbind("click",myFun2);//移除指定的事件
           });
        })
    </script>

jQuery 中的动画

.stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。
<script type="text/javascript">
$(function(){
     $("#panel").hover(function() {
        $(this).stop()
            .animate({height : "150" } , 200 )
            .animate({width : "300" } , 300 )//组合动画
    },function() {
        $(this).stop()
            .animate({height : "22" } , 200 )
            .animate({width : "60" } , 300 )
    });
});
</script>
$(function(){
      $("button:eq(0)").click(function () {
          $("#panel")
            .animate({height : "150" } , 1000 )
            .animate({width : "300" } , 1000 )
            .hide(2000)
            .animate({height : "show" , width : "show" , opacity : "show" } , 1000 )
            .animate({height : "500"} , 1000 );
      });
      $("button:eq(1)").click(function () {
          $("#panel").stop();//停止当前动画，继续下一个动画
      });
      $("button:eq(2)").click(function () {
          $("#panel").stop(true);//清除元素的所有动画
      });
      $("button:eq(3)").click(function () {
          $("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画
      });
      $("button:eq(4)").click(function () {
          $("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态 
      });
})
</script>

动画例子
<script type="text/javascript">
$(function(){
    $("#panel").css("opacity", "0.5");//设置不透明度
    $("#panel").click(function(){
        $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                .animate({top: "200px" , width :"200px"}, 3000 ,function(){
                    $(this).css("border","5px solid blue");
                })           
    });
});
</script>
延迟动画
在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay（）方法。
$(function(){
    $("#panel").css("opacity", "0.5");//设置不透明度
    $("#panel").click(function(){
            $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
                    .delay(1000)
                    .animate({top: "200px" , width :"200px"}, 3000 )
                    .delay(2000)
                    .fadeOut("slow");
    });
});

序列化元素

serialize（）
    因为serialize()方法作用于jQuery对象，所以不光只有表单能使用它。返回字符串。
    var $data =  $(":checkbox,:radio").serialize();
    $.get("get1.asp", $("#form1").serialize() , function (data, textStatus){
      $("#resText").html(data); // 把返回的数据添加到页面上
    }
         );
serializeArray（）
    返回JSON格式的数据。
    <script type="text/javascript">
       $(function(){
             var fields = $(":checkbox,:radio").serializeArray();
             console.log(fields);// Firebug输出
             $.each( fields, function(i, field){
                $("#results").append(field.value + " , ");
            }); 
       })
       </script>
param（）
    它是serialize（）方法的核心，用来对一个数组或对象按照key/value进行序列化。
    $(function(){
            var obj={a:1,b:2,c:3};
            var  k  = $.param(obj);
            alert(k) // 输出  a=1&b=2&c=3
     })

jQuery插件的使用和写法

插件（plugin）是一种遵循一定规范的应用程序接口编写出来的程序。

网址 https://plugins.jquery.com/

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表