js新手引导

来源：互联网发布：淘宝客推广如何收费编辑：程序博客网时间：2024/06/06 10:45

知识点

1、获取元素的父元素、子元素

=》js获取

var a = document.getElementById("dom");

var b = a.childNodes; //获取a的全部子节点；

var c = a.parentNode; //获取a的父节点；

var d = a.nextSibling; //获取a的下一个兄弟节点

var e = a.previousSibling; //获取a的上一个兄弟节点

var f = a.firstChild; //获取a的第一个子节点

var g = a.lastChild; //获取a的最后一个子节点

=》jq获取

$("span").parent()或者$("span").parent(expr)//找父亲节点,可直接使用也可添加具体条件如类名id名
$("span").parents(expr) //查找所有祖先元素，不限于父元素
$("span").children(expr) //返回直接的孩子节点，不会返回所有的子孙节点
$("span").contents() //返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本也会被作为一个jQuery对象返回，children()则只会返回节点
$("span").prev() //返回上一个兄弟节点，不是所有的兄弟节点
$("span").prevAll() //返回所有之前的兄弟节点
$("span").next() //返回下一个兄弟节点，不是所有的兄弟节点
$("span").nextAll() //返回所有之后的兄弟节点
$("span").siblings() //返回兄弟姐妹节点，不分前后
$("span").find(expr) //比如$("p").find("span"),是从p元素开始找,等同于$("p span").

2、字符串截取方法

.substring(start,stop)//返回两个指定下标之间的字符包括 start 处的字符，但不包括 stop 处的字符,不接受副参数

.slice(start,end)// 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符,如参数是负数-1 指字符串的最后一个字符

.substr(start,length)// ECMAscript 没有对该方法进行标准化，因此反对使用它。

3、见文章‘js时钟’date知识点

4、利用cookie，可实现第一次访问时才有新手引导。cookie是服务器添加到本地的，浏览器中只有fierfox支持本地添加cookie信息，因此可以用firefox进行本地测试。espires=’数据保留的时间‘

<script type="text/javascript">window.onload=function(){var oDiv1=document.getElementById('mask');var oDiv2=document.getElementById('searchTip');var aDiv=oDiv2.getElementsByTagName('div');var aA=oDiv2.getElementsByTagName('a');var aSpan=oDiv2.getElementsByTagName('span');//读取cookievar record=document.cookie.substring(5);//知识点2     if(record!='www.open.com.cn'){//如果用户是第一次访问，则有新手引导     oDiv1.style.display=aDiv[0].style.display='block';          //下一步功能实现     for(var i=0;i<aA.length;i++){    aA[i].index=i+1;//动态添加index属性    aA[i].onclick=function(){    this.parentNode.style.display='none';//知识点1     if(this.index!=5){       aDiv[this.index].style.display='block';     }else{    oDiv1.style.display='none';     }    }     }    //关闭按钮的功能实现for(var i=0;i<aSpan.length;i++){aSpan[i].onclick=function(){oDiv1.style.display='none';this.parentNode.style.display='none';} }//添加cookie//cookie是服务器添加到本地的，浏览器中只有fierfox支持本地添加cookie信息，可以用firefox测试var oDate=new Date();//知识点3oDate.setDate(oDate.getDate()+30);//获取当天的日期并加上30后赋给oDatedocument.cookie="name=www.open.com.cn;expires="+oDate;//expires=''表示记录的cookie的信息会在30天后清除，知识点4    }}</script>

<body><div id="mask"></div><div id="searchTip"><div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>    <div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>    <div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>    <div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>    <div class="stepE"><a>下一步</a></div></div></body>

<style>/*IE８以下浏览器都不支持 opacity css样式，可以使用IE自带的“滤镜”来实现，如下代码：filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);上面代码的作用设置为 70% 的透明。*/*{margin:0 auto; padding:0;}html,body{ height:100%;}body{ background:url(images/body.png) no-repeat top center;}#mask{ width:100%; height:100%; position:absolute; top:0; left: 0; background:#000; opacity: 0.5; filter:alpha(opacity=50); display: none;}#searchTip{width:980px;height:100%; position:absolute; top:0; left:50%; margin-left:-490px;}#searchTip a:hover,#searchTip span:hover{cursor: pointer;}#searchTip a{width:50px;padding:5px 17px; position: absolute;text-indent: -999px;overflow: hidden;}#searchTip span{ padding:2px 0; position: absolute;text-indent: -999px;overflow: hidden;filter:alpha(opacity=0);}.stepA{ background:url(images/guide11.png) no-repeat; width:745px; height:329px; position: absolute; top:130px; left:-10px; } .stepA a{ bottom:68px; right:165px;}.stepA span{top:148px; right:33px;}.stepB{ background:url(images/guide21.png) no-repeat; width:647px; height:405px; position: absolute; top:0px; right:9px;display: none;} .stepB a{ bottom:68px; right:410px;}.stepB span{top:200px; right:283px;}.stepC{ background:url(images/guide31.png) no-repeat; width:654px; height:257px; position: absolute; top:290px; left:320px;display: none;} .stepC a{ bottom:72px; right:163px;}.stepC span{top:48px; right:35px;}.stepD{ background:url(images/guide41.png) no-repeat; width:558px; height:348px; position: absolute; top:80px; left:160px; display: none;} .stepD a{ bottom:72px; right:163px;}.stepD span{top:139px; right:35px;}.stepE{ background:url(images/guide51.png) no-repeat; width:397px; height:342px; position: absolute; top:80px; left:260px;display: none; } .stepE a{ bottom:66px; right:155px;}</style>

0 0