<!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 /*

     HTML 的属性操作：读、写

         属性名：

         属性值：

         读操作：获取、找到

         元素.属性名

 */

 window.onload = function (){

     var oBtn = document.getElementById('btn1');

     var oText = document.getElementById('text1');

     var oSelect = document.getElementById('select1');

     oBtn.onclick = function (){

         // alert(oBtn.value);        // '按钮'

         // alert( oText.value );

         // alert( oSelect.value );

         // 字符串连接

         // oText.value    oSelect.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>
 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 /*

     HTML 的属性操作：读、写

         属性名：

         属性值：

         写操作：“添加？”、替换、修改

         元素.属性名 = 新的值

 */

 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="按钮" />

 <p id="p1">这是一些文字</p>

 <img id="img1" src="img/1.jpg" width="200" />

 </body>

 </html>

第三、innerHTTML 操作

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

/*

    HTML 的属性操作：读、写

        属性名：

        属性值：

        oP.innerHTML                    => 读取p里面所有的html代码

        oP.innerHTML = 123;        => 替换p里面所有的html代码

*/

window.onload = function (){

    var oBtn = document.getElementById('btn1');

    var oText = document.getElementById('text1');

    var oP = document.getElementById('p1');

    oBtn.onclick = function (){

        // oImg.src = oText.value;

        // alert( oP.innerHTML );

        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>

第四、实例

JavaScript 属性操作的更多相关文章

  1. javascript属性操作

    属性的读写 //属性添加 var obj = {x:1,y:2}; obj.z = 3; obj["m"] = 4; //属性的读取 var obj = {x: 1, y: 2, ...

  2. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  3. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  4. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  5. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  6. 了解JavaScript 对象的属性操作

    提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...

  7. JavaScript基础学习日志（1）——属性操作

    JS中的属性操作: 属性操作语法 属性读操作:获取 实例:获取Input值 实例:获取select值 字符串连接 属性写操作:修改.添加 实例:修改value值 实例:添加图片的src地址 inner ...

  8. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  9. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

随机推荐

  1. jdk各版本新特性

    只收纳常用的新特性 jdk1.4 1.引入断言 jdk5 1.引入泛型 2.引入枚举Enum 3.可以自动拆装箱 4.引入注解Annotation 5.引入新的迭代方式foreach 6.引入静态导入 ...

  2. .NET 基础 一步步 一幕幕[面向对象之堆、栈、引用类型、值类型]

    堆.栈.引用类型.值类型 内存分为堆和栈(PS:还有一种是静态存储区域 [内存分为这三种]),值类型的数据存储在栈中,引用类型的数据存储在堆中. 堆.栈: 堆和栈的区别: 栈是编译期间就分配好的内存空 ...

  3. labview 调用 matlab script的神坑！ Error 1050 occurred at LabVIEW

    显示变量没有被定义,原因是clear 关键字的问题,去掉即可!!! 未找到 文件路径,定位: 文件路径中不能有中文路径

  4. 浅谈 Linux

          1969年,美国贝尔实验室的肯-汤普森在DEC PDP-7机器上开发出了UNIX系统.      1971年,肯-汤普森的同事丹尼斯-里奇发明了C语言:1973年,UNIX系统的绝大部分源 ...

  5. [CSS] 子元素垂直居中的两种方式

    1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...

  6. ideaIU-2016.2.5激活

    IntelliJ IDEA的在线注册码生成页面 http://idea.iteblog.com 新的License server地址为:http://idea.iteblog.com/key.php

  7. mysql版本，根据经纬度定位排序sql

    SELECT id,lng,lat,ROUND(6378.138*2*ASIN(SQRT(POW(SIN((lat1*PI()/180-lat*PI()/180)/2),2)+COS(lat1*PI( ...

  8. 字符函数库 - cctype 和 climits 中的符号常量

    一. C++从C语言中继承一个与字符相关的.非常方便的函数软件包,他可以简化诸如确定字符是否为大写字母‘数字.标点符号等工作,这些函数的原型在头文件cctype(老式的为ctype.h)中定义的.例如 ...

  9. Android平台 视频编辑的高级版本

    基本覆盖了秒拍,美拍,快手等视频编辑的大部分功能. 增加了44种滤镜,基本覆盖市面上大部分APP中的滤镜效果. 可以实现视频和视频, 视频和图片,视频和您的UI界面叠加. 在叠加的过程中:支持任意时间 ...

  10. LINQ 之Union All/Union/Intersect操作

    闪存 首页 新随笔 管理 订阅     Union All/Union/Intersect操作 适用场景:对两个集合的处理,例如追加.合并.取相同项.相交项等等. Concat(连接) 说明:连接不同 ...