<!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. 关于C/C++中的“auto”

    C/C++ 98标准 C++03标准 意思完全一样:auto被解释为一个自动存储变量的关键字,也就是申明一块临时的变量内存.auto的出现意味着,当前变量的作用域为当前函数或代码段的局部变量,意味着当 ...

  2. 微信小程序开源项目库集合

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  3. ASP.NET Zero--6.菜单加权限

    1.打开文件MpaNavigationProvider.cs [..\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Startup\MpaNavigation ...

  4. Leaving Auction

    Leaving Auction 题目链接:http://codeforces.com/contest/749/problem/D 二分 本来以为是哪种神奇的数据结构,没想到sort+lower_bon ...

  5. Python map多线程

    import os import PIL from multiprocessing import Pool from PIL import Image SIZE = (75,75) SAVE_DIRE ...

  6. socket 心跳包机制

    心跳包的发送,通常有两种技术 方法1:应用层自己实现的心跳包  由应用程序自己发送心跳包来检测连接是否正常,大致的方法是:服务器在一个 Timer事件中定时 向客户端发送一个短小精悍的数据包,然后启动 ...

  7. 遍历Map集合的四中方法

    ->有这样一个Map集合 Map<String, String> map = new HashMap<String, String>(); map.put(", ...

  8. Elasticsearch安装ik中文分词插件（四）

    一.IK简介 IK Analyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包.从2006年12月推出1.0版开始, IKAnalyzer已经推出了4个大版本.最初,它是以开源项目Lu ...

  9. linux/windows平台生成随机数的不同方法

    linux平台,使用rand.Seed() //rand_linux.go package main import ( "math/rand" "time" ) ...

  10. es5 中类的2种基本实现方法

    function test(){ this.a = 1; this.func = function(){ // var a = 3;下面的this 取的是上面的1,这个不影响 return this. ...