美文网首页
小例子-使用JS/JQ获取a标签的href网址

小例子-使用JS/JQ获取a标签的href网址

作者: 斜阳身影长 | 来源:发表于2020-01-23 22:29 被阅读0次

    最初的想法只是想要添加一个点击事件就可以跳到设定的窗口。
    本身就是把window.location.href = href添加进事件里面就可以解决了。后面自己把自己搞糊涂了。
    这里主要是说使用JS和JQ获取a标签的href网址,使用比较简单,基本就是拿来用就可以了。
    先看看html部分的代码

     <div>
        <a id="demo" href="https://www.baidu.com"></a>
      </div>
      <p id="p">点击跳转到百度</p>
    

    我把a标签嵌套在div里面,之后通过点击事件点击p标签“跳转到百度”这个按钮来获取href,之后通过新窗口打开百度网址,进入百度。

    以下是使用到的JS代码和JQ代码

      // 使用Js获取
        document.querySelector('#p').onclick = function () {
          var ahref = document.querySelector('#demo');
          window.open(ahref);//在新窗口打开
          window.location.href = ahref;//在原来窗口打开
        }
    
    
        // 使用JQ获取
        $('#p').click(function () {
          var hreF = $(this).prev().find('#demo').attr('href');
          window.open(hreF);//在新窗口打开
          window.location.href = hreF;//在原来的窗口打开
        })
    

    其实还有一个方法可以在原来的窗口打开新的网页
    和这个一样window.location.href = hreF
    这个方法是window.location.replace(hreF)
    都是在原来的窗口打开新的窗口,但是前者在打开新窗口之后可以返回,但是后者就不可以返回了。

    求大佬解答一个问题
    为什么我在服务器上面获取到地址后使用window.location.href = hreF打开不了新的窗口。
    但是使用这个之后window.location.replace(hreF)就可以打开新的窗口呢

    相关文章

      网友评论

          本文标题:小例子-使用JS/JQ获取a标签的href网址

          本文链接:https://www.haomeiwen.com/subject/sbcazctx.html