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

最初的想法只是想要添加一个点击事件就可以跳到设定的窗口。

本身就是把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)就可以打开新的窗口呢

原文地址:https://www.cnblogs.com/yohe/p/12231564.html

时间: 2024-07-29 05:36:54

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

js|jq获取兄弟节点,父节点,子节点

08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous = test.previousSibling; // 上一个兄弟节点 var next = test

使用JS/JQ获取iframe里面的元素

首先实现父级通过iframe访问子级DOM元素有以下几点需要特别注意的 1,需要在服务器的情况下访问,可以使用本地服务器 2,需要使用入口函数(当初被这个坑惨了) 3,这种方法跨域访问不了 >*使用本地服务器 首先建立两个文件分别命名为父级parantN.html和子级Child.html两个html文件,先看看html文件代码. 父级parantN.html <iframe id='myIframe' name="myIrame" src="Child.html

Python网络编程小例子:使用python获取网站域名信息

Whois简介 whois(读作"Who is",非缩写)是用来查询域名的IP以及所有者等信息的传输协议.简单说,whois就是一个用来查询域名是否已经被注册,以及注册域名的详细信息的数据库(如域名所有人.域名注册商).通过whois来实现对域名信息的查询.早期的whois查询多以命令列接口存在,但是现在出现了一些网页接口简化的线上查询工具,可以一次向不同的数据库查询.网页接口的查询工具仍然依赖whois协议向服务器发送查询请求,命令列接口的工具仍然被系统管理员广泛使用.whois通常

一个小例子理解js异步加载

前几天笔试某公司有这样一道题.编写一个javascript函数,可以在页面上异步加载js,在加载结束后执行callback,并在IE和chrome下可以执行. 就这个题我写了一个DOM方法异步加载js的例子,可以给对于异步不了解的朋友参考感受一下. 众所周知,js是一种单线程的语言,它的Event Loop机制可以看一下阮一峰的这篇博客,讲解的很好 http://www.ruanyifeng.com/blog/2014/10/event-loop.html 下面看一下我写的例子 1 <!DOCT

js,JQ获取短信验证码倒计时

按钮 <a href="javasript:void(0);"onclick="settime(this);">获取手机验证码</a> 倒计时js <script> var countdown=60; function settime(obj) { if (countdown == 0) { obj.getAttributeNode('onclick').value ="settime(this);"; obj

js之获取html标签的值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input id='user' type='text' /> //绑定getData函数 <input type="but

js jq获取浏览器各种高度

document.body.clientWidth; //网页可见区域宽(body) document.body.clientHeight; //网页可见区域高(body) document.body.offsetWidth; //网页可见区域宽(body),包括border.margin等 document.body.offsetHeight; //网页可见区域宽(body),包括border.margin等 document.body.scrollWidth; //网页正文全文宽,包括有滚动

js小例子(标签页)

运用js写的一个小例子,实现点击不同的标签出现不同的内容: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta chaset="utf-8"> 5 <script> 6 function nav(obj, x) 7 { 8 var a = obj.parentNode.parentNode.children; 9 for(var i =0;i<a.length;i++) { 10 a[

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g