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可以對業務邏輯的...