• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. 我學習jquery的經驗

        時間:2024-09-14 21:55:34 jQuery 我要投稿
        • 相關推薦

        我學習jquery的經驗

          原來Jquery就是一個javascript寫的一個庫,它給我們提供了很多常用的方法,使用這些方法可以兼容多種瀏覽器,使用它可以達到很好的動畫效果,下面就來看看那些年的學習筆記吧

        我學習jquery的經驗

          一、$符號

          1、選擇器

          可以選擇html標簽,也可選擇ID,Class等

          如下:

          復制代碼 代碼如下:

          $(

          function() {

          $("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇數,even:偶數,nth-child:匹配其父元素下的第N個子或奇偶元素,從1開始

          var obj = $("h2 a"); //得到h2下面的a,返回的是一個數組

          for (var i = 0; i < obj.length; i++) {

          obj[i].innerHTML = i.toString();

          }

          var obj1 = $("#demo");

          obj1.append("Demo_Id");

          var obj2 = $(".Class"); //得到的是一個數組

          alert(obj2);

          $("div ul li:has(a)").addClass("Two"); //得到里中有a的標符添加一個Class="Two"

          $("li:lt(2)").addClass("one"); //得到前三個li,添加一個Class="one",下標是從0開始的

          $("p>span").addClass("Two"); //得到p下的span,parent>child

          }

          )

          2、得到標記中的屬性

          復制代碼 代碼如下:

          var sTitle = $("p>span").attr("Title"); //得到標記中的屬性值

          $("p>a").text(sTitle);//設置值,若是用text()得到值,則是得到的文本,不包含html

          3、設置屬性

          復制代碼 代碼如下:

          $("button:gt(0)").attr("disabled", "disabled"); //得到第一個button后的button,然后設置它們的disable屬性為不可用,沒有這個屬性就返回undefined

          $("img").attr({ src: "test.jpg", alt: "Test Image" });

          3.1、刪出屬性

          $("img").removeAttr("src");

          4、修改Class,如果存在(不存在)就刪除(添加)一個類。

          復制代碼 代碼如下:

          $(

          function() {

          $("div>p").mouseover(

          function() {

          $(this).toggleClass("HightLight");//修改樣式class

          }

          );

          }

          4.1、移出Class

          $("p").removeClass("selected");

          4.2、添加Class

          $("p").addClass("selected");

          5、圖片的復制

          $("img:eq(0)").clone().appendTo($("p")); //得到第一張圖片

          6、事件綁定,可以綁定多個相同的事件

          復制代碼 代碼如下:

          $(function() {

          $("img").bind("click", function() {//綁定事件

          alert("你點啊!1");

          });

          $("img").bind("click", function() {//綁定事件

          alert("你點啊!2");

          });

          })

          7、移出事件

          復制代碼 代碼如下:

          $(function() {

          $("input[type=button]").click(function() {

          $("img").unbind("click", eventImg);//unbind來移出方法

          alert("移出事件!");

          });

          })

          8、元素的顯示和隱藏

          復制代碼 代碼如下:

          $(function() {

          $("#demobtnF").click(function() {

          $("#p_btn").show(); //顯示

          });

          $("#demobtn").click(function() {

          $("span:first").hide();//隱藏

          });

          })

          漸入漸出的效果:在show(),與hide()方法上傳一個時間參數,從而得到淡入淡出的效果

          復制代碼 代碼如下:

          $(function() {

          $("#Button1").click(function() {

          $("#imgs").show(10000);

          });

          $("#Button2").click(function() {

          $("#imgs").hide(5000);

          });

          })

          復制代碼 代碼如下:

          二、淡入淡出的實現方法

          1、fadeIn()與fadeOut():使用方法與show()、hide()一樣,效果更好

          如下:

          復制代碼 代碼如下:

          $("#Button3").click(function() {

          $("#imgs").fadeIn(10000);

          });

          $("#Button4").click(function() {

          $("#imgs").fadeOut(5000);

          });

          2、幻燈片效果-由slideUp()與slideDown()方法實現

          復制代碼 代碼如下:

          $("#Button1").click(function() {

          $("#imgs").slideUp(10000);

          });

          $("#Button2").click(function() {

          $("#imgs").slideDown(5000);

          });

          三、Jquery功能函數

          1、瀏覽器的檢測$.browser, 如下:

          復制代碼 代碼如下:

          if ($.browser.msie) return alert("IE");

          if ($.browser.safari) return alert("safari");

          if ($.browser.mozilla) return alert("mozilla");

          if ($.browser.opera) return alert("opera");

          2、盒子模型$.boxModel如下:

          alert($.boxModel ? "standard" : "IE");

          3、處理javascript對象$.each(arr,function) //對數組的每個對象用function函數處理

          如下:

          復制代碼 代碼如下:

          var aArr = ["one", "two", "three"];

          $.each(aArr, function(iNum, value) {

          alert(iNum + "," + value);

          });

          $.grep(Arr,funtion(value)):過濾

          示例:

          復制代碼 代碼如下:

          var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

          var DemoArr = $.grep(aArray, function(value) {

          return value > 4;

          });

          document.write(DemoArr.join());

          $.map(Array,function(value,index))

          本文全部來源于那些年的學習筆記。

          總結

          Jquery庫中有很多函數,還有一些,特別是Jquery里的Ajax,是非常重要的,此文以回憶那些年學習Jquery的日子。

        【我學習jquery的經驗】相關文章:

        jQuery程序設計08-05

        jquery提交按鈕的代碼07-28

        速錄學習經驗12-29

        淺析jQuery 遍歷函數javascript08-06

        jQuery中prev()方法用法07-16

        jQuery中replaceAll()方法用法10-15

        如何理解jquery事件冒泡09-15

        jQuery的DOM操作筆記07-29

        英語全面學習經驗05-22

        jQuery 源碼分析和Ready函數06-28

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 日本精品在线免费观看网址 | 亚洲人成禁漫在线观看 | 一本久久亚洲综合久久 | 在线观看不卡免费视频 | 在线欧美激情a∨ | 久久婷婷人人喊人人澡人人爽 |