<!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. JSP引擎的工作原理

    JSP运行环境: 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有WebLogic和Tomcat.把这些支持JSP的web服务器配置好后.就可以再客户端通过浏览器来访问JSP页面了.默认端 ...

  2. Hibernate 二级缓存配置出现的异常

    1.java.lang.ExceptionInInitializerError at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Na ...

  3. （二）Harbor WEB的使用

    接上一篇<安装Harbor>,安装好之后,接下来我们就进行Harbor  web界面的操作吧! 转载请标明出处:http://www.cnblogs.com/huangjc/p/62704 ...

  4. iOS 电商购物车倒计时时间计算

    /** * 倒计时 * * @param endTime 截止的时间戳 * * @return 返回的剩余时间 */ - (NSString*)remainingTimeMethodAction:(l ...

  5. python爆破zip脚本

    最近在提高自己编程能力,拿一些实用的小工具练下.该脚本为python语言,主要涉及模块zipfile,threadings模块. 功能:暴力猜解zip解压密码 #coding: utf-8 impor ...

  6. oracle_sequence用法

    1.    About Sequences(关于序列) 序列是数据库对象一种.多个用户可以通过序列生成连续的数字以此来实现主键字段的自动.唯一增长,并且一个序列可为多列.多表同时使用.序列消除了串行化 ...

  7. Linux网络管理常用命令：net-tools VS iproute2

    Exported from workflowy! net-tools ifconfigifconfig命令:用于接口及地址查看和管理 route netstat arp iproute2 ip lin ...

  8. jdk 多版本安装 for mac

    2016年mac上已经安装有jdk1.6的版本  目录在/Library/Java/JavaVirtualMachines/1.6.0.jdk 有时候mac版本跟新会自动删除jdk1.6 所以要去ma ...

  9. （转帖）oracle sql 语句优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  10. 在VMware上安装CentOS -7步骤详解

    在VMware上安装CentOS -7 一.下载好VMware虚拟机 二.准备好CentOS的镜像文件 在这里安装之前博主都已准备好了. 废话就少啰嗦啦!现在开始安装步骤了 1.首先打开VMware创 ...