文档章节

JavaScript_2

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 14:16
字数 759
阅读 2
收藏 0

1.DOM:文档对象模型

​ 定义了一组操作文档的方法和接口,操作html

JS里面的DOM

​     浏览器把每一个html页面加载成了一个dom对象

​     dom把html表达成树的结构

js节点

​     整个文档是一个文档节点

    ​ 每个 HTML 元素(标签)是元素(标签)节点

    ​ HTML 元素内的文本是文本节点

    ​ 每个 HTML 属性是属性节点

​     注释是注释节点

    一切皆节点,一切皆对象

dom一些方法

    获取指定类名的节点集合 getElementsByClassName()

  <body>
        <input type="text" class="textClass" />
        <input type="text" class="textClass" />
        <input type="text" class="textClass" />
        <input type="text" class="textClass" />
        <input type="text" class="textClass" />
        <input type="text"  />
        <input type="text"  />
    </body>
    <script>
        //获得类名是textClass的节点集合(数组)
        var inputs = document.getElementsByClassName("textClass");
        console.log(inputs.length);

    </script>

    添加节点 appendChild(); 添加到最后

<body>
        <!--<font>hello...</font>
            2个节点
        -->
        <p id="pId">你好</p>
        <input type="button" value="添加节点" onclick="_appenChild()" />
    </body>

    <script>
        function _appenChild(){
            //得到p节点对象
            var pNode = document.getElementById("pId");

            //创建font节点 --><font></font>
            var fNode = document.createElement("font");
            //创建文本节点--> hello...
            var  textNode = document.createTextNode("hello..");
            //把文本节点添加到font节点里面--><font>hello...</font>
            fNode.appendChild(textNode);
            //把font节点添加到p节点
            pNode.appendChild(fNode);       
        }

    </script>

2.js内置对象

js内置对象之数组

第一种:

var attr = [1, 2, 3, 4, "哈哈哈"];

第二种:

  var attr = new Array(5);
    attr[0] = 1;
    attr[1] = 2;
    attr[2] = 3;
    attr[3] = 4;
    attr[4] = "哈哈哈";

第三种:​

 //声明了长度为2的数组,并且初始化了,第一个值是5,第二个值是1
    var attr = new Array(5,1);
​
    for(var i = 0; i < attr.length; i++) {
        alert(attr[i]);
    }

注意:

  1. 数组是没有越界概念,长度是可变的.
  2. 数组里面可以放不同类型的值(和Java不一样)

js内置对象之date

数字时钟实例


    <body>
        <span id="sId"></span>
    </body>

    <script>
        setInterval("getTime()",1000);
        function getTime(){
            //得到span对象
            var spanObj = document.getElementById("sId");
            //创建date对象
            var myDate=new Date();
            //获得小时
            var h  = myDate.getHours();
            //获得分钟
            var m  = myDate.getMinutes();
            //获得秒
            var s  = myDate.getSeconds();
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s);
            var timeStr = h+":"+m+":"+s;
            //向span里面插入内容
            spanObj.innerHTML = "<font color='red'>"+timeStr+"</font>";

        }
        //检测时间函数,如果<10,在时间前面拼接一个0
        function  checkTime(t){
            if(t<10){
                return "0"+t;//字符串
            }
            return t;//number

        }
    </script>

3.省市二级联动案例

<script>
		var array = new Array(3);
		array[0] = ["深圳", "广州", "东莞", "惠州"];
		array[1] = ["武汉", "黄冈", "黄石", "鄂州"];
		array[2] = ["济南", "青岛", "烟台"];
	
		function refreshCity(){
			//得到省份的值
			var  pValue = document.getElementById("province").value;
		
			//得到城市的下拉菜单 select option
			var  cityNode = document.getElementById("city");
			console.log("pvalue="+pValue);
			
			//清除之前的数据(不行)
			cityNode.innerHTML = "<option>-请选择-</option>";
			
			if(pValue >= 0){
				//根据省份的值,更新城市的数据
				var citys = array[pValue];//["深圳", "广州", "东莞", "惠州"]
				//遍历城市的数据
				for(var i =0;i < citys.length;i++){
					var  city = citys[i];//"深圳"--><option>深圳</option>
					//创建option节点---><option></option>
					var opNode = document.createElement("option");
					//创建文本节点--> 深圳
					var textNode = document.createTextNode(city);
					//把文本节点添加到option节点里面--><option>深圳</option>
					opNode.appendChild(textNode);
					
					//把option添加到城市的select里面
					cityNode.appendChild(opNode);
				}
			}
		}
	</script>

 

© 著作权归作者所有

上一篇: JQuery
下一篇: JavaScript
勤劳的开发者px
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员
私信 提问
分享51本关于JavaScript方面的学习书籍(免费下载)

分享51本关于JavaScript方面的学习书籍(免费下载) 1、JavaScript面向对象15分钟教程 2、原型、作用域、闭包的完整解释 3、Javascript面向对象特性实现(封装、继承、接口) 4、JavaScript面向...

邓剑彬
2012/12/02
1K
12
浅析 Cordova for iOS

发表于 2013-05-16 | 分类于 编程技术 | Cordova,对这个名字大家可能比较陌生,大家肯定听过 PhoneGap 这个名字,Cordova 就是 PhoneGap 被 Adobe 收购后所改的名字。 Cordova 是一个可以让...

Michaelyn
2017/10/23
12
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
3.3K
5
高性能web开发 - 如何加载JS,JS应该放在什么位置?

外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。 有人会问:为...

林文安
2012/05/16
98
0
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
2018/06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
60
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部