2016-07-26索寧?JavaScript
轉(zhuǎn)自:http://www.cnblogs.com/suoning/p/5683047.html
一否彩、簡介
定義
jQuery創(chuàng)始人是美國John Resig,是優(yōu)秀的Javascript框架;
jQuery是一個輕量級催跪、快速簡潔的javaScript庫若厚。
jQuery對象
jQuery產(chǎn)生的對象時jQuery獨有的讥邻,只能自己調(diào)用
書寫規(guī)則
支持鏈式操作迫靖;
在變量前加””符號(var”符號(varvariable = jQuery 對象)院峡;
注:此規(guī)定并不是強制要求。
二系宜、尋找元素
選擇器
基本選擇器照激、層級選擇器、屬性選擇器 與CSS類似盹牧,這里不再細說俩垃,詳細猛戳這里。
基本篩選器
$('li:first')//第一個元素
$('li:last')//最后一個元素
$("tr:even")//索引為偶數(shù)的元素汰寓,從 0 開始
$("tr:odd")//索引為奇數(shù)的元素口柳,從 0 開始
$("tr:eq(1)")//給定索引值的元素
$("tr:gt(0)")//大于給定索引值的元素
$("tr:lt(2)")//小于給定索引值的元素
$(":focus")//當前獲取焦點的元素
$(":animated")//正在執(zhí)行動畫效果的元素
內(nèi)容選擇器
$("div:contains('nick')")//包含nick文本的元素
$("td:empty")//不包含子元素或者文本的空元素
$("div:has(p)")//含有選擇器所匹配的元素
$("td:parent")//含有子元素或者文本的元素
表單選擇器
$(":input")//匹配所有 input, textarea, select 和 button 元素
$(":text")//所有的單行文本框
$(":password")//所有密碼框
$(":radio")//所有單選按鈕
$(":checkbox")//所有復(fù)選框
$(":submit")//所有提交按鈕
$(":reset")//所有重置按鈕
$(":button")//所有button按鈕
$(":file")//所有文件域
$("input:checked")//所有選中的元素
$("select option:selected")//select中所有選中的option元素
篩選器
過濾
$("p").eq(0)//當前操作中第N個jQuery對象,類似索引
$('li').first()//第一個元素
$('li').last()//最后一個元素
$(this).hasClass("test")//元素是否含有某個特定的類,返回布爾值
$('li').has('ul')//包含特定后代的元素
查找
$("div").children()//div中的每個子元素,第一層
$("div").find("span")//div中的包含的所有span元素,子子孫孫
$("p").next()//緊鄰p元素后的一個同輩元素
$("p").nextAll()//p元素之后所有的同輩元素
$("#test").nextUntil("#test2")//id為"#test"元素之后到id為'#test2'之間所有的同輩元素,掐頭去尾
$("p").prev()//緊鄰p元素前的一個同輩元素
$("p").prevAll()//p元素之前所有的同輩元素
$("#test").prevUntil("#test2")//id為"#test"元素之前到id為'#test2'之間所有的同輩元素,掐頭去尾
$("p").parent()//每個p元素的父元素
$("p").parents()//每個p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")//id為"#test"元素到id為'#test2'之間所有的父級元素,掐頭去尾
$("div").siblings()//所有的同輩元素,不包括自己
三、屬性操作
基本屬性操作
$("img").attr("src");//返回文檔中所有圖像的src屬性值
$("img").attr("src","test.jpg");//設(shè)置所有圖像的src屬性
$("img").removeAttr("src");//將文檔中圖像的src屬性刪除
$("input[type='checkbox']").prop("checked",true);//選中復(fù)選框
$("input[type='checkbox']").prop("checked",false);
$("img").removeProp("src");//刪除img的src屬性
CSS類
$("p").addClass("selected");//為p元素加上 'selected' 類
$("p").removeClass("selected");//從p元素中刪除 'selected' 類
$("p").toggleClass("selected");//如果存在就刪除,否則就添加
HTML代碼/文本/值
$('p').html();//返回p元素的html內(nèi)容
$("p").html("Hello nick!");//設(shè)置p元素的html內(nèi)容
$('p').text();//返回p元素的文本內(nèi)容
$("p").text("nick");//設(shè)置p元素的文本內(nèi)容
$("input").val();//獲取文本框中的值
$("input").val("nick");//設(shè)置文本框中的內(nèi)容
四踩寇、CSS操作
樣式
$("p").css("color");//訪問查看p元素的color屬性
$("p").css("color","red");//設(shè)置p元素的color屬性為red
$("p").css({"color":"red","background":"yellow"});//設(shè)置p元素的color為red啄清,background屬性為yellow(設(shè)置多個屬性要用{}字典形式)
位置
$('p').offset()//元素在當前視口的相對偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()//元素相對父元素的偏移,對可見元素有效六水,Object {top: 117, left: 250}
$(window).scrollTop()//獲取滾輪滑的高度
$(window).scrollLeft()//獲取滾輪滑的寬度
$(window).scrollTop('100')//設(shè)置滾輪滑的高度為100
尺寸
$("p").height();//獲取p元素的高度
$("p").width();//獲取p元素的寬度
$("p:first").innerHeight()//獲取第一個匹配元素內(nèi)部區(qū)域高度(包括補白俺孙、不包括邊框)
$("p:first").innerWidth()//獲取第一個匹配元素內(nèi)部區(qū)域?qū)挾?包括補白、不包括邊框)
$("p:first").outerHeight()//匹配元素外部高度(默認包括補白和邊框)
$("p:first").outerWidth()//匹配元素外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true)//為true時包括邊距
五掷贾、文檔處理
內(nèi)部插入
$("p").append("nick");//每個p元素內(nèi)后面追加內(nèi)容
$("p").appendTo("div");//p元素追加到div內(nèi)后
$("p").prepend("Hello");//每個p元素內(nèi)前面追加內(nèi)容
$("p").prependTo("div");//p元素追加到div內(nèi)前
外部插入
$("p").after("nick");//每個p元素同級之后插入內(nèi)容
$("p").before("nick");//在每個p元素同級之前插入內(nèi)容
$("p").insertAfter("#test");//所有p元素插入到id為test元素的后面
$("p").insertBefore("#test");//所有p元素插入到id為test元素的前面
替換
$("p").replaceWith("Paragraph. ");//將所有匹配的元素替換成指定的HTML或DOM元素
$("Paragraph. ").replaceAll("p");//用匹配的元素替換掉所有 selector匹配到的元素
刪除
$("p").empty();//刪除匹配的元素集合中所有的子節(jié)點睛榄,不包括本身
$("p").remove();//刪除所有匹配的元素,包括本身
$("p").detach();//刪除所有匹配的元素(和remove()不同的是:所有綁定的事件、附加的數(shù)據(jù)會保留下來)
復(fù)制
$("p").clone()//克隆元素并選中克隆的副本
$("p").clone(true)//布爾值指事件處理函數(shù)是否會被復(fù)制
六想帅、事件
頁面載入
當頁面載入成功后再運行的函數(shù)事件
$(document).ready(function(){
dosomething...
});
//簡寫
$(function($){
dosomething...
});
頁面處理
//bind 為每個匹配元素綁定事件處理函數(shù)场靴,綁定多個用{}。
$("p").bind("click",function(){
alert($(this).text());
});
$(menuF).bind({
"mouseover":function(){
$(menuS).parent().removeClass("hide");
},"mouseout":function(){
$(menuS).parent().addClass("hide");
}
});
$("p").one("click",fun...)//one 綁定一個一次性的事件處理函數(shù)
$("p").unbind("click")//解綁一個事件
頁面委派
// 與bind 不同的是當時間發(fā)生時才去臨時綁定港准。
$("p").delegate("click",function(){
dosomething...
});
$("p").undelegate();//p元素刪除由 delegate() 方法添加的所有事件
$("p").undelegate("click")//從p元素刪除由 delegate() 方法添加的所有click事件
事件
$("p").click();//單擊事件
$("p").dblclick();//雙擊事件
$("input[type=text]").focus()//元素獲得焦點時,觸發(fā) focus 事件
$("input[type=text]").blur()//元素失去焦點時,觸發(fā) blur事件
$("button").mousedown()//當按下鼠標時觸發(fā)事件
$("button").mouseup()//元素上放松鼠標按鈕時觸發(fā)事件
$("p").mousemove()//當鼠標指針在指定的元素中移動時觸發(fā)事件
$("p").mouseover()//當鼠標指針位于元素上方時觸發(fā)事件
$("p").mouseout()//當鼠標指針從元素上移開時觸發(fā)事件
$(window).keydown()//當鍵盤或按鈕被按下時觸發(fā)事件
$(window).keypress()//當鍵盤或按鈕被按下時觸發(fā)事件,每輸入一個字符都觸發(fā)一次
$("input").keyup()//當按鈕被松開時觸發(fā)事件
$(window).scroll()//當用戶滾動時觸發(fā)事件
$(window).resize()//當調(diào)整瀏覽器窗口的大小時觸發(fā)事件
$("input[type='text']").change()//當元素的值發(fā)生改變時觸發(fā)事件
$("input").select()//當input 元素中的文本被選擇時觸發(fā)事件
$("form").submit()//當提交表單時觸發(fā)事件
$(window).unload()//用戶離開頁面時
(event object) 對象
所有的事件函數(shù)都可以傳入event參數(shù)方便處理事件
$("p").click(function(event){
alert(event.type);//"click"
});
(evnetobject)屬性方法:
event.pageX//事件發(fā)生時旨剥,鼠標距離網(wǎng)頁左上角的水平距離
event.pageY//事件發(fā)生時,鼠標距離網(wǎng)頁左上角的垂直距離
event.type//事件的類型
event.which//按下了哪一個鍵
event.data//在事件對象上綁定數(shù)據(jù)浅缸,然后傳入事件處理函數(shù)
event.target//事件針對的網(wǎng)頁元素
event.preventDefault()//阻止事件的默認行為(比如點擊鏈接轨帜,會自動打開新頁面)
event.stopPropagation()//停止事件向上層元素冒泡
七、效果
基本
$("p").show()//顯示隱藏的匹配元素
$("p").show("slow");//參數(shù)表示速度,("slow","normal","fast"),也可為900毫秒
$("p").hide()//隱藏顯示的元素
$("p").toggle();//切換 顯示/隱藏
滑動
$("p").slideDown("900");//用900毫秒時間將段落滑下
$("p").slideUp("900");//用900毫秒時間將段落滑上
$("p").slideToggle("900");//用900毫秒時間將段落滑上衩椒,滑下
淡入淡出
$("p").fadeIn("900");//用900毫秒時間將段落淡入
$("p").fadeOut("900");//用900毫秒時間將段落淡出
$("p").fadeToggle("900");//用900毫秒時間將段落淡入,淡出
$("p").fadeTo("slow",0.6);//用900毫秒時間將段落的透明度調(diào)整到0.6
八蚌父、對象訪問
$.trim()//去除字符串兩端的空格
$.each()//遍歷一個數(shù)組或?qū)ο螅琭or循環(huán)
$.inArray()//返回一個值在數(shù)組中的索引位置毛萌,不存在返回-1
$.grep()//返回數(shù)組中符合某種標準的元素
$.extend()//將多個對象苟弛,合并到第一個對象
$.makeArray()//將對象轉(zhuǎn)化為數(shù)組
$.type()//判斷對象的類別(函數(shù)對象、日期對象阁将、數(shù)組對象膏秫、正則對象等等
$.isArray()//判斷某個參數(shù)是否為數(shù)組
$.isEmptyObject()//判斷某個對象是否為空(不含有任何屬性)
$.isFunction()//判斷某個參數(shù)是否為函數(shù)
$.isPlainObject()//判斷某個參數(shù)是否為用"{}"或"new Object"建立的對象
$.support()//判斷瀏覽器是否支持某個特性
模擬each()內(nèi)部實現(xiàn)機制
九、插件拓展機制
//方式一
jQuery.fn.extend({
check:function(){
returnthis.each(function(){this.checked=true;});
},
uncheck:function(){
returnthis.each(function(){this.checked=false;});
}
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
//方式二
jQuery.extend({
min:function(a,b){returna
max:function(a,b){returna>b?a:b;}
});
jQuery.min(2,3);//2
jQuery.max(4,5);//5
Title
111
222
jQuery.fn.extend({
show1:function(){
varval=this.text();
val=val+"sb";
returnval;
},
show2:function(){
}
});
varret=$(".title").show1();
console.log(ret);
jQuery.extend({
s1:function(arg){
varval=$(arg).text();
returnval+"sb";
},
s2:function(){
}
});
varret2=$.s1(".title");
console.log(ret2);