js學習總結 jquery常用方法

2022-07-12 23:18:23 字數 3206 閱讀 1371

可以看一下他的手冊)

1、jquery的**函式

function

fn1(value)

function

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對應

的意思是:當頁面中的html結構、、文字等多有資源都載入完成才觸發這個行為,並且在頁面中它只能執行一次,後面寫的會覆蓋前面的。

//$(document).ready(function(){}):只要html結構載入完成就會觸發對應的行為,而且在乙個頁面中可以使用多次

2、屬性操作方法

//

所有的html都載入完成了,形成了乙個閉包

$(function

()) $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、文件處理

/*

prepend/prependto:向指定元素的開頭位置追加乙個新的元素

after/before:在當前元素的後面/前面追加新的元素

insertafter/insertbefore:把選擇器獲取到的元素追加到指定元素的後面或者前面

*/var odiv = document.createelement('div');

odiv.id = "div5";

$(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")

Jquery學習(五) jQuery 文件操作方法

jquery學習 五 jquery 文件操作方法 this is a paragraph.this is another paragraph.向第乙個 p 元素新增乙個類 我可以被轉殖出來哦.複製每個 p 元素id為p1de 然後追加到 body 元素 this is p2 detach 刪除p元素...

jQuery學習總結

function jquery jquery function fn是jquery建構函式的prototype屬性的別名 通過布林型別的 boxmodel標誌可以知道當前頁面使用的是哪乙個方框模型 如果頁面使用w3c標準的方框模型,被設定為true 如果頁面使用ie瀏覽器的方框模型 有時稱為傳統模型...

JQuery學習總結

按照案例導向來總結 首先要想辦法找到元素 1.基本的語法,載入 2.相關選擇器 基本,層級,屬性 文件操作的篩選 3.dom物件和jq物件 前面有 符號 的轉換 然後要繫結事件 比dom的事件少乙個on 操作有bind,hover等 然後做一些屬性操作 attr,addclass,html等 然後注...