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 演示样例
【代码】
<!DOCTYPE html>

<html>

<head>

<script src="jquery.js"></script>

<script>

function setURLByJS() {

    var inputurl = document.getElementById("input-url").value;

    document.getElementById("url").href = inputurl;

}

function getURLByJS() {

    var url = document.getElementById("url").href;

    alert(url);

}

function setURLNameByJS() {

    var urlname = document.getElementById("input-urlname").value;

    document.getElementById("url").innerHTML = urlname;

}

function getURLNameByJS() {

    var urlname = document.getElementById("url").innerHTML;

    alert(urlname);

}

function setURLByJQuery() {

    var url = $("#input-url").val();

    $("#url").attr("href", url);

}

function getURLByJQuery() {

    var url = $("#url").attr("href");

    alert(url);

}

function setURLNameByJQuery() {

    var urlname = $("#input-urlname").val();

    $("#url").html(urlname);

}

function getURLNameByJQuery() {

    var urlname = $("#url").html();

    alert(urlname);

}

</script>

</head>

<body>

<a id="url" href="#">URL name</a>

<br>

URL:<input type="text" id="input-url" size="35" value="http://blog.csdn.net/xukai871105">

URL Name:<input type="text" id="input-urlname" size="25" value="博客">

<br>

<p>javascript操作</p>

<button type="button" onclick="setURLByJS()">设置URL</button>

<button type="button" onclick="getURLByJS()">读取URL</button>

<button type="button" onclick="setURLNameByJS()">设置URL Name</button>

<button type="button" onclick="getURLNameByJS()">读取URL Name</button>

<br>

<p>JQuery操作</p>

<button type="button" onclick="setURLByJQuery()">设置URL</button>

<button type="button" onclick="getURLByJQuery()">读取URL</button>

<button type="button" onclick="setURLNameByJQuery()">设置URL Name</button>

<button type="button" onclick="getURLNameByJQuery()">读取URL Name</button>

</body>

</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. CS1.6找金钱和人物血量

    一.查找金钱数量 先搜索800 然后购买东西,再搜索剩下的钱 然后发现有两个地址,一个绿色的地址(也就是静态地址),还有一个动态地址 经过测试后,静态地址的值是对应屏幕上的值,而真正实际的金钱是那个动 ...

  2. Gitlab使用QQ企业邮箱发送邮件

    注册QQ企业邮箱 地址 https://exmail.qq.com/signupfree?refer=intro#signup/free 注册完成后解析 编辑/etc/gitlab/gitlab.rb ...

  3. java 实现生产者-消费者模式

    生产和消费者模式有很多种,现在介绍几种常见的方式 wait/notify实现生产和消费者模式 1.使用wait/notify实现生产和消费者模式: public class Depot { // 实际 ...

  4. Unity IOC容器通过配置实现类型映射的几种基本使用方法

    网上关于Unity IOC容器使用的方法已很多,但未能做一个总结,故我这里总结一下,方便大家选择. 首先讲一下通过代码来进行类型映射,很简单,代码如下 unityContainer = new Uni ...

  5. Webpack 性能优化 （一）（使用别名做重定向）

    前言 Webpack 是 OneAPM 前端技术栈中非常重要的一部分.它非常好用,假设你还不了解它,建议你阅读这篇Webpack 入门指迷,在 OneAPM 我们用它完毕静态资源打包.ES6 代码的转 ...

  6. Bus Blaster v4 design overview

    Bus Blaster v4 design overview Bus Blaster v4 is an experimental, high-speed JTAG debugger for ARM p ...

  7. Revit Family API 创建参考平面

    使用API来编辑族时,使用doc.FamilyCreate.NewReferencePlane();创建参考平面. )         {  ];         }         // canno ...

  8. 基于开源SuperSocket实现客户端和服务端通信项目实战

    一.课程介绍 本期带给大家分享的是基于SuperSocket的项目实战,阿笨在实际工作中遇到的真实业务场景,请跟随阿笨的视角去如何实现打通B/S与C/S网络通讯,如果您对本期的<基于开源Supe ...

  9. [Node.js]操作mysql

    摘要 上篇文章介绍了node.js操作redis的简单实例,这里介绍如何操作mysql. 安装 安装mysql模块 cnpm install mysql 一个例子 新建一个mysql.js的文件,代码 ...

  10. lodash用法系列(6),函数种种

    Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能. 官网:https://lodash.com/引用:<script src="//cdnjs.clou ...