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. 数据库事务的属性－ACID和隔离级别

    1.数据库事务的属性-ACID(四个英文单词的首写字母): 1)原子性(Atomicity) 所谓原子性就是将一组操作作为一个操作单元,是原子操作,即要么全部执行,要么全部不执行. 2)一致性(Con ...

  2. Codeforces Round #371 (Div. 2) D. Searching Rectangles 交互题 二分

    D. Searching Rectangles 题目连接: http://codeforces.com/contest/714/problem/D Description Filya just lea ...

  3. bitnami下mysql配置-包含phpMyAdmin配置

    mysql开启远程访问: 默认情况下mysql的绑定ip是bind-address=127.0.0.1 找到my.cnf bitnami@linux:~$ sudo find / -name my.c ...

  4. 源码编译Tkinter

    要让Python支持Tkinter, 需要首先安装tcl和tk两个软件包. 下载地址: http://www.tcl.tk/software/tcltk/download.html 或 tcl:htt ...

  5. Delphi XE 6,Rad Studio XE 6 官方下载(附破解)

      官方光盘镜像下载: http://altd.embarcadero.com/download/radstudio/xe6/delphicbuilder_xe6_win.iso RAD Studio ...

  6. Android Service总结01 目录

    Android Service总结01 目录 1 Android Service总结01 目录 2 Android Service总结02 service介绍 介绍了“4种service 以及 它们的 ...

  7. Fiddler抓包12-AutoResponder返回本地数据（mock）

    前言 mock可以说是面试必问的话题的,我第一次接触mock的时候也是一脸懵逼.虽然fiddler工具用了很久,里面的打断点,设置自动返回数据功能都用过. mock说的通俗一点就是模拟返回数据,只是面 ...

  8. 自定义各式各样的圆形ProgressBar

         上面三个图分别是 开始时的样子,走进度时候的样子,最后完成的样子 这是我在两个大神的Demo基础上修改后的结果,我们先来看看自定义view是怎么做到的. 1.自己写一个类继承View类,然后 ...

  9. Caffe常用层参数介绍

    版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/Cheese_pop/article/details/52024980 DATA crop:截取原图像中一个 ...

  10. M2Crypto安装方法以及配置LDFLAGS、CFLAGS

    python3.7+mac环境: $ brew install openssl && brew install swig $ brew --prefix openssl /usr/lo ...