文档章节

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>

 

© 著作权归作者所有

共有 人打赏支持
勤劳的开发者px
粉丝 3
博文 54
码字总数 108225
作品 0
荆州
程序员
JavaScript 需要掌握的知识

1.不仅仅是面试,JavaScript 开发者都应该知道的十个概念(https://my.oschina.net/editorial-story/blog/1529543) 2. 深入理解javascript原型和闭包(完结)(http://www.cnblogs.com/wangfup...

IT追寻者
2016/06/25
0
0
高性能web开发 - 如何加载JS,JS应该放在什么位置?

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

林文安
2012/05/16
0
0
iOS与JS交互之UIWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「UIWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
08/28
0
0
iOS与JS交互之WKWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
09/01
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

实战讲解高并发和秒杀抢购系统设计

互联网特别是电商平台,阿里双11秒杀、还有12306春运抢票、以及平时各种节假日抢购活动等,都是典型的高并发场景。 这类场景最大的特征就是活动周期短,瞬间流量大(高并发),大量的人短期涌...

xtof
33分钟前
0
0
代码质量管理平台-sonarqube

在工作中,往往开发的时候会不怎么注重代码质量的人很多,存在着很多的漏洞和隐患等问题,sonarqube可以进行代码质量的审核,而且十分的残酷。。。。。接下来我们说下怎么安装 进入官网下载:...

落叶清风
36分钟前
6
0
在Ubuntu安装和配置Sphinx

Ubuntu系统默认是配置有sphinx的,先检查一下,别多此一举。。。。。 在开始本指南之前,您需要: 一个Ubuntu 16.04服务器。 sudo的一个非root用户,您可以通过以下设置本教程 。 安装在服务...

阿锋zxf
45分钟前
1
0
Qt编写输入法V2018超级终结版

对于qt嵌入式linux开发人员来说,输入法一直是个鸡肋问题,要么不支持实体键盘同步,要么不能汉字输入,要么不支持网页输入等,这几年通过陆续接触大量的各种输入法应用场景客户,得到真实需...

飞扬青云
56分钟前
2
0
TypeScript基础入门之高级类型的多态的 this类型

转发 TypeScript基础入门之高级类型的多态的 this类型 高级类型 多态的this类型 多态的this类型表示的是某个包含类或接口的子类型。 这被称做F-bounded多态性。 它能很容易的表现连贯接口间的...

durban
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部