JavaScript_2
JavaScript_2
勤劳的开发者px 发表于5个月前
JavaScript_2
  • 发表于 5个月前
  • 阅读 1
  • 收藏 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>

 

共有 人打赏支持
粉丝 1
博文 51
码字总数 108225
评论 (0)
×
勤劳的开发者px
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: