锚点

最新推荐文章于 2023-06-30 09:18:09 发布

梦jenny

最新推荐文章于 2023-06-30 09:18:09 发布

阅读量592

点赞数

分类专栏： JAVASCRIPT 文章标签：锚点 js调用

本文链接：https://blog.csdn.net/lulalahappy123/article/details/44855883

版权

JAVASCRIPT 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

锚点

锚点就是点击链接，到页面特定位置，可以用<a>的name属性；也可以根据任意标签的id值；但是有一点需要注意，

只使用id属性当作锚点时,有个重要的缺点值得一提,那就是某些古老的浏览器并不支持这个方法.哦喔,在标识你自己的锚点时这的确是个必须考虑的问题

所以可以将name和id结合起来，

XHTML1.0不推荐使用name属性,因此必须考虑向后兼容.

向前兼容用name 向后兼容用id

+++++++++++++++++++++++++++++++++++++

实现一个简单的router，通过url可以找到相应的Action

预备知识
锚点# 的含义，通过锚点来做router的输入

预计工作量
10分钟

具体描述
通过URL中#后面的内容，去执行相应的代码
例如
URL为http://localhost/index.html#test时，执行test()
URL为http://localhost/index.html#test/a时，执行test(a)
URL为http://localhost/index.html#test/a/b时，执行test(a, b)
注意异常处理

鄙人不才，以现在的菜鸟水平只能做到这些：不知道是不是题意的目的

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
        <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>锚点</title>
 <style type="text/css">
     a{
         background-color: cornsilk;
         border: 1px solid;
         padding: 2px;
     }
 </style>
</head>
<body>

<a href="#test" οnclick="dianji()">点a</a>
<p>文字文字</p>
<script type="text/javascript">
function dianji(){
var a=document.getElementsByTagName("a");
var ele=[];
var display=[];
    for(var i = 0;i < a.length; i++) {
        var s= a[i].getAttribute('href');
        ele=s.split('/');
        if(ele.length>1){
            for(var j=1;j<ele.length;j++){
               display.push(ele[j]);
            }
        }else {
            display.push("没有参数");
        }
        test(display);
    }
}
    function test(str){
        alert(str)
    }
</script>
</body>
</html>

期间发现了两个问题：用过渡型DOCTYPE定义，数组的for循环时候小于号"< "报错

另一个是js定义了同名函数，即使参数个数不同，也只调用最后一个函数。

引申问题：用js通过url传参把数据从一个页面传到另一个页面

在html页面中怎样通过js或其他方法获得另一个页面通过URL方式传来的参数？点击打开链接

总结就是window.location.href=url 点击打开链接

另一个页面用js 把url切开字符串，如split

以后我好好研究一下location的问题

另一个方案

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<a href="#test" >
    <div>
        for anchor test
    </div>
</a>
<a href="#test/a" >
    <div>
        for anchor test\a
    </div>
</a>
<a href="#test/a/b">
    <div>
        for anchor test\a\b
    </div>
</a>
<div style="height:100px;line-height:100px;background-color:indianred">
    <a name="test" href="#test" id="test" οnclick="first(this)">i am anchor!</a>
</div>
<div style="height:100px;line-height:100px;background-color:dodgerblue">
        <a name="test/a" href="#test/a" id="test\a"οnclick="first(this)">i am anchor for test a!</a>
    </div>
    <div style="height:100px;line-height:100px;background-color:darkseagreen">
        <a name="test/a/b" href="#test/a/b" id="test\a\b" οnclick="first(this)">i am anchor for test a b!</a>
    </div>
<script>
    function test(){
        alert("no parameter");
    }

    function test1(ab){
        alert("a="+ab);
    }
    function test2(a,b){
        alert("a="+a+"b="+b);
    }
    function first(e) {
        var address = window.location.hash.slice(1);
        var value = address.split("/");

        if (value.length==1) {
            test();
        }
        if(value.length==2){
            test1.apply(this,value.slice(1));
        }
        if(value.length==3){
            test2.apply(this,value.slice(1));
        }
    }


</script>
</body>
</html>

运用 apply进行多参数多函数访问

JS关于多个函数多个参数如何动态调用，apply的灵活应用

JS回调函数,常用于ajax，获取到服务端返回的数据后执行回调.

回调函数可以继续扩展一个函数的功能，可以是程序非常灵活。
比如：
function showDiv(callback){
  $("#div1").show();
  callback($("#div1"));
}

showDiv(function($div){
  $div.text("hello world");
});
//原本showDiv的功能就是现实一个div，加了callback函数当参数后就可以在执行完show之后改变div中的文字。

一般来说，callback函数用在异步中的例子比较多，因为在异步调用中，只能通过回调函数继续执行某个动作。
例如：
function myThread(callback){
  return setTimeout(1000*10,function(){
    $("#div").append("<p>hello</p>");//10秒后在div中加一个行，然后在执行callback函数
    callback();
  });
}

梦jenny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锚点

锚点锚点就是点击链接，到页面特定位置，可以用的name属性；也可以根据任意标签的id值；但是有一点需要注意，只使用id属性当作锚点时,有个重要的缺点值得一提,那就是某些古老的浏览器并不支持这个方法.哦喔,在标识你自己的锚点时这的确是个必须考虑的问题所以可以将name和id结合起来，XHTML1.0不推荐使用name属性,因此必须考虑向后兼容.向前兼容用name 向后兼容
复制链接

扫一扫