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. 媒体查询@media query

    @media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...

  2. QThreadPool线程池的使用，线程与Widget通过信号与槽的方式通信。

    因为QRunnable类并非继承自QObject,不能使用信号和槽,为了能够使用信号与槽和Widget通信,需要对QRunnable进行封装. 定义一个类QMyRunnable,该类首先继承自QObj ...

  3. SlickMaster.NET 开源表单设计器快速使用指南

    前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据.由于涉及的数据比较离散,并不同于ERP系统的紧密关联数据.假如由开发人员每个增加页面,工作量会比较大,后期后期的维护很升级也耗费时间和精 ...

  4. MikroTik RouterOS 5.x破解工具HunterTik

    HunterTik目前网络上流传的版本大概就两个版本2.3.1和2.3.1.1,其实效果基本一致,都是不能破解高版本的RouterOS,比如6.6以后的版本就不行了. 一.安装: 一路回车! 二.可以 ...

  5. 解决 PermGen space Tomcat内存设置(转)

    在使用Java程序从数据库中查询大量的数据或是应用服务器(如tomcat.jboss,weblogic)加载jar包时会出现java.lang.OutOfMemoryError异常.这主要是由于应用服 ...

  6. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  7. 窗体的Alpha通道透明色支持

    参考: http://www.delphibbs.com/delphibbs/dispq.asp?lid=2190768 Windows 2000后,为了支持类似MAC界面的Alpha通道混合效果,提 ...

  8. Javascript原型继承原理

    对于面向对象的基础语法在此我就不重复了,对面向对象不熟悉的朋友可以参看<使用面向对象的技术创建高级 Web 应用程序>一文. prototype与[[prototype]] 在有面象对象基 ...

  9. 图解openssl实现私有CA

    原文地址:http://xxrenzhe.blog.51cto.com/4036116/1370114 废话不多说,先上图 说明1:蓝色部分为主要流程,黄色箭头指向具体的操作步骤 什么是openssl ...

  10. C/S模式与B/S

    网络程序开发的两种计算模式--C/S模式与B/S模式.两种各有千秋,用于不同场合. C/S适用于专人使用,安全性要求较高的系统: B/S适用于交互性比较频繁的场合,容易被人们所接受,倍受用户和软件开发 ...