js获取所点击<a>的href值

本文介绍了使用四种不同技术手段来获取网页中链接被点击时的URL地址:一是利用jQuery简化DOM操作;二是采用现代浏览器的querySelectorAll结合Array.prototype.forEach遍历所有链接;三是传统JavaScript循环遍历获取;四是重复第三种方法以示例说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//方式一

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
//获取当前点击的对象
    $('a').click(
        function() {
            console.log("当前URL为:", $(this).attr('href'));
        }
    );
</script>

//方式二

<script type="text/javascript">
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (link) {
        link.addEventListener('click', function () {
            console.log("当前URL为1:", this.href)
        })
    })
</script>

//方式三

<script type="text/javascript">
    var test = document.getElementsByTagName('a');
    for (var i = 0; i < test.length; i++) {
      test[i].onclick = function() {
          console.log("当前URL为2:",this.href);
      }
    }
</script>

//方式四

<script type="text/javascript">
    var test = document.getElementsByTagName('a');
    for (var i = 0; i < test.length; i++) {
      test[i].onclick = function() {
          console.log("当前URL为2:",this.href);
      }
    }
</script>

这是我前端的一个界面:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Contact</title> <link rel="stylesheet" type="text/css" href="css/style_mobile.css"> <script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script language="javascript" type="text/javascript" src="js/action.js"></script> </head> <body> <div id="container"> <div id="header"> <div id="logo">David Lanham</div> <ul> <li><a href="Index.html">Blog</a></li> <li><a href="Work.html">Work</a></li> <li><a href="About.html">About</a></li> <li><a class="active" href="Contact.html">Contact</a></li> </ul> </div> <div id="content"> <p class="content_text">Contact</p> <div id="from"> <tr><p class="font">Name<font color="#FF0000">*</font></p></tr> <tr><input class="input" type="text" name="name" id="name" ></tr> <tr> <p class="font">Email<font color="#FF0000">*</font></p></tr> <tr><input class="input" type="text" name="email" id="email"></tr> <tr> <p class="font">Message<font color="#FF0000">*</font></p></tr> <tr><textarea class="msginput" type="text" name="message" id="message"></textarea></tr> <tr><input class="button" type="button" value="SUBMIT" id="button"></tr> </div> </div> <div id="footer"> <div id="fttext"> <p>All illustrations on this site are from the very talented</p> <p> illustrator and designer David Lanham. Make sure to</p> <p>check out his work at <a href="#">DavidLanham.com.</a></p> </div> <div id="ftimage"> <a href="#"><img src="images/footer_baby.png"></a> </div> <div id="ft_text"> <p class="ftname">David Lanham</p> <p class="ftabout">I create beatufiul illustrations and designs.<a href="#">About me.</a></p> </div> <ul> <li><a href="#"><img src="images/footer_bird.png"></a></li> <li><a href="#"><img src="images/footer_ball.png"></a></li> <li><a href="#"><img src="images/footer_be.png"></a></li> <li><a href="#"><img src="images/footer_@.png"></a></li> <li><a href="#"><img src="images/footer_message.png"></a></li> </ul> </div> </div> </body> </html> 如何在点击SUBMI时发起POST请求
最新发布
08-09
<h1>注册信息</h1> <form action="action_page.php" method="get"> <label>姓名:</label><input type="text" placeholder="请输入真实姓名"> <br></br> <label>密码:</label><input type="password" placeholder="请输入密码"> <br></br> <label>确认密码:</label><input type="password" placeholder="请输入确认密码"> <br></br> <label>性别:</label> <label><input type="radio" name="gender"> 男</label> <label><input type="radio" name="gender" checked> 女</label> <br></br> <label>居住城市:</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> </select> <h2>教育经历</h2> <label>最高学历:</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br></br> <label>学校名称:</label><input type="text"> <br></br> <label>所学专业:</label><input type="text"> <br></br> <label>在校时间:</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> <br></br> <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> </select> <br></br> <h2>工作经历</h2> <label>公司名称:</label><input type="text"> <br></br> <label>工作描述:</label> <br> <textarea></textarea> <br></br> <input type="checkbox"><label>已阅读并同意以下协议:</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br></br> <button>免费注册</button> <button type="reset">重新填写</button> </form>
04-03
<think>好的,我现在需要分析用户提供的HTML表单代码,并按照他们的要求进行介绍。首先,用户希望得到结构清晰、逐步解决问题的回答,同时需要遵守系统级指令,比如正确使用LaTeX格式和中文回答。 首先,我会通读整个HTML代码,理解各个部分的结构和功能。表单包含注册信息、教育经历、工作经历等部分,每个部分有不同的输入字段和控件。接下来,我需要按照逻辑顺序分解每个元素,并检查是否符合最佳实践。 首先注意到表单的标题使用了<h1>和<h2>标签,这有助于结构化和可访问性。然后,每个表单项使用了<label>标签,但部分输入字段没有正确关联label的for属性和input的id属性,这可能会影响可访问性。例如,姓名输入框的label没有for属性,input也没有id,这样屏幕阅读器可能无法正确关联它们。 密码和确认密码字段都使用了type="password",这符合安全要求,确保输入内容被隐藏。不过,确认密码字段通常需要与原始密码进行比较验证,但代码中没有看到客户端的验证机制,可能需要后端或前端脚本补充。 性别选择使用了单选按钮radio,并且name属性相同,确保互斥选择,这点是正确的。默认选中“女”使用了checked属性,但需要注意是否合理,通常可能让用户自行选择而不预设。 居住城市和学历的下拉菜单使用了<select>和<option>,但居住城市的select没有name属性,提交后服务器可能无法正确获取数据。同样,教育经历中的在校时间使用了两个独立的<select>元素,分别选择起始和结束年份,但缺少name属性,且没有明确标识开始和结束,可能导致数据混乱。 学校名称、专业、公司名称等文本输入框缺少必要的验证属性,比如required,可能导致用户提交空数据。此外,工作描述的<textarea>没有指定行数和列数,可能会影响布局。 协议部分使用了复选框,但<label>放置在<input>之后,且没有使用for属性关联,用户点击文字时可能无法选中复选框。链接使用<a href="#">,但实际应指向具体的协议URL。 提交和重置按钮使用了<button>,但类型未明确指定,默认类型为submit,不过最好显式声明type="submit"以避免潜在问题。重置按钮会清除表单数据,需要用户谨慎使用。 最后,整个表单的action属性指向action_page.php,使用GET方法提交,但注册表单通常涉及敏感信息,应使用POST方法以确保数据安全。此外,缺少CSRF保护等安全措施,但在示例中可能未涉及。 总结需要改进的地方:关联label和input、添加必要的验证属性、使用POST方法、完善下拉菜单的name属性、调整复选框的布局、确保表单安全等。同时,保持回答结构清晰,分点说明每个部分的功能及改进建议,符合用户要求的中文回答,并正确应用LaTeX格式(虽然此例中数学公式较少,但需注意行内公式的正确使用)。</think>以下是对您提供的注册表单的逐部分解析及改进建议: $\textcolor{blue}{一、基础信息部分}$ 1. $\text{标题结构}$ ```html <h1>注册信息</h1> <!-- 正确使用标题层级 --> <h2>教育经历</h2> <!-- 符合语义化结构 --> ``` 2. $\text{输入字段优化建议}$ ```html <!-- 建议增加id属性关联label --> <label for="name">姓名:</label> <input id="name" type="text" required> <!-- 添加必填验证 --> <!-- 密码字段应包含模式验证 --> <input type="password" pattern=".{8,}" title="至少8位字符"> ``` $\textcolor{green}{二、交互控件分析}$ 1. $\text{单选按钮组}$ ```html <!-- 推荐添加value --> <input type="radio" name="gender" value="male"> ``` 2. $\text{时间选择改进}$ ```html <!-- 给select添加name属性 --> <select name="start_year">...</select> <select name="end_year">...</select> <!-- 建议添加时间顺序验证 --> ``` $\textcolor{red}{三、安全增强建议}$ 1. $\text{表单方法}$ ```html <form method="post"> <!-- 应使用POST方法提交敏感信息 --> ``` 2. $\text{协议确认}$ ```html <!-- 必须勾选才能提交 --> <input type="checkbox" required> ``` $\textcolor{purple}{四、布局优化方案}$ 1. $\text{字段分组}$ ```html <fieldset> <legend>教育经历</legend> <!-- 相关字段 --> </fieldset> ``` 2. $\text{响应式设计}$ ```css /* 建议添加媒体查询 */ @media (max-width: 600px) { input { width: 100%; } } ``` $\textcolor{orange}{五、功能扩展建议}$ 1. $\text{密码强度验证}$ ```javascript // 可添加实时强度提示 password.addEventListener('input', checkStrength) ``` 2. $\text{自动补全}$ ```html <input list="cities"> <datalist id="cities">...</datalist> ``` 完整改进方案示意图: $$ \begin{array}{|c|c|} \hline \text{原功能} & \text{改进方案} \\ \hline \text{GET方法} & \text{改为POST方法} \\ \hline \text{无验证} & \text{添加HTML5验证} \\ \hline \text{独立下拉框} & \text{添加关联验证} \\ \hline \text{基础布局} & \text{响应式设计} \\ \hline \end{array} $$ 建议按照W3C标准进行WAI-ARIA无障碍支持: ```html <div role="alert" id="errorMsg"></div> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值