javascript学习笔记——如何修改<a href="#">url name</a>

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.简单例子

【示例】——演示网址京东云擎

图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>

4.参考资料

【1】HTML DOM innerHTML 属性

【2】HTML DOM value 属性

【3】jQuery html() 方法

【4】jQuery val() 方法

【5】jQuery 设置内容和属性

javascript学习笔记——如何修改<a href="#">url name</a>,布布扣,bubuko.com

时间: 2024-10-05 05:07:28

javascript学习笔记——如何修改<a href="#">url name</a>的相关文章

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

Java程序员的JavaScript学习笔记(14——扩展jQuery UI)

计划按如下顺序完成这篇笔记: Java程序员的JavaScript学习笔记(1--理念) Java程序员的JavaScript学习笔记(2--属性复制和继承) Java程序员的JavaScript学习笔记(3--this/call/apply) Java程序员的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序员的JavaScript学习笔记(5--prototype) Java程序员的JavaScript学习笔记(6--面向对象模拟) Java程序员

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

JavaScript学习笔记【2】表达式和运算符、语句、对象

笔记来自<JavaScript权威指南(第六版)> 包含的内容: 表达式和运算符 语句 对象 表达式和运算符 数组直接量中的列表逗号之间的元素可以省略,这时省略的空位会填充值undefined.元素列表末尾可以留下单个逗号,这时并不会创建一个新的值为undefined元素. 属性访问表达式,.identifier的写法只适用于要访问的属性名称是合法的标识符,并且需要知道要访问的属性的名字.如果属性名称是一个保留字或者包含空格和标识符,或是一个数字(对于数组来说),则必须使用方括号的写法.当属性

JavaScript学习笔记【3】数组、函数、服务器端JavaScript概述

笔记来自<JavaScript权威指南(第六版)> 包含的内容: 数组 函数 服务器端JavaScript概述 数组 数组是动态的:根据需要它们会增长或缩减,并且在创建数组时无须声明一个固定的大小或在数组大小变化时无须重新分配空间. 数组可能是稀疏的:索引不一定要连续的,它们之间可以有空缺. 通常,数组的实现是经过优化的,用数字索引来访问数组元素一般来说比访问常规的对象属性要快很多. 数组继承自Array.prototype中的属性,它定义了一套丰富的数组操作方法. 如果省略数组直接量中的某个

Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Ja

JavaScript学习笔记——jquery中html()、text()、val()的区别

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值.其中.和.text()方法不能使用在表单元素上,而.val()

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde