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); }); </script> <form name="" method="post"> <input type="text" /> <input type="text" /> <input type="text" /> <button> </form> <button> //可见性过滤器 jquery根据元素offsetWidth\offsetHeight属性判断一个元素是否可见 如果这个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 }); <form name="" method="post"> <input type="text" name="text1" style="display:none;"/> <input type="text" name="text2" style="offsetWidth:0; offsetHeight:0;"/> <input type="text" name="text3" style="display:block;/> </form> //内容过滤器 :contains() $(function(){ var jennies = $("p:contains('jenny')").length; console.log(jennies); // returns 2 }); <p>jenny smith</p> <p>jennyjones</p> <p>jim bob</p> //:has() $(function(){ var jennies = $("p:contains('jenny')").length; console.log(jennies); // returns 2 var hasdoemo = $("div:has('p')").attr("id");//在该元素的后代元素 中至少包含一个与指定的选择器匹配的元素 console.log(hasdoemo); //lt }); <div id="gt"> <p>jenny smith</p> <p>jennyjones</p> <p>jim bob</p> </div> <div id="lt"> afdfd</div> //不包含任何内容 :empty() $(function(){ var nothing = $("p:empty").length; console.log(nothing); //returns 1 }); div> <p></p> <p>something here</p> </div> //:parent() 选择具有子元素的元素 $(function(){ console.log($("div:parent").attr("id"));//gt }); <div id="lt">afdfd</div> <div id="gt"> <p>jenny smith</p> <p>jennyjones</p> <p>jim bob</p> </div> ////根据关系进行过滤 <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> </head> <body> <div> <span id="turkey">Turkey</span> <span id="chicken">Chicken</span> <span id="parrot">Parrot</span> <span id="pigeon">Pigeon</span> <span id="hawk">Hawk</span> </div> <div> <span id="bear">bear</span> <span id="rabbit">rabbit</span> <span id="fox">fox</span> <span id="monkey">monkey</span> <span id="horse">horse</span> </div> <div> <span id="martian">martian</span> </div> //用户自定义选择器 <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> </head> <body> <div style="width:10; height:10; background-color:green;"></div> <div style="width:10; height:10; background-color:black;"></div> <div style="width:10; height:10; background-color:blue;"></div> </body> //事件 //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); }); });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。