javascript学习笔记——如何修改url name
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" οnclick="setURLByJS()">设置URL</button>
<button type="button" οnclick="getURLByJS()">读取URL</button>
<button type="button" οnclick="setURLNameByJS()">设置URL Name</button>
<button type="button" οnclick="getURLNameByJS()">读取URL Name</button>
<br>
<p>JQuery操作</p>
<button type="button" οnclick="setURLByJQuery()">设置URL</button>
<button type="button" οnclick="getURLByJQuery()">读取URL</button>
<button type="button" οnclick="setURLNameByJQuery()">设置URL Name</button>
<button type="button" οnclick="getURLNameByJQuery()">读取URL Name</button>
</body>
</html>
相关知识
JavaScript基础笔记（四）
HTML5期末大作业：宠物主题网站设计——酷酷动物主题响应式网页(5页) HTML+CSS+JavaScript
HTML5养成游戏《我和小狗的一天》源码
11.1.1 JavaScript基本语法
FastAI 课程学习笔记 lesson 1：宠物图片分类
基于javaweb+jsp的宠物领养信息管理系统(带报告文档)
PS如何修改动物的皮毛光泽度
python基于PHP+MySQL的宠物交流商城
HTML5期末大作业：宠物网站设计——蓝色版爱宠之家带留言板宠物(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
基于PHP+MySQL的宠物领养救助社交网站
网址: javascript学习笔记——如何修改url name https://m.mcbbbk.com/newsview203231.html
| 上一篇: 狗狗训练惩罚也要有讲究 |
下一篇: 格莱优秀学生风采鹤壁校区刘子洋： |
