jQuery基礎知識

$(function(){}) //jQuery先執行一遍再執行其他函數

$(document).ready(fn) //文檔加載完後觸發

1、 刪除$:jQuery.noConflict()

2、 $('#m') $('a') $('.n') $('*')

$('ul li *') $('div#b ul.c') $('span,em,.box')

$('div>p') $('div+p') $('div ~p')

3、 $('#w').find('p').css() // #m下的p 同$('div p')

$('#m').children('p') // #m的子元素p 同$('div>p')

$('#m').next('p') // #m同級下一個p 同$('div+p')

$('#m').nextAll('p') // #m同級下面所有的p 同$('div ~p')

$('#m').prev('p') // #m同級上一個p

$('#m').prevAll('p') // #m同級下面所有的p

$('#m').siblings('p') // #m同級所有的p

$('#m').preUntil('p') // #m向上選擇遇到p則停止

$('#m').nextUntil('p') // #m向下選擇遇到p則停止

4、 $('a[title]') //包含title屬性的a

$('a[title=value]') //包含title屬性且title=value的a

$('a[title^=value]') //包含title屬性且title開頭匹配value的a

$('a[title$=value]') //包含title屬性且title結尾匹配value的a

$('a[title!=value]') //包含title屬性且title不為value的a

$('a[title~=value]') //包含title屬性且title匹配value(value的其後為空格)的a

$('a[title*=value]') //包含title屬性且title匹配value

$('a[title|=value]') //包含title屬性且title開始匹配value或value_

$('a[bbb][title=value]') //包含bbb和title屬性且title=value的a

5、 $('li:first') $('li:last')

$('li:not(.re)') //li中class非re的元素

$('li:even') //索引為偶數的元素集合(0開始)

$('li:odd') //索引為奇數的元素集合(0開始)

$('li:eq(2)') //選取第3個元素

$('li:gt(2)') //索引大於2的元素。注:-1位最後一個

$('li:lt(2)') //索引小於2的元素。注:-1位最後一個

$(':header') //選擇標題元素 h1~h6 的集合

$(':animated') //選擇正在執行動畫的元素

$(':focus') //選擇獲取焦點的元素

--

$('li').eq(2) $('li').first

$('li').last $('li').not('.re')

6、 $('div:contains('y.com')') //選取div中包含y.com的元素

$('div:empty') //選取沒有元素的div

$('div:has(.re)') //選取class為re的div元素

$(':parent') //選取有子元素或文本的元素

$('p:hidden') //元素p中有隱藏屬性的p

$('p:visible') //元素p中有顯示屬性的p

--

$('ul').has('re') //選取class為re的div元素

$('li').parent() //選擇li的父元素

$('li').parents() //選擇li的父元素和祖先元素

$('li').parentUntil('div') //遇到祖先元素div即截止

7、 $('li:first-child') //每個父元素的第一個子元素

$('li:last-child') //每個父元素的末一個子元素

$('li:only-child') //只有一個子元素的父元素

$('li:nth-child(odd)') //每個父元素奇數 li 元素

$('li:nth-child(even)') //每個父元素偶數 li 元素

$('li:nth-child(2)') //每個父元素第三個li 元素

$('li:nth-child(3n)') //每個父元素的3的倍數的li 元素(n從0算起)

$('li:nth-child(3n+1)') //每個父元素的3的倍數加1的li 元素

$('.red').is('li') //选择器,检测 class 为是否为 red

$('.red').is($('li')) //true,jQuery 对象集合,同上

$('.red').is($('li').eq(2)) //true,jQuery 对象单个,同上

$('.red').is($('li').get(2)) //true,DOM 对象,同上

$('li').eq(2).hasClass('red') //和 is 一样,只不过只能传递 class

$('li').slice(0,2) //li的前三个

$('li').slice(2) //從第3往後全部選定

$('li').slice(-3,-2) //從倒數第3個取到倒數第2個

$('li').end() //獲取當前元素的前一個元素

$('li').contents() //某元素下面的所有節點

$('li').filter('.red') //li下面所有class為red的元素

還可以filter('.red',:first,:last) 即可套用偽類

8、 $('#box').html() //獲取元素のhtml內容,含Html標籤

$('#box').text() //獲取元素中の文本內容,不含Html標籤

$('#box').html(<em>value</em>) //Html標籤會解析

$('#box').text(<em>value</em>) //Html標籤會轉義

$('input').val() //獲取表單中文本的內容

$('input').val('China') //設置表單中文本的內容

$('input').val(['ch1','ch2','ra'])

$('div').attr("title") //獲取屬性值

$('div').attr('title','中華') //設置屬性值

$('div').attr({

title:'中華',

value:'人民'

})

$('div').attr('title',function([index][,value]){

return .....;

})

另注釋:html()、text()、val()、is()、filter()也可傳遞function()

css設置同attr

9、 $('#m').addClass(c1 c3 c2); //添加class屬性

$('#m').removeClass(c1) //移除class

$('#m').toggleClass('c1 c3') //讓元素在c1和c3之間來回切換

$('#m').toggleClass('red',count++%2==0,[false/true]) //兩次切換一下[是否切換]

10、$('#m').width([value]) //獲取元素長度[賦值]

$('#m').innerWidth() //獲取元素のWidth+Padding

$('#m').outerWidth() //InnerWidth+Border

$('#m').outerWidth(ture) //OuterWidth+Margin

$('#m').height([value]) //獲取元素高度[賦值]

$('#m').innerHeight() //獲取元素のHeight+Padding

$('#m').outerHeight() //InnerHeight+Border

$('#m').outerHeight(ture) //OuterHeight+Margin

$('#m').offset().left //獲取相對於視口的左邊距離

$('#m').offset().top //獲取相對於視口的上邊距離

$('#m').position().left //獲取相對於父元素的左邊距離

$('#m').position().top //獲取相對於父元素的上邊距離

11、$('#m').append(con) //向#m內部の尾部添加con元素

例子:$(day).append('<option value ='+i+'>'+i+'</option>');

$('#m').appendTo('div') //將#m添加到div後面

例子:$("<b> Hello World!</b>").appendTo("p");

$('#m').append(function(index,html){}) //index為#m的索引,html為#m的Html

$('#m').prepend(con) //向#m內部の首部添加con元素

例子:$(day).prepend('<option value ='+i+'>'+i+'</option>');

$('#m').prependTo('div') //將#m添加到div前面

例子:$("<b> Hello World!</b>").prependTo("p");

$('#m').prepend(function(index,html){}) //index為#m的索引,html為#m的Html

$('#m').after(con) //將con插到#mの後面

$('#m').insertAfter(con) //將com移到#mの後面

$('#m').before(con) //將con插到#mの前面

$('#m').insertBefore(con) //將com移到#mの前面

$('#m').before(function(index,html){})

$('#m').after(function(index,html){})

12、$('#m').wrap(<strong/>) //在#m外加上strong,只包括一個;也可以用<strong></strong>

$('#m').wrap(<strong>123</strong>) //在#m外添加strong,123放在#m前面

$('#m').wrap(function(index){})

$('#m').unwrap() //輸出父元素

$('#m').wrapAll(<strong/>) //把所有的#m都包裹在一起

$('#m').wrapInner(<strong/>) //子內容包裹一層

13、$('#m').clone() //複製#m,包含元素和內容

$('#m').clone(ture) //複製#m,包含元素和內容和行為

$('#m').remove() //刪除#m

$('#m').remove('#box') //只刪除所有#m中ID=box的元素

$('#m').detach() //保留事件行為的刪除

$('#m').empty() //清空#m裡面的內容,保留標籤

$('#m').replaceWith('<em>Chn</em>') //將所有的#m內容(含標籤)替換為'<em>Chn</em>'

$('#m').replaceAll('<em>Chn</em>') //同上

14、$(':input') //選取所有のinput

$(':text') //選取所有のinput:text

$(':radio') //選取所有のinput:radio

$(':checkbox') //選取所有のinput:checkbox

$(':submit') //選取所有のinput:submit

$(':reset') //選取所有のinput:reset

$(':image') //選取所有のinput:image

$(':button') //選取所有のinput:button

$(':hidden') //選取所有のinput:hidden

$(':file') //選取所有のinput:file

過濾器

$(':enabled') //選取所有の可用元素

$(':disabled') //選取所有の不可用元素

$(':checked') //選取所有被選中の元素(單選和複選)

$(':selected') //選取所有被選中の元素(下拉列表)

15、事件簡寫,為了便於看將function(){}簡寫為fn s=$('#m')

s.click(fn) //單擊觸發

s.dblclick(fn) //雙擊觸發

s.mousedown(fn) //單擊後觸發

s.mouseup(fn) //單擊彈起時觸發

s.mouseover(fn) //鼠標移入(不含子元素)

s.mouseout(fn) //鼠標移出(不含子元素)

s.mousemove(fn) //鼠標移動時觸發

s.mouseenter(fn) //鼠標移入(含子元素)

s.mouseleave(fn) //鼠標移出(含子元素)

s.hover([fn1,]fn2) //鼠標移入觸發fn1,移出觸發fn2

s.keydown(fn) //鍵盤按下[e.keyCode]

s.keyup(fn) //鍵盤按下彈起[e.keyCode]

s.keypress(fn) //鍵盤按下[e.charCode]

s.unload(fn) //事件解綁

s.resize(fn) //改變大小時觸發

s.scroll(fn) //滾動時觸發

s.focus(fn) //獲取焦點時

s.blur(fn) //失去焦點時

s.focusin(fn) //獲取焦點時(含子元素)

s.focusout(fn) //失去焦點時(含子元素)

s.select(fn) //当 textarea 或文本类型的 input 元素中的文本被选择时

s.change(fn) //值改變時

s.submit(fn) //在form下提交時,只適用表單元素

16、s.click().trigger('click') //模擬點擊

s.click(fn(e,d1,d2){}).trigger('click',['123','abc'])

trigger與triggerHandlerの區別

①triggerHandler不會觸發默認事件,而trigger會

②triggerHandler只會影響第一個匹配的元素,而trigger全影響

③triggerHandler返回事件執行の返回值,而trigger返回包含元素のjQuery對象

④triggerHandler不會冒泡,而trigger會

17、s.on('click',false) //阻止冒泡和默認行為

s.on('click','.button',fn()) //委託:將.buttonの行為綁到sのclick事件上

s.off('click','.btn') //取消委託

s.one('click','.button',fn()) //只觸發一次

18、s.show() //顯示s

s.show(1000) //1秒顯示,勻速改變大小和透明度

s.show('slow') //慢速顯示,slow:800,normal:400,fast:800

s.show('slow',fn())

s.hide([1000/'slow'][,fn()]) //隱藏s

s.toggle(['slow'/'fast'/'normal']) //自動切換顯隱

s.slideUp([1000/'slow'][,fn()]) //向上收縮

s.slideDown([1000/'slow'][,fn()]) //向下展開

s.slideToggle(['slow'/'fast'/'normal']) //自動切換捲縮

s.fadeIn([1000/'slow'][,fn()]) //淡入

s.fadeOut([1000/'slow'][,fn()]) //淡出

s.fadeToggle(['slow'/'fast'/'normal']) //自動切換淡入淡出

s.fadeTo('slow',0.33) //自動到透明度

s.animate({

width:'200px',height:'300px',left:'200px',top:'300px',fontSize:'16px',opacity:0.5,

}[,1000][,fn()])

累加功能:left:'+=100px' 或 left:+=100

s.queue() //列隊化,使之順序執行

模擬動畫:

s.queue(fn([next]){

$(this).css('','');

[next();]

})[.hide('slow')];

s.stop([參1[,參2]]) //停止動畫

參1:是否停止動畫,默認為false(不停止),true(停止)

參2:是否直接到達動畫結尾(省略中間的動畫),默認為false(直達),true(不直達)

$.fx.interval=1000; //默認為13,每13毫秒運行一幀

$.fx.off=true; //關閉頁面上的所有動畫,false為默認

19、通用文件加載和數據傳遞

s.load('test.html .my') //加載test.html中class=my的數據,把數據放到s中

s.load('test.php?a=man') //[Get方法]向test.php發送數據

s.load('test.php',{a:'man'})//[Post方法]向test.php發送數據

s.load(

'test.php',

{a:'man'}

function(respone,status,xhr){}

);

備註: response 從服務器返回の數據

status 狀態,成功返回success,失敗返回error

xhr.responseText 返回の數據

xhr.responseXML 返回XML的文檔型

xhr.status 相應Httpの狀態

xhr.statusText Httpの狀態說明

status  statusText 說明

200 :OK :成功

400 :BadRequest :語法錯誤

401 :Unauthorized :需要認證

404 :Not Found :URL找不到

500 :Internal Server Error :服務器以外錯誤

503 :Service Unavailable :服務器過載

s.load()第一個參數為必選,其他可選,不僅可以傳到php,還可以傳到xml、json、text中

s.load()為局部方法,全局方法為$.get()和$.post()

$.get()和$.post()有四個參數,前三個同s.load(),最後一個為返回の內容格式

為xml、html、script、json、jsonp、text

20、專用文件加載和數據傳遞

$.getScript('test.js') //動態加載js文件

$.getJSON('test.json',function(response,status,xhr){}); //專用加載json文件

21、$.get()和$.post()合用$.ajax()

AJAX 是与服务器交换数据的一项技术,它可以在不重新加载整个网站的情况下更新网页的某部分。

$.ajax({

type:'POST', //傳送的類型

url:'text.php', //傳送的目標

data:{ //傳送的數據值

a:'man',

b:'snow'

}

success:fn(), //成功後執行函數

timeout:500, //設置超時

global:false, //不觸發全局事件

dataType:'json' //接收的數據類型

})

data:$('#f').serialize() //表單序列化,不僅能獲取數據還能獲取單選、複選、下拉の內容

返回の數據形式(Get用):FirstName=10&LastName=20

data:$('#f').serializeArray() //表單序列化,數據JSON化

Post用,為Object類型

獲取JSON化的內部數據:

x=$("form").serializeArray();

$.each(x, function(i, field){

$("#results").append(field.name + ":" + field.value + " ");

});

Post用數據轉換為Get用數據:$.param($('#f').serializeArray())

初始化參數,最開始的值

$.ajaxSetup({

url:'3.txt',

data:{b:'snow'},

type:'POST',

success:fn()

})

var obj={a:1,b:2,c:3}

$.param(obj); //將obj對象轉換成Get用

s.ajaxStart(fn()) //AJAX 請求發送前

s.ajaxStop(fn()) //AJAX 請求完成時

s.error(function([xhr,status,info]){}) //元素遇到錯誤(沒有正確載入)時

s.ajaxError(function([event,xhr,options,exc])) //對應局部變量error,AJAX 請求發生錯誤時

s.ajaxSuccess(function([event,xhr,options])) //對應局部變量success,AJAX 請求成功時

s.ajaxComplete(function(event,xhr,options)) //對應局部變量complete,AJAX 請求完成時(不論成功與否)

s.ajaxSend([function(event,xhr,options)]) //對應局部變量beforeSend,AJAX 請求開始時

局部變量用法:

s.ajax{

error:fn(),

success:fn(),

complete:fn(),

beforeSend:fn()

}

22、 jqXHR對象:

var jqXHR = $.ajax({

type : 'POST',

url : 'test.php',

data : $('form').serialize()

});

使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处:

1.可连缀操作,可读性大大提高;

2.可以多次执行同一个回调函数;

3.为多个操作指定回调函数;

jqXHR.done() //替代局部方法success 或全局方法ajaxSuccess

jqXHR.always() //替代局部方法complete 或全局方法ajaxComplete

jqXHR.fail() //替代局部方法error 或全局方法ajaxError

s.when() //執行一個或多個對象の回調函數(回调函数就是一个通过函数指针调用的函数)

23、 工具函數

$.trim() //刪除左右兩邊的空格

$.each(array,function(index,value){}) //遍歷數組array,index為索引,value為值

$.each(object,function(name,fn){}) //遍歷對象object,name為名稱,fn為方法

$.grep(arr, function (element, index) { //返回數組中の值小於6,索引小於5の數據

return element < 6 && index < 5; //返回一數組,index 是从 0 开始计算的

});

$.map(arr, function (element, index) { //修改數據,返回一數組

if (element < 6 && index < 5) {

return element + 1;

}}

$.inArray(1, arr); //查找arr數組中數據為1のindex

$.merge(arr1,arr2); //合併數組1和數組2

$.unique(object) //刪除重複調用的DOM對象

$('li').toArray() //合并多个 DOM 元素组成数组

$('div').get() //獲取所有的div

23、 判斷函數

$.isArray(obj) //判断是否为数组对象,是返回 true

$.isFunction(obj) //判断是否为函数,是返回 true

$.isEmptyObject(obj) //判断是否为空对象,是返回 true

$.isPlainObjet(obj)   //判断是否为纯粹对象,是返回 true

$.contains(obj) //判断 DOM 节点是否含另一个 DOM 节点,是返回 true

$.type(data) //判断数据类型

$.isNumeric(data) //判断数据是否为数值

$.isWindow(data) //判断数据是否为 window 对象

$.proxy(obj,'test') //外部觸發,指針調用,'test'中調用的this 指向obj

24、 自定義插件:

1.插件名推荐使用 jquery.[插件名].js,以免和其他 js文件或者其他库相冲突;

2.局部对象附加 jquery.fn 对象上,全局函数附加在 jquery 上;

3.插件内部,this 指向是当前的局部对象;

4.可以通过 this.each 来遍历所有元素;

5.所有的方法或插件,必须用分号结尾,避免出现问题;

6.插件应该返回的是 jQuery 对象,以保证可链式连缀;

7.避免插件内部使用$,如果要使用,请传递 jQuery 进去。

jQuery基礎知識的更多相关文章

  1. BootStrap基礎知識

    BootStrap基礎知識 1. .lead //突出 .text-left //文字居左 .text-right //文字居右 .text-center //文字居中 .text-justify / ...

  2. JavaScript基礎知識

    JavaScript基礎知識 1.標籤組使用 <script charset='utf-8' //設置字元集 defet //使腳本延遲到文檔解析完成,Browser已忽略 language=' ...

  3. CSS1-3基礎知識

    CSS1-3基礎知識 1.css排版 css在html內排版: <style type='text/css'> 標記名{} .類型名{} #ID名{} 標記名,.類型名,#ID名{} &l ...

  4. Python开发 基礎知識 (未完代補)

    一.Python基本知識 1.Python屬高階語言,所編築的是字節碼 2.一般狀態statement 終止於換行,如需使用多數行編寫,可在行末加上 \,以表延續 但在 parentheses ( ) ...

  5. HTML 4.01+5基礎知識

    HTML 4.01+5 1.Html結構:html>head+body 2.Html快捷鍵:!加Tab(在sublime中) 3.雙標籤: ①常用標籤 h1.h2.h3.h4.h5.h6 p.c ...

  6. Linux基礎知識 —— open&close

    下面說一下在用戶空間調用open/close/dup跟驅動中的open和release的對應. 下面是測試驅動: #include <linux/module.h> #include &l ...

  7. Python开发 基礎知識 3.類別&方法 (bool & str) (未完待續)

    類別 可使用type()查看 內建 [ 布爾:bool (Boolen) 字串:str (String) 數字:int (Integer) 小數:float 列表:list 元祖:tuple 字典:d ...

  8. Python开发 基礎知識 2.變量 ( *arg, **kwargs )

    變量 *args 和 **kwargs ( *和**為本體,名稱為通俗的名稱約定 ) *args 用於函式定義. 可將不定數量的參數傳遞給一個函數,傳入函式的引數,會先以Tuple物件收集,再設定給參 ...

  9. Python 基礎 - 認識模塊

    什麼是模塊?簡單說就是別人寫好了一堆功能,封裝在一起. 模塊有分二種,一個是之前有提到的 標準庫,就是不需要透過額外的安裝就有的模塊 ,另一個叫 第三方庫,需要另外安裝才能使用的模塊 #!/usr/b ...

随机推荐

  1. tensorflow笔记(四)之MNIST手写识别系列一

    tensorflow笔记(四)之MNIST手写识别系列一 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7436310.html ...

  2. Linux中的定时任务at、crontab

    at at命令可以用来在某一时段执行一次任务,只会执行一次,不会重复执行. at命令是由atd服务来控制的,使用之前先查看atd服务是否正常: $ /etc/init.d/atd status * a ...

  3. web前端笔记整理---CSS

    一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...

  4. Android笔记: 在Eclipse环境下使用Genymotion模拟器

    1.为什么用Genymotion? Genymotion使用x86构架的android系统,在PC上跑起来速度快的飞起,部署速度比真机还快,还有谁? 2.下载Genymotion. Genymotio ...

  5. [js高手之路]设计模式系列课程-单例模式实现模态框

    什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...

  6. LaTeX的图片插入及排版

    LaTeX中一般只直接支持插入eps(Encapsulated PostScript)格式的图形文件, 因此在图片插入latex文档之前应先设法得到图片的eps格式的文件. UNIX下的各种应用软件都 ...

  7. Python+Requests接口测试教程(1):Fiddler抓包工具

    本书涵盖内容:fiddler.http协议.json.requests+unittest+报告.bs4.数据相关(mysql/oracle/logging)等内容.刚买须知:本书是针对零基础入门接口测 ...

  8. MySQL(四)之MySQL数据类型

    一.数据类型概述 MySQL的数据类型有大概可以分为5种,分别是 整数类型.浮点数类型和定点数类型.日期和时间类型.字符串类型.二进制类型.现在可以来看看你对这5种类型的熟悉程度,哪个看起来懵逼了,那 ...

  9. [PSIDE]PeopleSoft PSIDE无法启动因为缺失MSVCR100.dll解决办法

    “The program can’t start because MSVCR100.dll is missing from your computer” 当开发工具是绿色版的时候,在打开PSIDE时很 ...

  10. 浅谈如何用Java操作MongoDB

    NoSQL数据库因其可扩展性使其变得越来越流行,利用NoSQL数据库可以给你带来更多的好处,MongoDB是一个用C++编写的可度可扩展性的开源NoSQL数据库.本文主要讲述如何使用Java操作Mon ...