js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

时间:2022-04-12 20:11:05

标记用

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"); //
}

写法好糟糕了 希望大神看到能指点一二