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. [Java]类的生命周期(下）类的初始化[转]

    上接深入java虚拟机——深入java虚拟机(二)——类加载器详解(上),在上一篇文章中,我们讲解了类的生命周期的加载和连接,这一篇我们接着上面往下看. 类的初始化:在类的生命周期执行完加载和连接之后 ...

  2. Codeforces Round #368 (Div. 2) C. Pythagorean Triples 数学

    C. Pythagorean Triples 题目连接: http://www.codeforces.com/contest/707/problem/C Description Katya studi ...

  3. hdu 5735 Born Slippy 暴力

    Born Slippy 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5735 Description Professor Zhang has a r ...

  4. OpenNI2 + NiTE2开发教程

    发现了一个非常不错的关于自然交互OpeNI2+NiTE2的资源,非常感谢Heresy,这里分享链接: OpenNI 2.x 教学文章(转载自:Heresy博客,地址:https://kheresy.w ...

  5. ueditor上传图片设置的简单实例

    0.前言:我用过ckeditor,kingeditor还是感觉ueditor最好用,功能强大,经常更新.之前因为升级了struts2到2.5的了,原本的kingeditor已经不能共存,于是找到了ud ...

  6. 收集的一些MikroTik RouterOS 5.x破解版

    链接:https://pan.baidu.com/s/1RyREMfrpLkpQ-AIcDQES_Q  密码:byhd

  7. How Visual Studio 2012 Avoids Prompts for Source

    [原文地址]:http://blogs.msdn.com/b/heaths/archive/2012/07/26/how-visual-studio-2012-avoids-prompts-for-s ...

  8. 《Go语言实战》摘录：6.1 并发 - 并行 与 并发

    6.1 并行 与 并发

  9. 如何给Windows Server 2012 R2 添加“磁盘清理”选项

    最近想做一个试验,把我的Windows Server 2008 R2 升级为Server 2012 R2,因为手头没有Raid卡和网卡的驱动,所以做了升级安装,于是那个讨厌的Windows.old出现 ...

  10. Spring boot配置多个Redis数据源操作实例

    原文:https://www.jianshu.com/p/c79b65b253fa Spring boot配置多个Redis数据源操作实例 在SpringBoot是项目中整合了两个Redis的操作实例 ...