1、引用jQuery庫文件的<script>標簽,必須放在引用自定義腳本文件的<script>標簽之前,否則,就會發生找不到對象;最好在<head>元素中,把引入樣式表的<link />放在<script>標簽前面;有時候其他的javascript庫也會用$符號,為了不沖突,可以使用.noConflict()方法把控制權交給別的庫.
<script src="prototype.js" type="text/javascript" />
<script src="jquery.js" type="text/javascript" />
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="myjs.js" type="text/javascript"/>
在使用jquery方法時,必須使用jquery代替$來調用。
2、基本選擇符:標簽名,${"p"};ID選擇符,${"#idname"};類選擇符,${".classname"}。
3、css選擇符,舉個例子來說
$(document).ready(function(){
$("#aSelect > li").addClass("aClass");
$("#aSelect li:not(.aClass)").addClass("otherClass");
});
上面第二行中的>就是元素組合符,查找ID為aSelect的元素的子元素(>)中所有的列表項。這個子元素,不包含孫元素。
上面第三行中的aSelect li,表示查找ID為aSelect的元素的所有下級列表項,包含孫元素。
4、屬性選擇符:$("img[alt]")就是選擇所有帶有alt屬性的圖像元素;另外,屬性選擇符允許以類似正則表達式的語法來標識字符串的開始(^)和結尾($),而且,也可以使用(*)表示位于字符串中任意位置的值,適用(!)來表示相反的值。
e.g.:
$(document).ready(function(){
$("a[href^=mailto:]").addClass("mailto");
5、自定義選擇符,語法與css中的偽類選擇符語法相同,以一個冒號開頭,比如,我們要從某個集合里面選擇第一項,可以使用下面的代碼:
$("a[href^=http]:eq(0)")...
$("div:first-child")...
另外兩個比較常用的自定義選擇符是:odd和:even,分別對應選擇奇數行和偶數行。
$("table tr:odd").addClass("odd");
$("table tr:even").addClass("even");
猜猜看:$("td:contains(a)").css("color","red");這會有什么效果?
6、基于表單的選擇符,簡單列舉一下吧,有心人通過練習會明白的。
:text :checkbox :radio :image :submit :reset :password
:file :input :button :enabled :disabled :checked :selected
這些選擇符可以鏈式使用,比如$(':radio:checked'),$(':text:enabled')等等。
7、.find()和.filter()的相同點和區別,他們都是遍歷元素,區別就是find是對子集操作,filter是對自身集合元素操作。比如
var $find=$("div").find(".name"); 是對class為name的div內的元素操作,
var filter=$("div").filter(".name");是對所有class為name的div進行操作。
8、.next()下一個同輩元素;.nextAll()下面所有的同輩元素;
.prev()上一個同輩元素;.prevAll()上面所有的同輩元素;
.siblings()所有的同輩元素;.andself()包含自己;
.parent()父元素;.children()子元素;
.end()恢復最近依次破壞性對匹配元素集合的操作,返回到之前的匹配元素集合狀態,返回匹配元素集合。
9、jQuery為標準的DOM事件都提供了相應的簡寫事件方法:
.blur .change .click .dbclick .error .focus .keydown .keypress .keyup .load .select .scroll
.mousedown .mouseover .mouseout .mousemove .mouseup .resize .submit .unload
10、復合事件
.toggle(fun1,fun2,fun3...)參數都是函數,第一次點擊執行fun1,第二次點擊執行fun2,依次類推,執行完以后,重新回到fun1開始。
.hover(fun1,fun2),當鼠標移動到一個匹配元素上面時(over),會觸發指定的第一個函數。當鼠標移出這個元素時(out),會觸發指定的第二個函數。
11、盡管解釋起來很難,但是想象起來卻很容易,div里面的一個元素被點擊了,但是我們只想執行div的點擊事件:(感興趣的去了解事件捕獲和事件冒泡)
$(document).ready(function(){
$("#divId").click(function(event){
if(event.target==this){
這里是事件執行代碼...
}
});
});
另外還有直接阻止事件冒泡的方法.stopPropagation()
12、移除事件處理程序,直接看代碼,很直觀
$(function(){
$("#largeDiv").click(function(event){
事件處理代碼
});
$("#largeDiv-firstChild").click(function(){
$("#largeDiv").unbind("click");
});
});
但是如果click里面的代碼,有一部分要執行,有一部分不執行怎么辦呢,.unbind()只能全部移除,其實,是可以解決的,給事件起個別名就好了
13、類似.bind(),.one()只執行一次,還有.trigger('click')是模仿用戶點擊的事件,.trigger()方法提供了一組與bind方法相同的簡寫,但是結果不一樣,只是觸發操作而不是綁定行為:$("#divname").click();
14、.show() .hide() .fadeIn() .fadeOut()可以用不同的形式來實現展示和隱藏效果。具體自己研究吧,比較簡單。
<script src="prototype.js" type="text/javascript" />
<script src="jquery.js" type="text/javascript" />
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="myjs.js" type="text/javascript"/>
在使用jquery方法時,必須使用jquery代替$來調用。
2、基本選擇符:標簽名,${"p"};ID選擇符,${"#idname"};類選擇符,${".classname"}。
3、css選擇符,舉個例子來說
$(document).ready(function(){
$("#aSelect > li").addClass("aClass");
$("#aSelect li:not(.aClass)").addClass("otherClass");
});
上面第二行中的>就是元素組合符,查找ID為aSelect的元素的子元素(>)中所有的列表項。這個子元素,不包含孫元素。
上面第三行中的aSelect li,表示查找ID為aSelect的元素的所有下級列表項,包含孫元素。
4、屬性選擇符:$("img[alt]")就是選擇所有帶有alt屬性的圖像元素;另外,屬性選擇符允許以類似正則表達式的語法來標識字符串的開始(^)和結尾($),而且,也可以使用(*)表示位于字符串中任意位置的值,適用(!)來表示相反的值。
e.g.:
$(document).ready(function(){
$("a[href^=mailto:]").addClass("mailto");
$("a[href$=.pdf]").addClass("pdflink");
$("a[href^=http][href*=henry]").addClass("henrylink");
});5、自定義選擇符,語法與css中的偽類選擇符語法相同,以一個冒號開頭,比如,我們要從某個集合里面選擇第一項,可以使用下面的代碼:
$("a[href^=http]:eq(0)")...
$("div:first-child")...
另外兩個比較常用的自定義選擇符是:odd和:even,分別對應選擇奇數行和偶數行。
$("table tr:odd").addClass("odd");
$("table tr:even").addClass("even");
猜猜看:$("td:contains(a)").css("color","red");這會有什么效果?
6、基于表單的選擇符,簡單列舉一下吧,有心人通過練習會明白的。
:text :checkbox :radio :image :submit :reset :password
:file :input :button :enabled :disabled :checked :selected
這些選擇符可以鏈式使用,比如$(':radio:checked'),$(':text:enabled')等等。
7、.find()和.filter()的相同點和區別,他們都是遍歷元素,區別就是find是對子集操作,filter是對自身集合元素操作。比如
var $find=$("div").find(".name"); 是對class為name的div內的元素操作,
var filter=$("div").filter(".name");是對所有class為name的div進行操作。
8、.next()下一個同輩元素;.nextAll()下面所有的同輩元素;
.prev()上一個同輩元素;.prevAll()上面所有的同輩元素;
.siblings()所有的同輩元素;.andself()包含自己;
.parent()父元素;.children()子元素;
.end()恢復最近依次破壞性對匹配元素集合的操作,返回到之前的匹配元素集合狀態,返回匹配元素集合。
9、jQuery為標準的DOM事件都提供了相應的簡寫事件方法:
.blur .change .click .dbclick .error .focus .keydown .keypress .keyup .load .select .scroll
.mousedown .mouseover .mouseout .mousemove .mouseup .resize .submit .unload
10、復合事件
.toggle(fun1,fun2,fun3...)參數都是函數,第一次點擊執行fun1,第二次點擊執行fun2,依次類推,執行完以后,重新回到fun1開始。
.hover(fun1,fun2),當鼠標移動到一個匹配元素上面時(over),會觸發指定的第一個函數。當鼠標移出這個元素時(out),會觸發指定的第二個函數。
11、盡管解釋起來很難,但是想象起來卻很容易,div里面的一個元素被點擊了,但是我們只想執行div的點擊事件:(感興趣的去了解事件捕獲和事件冒泡)
$(document).ready(function(){
$("#divId").click(function(event){
if(event.target==this){
這里是事件執行代碼...
}
});
});
另外還有直接阻止事件冒泡的方法.stopPropagation()
$(document).ready(function(){
$("#divId .button").click(function(event){
這里是事件執行代碼...
event.stopPropagation();
});
});
在這里我要說的是,上面兩個例子,分別對應的是事件捕獲和事件冒泡,不是一回事。
$("#divId .button").click(function(event){
這里是事件執行代碼...
event.stopPropagation();
});
});
在這里我要說的是,上面兩個例子,分別對應的是事件捕獲和事件冒泡,不是一回事。
12、移除事件處理程序,直接看代碼,很直觀
$(function(){
$("#largeDiv").click(function(event){
事件處理代碼
});
$("#largeDiv-firstChild").click(function(){
$("#largeDiv").unbind("click");
});
});
但是如果click里面的代碼,有一部分要執行,有一部分不執行怎么辦呢,.unbind()只能全部移除,其實,是可以解決的,給事件起個別名就好了
$(function(){
$("#largeDiv").bind('click.first',function(event){
第一個事件處理代碼
});
$("#largeDiv").unbind("click.first");
});
});
$("#largeDiv").bind('click.first',function(event){
第一個事件處理代碼
});
$("#largeDiv").bind('click.second',function(event){
第二個事件處理代碼
});
$("#largeDiv-firstChild").click(function(){第二個事件處理代碼
});
$("#largeDiv").unbind("click.first");
});
});
13、類似.bind(),.one()只執行一次,還有.trigger('click')是模仿用戶點擊的事件,.trigger()方法提供了一組與bind方法相同的簡寫,但是結果不一樣,只是觸發操作而不是綁定行為:$("#divname").click();
14、.show() .hide() .fadeIn() .fadeOut()可以用不同的形式來實現展示和隱藏效果。具體自己研究吧,比較簡單。
此文部分內容來源網絡。如有侵犯您的版權問題,請來消息至電子郵件DyEngima&163.com(&換成@),經核實后會在文章內部標明來源。
轉載請注明來源http://www.aygfsteel.com/DyEnigma/簽名:有能力、有擔當、有情義的人才能稱之為男人,而不是由性別決定。