0.前言
    使用了一段时间javascript，再花了点时间学习了jquery。可是总是感觉自己非常"迷糊"，比如<a href="#">url name</a>中，假设改动href中的“#”应怎样编写代码。假设改动url name应怎样编写代码。再加上javascript和jquery操作方法略有不同，所以我就更“迷糊”了。
    【说明】
    以前使用关键词——“innerHTML和value差别”，在百度和谷歌中搜索，再认真阅读HTML文档之后发现innerHTML和value事实上根本没有可比性，也许innerHTML和属性才具有一定的可比性。

1.简单比較
    【innerHTML】或【innerTEXT】
    innerHTML或innerTEXT指标签中的元素，更简单的说innerHTML或innerTEXT出如今><之中，在<a href="#">url name</a>中，innerHTML或innerTEXT便是url name。innerHTML和innerTEXT存在一些差异，innerHTML取出的内容包含HTML标签和文本内容，比如<strong>url name</strong>，而innerTEXT仅仅能取出文本内容——url name。

    【属性】或【value】
    在<a href="#">url name</a>中，HTML a标签具有一个href属性。而该属性值为#。在表单类控件中常常出现value属性。比如<input type="text"  value="Hello World">。那么HTML input标签中具有一个value属性，其值为“Hello World”。和innerHTML或innerTEXT相应，属性一定出如今<>中。
2.获取与设置
    【javascript】
    【innerHTML】
            【设置】 document.getElementById("id").innerHTML="xxx";
            【获取】 var urlname = document.getElementById("#id").innerHTML;
    【属性】
            【设置】 document.getElementById(“id”).href="http://xxxx";
            【获取】 var url = document.getElementById(“id”).href;
    
    【jquery】
    【innerHTML】
            【设置】 $("#id").html("url name");
            【获取】 var urlname = $("#id").html();
    【属性】
            【设置】 $("#id").attr("href","www.sina.com.cn");
            【获取】 var url = $("#id").attr("href");
3.简单样例
【演示样例】——演示网址京东云擎

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHVrYWk4NzExMDU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

图1 演示样例
【代码】
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="jquery.js"></script>
  5. <script>
  6. function setURLByJS() {
  7.     var inputurl = document.getElementById("input-url").value;
  8.     document.getElementById("url").href = inputurl;
  9. }
  10. function getURLByJS() {
  11.     var url = document.getElementById("url").href;
  12.     alert(url);
  13. }
  14. function setURLNameByJS() {
  15.     var urlname = document.getElementById("input-urlname").value;
  16.     document.getElementById("url").innerHTML = urlname;
  17. }
  18. function getURLNameByJS() {
  19.     var urlname = document.getElementById("url").innerHTML;
  20.     alert(urlname);
  21. }
  22. function setURLByJQuery() {
  23.     var url = $("#input-url").val();
  24.     $("#url").attr("href", url);
  25. }
  26. function getURLByJQuery() {
  27.     var url = $("#url").attr("href");
  28.     alert(url);
  29. }
  30. function setURLNameByJQuery() {
  31.     var urlname = $("#input-urlname").val();
  32.     $("#url").html(urlname);
  33. }
  34. function getURLNameByJQuery() {
  35.     var urlname = $("#url").html();
  36.     alert(urlname);
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <a id="url" href="#">URL name</a>
  42. <br>
  43. URL:<input type="text" id="input-url" size="35" value="http://blog.csdn.net/xukai871105">
  44. URL Name:<input type="text" id="input-urlname" size="25" value="博客">
  45. <br>
  46. <p>javascript操作</p>
  47. <button type="button" onclick="setURLByJS()">设置URL</button>
  48. <button type="button" onclick="getURLByJS()">读取URL</button>
  49. <button type="button" onclick="setURLNameByJS()">设置URL Name</button>
  50. <button type="button" onclick="getURLNameByJS()">读取URL Name</button>
  51. <br>
  52. <p>JQuery操作</p>
  53. <button type="button" onclick="setURLByJQuery()">设置URL</button>
  54. <button type="button" onclick="getURLByJQuery()">读取URL</button>
  55. <button type="button" onclick="setURLNameByJQuery()">设置URL Name</button>
  56. <button type="button" onclick="getURLNameByJQuery()">读取URL Name</button>
  57. </body>
  58. </html>

javascript学习笔记——怎样改动&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;的更多相关文章

  1. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  2. Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  5. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  6. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  8. Java程序猿的JavaScript学习笔记（3——this/call/apply）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

随机推荐

  1. Google的开源C++单元测试框架Google Test

    玩转Google开源C++单元测试框架Google Test系列(gtest)(总) 前段时间学习和了解了下Google的开源C++单元测试框架Google Test,简称gtest,非常的不错. 我 ...

  2. notepad++ 如何选择10000行-20000行之间的文本？

    最近要上传导入一批数据,但是数据太多,一次上传不了,所以就要分批上传,而且数据全部在一个txt里面,这时就想一次复制一部分出来导入,直到导入完成,但是问题来了,数据太多,选择1到10000行,鼠标要拉 ...

  3. maven执行update命令时报org/apache/maven/shared/filtering/MavenFilteringException错误

    原 maven执行update命令时报org/apache/maven/shared/filtering/MavenFilteringException错误 在eclipse中对准项目执行maven- ...

  4. nodejs备忘总结(一) -- node和express安装与配置，新建简单项目（附安装配置过程中遇到问题的解决方法）

    安装node 本文以安装node_v8.9.0为例(win10环境),下载node-v8.9.0-x64.msi插件 下载后,安装,安装目录默认为C:\Program Files\nodejs 配置环 ...

  5. Centos部署使用Jexus承载asp.net core2 web应用

    一,首先安装本地开发项目用的的 core对应版本运行时: https://www.microsoft.com/net/download/linux-package-manager/centos/run ...

  6. 硬盘img镜像备份工具

    linux下使用dd,Windows下使用WinImage,不过dd使用的比较多.

  7. AN2820 Driving bipolar stepper motors using a medium-density STM32F103xx microcontroller

    AN2820 Driving bipolar stepper motors using a medium-density STM32F103xx microcontroller Introductio ...

  8. 荣耀 6 安装 SD 卡，提示：SD卡已安全移除

    先前买了个 荣耀6(购买链接),自带存储只有 16G,用来一段时间后,老是提示存储不足.后来发现是 微信 等软件占用了好多存储(缓存),, 好吧,在京东上买了个 64G 扩展卡(购买链接),安装过程如 ...

  9. kernel logo到开机动画之间闪现黑屏（android 5.X）

    在BootAnimation開始画图之前,会先做一次clear screen的动作,避免出现前面的图干扰到BootAnimation的显示. 通过check main_log先确认播放开机动画是哪个f ...

  10. Redis源代码分析（三十五）--- redis.c服务端的实现分析（2）

    在Redis服务端的代码量真的是比較大,假设一个一个API的学习怎么实现,无疑是一种效率非常低的做法,所以我今天对服务端的实现代码的学习,重在他的运行流程上.而对于他的模块设计在上一篇中我已经分析过了 ...