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. # 2017-2018-20172309 暑期编程作业：APP

    2017-2018-20172309 暑期编程作业:基于有道词典API的翻译软件的实现. 写在前面:这个博客可以说是拖了很久了.因为做这个APP已经很久了,很多东西都已经忘记了,所以一直都懒得写.但是 ...

  2. Codeforces Round #281 (Div. 2） A. Vasya and Football 模拟

    A. Vasya and Football 题目连接: http://codeforces.com/contest/493/problem/A Description Vasya has starte ...

  3. QtTest模块出现控制台的原因与方案

    转到Qt安装目录下的mkspces/features目录下, 1.用记事本打开qtestlib.prf文件,注释掉CONFIG += console #CONFIG += console 2.用记事本 ...

  4. HOWTO: Use STM32 SPI half duplex mode

    HOWTO: Use STM32 SPI half duplex mode I’ve got my hands onto some STM32F030F4P6 ARM-Cortex M0 proces ...

  5. 使用git pull文件时和本地文件冲突怎么办

    在使用git pull代码时,经常会碰到有冲突的情况,提示如下信息:error: Your local changes to 'c/environ.c' would be overwritten by ...

  6. POJ1580 水题，积累！

    [题意简述]:题意非常easy.就是将这两个字符串比較,移动着比較.求出最多的同样的元素个数.然后用题目中所给的公式,写出结果. [分析]:本题要注意的就是for循环的形式.注意积累就可以. 详见代码 ...

  7. @NotBlank注解使用不生效的解决办法

    @NotBlank注解使用时必须在入参处(controller)加@Valid. 如: public Class User{ @NotBlank(message = "用户名不能为空&quo ...

  8. 神奇女侠Wonder Woman迅雷下载

    亚马逊公主戴安娜·普林斯(盖尔·加朵 Gal Gadot 饰),经过在家乡天堂岛的训练,取得上帝赐予的武器 与装备,化身神奇女侠,与空军上尉史蒂夫·特雷弗(克里斯·派恩 Chris Pine 饰)一同 ...

  9. information_schema系列七

    information_schema系列七   这个系列的文章主要是为了能够让自己了解MySQL5.7的一些系统表,统一做一下备注和使用,也希望分享出来让大家能够有一点点的受益. 第七篇主要看一下一下 ...

  10. Java命令学习系列（零）——常见命令及Java Dump介绍

    一.常用命令: 在JDK的bin目彔下,包含了java命令及其他实用工具. jps:查看本机的Java中进程信息. jstack:打印线程的栈信息,制作线程Dump. jmap:打印内存映射,制作堆D ...