js學習總結----jquery常用方法

標籤：span   jquer   cli   ons   選取器   eva   載入完成   文檔   nextall   

http://jquery.cuishifeng.cn(可以看一下他的手冊)

1、jQuery的回呼函數　

function fn1(value){            console.log(‘fn1函數‘+value)        }        function fn2(value){            console.log(‘fn2函數‘+value)        }        var $call = $.CallBacks();//建立一個回呼函數的列表集合        $call.add(fn1)//向集合中增加一個叫做fn1的函數        $call.fire(100);//觸發fire方法的時候，把回呼函數集合中的方法執行，並且把對應的參數值傳遞給對應的方法->fn1:100        $call.add(fn2)        $call.fire(200);//fn1:200  fn2:200        $call.remove(fn1);//在集合中移除fn1這個方法        $call.fire(200);//fn2:200        $(document).ready(function(){});<===>$(function(){})        //和原生JS中的window.onload對應        //window.onload的意思是:當頁面中的HTML結構、圖片、文字等多有資源都載入完成才觸發這個行為，並且在頁面中它只能執行一次，後面寫的會覆蓋前面的。        //$(document).ready(function(){}):只要HTML結構載入完成就會觸發對應的行為，而且在一個頁面中可以使用多次

2、屬性操作方法

//所有的HTML都載入完成了，形成了一個閉包        $(function(){            /*                attr:擷取和設定元素的自訂屬性，等價於原生JS中的set/getAttribute                removeAttr:移除            */            var $box = jQuery("#box");            $box.attr(‘fq‘,200);            console.log($box.attr(‘fq‘));            $box.attr(‘fq‘,1000);            $box.attr({                index:1,                name:‘fq‘            })            $box.removeAttr(‘fq‘);            /*                prop:擷取和設定元素的自訂屬性(和attr是不同的兩套方式，兩者之間不能相互混用，用attr擷取的只能用attr刪除或者修改或者擷取，prop同理)                removeProp                注意:prop內建的屬性可以在HTML結構中體現出來，但是不是內建的屬性是體現不出來的（但是可以擷取到值）                attr和prop的區別:                attr一般都用來設定和操作元素的自訂屬性的；                prop一般用來操作元素的內建屬性的（尤其是表單元素的操作我們大部分都在使用prop）            */            var $box = jQuery("#box");            $box.prop(‘fq‘,100);            /*                    jQuery(selector,context) context一般不需要傳遞，預設是document，但是我們也可以指定具體的上下文來擷取需要的元素                addClass/removeClass/toggleClass(toggle系列都是之前有就是移除，沒有就是新增)                通過jQuery選取器擷取到一個集合，然後讓集合直接的調用jQuery中提供的方法，相當於給集合中的每一個元素都調取了對應的方法(jQuery內建迴圈操作)                each:可以遍曆jQuery集合中的每一項(和數組中的forEach類似)            */            $box.addClass(‘w100‘)            $box.removeClass(‘w100‘)            $box.toggleClass(‘w100‘)        })

/*                css:擷取或者設定（大量設定）當前元素的樣式值                offset:不管父級參照物是誰，擷取當前元素距離body的位移距離/position:擷取當前元素距離父級參照物的位移距離                scrollTop/scrollLeft:擷取/設定捲軸捲去的高度/寬度                width/height:擷取或者設定元素的width/height                innerWidth/innerHeight:擷取/設定元素可視地區的寬高（擷取的時候等價於clientWidth/clientHeight），設定的時候，保留padding的值，把width值進行改變（width的值最小是0）                outerWidth/outerHeight:擷取/設定元素可視地區的寬高(包含邊框)，設定具體值的時候和上邊的效果一樣。如果傳遞進來的參數是true，預設的把margin的值也計算在內了。                            */

3、文檔處理

/*                append:向指定元素的末尾位置追加一個新的元素 容器.append(元素)                appendTo 元素.appendTo(容器)                prepend/prependTo:向指定元素的開頭位置追加一個新的元素                after/before:在當前元素的後面/前面追加新的元素                insertAfter/insertBefore:把選取器擷取到的元素追加到指定元素的後面或者前面            */            var oDiv = document.createElement(‘div‘);            oDiv.id = "div5";            $box.append(oDiv);            $(oDiv).appendTo($box);            $(oDiv).insertAfter($box)//把建立的oDiv追加到$box的後面（和$box是同級的）            /*                replaceAll(selector):用匹配的結果替換所有的selector匹配的元素                remove:把匹配的結果在頁面中移除掉            */            $(oDiv).replaceAll("ul")//頁面中所有的ul都用oDiv給替換掉            $box.remove();            $(‘ul‘).remove("#ul2")

4、篩選:

/*                eq(index)、first()、last()、hasClass(strClass)檢測當前元素中是否包含某一個樣式類名                filter、children、find：常用的三個篩選方法                filter：同級過濾 首先通過選取器擷取一個集合，在擷取的內容中在進行二次篩選                children:子集過濾                find:後代過濾                                map:遍曆jQuery集合中的每一項，並且可以支援傳回值把每一項進行修改，類似於數組中的map這個方法                parent:父親節點 parents:所有的父親節點（從當前開始一直找到HTML，把每一級都記錄下來）                next、nextAll、siblings、prev、prevAll            */            $(‘div‘).hasClass(‘w1‘);            $box.children()//還可以通過傳遞參數來進行篩選            $box.find()//結果是一個空集合            $box.find(‘li‘)            $("div").filter("#div4")

js學習總結----jquery常用方法