妙味远程课堂-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 ...
随机推荐
- Java并发编程：volatile关键字解析<转>
volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...
- 【机器学习】 Matlab 2015a 自带机器学习算法汇总
MATLAB机器学习没看到啥教程,只有一系列函数,只好记录下: MATLAB每个机器学习方法都有很多种方式实现,并可进行高级配置(比如训练决策树时设置的各种参数) ,这里由于篇幅的限制,不再详细描述. ...
- 根据map键值对，生成update与select语句，单条执行语句
方法 constructUpdateSQL private static String constructUpdateSQL(String tableName, List<Map<Stri ...
- 安装Nginx+Lua+OpenResty开发环境配置全过程实例
安装Nginx+Lua+OpenResty开发环境配置全过程实例 OpenResty由Nginx核心加很多第三方模块组成,默认集成了Lua开发环境,使得Nginx可以作为一个Web Server使用. ...
- 安卓程序代写 网上程序代写[原]BluetoothServerSocket详解
一. BluetoorhServerSocket简介 1. 继承关系 public final class BluetoothServerSocket extends Object implement ...
- python with 语句妙用
class aa(): def bb(self): print("hhhh") return "hello world" def __enter__(self) ...
- window.showModalDialog乱码（完美）解决方案
关于jsp弹出jsp页面传参数中文乱码的问题解决: 弹出方式--window.showModalDialog(requestURL,null,strFeatureInfo); 乱码原因:url传递方式 ...
- 【Html】div 加载 html页面的方法
做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下:(亲测可行) <div class="main-contain ...
- SpringMVC系列（九）自定义视图、重定向、转发
一.自定义视图 1. 自定义一个视图HelloView.java,使用@Component注解交给Spring IOC容器处理 package com.study.springmvc.views; i ...
- Spring JDBC JdbcTemplate类示例
org.springframework.jdbc.core.JdbcTemplate类是JDBC核心包中的中心类.它简化了JDBC的使用,并有助于避免常见的错误. 它执行核心JDBC工作流,留下应用程 ...