网站设计论文的摘要,百度销售是做什么,新手如何开微商城店,全屋定制设计软件2019独角兽企业重金招聘Python工程师标准 1.DOM筛选#xff0c;遍历查找相关方法 2.选择器中特殊符号的处理 3.改写原生js例子 a.表格隔行变色 b.tab标签页4.选择器的优化准则(初级)筛选 eq()选择指定索引的元素 filter(表达式)筛选指定表达式的元素first… 2019独角兽企业重金招聘Python工程师标准 1.DOM筛选遍历查找相关方法 2.选择器中特殊符号的处理 3.改写原生js例子 a.表格隔行变色 b.tab标签页 4.选择器的优化准则(初级) 筛选 eq()选择指定索引的元素 filter(表达式)筛选指定表达式的元素first()选择第一个元素last()选择最后一个元素is()检测是否元素返回布尔值has()保留包含特定后代的元素去掉那些不含有指定后代的元素not()从匹配的元素集合中移除指定的元素。map()将一组元素转换成其他数组slice()根据指定的下标范围选取匹配的元素集合script// $(p:eq(0)).css(background,red);// $(p).filter(#second).css(background,red);// $(p).first().css(background,red);// $(p).last().css(background,red);/* $(p).click(function(){if($(this).is(.first)){$(this).css(background,red);}});*/// $(p).not(#second).css(background,red);// // $(p).slice(-2,-1).css(background,red);/script body form action input typetext value111 / input typetext value222 / input typetext value333 / /form p/p script var arr $(input).map(function(){ return $(this).val() }).get().join(,); alert(typeof arr); $(p).html(arr); /script/body 遍历查找a.children()选取子元素 b.parent()选取父元素c.parents()选取祖先元素d.parentsUntil()所有的父辈元素直到遇到匹配的那个元素为止 1.6 //与有参数的parents()等价e.offsetParent()返回父元素中第一个其position设为relative或者absolute的元素,仅对可见元素有效 f.next()选择后面紧临的兄弟元素g.nextAll()查找当前元素之后所有的同辈元素h.nextUntil()所有的同辈元素直到遇到匹配的那个元素为止 1.6i.prev()前一个兄弟元素j.prevAll()前面所有的兄弟元素k.prevUntil()所有的兄弟元素直到遇到匹配的那个元素为止 1.6!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlnshttp://www.w3.org/1999/xhtml xml:langenhead meta http-equivContent-Type contenttext/html;charsetUTF-8 titledemo3/title script srcjquery.js/script/headbody div idouter styleposition:relative outer div idwrap style wrap div111111111/div div222222222/div p idp1我是span第1个P/span标签/p p idp2我是第2个P标签/p p我是第3个P标签/p div我是div标签/div /div /div script // $(#wrap).children(p).css(background,red); // $(#p1).parent().css(background,red); // $(#p1).parents(#wrap).css(background,red); // //$(#p1).offsetParent().css(background,red); //$(#p1).next().css(background,red); //$(#p1).nextAll(p).css(background,red); // //$(#p2).prev().css(background,red); //$(#p2).prevAll(div).css(background,red); // //$(#p2).siblings(div).css(background,red); // //$(span).parent().css(background,red).end().css(background,#abcdef); //$(span).css(background,#abcdef); // $(#p1).nextAll().addBack().css(background,red); /script/body/html l.sinlings()前后所有的兄弟元素 m.closest()从元素本身开始在DOM 树上逐级向上级元素匹配并返回最先匹配的祖先元素n.contents()元素的子元素包括文字和注释节点o.end()终止在当前链的最新过滤操作并返回匹配的元素的以前状态p.andself()1.8版本中已废弃q.addBack()添加堆栈中元素集合到当前集合一个选择性的过滤选择器r.each()遍历一个jQuery对象为每个匹配元素执行一个函数script srcjquery.js/script/headbody form action input typetext name id value第1个input的值 / input typetext name id value第2个input的值 / input typetext name id value第3个input的值 / input typetext name id value第4个input的值 / /form script /*$(input).each(function(){ alert($(this).val()); });*/ /script 特殊符号的处理 使用转义符body form action爱好 input typecheckbox namegender[] id value看书 / input typecheckbox namegender[] id value篮球 / input typecheckbox namegender[] id value编程 / input typesubmit value提交 /input typereset value重写 / /form script /* $(input[namegender\\[\\]]).click(function(){ alert($(this).val()); });*/ $(input[type\checkbox\]).click(function(){ alert($(this).val()); }); /script/body 改写实例 a.表格隔行变色//jsscript var oTable document.getElementById(table); var aTr oTable.getElementsByTagName(tr); //alert(aTr.length); for(var i0;iaTr.length;i){ if(i%21){ aTr[i].style.backgroundyellow; }else{ aTr[i].style.background#abcdef; } } /script//jqueryscript /*$(#table tr:even).css(background,#abcdef); $(#table tr:odd).css(background,yellow);*/ $(#table tr).filter(:even).css(background,#abcdef).end().filter(:odd).css(background,yellow); /scriptb.tab标签页//js!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlnshttp://www.w3.org/1999/xhtml xml:langenhead meta http-equivContent-Type contenttext/html;charsetUTF-8 title原生js的tab标签页/title style *{ padding: 0; margin: 0; } ul{ list-style-type: none; } body{ margin: 50px ; } #ul{ height: 30px; margin-bottom: 10px; } #ul li{ height: 30px; line-height: 30px; padding: 0 15px; border: 1px solid #abcdef; float: left; margin-right: 3px; cursor: pointer; } #ul li.current{ background: #abcdef; } #content div{ width: 300px; height: 200px; border: 1px solid #abcdef; display: none; } #content div.show{ display: block; } /style/headbody ul idul liphp/li liruby/li lipython/li /ul div idcontent divphp。。。。。。介绍/div divruby。。。。。。介绍/div divpython。。。。。。介绍/div /div script var ul document.getElementById(ul); var li ul.getElementsByTagName(li); var content document.getElementById(content); var div content.getElementsByTagName(div); for (var i 0; i li.length; i) { li[i].index i; li[i].οnclickfunction(){ for (var i 0; i li.length; i) { li[i].className; div[i].style.displaynone; }; this.classNamecurrent; div[this.index].style.displayblock; } }; /script/body/html//jqueryscript $(#ul li).click(function(){ //1、点击li的时候要切换样式 //$(this).addClass(current).siblings().removeClass(current); //2、根据li的索引值来确定哪个div显示其它div隐藏 //$(#contentdiv).eq($(this).index()).show().siblings().hide(); //$(this).addClass(current).siblings().removeClass(current).parent().next().children().eq($(this).index()).show().siblings().hide(); }); $(this).addClass(current).siblings().removeClass(current).parent().next().find(div).eq($(this).index()).show().siblings().hide(); }); /script jquery选择器的优化 1.优先使用id选择器2.在class选择器前添加标签名3.采用find(),而不使用上下文查找4.强大的链式操作比缓存更快5.从左至右的模型1.3版本更新 转载于:https://my.oschina.net/u/1455528/blog/219791
