JavaScript初探一

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        table {
            border: 1px solid #0094ff;
        }
    </style>
    <script type="text/javascript">
        //00.注意,js代码无差别折叠,ctrl+m+h
        //01.js代码写在javascript标签中,一般放在 head标签里面(约定_规范),放在其他地方也行
        //02.js中定义变量, var关键字,js中定义对象,new Object()
        var fox = 123;
        var foxage = 18.5;
        var foxSex = true;
        var foxName = "狐狸一号";
 
        var people = new Object();
        people.skill = "吃饭饭";
 
        //03.js中 对象的字面量表示法 
        var animal = {
            skill: "打小动物", height: "18cm"
        }
 
        //04.js中 数组长度可变
        //js中的数组,可以放任意元素
        //js中,变量定义了,未赋值 就是 undefined
        var numArr = new Array();
        // alert(numArr.length);
        numArr.length = 10000;
        //alert(numArr.length);
        numArr[0] = "小二黑";
        numArr[9999] = 998;
        //alert(numArr[0] + "||" + numArr[9999] + "||" + numArr[2]);
        var haha;
        //  alert(haha)
 
        //05.判断语句
        //  string true 数字(除0以外) 对象 数组
        // false 0 undefined null NaN
        //var smallFox = "胡二皓";
        //if (null) {
        //    alert("这是大女儿");
        //} else {
        //    alert("这是二小姐");
        //}
 
        //06.选择语句
        //写法 跟c#类似,但是 break 可以不写,会直接向下执行
        //var nowDay="星期一";
        //switch (nowDay) {
        //    case "星期一":
        //        alert("睡觉觉");
 
        //    case "星期二", "星期三", "星期四":
        //        alert("上班班");
        //        break;
 
        //    default:
        //}
 
        //07.循环语句
        //07.1for c#一样
        for (var i = 0; i < 2; i++) {
            // alert("捏方便面_哈哈");
        }
        //07.2while循环  do while
        //while (true) {
 
        //}
 
        //do {
        //}
        //while(true)
         
        //07.3for in 循环
        //没有办法tab出来 需要自己写,
        //一般用来循环对象
        //item 访问到的是属性名,通过对象[属性名]可以取到属性值
        //var lunch = {
        //    food1:"白切鸡",food2:"叉烧饭",food3:"叉烧猪脚双拼"
        //}
        //for (var item in lunch) {
        //    alert(item + ":" + lunch[item]);
        //}
 
        //08方法(函数)的定义
        //命名规范跟c#一样
        //形参 和实参可以不匹配,
        //如果定义了形参,不传,那么就是undeifned
        //如果传多了,只能接收到形参个数一样的实参
 
        //无参无返回值的方法
        function SayHi() {
            //alert("成龙大哥好啊");
        }
        //有参无返回值
        function EatFood(foodName) {
            alert("水煮肉片,味道不错" + foodName + "味道也可以");
        }
        //EatFood(123);
        //有参,又返回值
        //js方法有一个默认的返回值 undefined
        //也可以理解成,定义变量.未赋值,就是undefined
        function BuyFood(money) {
            if (money > 5 && money < 10) {
                return "兰州拉面";
            }
            else if (money >= 10) {
                return "水煮肉片";
            }
        }
        var someFood = BuyFood("铁板牛肉");
        // alert(SayHi());
 
        //09.重要 js中方法也是对象
        //可以new出来
        //可以为方法对象添加属性
        var peopleRun = new Function("alert('123');");
        //   peopleRun();
        peopleRun.sayhi = "1233";
 
        function peopleEatFood() {
            alert("肚子饿了,吃饭饭");
        }
 
        peopleRun.eatFood = peopleEatFood;
       // peopleRun.eatFood();
        //匿名函数
        //没有名字的函数
        peopleEatFood.jump = function () {
            alert("大跳,大跳");
        }
        peopleEatFood.jump();
 
    </script>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
        </tr>
    </table>
 
</body>
</html>

　　全局函数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        //01.alert()输出内容
        //02.confirm()选择的框,形参是提示信息,选择确定,返回true 选择取消返回false
        //var eatOrNot = confirm("今天中午吃饭吗?");
        // alert(eatOrNot);
        //03.prompt()输入框,第一个形参,提示信息,第二个形参默认值
        //点击确定,获取文本内容,点击取消就为null
        //var sleepWhere = prompt("今天中午睡哪里?", "教室我看就不错");
        //alert(sleepWhere);
        //小练习 让用户依次输入两个数字,然后将这两个数字的和打印给用户看 友情提示,运算符,跟c#一样
        var num1 = parseInt( prompt("请输入第一个数字"));
        var num2 = parseInt( prompt("请输入第二个数字"));
        alert(num1 + num2);
        //04.转型parseInt()
        //数字,直接转换成数字
        //数字+字母,从左往右转换,直到遇到字母,就跳出
        //字母+数字,NaN not a num
        //alert(parseInt(prompt("请随便输入")));
        //alert(parseFloat(prompt("请随便输入")));
    
        //05.math这个函数里面提供了一些数学方法,比如四舍五入,天花板函数
        //06.转换数字的新方法
        //Number() int float 直接转换 但是不能转换 字母和数字拼接的
        //  alert(Number(prompt("请输入一些东西")) + 1);
        if (Number("abc")) {
            alert("对了");
 
        } else {
            alert("不对哦");
        }
 
 
 
    </script>
</head>
<body>
</body>
</html>

　　dom元素初识

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 
</head>
     
<body>
    <input type="button"  value="点击吃饭饭" id="btnEatFood" name="ha"/>
    <br />
    <label>食物名称:</label>
    <input type="text"  id="foodName" />
</body>
</html>
    <script type="text/javascript">
        //00.alert可以阻断浏览器线程,其他的弹窗也会阻断线程
        //01.通过id获取dom元素
        //alert("稍微等一会");
        //01.通过id获取dom对象
        //document.getElementById("btnEatFood");通过id获取单个对象
        //dom元素的属性可读可写
        //var inputObj = document.getElementById("btnEatFood");
        //inputObj.value = "晚上好好睡觉";
        //inputObj.type = "text";
        //inputObj.name = "捏哈哈";
        // alert(inputObj.value);
        //02.元素事件
        document.getElementById("btnEatFood").onclick = function () {
            alert("大家好,马上吃午饭了");
            //获取文本框里面的文本质
            alert(document.getElementById("foodName").value);
        }
         
    </script>

　　小练习

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <label>数字1</label>
    <input type="text" id="num1" />
    <br />
    <label>数字2</label>
    <input type="text" id="num2" />
    <br />
    <input type="button" id="sum" value="点击求和" />
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    //01.添加点击事件
    document.getElementById("sum").onclick = function () {
        //获取两个文本框里面的值 加起来,给用户看
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
        alert(parseInt(num1) + parseInt(num2));
    }
 
 
</script>

　　dombom

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <ol>
        <li id="apple" class="fruit" >小苹果</li>
        <li class="fruit">小榴莲</li>
        <li id="vegettableOne">小南瓜</li>
        <li id="Twodog" class="littleDog">小哈士奇</li>
    </ol>
</body>
</html>
<script type="text/javascript">
    //  window.location = "http://www.baidu.com";
    // window.close();
    //01.window对象相当于是页面中的顶级对象,
    //如果是通过window.xx 的方式写出来的变量 可以省略掉 window.
    //我们定义的所有 全局 变量,都相当于为window对象添加属性
    window.sayHi = "123";
    var fox = "小狐狸";
    function sayHello() {
        var people = "火星人";
    }
    //----------分割线=-----------------------------------
    //02.dom对象时存放在 window对象的document属性下面
    //document对象为我们提供了很多种获取dom元素的方式
    //02.1byid 通过id获取单个dom元素
    //双标签里面的文本值,通过innerHTML修改
    // document.getElementById("apple").innerHTML = "西兰花";
    //02.2byClass 获取所有符合 class的 元素 返回的是dom数组无论元素个数是多少个
    //注意:写js代码的时候,可能出现没有智能提示---不要不敢写哦
    var fruitObjs = document.getElementsByClassName("fruit");
    for (var i = 0; i < fruitObjs.length; i++) {
        fruitObjs[i].innerHTML = "西洋菜";
    }
    // document.getElementsByClassName("littleDog").innerHTML = "大哈士奇";
    //02.3byTagName获取的也是dom数组
    //修改样式,必须通过style点出来,如果在css中 是 background-color的写法 需要改写为 backgroundColor
     
    var liObjs = document.getElementsByTagName("li");
    for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].style.color = "yellow";
        liObjs[i].style.backgroundColor = "#0094ff";
    }
    //----------分割线=--------------------------s---------
 
 
    //----------分割线=-----------------------------------
 
</script>

　this　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="点击明天休息"  id="tomorrowSleep"/>
</body>
</html>
<script type="text/javascript">
    //js中方法体里面的this 看 这个方法由谁点出来
    document.getElementById("tomorrowSleep").onclick = function () {
        alert(this.value);
    }
    //用户点击按钮的时候 浏览器调用了 document.getElementById("tomorrowSleep").onclick();
    function sayHello() {
        alert(this.value+"1");
    }
    window.sayHello();
    //js中重新为元素属性复制,会覆盖之前的
    document.getElementById("tomorrowSleep").onclick = sayHello;
</script>

　　HTMLText

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div style="height: 100px; width: 100px; border: 1px solid #0094ff" id="divBox">
        <input type="button" value="测试用按钮1" />
        <input type="button" value="测试用按钮2" />
        <input type="button" value="测试用按钮3" />
    </div>
 
    <input type="button" value="HTML" id="btnHTML" />
    <input type="button" value="Text" id="btnTEXT" />
 
</body>
</html>
<script type="text/javascript">
    //innerHTML如果设置的是 符合html规范的标签,那么浏览器会解析成html代码
    //可以使用InnerHTML来清空某些元素内部的所有元素
    document.getElementById("btnHTML").onclick = function () {
        var inputStr = prompt("请输入内容_HTML");
        //设置给div
        document.getElementById("divBox").innerHTML = inputStr;
    }
    //innerText不管输入什么,都当成字符串
    //innerText火狐不支持 contextText(火狐用)
    //后面做开发用的是jq
    document.getElementById("btnTEXT").onclick = function () {
        var inputStr = prompt("请输入内容_Test");
        //设置给div
        document.getElementById("divBox") = inputStr;
    }
</script>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        ol {
            list-style: none;
            text-align: center;
        }
 
        li {
            border: 1px solid #0094ff;
            width: 200px;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input type="button" id="btnAdd" value="追加li标签" />
    <input type="button" id="btnRemove" value="删除选中li标签" />
     <input type="button" id="btnInsert" value="制定位置插入li标签" />
    <ol id="olList">
        <li>红烧排骨</li>
        <li>糖醋里脊</li>
        <li>剁椒鱼头</li>
        <li>驴肉火烧</li>
        <li>鱼香肉丝</li>
    </ol>
</body>
</html>
<script type="text/javascript">
 
    //选中的li标签;
    var liSelected;
    //-----------风格线-下面是方法上面是变量--------
 
    //00.为所有的li标签 添加点击事件
    var liObjs = document.getElementsByTagName("li");
    //为每一个li标签设置点击事件
    for (var i = 0; i < liObjs.length; i++) {
 
        liObjs[i].onclick = highSel;
    }
 
    //01.为新增按钮添加点击事件
    document.getElementById("btnAdd").onclick = function () {
        //01.创建dom元素
        var liCreate = document.createElement("li");
        //02.接受用户输入,并且将用户输入设置到创建的li标签中
        liCreate.innerHTML = prompt("请输入问本值");
        //03.追加到ol标签里面
        document.getElementById("olList").appendChild(liCreate);
        //04设置点击事件
        liCreate.onclick = highSel;
    }
 
    //02.为删除按钮添加点击事件
    //dom元素的删除,注意,不能自杀,需要他杀-通过父元素的 removeChild方法来删除
    //dom元素.removeChild方法来删除 只是将dom元素从dom树里面移除,dom元素还在内存中
    document.getElementById("btnRemove").onclick = function () {
        //02.1测试删除代码
        //var liObjs = document.getElementsByTagName("li");
        //document.getElementById("olList").removeChild(liObjs[0]);
        //调用ol标签的删除放发
        document.getElementById("olList").removeChild(liSelected);
        //将liselected设置为undifned
        liSelected = undefined;
 
    }
 
    //03.为插入按钮 添加点击事件
    //注意,insertBefore在指定位置插入dom元素 父元素点出来的
    //如果不传指定元素位置,那么在最后追加
    document.getElementById("btnInsert").onclick = function () {
        //01.创建dom元素
        var liCreate = document.createElement("li");
        //02.接受用户输入,并且将用户输入设置到创建的li标签中
        var inputStr = prompt("请输入问本值");
        //判断文本的正确性
       if (inputStr == null||inputStr.trim()=="") {
           return;
       }
        //如果不为空才设置
       liCreate.innerHTML = inputStr;
        //03.插入到指定的位置到
        document.getElementById("olList").insertBefore(liCreate, liSelected);
        //04设置点击事件
        liCreate.onclick = highSel;
    }
 
    //修改逻辑
    //01.判断是否选中li标签
    //02.创建一个文本框
    //03.设置文本框的.value
    //04.将文本框追加到li标签里面
    //05.设置文本框的失去焦点事件onblur
    //05.1失去焦点的时候,获取文本框的value值,设置给li标签
 
    //------------全局函数
    //高亮选中方法
    function highSel () {
        //这里的this就是点击的那个li标签
        liSelected = this;
        //还原其他的li标签的颜色
        for (var j = 0; j < liObjs.length; j++) {
            liObjs[j].style.color = "black";
        }
        //高亮显示选中
        this.style.color = "pink";
 
    }
</script>

　　编辑

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="修改选中" id="btnEdit" />
    <ol>
        <li>小苹果</li>
        <li>小西瓜</li>
    </ol>
</body>
</html>
<script type="text/javascript">
    //全局变量 保存点击的li标签
    var liSelect = undefined;
    //添加高亮选中方法
    var liObjs = document.getElementsByTagName("li");
    for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].onclick = function () {
            //还原其他
            for (var j = 0; j < liObjs.length; j++) {
                liObjs[j].style.backgroundColor = "white";
            }
            this.style.backgroundColor = "pink";
            //为全局变量赋值
            liSelect = this;
        }
    }
 
    //为修改按钮添加点击事件
    document.getElementById("btnEdit").onclick = function () {
        //创建一个input标签
        var inputEdit = document.createElement("input");
        //设置input标签的value值
        inputEdit.value = liSelect.innerHTML;
        //清空
        liSelect.innerHTML = "";
        //将input标签追加到li标签里面
        liSelect.appendChild(inputEdit);
        //让文本框获得焦点
        inputEdit.focus();
        //为文本框添加失去焦点事件
        inputEdit.onblur = function () {
            if (inputEdit.value.trim()=="") {
                alert("不能为空");
                this.focus();
                return;
            }
            //将文本框的value值 设置给li标签的html值
            liSelect.innerHTML = this.value;
        }
 
 
 
    }
 
</script>

　　

 

posted @   枫伶忆  阅读(386)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae