大概總結了一下jQuery的一些基礎知識點

2021-07-22 07:52:54 字數 4178 閱讀 4829

jquery目前在web前端開發所佔的比重越來越高,在我們jquery學習和開發的過程中都會去使用。jquery幫我們解決了瀏覽器之間js一些不相容的地方和簡化了原生js對dom的操作。

1:jquery可以載入多個ready函式,而原始的js只能載入一次onload

2:用dom物件得到的物件不能使用jquery中的方法,比如var p=document.getelementbyid("id"),此時p不能這樣使用p.html(),而應該使用innerhtml。同樣,jquery物件不能使用dom中的方法,如果juqery中改寫了dom中的方法,則可以使用dom中的方法。

3:jquery物件轉換為dom物件的方法:

var input=$('#a')

a:使用索引,alert(input[0].value)

b:使用get,alert(input.get[0].value)

4:dom物件轉換為juqery物件:

用$()把dom物件包裝起來就ok:

var input = document.getelementbyid('a');

alert($(input).val());

5:jquery與其他js庫共存6: >號表示子標籤,專案中一般不用css表示式,因為它不停地計算會使瀏覽器特別卡

$(function());

abcdefg

1234567890

7:jquery優勢:

a:相容性強大,完美支援css1-2.0

b:完美容錯機制,eg:即使沒有對應標籤也不會報錯

8:選擇器:

1:id :$('#id')

2:calss :$('.p1')

eg:$('.p1').css('color','red');//代替了.p1

4:多重選擇器

eg: 123

12312

5:層次選擇器

e f e元素所欲的後代元素

e>f e元素的子元素

e+next e元素後緊鄰的標籤為next的兄弟元素,等於next()

e~siblings e元素後的所有的標籤為siblings的兄弟元素,等於nextall()

eg:給div標籤後緊鄰的p標籤新增顏色

$('div+p').css('color','red');

$('div').next().css('color','red');

給div標籤後所有的p標籤新增顏色

$('div~p').css('color','red');

:first

$('p:first').css();

注意:標籤內巢狀標籤時單引號和雙引號錯開使用,若計算偶數則下標從0算起

7:屬性選擇器

a:safs

選取title為js的p標籤新增紅色,注意title可以為原有標籤,也可以為自己自定義的標籤

$('p[title=js]').css('color','red');

或者$('p[title]').css('color','red');

b:選取含有title和myuu屬性的p元素,注意title可以為原有標籤,也可以為自己自定義的標籤

$('p[title=js][myuu]').css('color','red');

c:子元素:div的子標籤p的第乙個標籤

$('div p:first-child').css('color','red');

8:表單元素及表單元素屬性選擇器

$(':input[type=checkbox]').val();

$(':input:disabled').val();

$(':input[disabled=disabled]').val();

$('select:selected').val();

9:dom篩選

$('p:eq(0)').css(); //給指定下標為0的p標籤新增顏色

$('p').filter('#second').css(); //奇偶數新增

$('p').click(function()

});$('p').not(':last').css();//給p標籤添顏色,除了最後乙個

$('p').not('#secone').css();//給p標籤添顏色,除了id為second的p標籤

$('input').map(function()).get().join(',');//,即將三組文字框中的值用逗號隔開並轉為字串

slice():$('p').slice(1,5).css();// 選中下標為1,2,3,4的元素,包含1,不包含5。也可傳入負數

10:dom遍歷查詢:(注:返回一組元素的都可以加引數,返回乙個的不能加引數)

$('#p1').parent().css(); //通過子節點p1找到父節點wrap

$('#p1').parents('.outer').css();//選取祖先元素,通常加引數,表示範圍為class為outer的標籤為止

$('p1').offsetparent().css();//offsetparent()返回父元素中第乙個其position設為relative或者absolute的元素,僅對可見元素有效

$('#p2').siblings('div').css();//選擇p2所有的兄弟元素(可加引數)

$('span').parent().css('color','red').end().css('color','blue')//先設定紅色再設定成藍色,顏色可重疊。鏈式操作,end()函式

$('input').each(function());

11:特殊符號的處理:有的加1個\,有的加2個\\

$('input[name=gender]')沒加轉義符,報錯

$('input[name=gender\\[\\]]')加了轉義符,正確

$('input[name=\'checkbox\']')正確

12:**隔行變色

----------js**-----------

var table=document.getelementbyid('table');

var tr=table.getelementbytagname('tr');

for(var i=0;idiv).eq($(this).index()).show().siblings().hide();//根據li的索引值,來確定哪個div顯示哪個div隱藏

上面兩行**可優化為一行:

$(this).addclass('current').siblings().removeclass('current').parent().next().children().eq($(this).index()).show().siblings().hide();

});

14:jquery選擇器的優化:

a:最快的是id選擇器:能用id獲取到的標籤盡量不用class選擇器

b:假如p標籤下有乙個class為a,則盡量:$('p.a'),當然$('.a')這樣寫也可以。

假如有乙個div標籤,id為a,則直接:$('#id'),一定不要$('div#id')這樣寫。

c:假如div有乙個子div,則盡量使用直接使用id獲取,不要通過父元素找。

d:通過find()來找,盡量不使用上下文查詢

eg:$('li.item-li').find('li').css();

e:鏈式操作比快取快很多,只有在要通過乙個元素查詢另外的元素的時候才需要用到快取,如果直接對某乙個元素進行修改,則直接用鏈式操作。

15:dom操作:

a:建立節點:分為內部插入和外部插入。

內部插入:插入後是子元素

外部插入:插入後是兄弟元素

或者也可以這樣寫:

var str='div標籤

';16:新增樣式再比如:17:jquery中的事件和物件

18:jquery外掛程式編寫(類級別開發,幾乎不用):

$.zxit=);

return obj;//返回和傳入的都是jquery物件

}

19:jquery外掛程式編寫(物件級別開發,使用率99%):

a:官方模板:

;(function($)

var options = $.extend(defaults,options);

初識Django,了解一下大概流程

學習django乙個禮拜了,對其有了乙個大概的了解,自己畫了乙個簡單的圖,雖然有點醜,但是基本上已經把自己所想已經表達 寫完這篇隨筆之後發現自己邏輯表述的有點不太清晰,有點亂,不對,希望各位指正 首先由外部瀏覽器發出請求,伺服器接收到請求,開始交給urls.py 處理,路由進行解釋,告訴系統下一步需...

總結了一下js中的差集 交集 並集

總結了一下有關於陣列的差集 交集 並集的方法 去重 簡單的陣列去重 param a const uniquelize function a return array.from new set a 並集 簡單陣列的並集 param a param b const getunion function a...

AOP 面向切面程式設計 大概了解一下

1.概述 在軟體業,aop為aspect oriented programming的縮寫,意為 面向切面程式設計,通過預編譯方式和執行期間動態 實現程式功能統一維護的一種技術。aop是oop 物件導向程式設計 的延續,是軟體開發中的乙個熱點,是函式式程式設計的一種衍生范型。利用aop可以對業務邏輯的...