js之DOM&函数

最新推荐文章于 2024-07-30 11:35:46 发布

m_target

最新推荐文章于 2024-07-30 11:35:46 发布

阅读量361

点赞数

分类专栏： web学习文章标签： js 函数事件省级联动脚本引入

本文链接：https://blog.csdn.net/m_target/article/details/81254992

版权

web学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一.js脚本的引入方法

1.内部引入

<script type="text/javascript">
				
</script>

2.外部引入

<script type="text/javascript" src=""></script>

   二. 定义函数:
           function 函数名称(参数列表){
                       函数体
           }


   匿名函数(没有名称的函数):
           ps:一般定义匿名函数都会把函数对象赋值给一个对象
           var f1 = function () {
               console.log("匿名函数");
           }
           f1();


   函数的参数:
           var func3 = function (a, b) {
                   return a + b;
               }

函数的预编:
       在js加载js脚本时会把所有的js的函数(非匿名函数)提取出来进行预编译,以方便随时调用,
       js引擎会把所有的变量提取出来赋值为 undefined

   函数的自调用:
       !function () {
           console.log("自调用函数...");
       }();

三：DOM

页面元素的获取:
           var p = document.getElementById("id");
           var spans = document.getElementsByClassName("span01")
           var spans =document.getElementsByName();

获取元素的内容:
       innerText
       innerHtml

获取属性:
       p.getAttribute("name")

获取表单的值:
           value

常用方法

//通过id获得节点
var con = document.getElementById("con");

//创建节点
 var a = document.createElement("a");
 //添加属性
a.setAttribute("href", "http://www.uplooking.club");
//创建文本节点
var textData = document.createTextNode("点我呀...");
//追加子节点
a.appendChild(textData);
//追加子节点
 con.appendChild(a)

四：js中的事件:

onclick:点击事件
       ondblclick:双击事件
       onchange:内容改变失去焦点事件
       onfocus:聚焦事件
       onblur:失焦事件
       onkeydown:键盘按下事件
       onkeyup:按下键盘并且松开键盘的事件
       onmouseover:鼠标移上去
       onmouseout:鼠标移开
       onmousemove:一直移动的事件
       onmousedown:鼠标按下事件
       onmouseup:鼠标松开事件

五.省级联动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省级联动</title>
    <style type="text/css">
        .con {
            width: 300px;
            margin: 100px auto;
        }

        .con select {
            padding: 6px;
        }
    </style>
</head>
<body>
<div class="con">
    <select id="provinces">

    </select>

    <select id="schools">

    </select>
</div>

<script type="text/javascript">
    var provinces = document.getElementById("provinces");
    var schools = document.getElementById("schools");
    var data = [];
    data["甘肃省"] = ["兰州大学", "天水师范", "兰州石化"];
    data["陕西省"] = ["西安交大", "西安外事学院", "西京学院"];
    data["北京市"] = ["北大", "清华", "人大"];

    for (key in data) {
        var option = document.createElement("option");
        option.appendChild(document.createTextNode(key));
        option.setAttribute("value", key);
        provinces.appendChild(option);
    }

    getdata();
    provinces.onchange = getdata;

    function getdata() {
        schools.length = 0;
        var ss = data[provinces.value];
        for (index in ss) {
            var option = document.createElement("option");//更新学校
            option.appendChild(document.createTextNode(ss[index]));
            schools.appendChild(option);
        }
    }
</script>
</body>
</html>

m_target

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js之DOM&函数

一.js脚本的引入方法 1.内部引入&lt;script type="text/javascript"&gt; &lt;/script&gt; 2.外部引入 &lt;script type="text/javascript" src=""&gt;&lt;/script&gt; 二. 定义函数: functio
复制链接

扫一扫

专栏目录

js之DOM&amp;函数

js之DOM&函数