js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV
标记用
js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了
例子：
/* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele 改变元素 * @index 元素索引 * @color 100% 背景颜色 * */ function addW100Bg(ele,index,color,url){ /*获取list-bar*/ $bar= $(ele).eq(index).html(); /*设置list-bar*/ $(ele).eq(index).html('<div style="width: 1200px; margin: 0px auto; overflow: hidden;">'+'<a href='+url+ ' target="_blank">'+$bar+'</a>'+'</div>'); $(ele).eq(index).css({"width":"100%","background":color}); } addW100Bg(".list-bar",0,"#e1ebf4","http://www.no5.com.cn/brandstore-291.html");
下面就是常用的 单位里经常要操作DOM 页面模板 不过定的很死
<div class="list-box"> <div class="list-bar"></div> <dl>......</dl> <dl>......</dl> <div class="list-bar"></div> <dl>......</dl> <dl>......</dl> ....... </div>
只能动态的添加DOM元素来改变页面
要的效果就是中间1200px居中 1200下面的img添加a跳转 父级100% 第一个函数实现的就是这个效果
太麻烦了 直接把JS所有的都贴上来 省得以后找不到
var ClsSpecialTopicAdditionalJS = function () { // function marginleft(){ var num = $('.prod-box').length; for(i=0;i < num;i++){ if(i % 4 == 0){ $('.prod-box').eq(i).css({"marginLeft":"60px"} ); } } } marginleft(); function addAfter(){ /*头部*/ var head='<div class="w100" id="head">' + '<div class="w1200">' + '<div class="banner-img"><img src="http://photo.no5.com.cn/publish/minganji/free_02.jpg" width="1200" height="481" alt=""/></div>' + ' <ul id="nav-fix">' + '<li><a href="#s1" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_04.jpg" width="131" height="84" alt=""/></a></li>' + ' <li><a href="#ss0" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_05.jpg" width="131" height="84" alt=""/></a></li>' + ' <li><a href="#ss1" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_06.jpg" width="134" height="84" alt=""/></a></li>' + '<li><a href="#ss2" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_07.jpg" width="126" height="84" alt=""/></a></li>' + '<li><a href="#ss3" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_08.jpg" width="129" height="84" alt=""/></a></li>' + '<li><a href="#ss4" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_09.jpg" width="134" height="84" alt=""/></a></li>' + '<li><a href="#ss5" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_10.jpg" width="134" height="84" alt=""/></a></li>' + '<li><a href="#ss6" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_11.jpg" width="136" height="84" alt=""/></a></li>' + '<li><a href="#ss7" target="_self"><img src="http://photo.no5.com.cn/publish/minganji/free_12.jpg" width="145" height="84" alt=""/></a></li>' + '</ul>' + '<a href="http://www.no5.com.cn/product/4603.html" target="_blank">' + '<img src="http://photo.no5.com.cn/publish/minganji/free_14.jpg" width="262" height="434" alt="" id="s1"/></a>' + '<a href="http://www.no5.com.cn/product/22278.html" target="_blank">' + '<img src="http://photo.no5.com.cn/publish/minganji/free_15.jpg" width="360" height="434" alt=""/></a>' + '<a href="http://www.no5.com.cn/product/24533.html" target="_blank">' + '<img src="http://photo.no5.com.cn/publish/minganji/free_16.jpg" width="283" height="434" alt=""/></a>' + '<a href="http://www.no5.com.cn/product/17734.html" target="_blank">' + '<img src="http://photo.no5.com.cn/publish/minganji/free_17.jpg" width="295" height="434" alt=""/></a>' + '<a href="http://www.no5.com.cn/product/27606.html" target="_blank">' + '<img src="http://photo.no5.com.cn/publish/minganji/free_18.jpg" width="262" height="422" alt=""/></a>' + ' <a href="http://www.no5.com.cn/product/19867.html" target="_blank">' + '<img src="http://photo.no5.com.cn/publish/minganji/free_19.jpg" width="360" height="422" alt=""/></a>' + '<a href="http://www.no5.com.cn/product/7576.html" target="_blank">' + ' <img src="http://photo.no5.com.cn/publish/minganji/free_20.jpg" width="288" height="422" alt=""/></a>' + '<a href="http://www.no5.com.cn/product/23832.html" target="_blank">' + '<img src="http://photo.no5.com.cn/publish/minganji/free_21.jpg" width="290" height="422" alt=""/></a>' + '</div>' + ' </div>'; $(".banner-box").after(head); } addAfter(); function addJumpID() { for (i = 0, ii = $('.list-bar').length; i < ii; i++) { $('.list-bar').eq(i).attr({"id": "ss" + i, "name": "ss" + i}) } } addJumpID(); $(window).scroll( function(){ if( $(window).scrollTop() > 700||$(document).scrollTop() > 700){ $('#nav-fix').css({"position":"fixed","top":"0px","z-index":"999"}); }else{ $('#nav-fix').css({"position":"relative","top":"0px","z-index":"999"}); } } ) /* 指定元素集合 添加父级元素 * @ele 获取元素 * @stat 开始位置 * @end 结束位置 * @return html element */ function addW1200(ele,star,end){ var content = $(ele).slice(star,end).wrapAll('<div style="width: 1200px; overflow: hidden; margin: 0px auto;"></div>'); } addW1200(".prod-box",0,8); addW1200(".prod-box",8,16); addW1200(".prod-box",16,24); addW1200(".prod-box",24,32); addW1200(".prod-box",32,40); addW1200(".prod-box",40,44); addW1200(".prod-box",44,52); addW1200(".prod-box",52,59); /*宽度改变100%*/ function addW100(ele){ $box = $(ele).eq(0).html(); $(ele).eq(0).html('<div style="width:100%; margin: 0px auto; overflow: hidden;">'+$box+'</div>'); $(ele).eq(0).css({"width":"100%"}); } addW100(".list-box"); /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele 改变元素 * @index 元素索引 * @color 100% 背景颜色 * */ function addW100Bg(ele,index,color,url){ /*获取list-bar*/ $bar= $(ele).eq(index).html(); /*设置list-bar*/ $(ele).eq(index).html('<div style="width: 1200px; margin: 0px auto; overflow: hidden;">'+'<a href='+url+ ' target="_blank">'+$bar+'</a>'+'</div>'); $(ele).eq(index).css({"width":"100%","background":color}); } addW100Bg(".list-bar",0,"#e1ebf4","http://www.no5.com.cn/brandstore-291.html"); addW100Bg(".list-bar",1,"#c2e3f8","http://www.no5.com.cn/brandstore-44.html"); addW100Bg(".list-bar",2,"#f2f7f9","http://www.no5.com.cn/brandstore-267.html"); addW100Bg(".list-bar",3,"#e5f8fc","http://www.no5.com.cn/brandstore-986.html"); addW100Bg(".list-bar",4,"#d7ebf4","http://www.no5.com.cn/brandstore-684.html"); addW100Bg(".list-bar",5,"#eaeaea","http://www.no5.com.cn/brandstore-1258.html"); addW100Bg(".list-bar",6,"#ffffff","http://www.no5.com.cn/brandstore-42.html"); addW100Bg(".list-bar",7,"#ffffff","http://www.no5.com.cn/brandstore-950.html"); /*父元素下的子元素删除 * @parent 父级元素 * @son 删除的子元素 * */ function eleRemove(parent,son){ $(parent).find(son).remove(); } eleRemove(".nav-layer","ul"); // }
写法好糟糕了 希望大神看到能指点一二
