文档章节

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
0
0
高性能web开发 - 如何加载JS,JS应该放在什么位置?

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

林文安
2012/05/16
0
0
javascript学习资料分享

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

小微
2012/04/06
0
5
Javascript 返回上一页 返回下一页

Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的U...

Fx_demon
2014/12/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
11
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
17
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
17
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
8
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部