1. 程式人生 > >JQuery基本知識匯總;JQuery常用方法;淺入了解JQuery

JQuery基本知識匯總;JQuery常用方法;淺入了解JQuery

需要 相互調用 con 兩個 get() 布爾 query 方式 但是

一、jQuery對象與JavaScript對象

  ①JavaScript入口函數比jQuery入口函數執行的晚一些;

  JQuery的入口函數會等頁面加載完成才執行,但是不會等待圖片的加載;

  JavaScript入口函數需要等待頁面加載和圖片加載完成才執行;

  JavaScript入口函數:window.onload = function(){};

  JQuery入口函數:①$(document).ready(function(){});

          ②$(function(){});

  ②JQuery對象與Dom(JavaScript對象)對象的區別:

    DOM對象:使用JavaScript方式獲取到的元素是DOM對象。

    JQuery對象:使用JQuery方式獲取到的元素是JQuery對象。

  ③JQuery對象與DOM對象的聯系:

    1、JQuery對象其實就是JavaScript對象的集合,JQuery對象裏面存放了一大堆JavaScript對象。

    2、JQuery對象不能與Dom對象相互調用{$("li").setAttribute("name","he"); //代碼報錯

                     document.getElementById("section").show();//代碼報錯  

    }

    3、DOM對象轉JQuery對象:

        var cloth = document.getElementById("cloth"); //這是DOM對象

        $(cloth).innerText("測試");

      JQuery對象轉DOM對象:

        var $li = $("li");

        $li[0].style.backgroundColor = "red"; //利用取下標的方式將JQuery對象轉換成DOM對象

        或者$li.get(0).style.backgroundColor = "red"; //利用get()方法也能達到同樣效果

二、JQuery常用方法

  ①index()方法:返回當前元素在所有兄弟元素當中的索引

    <li><a>1</a></li>

    <li><a>2</a></li>

    <li><a>3</a></li>

    $(function(){

      $("li").click(function(){

        console.log($(this).index());

      });

    });

  ②CSS操作

    隱式叠代:設置操作的時候會給JQuery內部的所有對象都設置上相同的值,獲取的時候只返回第一個元素對應的值。

    addClass():添加一個類,不影響之前存在的類。

    removeClass():移除一個類。

    hasClass():判斷一個類是否存在。

    toggleClass():切換類,如果類存在就移除,沒有就添加。

  ③屬性操作

    attr(name,value):使用方法$("img").attr("alt","圖片不存在");

    對於布爾值類型的屬性,不使用attr()放法,應該使用prop()放法,用法與attr()一樣。

  ④動畫操作

    show(): 可以傳參數,也可不傳參數;不傳參數則沒有動畫效果,參數可以是好毫秒值,也可以是字符串:fast=200ms、normal=40ms、slow=60ms。

    hide():隱藏。

    slideDown():向上滑入可接收兩個參數,slideDown(1000,function(){})。

    slideUp():向上滑出。

    slideToggle():如果是滑入狀態就滑出,反之。

    fadeIn():淡入。

    fadeOut():淡出。

    fadeToggle():切換淡入淡出。

    自定義動畫animate()

      1、第一個參數,必填:是一個對象,需要動畫的樣式。

      2、第二個參數:執行時間。

      3、第三個參數:動畫執行效果。

      4、第四個參數:回調函數。

    stop()方法:停止當前執行的動畫,一般寫在動畫前面停止別人的動畫立即執行自己的動畫。

      1、例如:.stop.slideDown(); //立即執行slideDown()

      2、第一個參數:是否清除動畫隊列,ture是;false否。

      3、第二個參數:是否跳轉到當前動畫的最終狀態效果:true是,false否。

    音樂播放是DOM對象,不能調用eq(),需要使用get()獲取。

  ⑤創建JQuery對象

    append():添加節點到子元素的最後面。

    prepend():添加節點到子元素的最前面。

    appendTo():把節點添加到父元素中,參數是父元素。

    perpendTo():把節點添加到父元素中的最前面,參數是父元素。

    after():添加到父元素的後面。

    before():添加到父元素的前面。

    empty():清空一個元素的內容,並且會把對應的事件也清空。

    html(""):把元素內容設置為空,不會清除內容上的事件。

    remove():刪除節點,與empty()是清除子節點;remove是清除自己和後代節點。

    clone(): 參數false不會復制內容綁定事件,true同時復制內容綁定事件。

    val():獲取內容。

JQuery基本知識匯總;JQuery常用方法;淺入了解JQuery