妙味远程课堂-JS属性
html由属性名和属性值组成
- 属性读操作：获取、找到
- 元素.innerHtml//读取元素内的html内容
元素.属性名
案例1:点击按钮弹出文本框的内容（value值）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js中的属性</title>
<script type="text/javascript">
window.onload=function() {
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
oBtn.onclick= function () { //用函数包住，只有点击的时候才会执行
alert(oText.value)
}
}
</script>
</head>
<body>
<input id="text1" type="text">
<input id="btn1" type="button" value="按钮">
</body>
</html>
案例2：输入文字并选择下拉列表的选项，点击按钮弹出文字和选项内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js中的属性</title>
<script type="text/javascript">
window.onload=function() {
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oSelect = document.getElementById('select1');
oBtn.onclick= function () { //用函数包住，只有点击的时候才会执行
//alert(oText.value)
//'百度'+'北京' ---百度北京
//‘百度’+‘在’+‘北京’ ---百度在北京
alert(oText.value+'在'+oSelect.value);
}
}
</script>
</head>
<body>
<input id="text1" type="text">
<select id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<input id="btn1" type="button" value="按钮">
</body>
</html>
- 属性写操作：添加、替换、修改
元素.属性名=新的值
元素.innerHtml=新的值//修改或替换他里面的内容
案例1 点击按钮时按钮的值变成‘submit’，文本框内容变成下拉框的值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js中的属性</title>
<script type="text/javascript">
window.onload=function() {
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oSelect = document.getElementById('select1');
oBtn.onclick= function () { //用函数包住，只有点击的时候才会执行
oBtn.value='submit';
oText.value=oSelect.value
}
}
</script>
</head>
<body>
<input id="text1" type="text">
<select id="select1">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<input id="btn1" type="button" value="按钮">
</body>
</html>
案例2：点击按钮显示文本框指向的图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js中的属性</title>
<script type="text/javascript">
window.onload=function() {
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oImg = document.getElementById('img1');
oBtn.onclick= function () {
oImg.src=oText.value
}
}
</script>
</head>
<body>
<input id="text1" type="text">
<input id="btn1" type="button" value="显示图片">
<img id="img1">
</body>
</html>
不仅可以显示本地图片，还可显示网络地址的图片
案例3：点击按钮时弹出段落里的文字
p.innerHtml读取p中的内容
p.innerHtml=' ' 替换p中的内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js中的属性</title>
<script type="text/javascript">
window.onload=function() {
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oP = document.getElementById('p1');
oBtn.onclick= function () {
alert(oP.innerHTML)
}
}
</script>
</head>
<body>
<input id="text1" type="text">
<input id="btn1" type="button" value="显示图片">
<p id="p1">这是一段文字</p>
</body>
</html>
案例4：点击‘发布’按钮时，文本框的内容将替换段落，文本框将清空
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js中的属性</title>
<script type="text/javascript">
window.onload=function() {
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oP = document.getElementById('p1');
oBtn.onclick= function () {
oP.innerHTML=oText.value
oText.value='';
}
}
</script>
</head>
<body>
<input id="text1" type="text">
<input id="btn1" type="button" value='发布'>
<p id="p1">这是一段文字</p>
</body>
</html>
我们还可以在文本框中输入html形式的代码，例如输入图片
案例5：一个聊天窗口，单人的，可以一条条的发布消息
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js中的属性</title>
<script type="text/javascript">
window.onload=function() {
var oDiv=document.getElementById('div1');
var oSpan=document.getElementById('span1');
var oText=document.getElementById('text1');
var oButton=document.getElementById('button1');
oButton.onclick=function(){
// a=a+b
// a+=b
// oDiv.innerHTML=oDiv.innerHTML+oSpan.innerHTML+oText.value+'<br/>';
oDiv.innerHTML+=oSpan.innerHTML+oText.value+'<br/>';
oText.value='';
}
}
</script>
<style>
#div1{width: 200px;height: 500px;background-color: #b3d4fc;padding: 10px}
</style>
</head>
<body>
<div id="div1"></div>
<span id='span1'>Tom:</span>
<input id='text1' type="text">
<input id='button1' type="button" value="提交">
</body>
</html>
妙味远程课堂-JS属性的更多相关文章
- 妙味远程课堂-JS热身运动-上
希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性 隐藏 width/height 改为0 透明度 定位,left/top值为负值 用与背景颜色一样 ...
- 妙味云课堂之css：其它知识点汇总
一. 热区 map 热区.area 点击区域 shape="circle" 圆型,coords="圆心点X.圆心点Y,圆的半径" shape="rec ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
随机推荐
- JVM垃圾回收算法（最全）
JVM垃圾回收算法(最全) 下面是JVM虚拟机运行时的内存模型: 1.方法区 Perm(永久代.非堆) 2.虚拟机栈 3.本地方法栈 (Native方法) 4.堆 5.程序计数器 1 首先的问题是:j ...
- Android文档 - 账户管理器概述
账户管理器概述 这个类提供了访问到 用户在线账户的集中式注册中心 的能力.用户为每账户输入一次 认证信息(credentials,包含用户名和密码),过过 点击一次(one-click)完成认证的方式 ...
- Redis的内存回收机制
Redis的内存回收机制 2018年01月16日 17:11:48 chs007chs 阅读数:1172 Redis的内存回收机制主要体现在一下两个方面: 删除过期时间的键对象 删除过期键对象 : ...
- PCL学习八叉树
建立空间索引在点云数据处理中有着广泛的应用,常见的空间索引一般 是自顶而下逐级划分空间的各种空间索引结构,比较有代表性的包括BSP树,KD树,KDB树,R树,四叉树,八叉树等索引结构,而这些结构中,K ...
- PHP利用CURL_MULTI实现多线程
PHP中的curl_multi一类函数可以实现同时请求多个url,而不是一个一个依次请求,这就类似一个进程实现了多个线程的功能,因此可以使用PHP利用CURL_MULTI实现完成多线程类的任务,下面就 ...
- Sword STL之map效率问题
#include <iostream> #include <map> #include <vector> using namespace std; /* STL容器 ...
- USB学习笔记连载（十三）：keil的配置环境
在对USB设备的驱动名字进行更改时,需要利用keil软件对固件进行修改,并生成 .iic 文件烧录到CY7C68013A所带的外部EEPROM中,keil生成的 .hex文件只能烧录到 Cypress ...
- Assets/FollowDestination.cs(6,13): error CS0246: The type or namespace name `NavMeshAgent' could not be found. Are you missing `UnityEngine.AI' using directive?的解决方案
问题的出现与描述 在Unity中创建一个NPC,使它一直跟踪一个目标Destination,C#脚本代码如下,错误信息描述如下 using System.Collections; using Syst ...
- Lua--------------------unity3D与Slua融合使用
下载与安装 下载地址 GitHub 安装过程 1.下载最新版,这里, 解压缩,将Assets目录里的所有内容复制到你的工程中,对于最终产品,可以删除slua_src,例子,文档等内容,如果是开发阶段则 ...
- python_smtplib
import smtplib smtpserver = 'smtp.qq.com' fromaddr = 'fromaddr@qq.com' toaddrs = 'toaddr@qq.com' msg ...