亚洲AV日韩AⅤ综合手机在线观看,激情婷婷久久综合色,欧美色五月婷婷久久,久久国产精品99久久人人澡

  • <abbr id="uk6uq"><abbr id="uk6uq"></abbr></abbr>
  • <tbody id="uk6uq"></tbody>
  • 我學(xué)習(xí)jquery的經(jīng)驗(yàn)

    時(shí)間:2024-09-14 21:55:34 jQuery 我要投稿
    • 相關(guān)推薦

    我學(xué)習(xí)jquery的經(jīng)驗(yàn)

      原來(lái)Jquery就是一個(gè)javascript寫(xiě)的一個(gè)庫(kù),它給我們提供了很多常用的方法,使用這些方法可以兼容多種瀏覽器,使用它可以達(dá)到很好的動(dòng)畫(huà)效果,下面就來(lái)看看那些年的學(xué)習(xí)筆記吧

    我學(xué)習(xí)jquery的經(jīng)驗(yàn)

      一、$符號(hào)

      1、選擇器

      可以選擇html標(biāo)簽,也可選擇ID,Class等

      如下:

      復(fù)制代碼 代碼如下:

      $(

      function() {

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

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

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

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

      }

      var obj1 = $("#demo");

      obj1.append("Demo_Id");

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

      alert(obj2);

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

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

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

      }

      )

      2、得到標(biāo)記中的屬性

      復(fù)制代碼 代碼如下:

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

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

      3、設(shè)置屬性

      復(fù)制代碼 代碼如下:

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

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

      3.1、刪出屬性

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

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

      復(fù)制代碼 代碼如下:

      $(

      function() {

      $("div>p").mouseover(

      function() {

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

      }

      );

      }

      4.1、移出Class

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

      4.2、添加Class

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

      5、圖片的復(fù)制

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

      6、事件綁定,可以綁定多個(gè)相同的事件

      復(fù)制代碼 代碼如下:

      $(function() {

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

      alert("你點(diǎn)。。");

      });

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

      alert("你點(diǎn)啊。");

      });

      })

      7、移出事件

      復(fù)制代碼 代碼如下:

      $(function() {

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

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

      alert("移出事件!");

      });

      })

      8、元素的顯示和隱藏

      復(fù)制代碼 代碼如下:

      $(function() {

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

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

      });

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

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

      });

      })

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

      復(fù)制代碼 代碼如下:

      $(function() {

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

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

      });

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

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

      });

      })

      復(fù)制代碼 代碼如下:

      二、淡入淡出的實(shí)現(xiàn)方法

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

      如下:

      復(fù)制代碼 代碼如下:

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

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

      });

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

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

      });

      2、幻燈片效果-由slideUp()與slideDown()方法實(shí)現(xiàn)

      復(fù)制代碼 代碼如下:

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

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

      });

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

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

      });

      三、Jquery功能函數(shù)

      1、瀏覽器的檢測(cè)$.browser, 如下:

      復(fù)制代碼 代碼如下:

      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對(duì)象$.each(arr,function) //對(duì)數(shù)組的每個(gè)對(duì)象用function函數(shù)處理

      如下:

      復(fù)制代碼 代碼如下:

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

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

      alert(iNum + "," + value);

      });

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

      示例:

      復(fù)制代碼 代碼如下:

      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))

      本文全部來(lái)源于那些年的學(xué)習(xí)筆記。

      總結(jié)

      Jquery庫(kù)中有很多函數(shù),還有一些,特別是Jquery里的Ajax,是非常重要的,此文以回憶那些年學(xué)習(xí)Jquery的日子。

    【我學(xué)習(xí)jquery的經(jīng)驗(yàn)】相關(guān)文章:

    jQuery程序設(shè)計(jì)08-05

    jquery提交按鈕的代碼07-28

    速錄學(xué)習(xí)經(jīng)驗(yàn)12-29

    淺析jQuery 遍歷函數(shù)javascript08-06

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

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

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

    jQuery的DOM操作筆記07-29

    英語(yǔ)全面學(xué)習(xí)經(jīng)驗(yàn)05-22

    jQuery 源碼分析和Ready函數(shù)06-28