jquery基礎之筆記（全）

jquery基礎之筆記（全）

var x = 42; console.log( x ); var message = (function( x ){  return function() {    console.log( x is  + x );  }})( x ); message();x = 12; console.log( x ); message();----------------------p47 自執行匿名函數 （）//對象  p42$.extend(obj1,obj2,obj3)//合并$.extend({},obj)//複製$.extend(true,{},obj)//深度複製//數組$.makeArray(obj);//對象轉換數組$.inArray();//指定數組是否存在某個值;不存在返回-1$.unique();//從DOM元素的素組中移除重複元素obj1.concat(obj2)//obj2數組串連到obj1數組var numArray = [1,2,3,4];          $.each( numArray, function( index, value ){              value = value * 2;              console.log( index is:+index+ new value is: + value );          }); //遍曆each與map類似$.each(數組，回呼函數);//回呼函數第一個參數為索引，第二位元素值$.map(數組，回呼函數);//回呼函數第一個參數為元素值，第二位索引//$.queue() 隊列先進先出,$.queue(function(){$(this).push(obj);$(this).pop(obj);$(this).clearQueue();//清除所有函數$(this).dequeue();//移除一個函數並執行}) //$.contains(容器節點，目標節點)//容器節點是否是目標節點的子節點//$.now()；目前時間==(new Date).getTime()//if($.support.ajax){}//檢查瀏覽器是否支援ajax請求,.support()//eval()執行任意js代碼,eval()執行的局部上下文//$.globalEval()執行全域上下文//鏈式操作  p72//屬性選取器  p85$([attributeName='string2match']);$([attributeName^='str']);//匹配str開頭所有元素$([attributeName$='str']);//匹配str結尾所有元素$([attributeName*='str']);//包含str所有元素$([attributeName~='str']);//包含str所有元素(包含空格隔開的，如：xxx str)//複式屬性選取器 var n = $(form[name$='Office1']form[name^='admin']).length;//位置選取器$(li:even) //返回偶數成員值,0也是偶數li:odd   //奇數li:first //第一個元素 li:last  //最後一個li:eq(3) //返回第四個li:gt(2)//返回匹配集合索引大於2的所有元素li:lt(3)//小於3//過濾選取器:animated //選擇當前正在執行動畫所有元素:header //選擇所有標題元素 如：h1,h2,h3:not //選擇與選取器不匹配元素//過濾表單元素      $(function(){        var n1 = $(input).length;//xuaninput的所有元素        var n2 = $(:input).length;//包含dom(input,textarea,select,button)所有元素         var n3 = $(form > *).length;//表單內所有元素        var n4 = $(:text).length;//屬性為text所有        var n5 = $(input[type='text']).length;//屬性為text所有        console.log(n1 + ,+ n2 +,+ n3 + , + n4 + , + n5);      });         

//可見度過濾器 jquery根據元素offsetWidthoffsetHeight屬性判斷一個元素是否可見 如果這個2個屬性都為0，jquery認為該元素是隱藏， 元素樣式為display:block,display:none jquery檢測這些 $(function(){ var numInv = $(:text:hidden).length; //所有隱藏 var numVis = $(:text:visible).length;//所有可見 console.log(numInv);//1 console.log(numVis);//1 });//內容過濾器 :contains() $(function(){ var jennies = $(p:contains('jenny')).length; console.log(jennies); // returns 2 });

jenny smith

jennyjones

jim bob

//：has() $(function(){ var jennies = $(p:contains('jenny')).length; console.log(jennies); // returns 2 var hasdoemo = $(div:has('p')).attr(id);//在該元素的後代元素 中至少包含一個與指定的選取器匹配的元素 console.log(hasdoemo); //lt });

jenny smith

jennyjones

jim bob

afdfd//不包含任何內容 :empty() $(function(){ var nothing = $(p:empty).length; console.log(nothing); //returns 1 }); div>

 

something here

//:parent() 選擇具有子項目的元素 $(function(){ console.log($(div:parent).attr(id));//gt });afdfd

jenny smith

jennyjones

jim bob

////根據關係進行過濾 <script> $(function(){ console.log( $(div span:first-child) ) // 選擇每個父元素第一個//[span#turkey, span#bear, span#martian] console.log( $(div span:last-child) ) // 選擇每個父元素最後一個//[span#hawk, span#horse, span#martian] console.log( $(div span:only-child) ) // 選擇每個父元素只有唯一//[span#martian] console.log( $(div span:nth-child(2)) ) //每個父元素第n個 //[span#chicken, span#rabbit] console.log( $(div span:nth-child(2n+1)) ) //n=0.....n//[span#turkey, span#parrot, span#hawk, span#bear, span#fox, span#horse, span#martian] console.log( $(div span:nth-child(even)) )//[span#chicken, span#pigeon, span#rabbit, span#monkey] }); </script>Turkey Chicken Parrot Pigeon Hawkbear rabbit fox monkey horsemartian//使用者自訂選取器 <script> $(function(){ // Define custom filter by extending $.expr[:] $.expr[:].greenbg = function(element) { return $(element).css(background-color) === green; }; var n = $(:greenbg).length; console.log(There are + n + green divs); }); </script>   //事件 //bind(),unbind(), live(),die();delegate()，undelegate()//還不存在的一個元素繫結一個事件處理 程式 p121 bind與live區別，運行時產生使用live //live與delegate區別是，delegate可以連結調用 //.one() 時間處理一次 //.trigger(”click“) 匹配所有click事件並存執行 //.triggerHandler(click) 匹配click事件執行第一個匹配事件處理並不冒泡 //.on(func),.off(func) 完全可以替代之前的live,bind,delegate方法 //p154 再研究 modernizr datalink //$.offset() //元素相對文檔定位， 返回css對象 再研究 p159 //$.position() //元素相對父容器元素定位 //visibility 與 display 區別 visibility:hidden 存在文檔流中,display:none 不存在 //e.stopPropagation();//停止事件 //slideUp,slideDown(fast,xx,回調)；//p162 $(function(){ $( div#message ).click( function(e){ e.stopPropagation(); console.log( $(div#message).width()+ + $(div#message).height()); // $( div#message).slideUp( 'fast' ); $( div#message).fadeIn(); }); $( document ).click(function(){ // $( div#message ).slideDown( 'fast' ); $( div#message ).fadeOut(); }); }); //////// $(function(){ $( document ).click( function(event){ $( div#box ).animate({ left: '+=100px' //注意 }, 200); }); });