文档章节

JavaScript_2

勤劳的开发者px
 勤劳的开发者px
发布于 2017/09/02 14:16
字数 759
阅读 2
收藏 0
点赞 0
评论 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
粉丝 2
博文 51
码字总数 108225
作品 0
荆州
程序员
使用Kotlin:让Android与JS交互的详解

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

富江___ ⋅ 06/11 ⋅ 0

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge 转载:原地址 https://www.jianshu.com/p/e951af9e5e74 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现......

法斗斗 ⋅ 05/11 ⋅ 0

JS对URL字符串进行编码/解码分析

一、为什么要进行js编码和解码? 只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*'(),”[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。 出现的情况: 网址路径中包含汉字...

qq_38055050 ⋅ 05/12 ⋅ 0

hi-nginx-1.4.9 正式发布,支持 Javascript 后端开发

hi-nginx-1.4.9已经发布。 更新: 支持javascript后端开发 修复脚本搜索的一个bug 从这一版开始,hi-nginx开始支持javascript,这意味着把javascript应用于后端开发,将不再只有nodejs这唯一...

所以呢 ⋅ 05/14 ⋅ 0

缅甸银河国际开户13170533331

解决这个问题涉及到两个方面的问题: 配置问题 、引入静态文件问题 1、配置问题 web.xml配置的DispatchServlet如下: [html] view plain copy springmvc org.springframework.web.servlet.D...

银河国际 ⋅ 05/26 ⋅ 0

JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪 ⋅ 05/29 ⋅ 0

一天掌握构建化工具Grunt、gulp、webpack(下)

1、gulp篇 中文主页: http://www.gulpjs.com.cn/ 上面那一篇博客我们已经讲述了如何创建工程以及安装所有的环境和准备,如果没有看到的话,链接在下面 https://my.oschina.net/mdxlcj/blog/1...

木九天 ⋅ 04/27 ⋅ 0

使用HANA Web-based Development Workbench创建最简单的Server Side JavaScript

服务器端的JavaScript, 看下wikipedia的介绍:https://en.wikipedia.org/wiki/JavaScript#Server-side_JavaScriptServer-side JavaScript In December 1995, soon after releasing JavaScri......

JerryWang_SAP ⋅ 05/27 ⋅ 0

如何让webpack打包的速度提升50%?

随着前端应用包含的模块数量日益增长,代码打包的耗时也越来越长。公司很多项目打包耗时超过了10秒,对于一般人来说超过10秒的等待是比较难受的,虽然后续增量编辑的速度很快。于是我想结合实...

SBDavid ⋅ 05/10 ⋅ 0

再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer ⋅ 前天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 23分钟前 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 48分钟前 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

Confluence 6 从其他备份中恢复数据

一般来说,Confluence 数据库可以从 Administration Console 或者 Confluence Setup Wizard 中进行恢复。 如果你在恢复压缩的 XML 备份的时候遇到了问题,你还是可以对整个站点进行恢复的,如...

honeymose ⋅ 昨天 ⋅ 0

myeclipse10 快速搭建spring boot开发环境(入门)

1.创建一个maven的web项目 注意上面标红的部分记得选上 2.创建的maven目录结构,有缺失的目录可以自己建立目录补充 补充后 这时候一个maven的web项目创建完成 3.配置pom.xml配置文件 <proje...

小海bug ⋅ 昨天 ⋅ 0

nginx.conf

=========================================================================== nginx.conf =========================================================================== user nobody; #......

A__17 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部