• jQuery:基礎知識


    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=valuea

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

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

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

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

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

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

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

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

    $('li:not(.re)') //liclassre的元素

    $('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)') //選取classrediv元素

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

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

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

    --

    $('ul').has('re') //選取classrediv元素

    $('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 元素(n0算起)

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

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

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

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

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

    $('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下面所有classred的元素

    還可以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') //讓元素在c1c3之間來回切換

    $('#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#mHtml

    $('#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#mHtml

    $('#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外添加strong123放在#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') //只刪除所有#mID=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下提交時,只適用表單元素

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

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

    triggertriggerHandlerの區別

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

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

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

    triggerHandler不會冒泡,而trigger

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

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

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

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

    18s.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({

    '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.htmlclass=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,還可以傳到xmljsontext

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

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

    xmlhtmlscriptjsonjsonptext

    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])) //對應局部變量errorAJAX 請求發生錯誤時

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

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

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

    局部變量用法:

    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){}) //遍歷數組arrayindex為索引,value為值

    $.each(object,function(name,fn){}) //遍歷對象objectname為名稱,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數組中數據為1index

    $.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 进去。

  • 相关阅读:
    Luogu P4727-- 【HNOI2009】图的同构记数
    UOJ #390. 【UNR #3】百鸽笼
    Loj #2541「PKUWC2018」猎人杀
    BZOJ 1444:[JSOI2009]有趣的游戏
    CF895C: Square Subsets && 【BZOJ2844】albus就是要第一个出场
    [NOI2011]阿狸的打字机
    不要再搜啦,满足你的需要,封装保留小数点后两位
    react 中刷新,路由传参数丢失不存在了?
    字符串根据某个符号查找并截取
    react-swiper 如何实现滑动小卡片的移动?
  • 原文地址:https://www.cnblogs.com/mandongpiaoxue/p/7371711.html
Copyright © 2020-2023  润新知