首页 > 其他分享> > 2022-07-12 第三小组赖哲栋学习笔记

2022-07-12 第三小组赖哲栋学习笔记

2022-07-12 21:32:31 作者：互联网

1.1函数名的命名规则
- 1.1.1小驼峰式
- 1.1.2大驼峰法
1.2循环
1.3 DOM(重点)
- 1.3.1通过抓取HTML元素
- 1.3.2改变元素的内容
1.4事件
1.5练习

今日重点：文档对象模型DOM、四种循环
知识点掌握情况：了解
学习心得：今天感觉良好，能基本跟上老师的节奏，比之前更有学习的兴趣了。继续加油！

1.1函数名的命名规则

1.1.1小驼峰式

变量一般用小驼峰式标识除第一个单词之外，其他单词首字母大写

let myStudentCount

1.1.2大驼峰法

常用于类名，属性，命名空间等每一个单词的首字母都大写

class = "DataBaseUser"

1.2循环

1.2.1 for循环

let i = 0; 初始化条件，当i=0，循环开始只走一次在第一次循环的时候初始化
i < 10; 判断条件会和初始化条件配合循环的执行
循环体：循环在重复做什么事情
i++ 循环条件每次循环体执行完毕让i产生变化

for(let i = 0;i <10; i++){
 	console.log(i);                    
}

注意:

i可以看做是一个局部变量
循环条件可以根据实际情况更改的
当修改循环条件时，要确保循环可以向着终点前去改变
开发时，要避免死循环

1.2.2 for in 循环

for in语句只能做遍历操作

可以理解为a是arr数组的下标通过映射给a

let arr = [1,2,3,4,5];
for(let a in arr){
  console.log(arr[a]);
}

1.2.3 while循环

语法:

while(a < 100){     //循环判断语句
	let a = 10; 	//初始化条件
    console.log(a);	//循环体
    a++;			//循环条件
}

while 如果条件不成立，一次都不执行

练习：

公司有10个人每年公司会以百分之10的比重招人

问：哪一年公司人数突破100人（今年是2022年）

<script>       
   function count(b, year) {
   while (b < 100) {
   b *= 1.1;
   year += 1;
}
   console.log(year + "年突破" + b);
}
	count(10, 2022);
</script>

1.2.4 do...while循环

语句:

let a = 10;			//初始化条件
do {
	console.log(a);	//循环体
	a++;			//循环条件
} while(a < 100);

do...while先执行一次，再判断无论条件是否成立，都执行一次

死循环：

for(;;){}
while(true){}
do{}while(true);

1.3 DOM(重点)

1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。

2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。

1.3.1通过抓取HTML元素

<body>
    <div class="div1" id="div1">
        <div class="div2" id="div2"></div>
    </div>
	<script>
//1.通过id抓取
let div1 = document.getElementById("div1");  
//2.根据class抓取HTML元素
let div1 = document.getElementsByClassName("div1");
//3.根据tag(标签)来抓取HTML元素
let div1 = document.getElementsByTagName("div");
//新方法
// 1.根据选择器去抓取第一个元素
let div = document.querySelector(".div1");
// 2.根据选择器去获取全部元素
let divs = document.querySelectorAll(".div1");
//获取元素内的所有内容，包括HTML标签
console.log(div.innerHTML);
//获取元素内的文本 不会获取到内部的HTML标签
console.log(div.innerText);
//改变元素的内容
div.innerText = "<b>我是加粗的</b>";
console.log(div.innerText);
	</script>
</body>

1.3.2改变元素的内容

<body>
//改变元素的内容
div.innerText = "<b>我是加粗的</b>";
console.log(div.innerText);
	</script>
</body>

1.4事件

事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。

不要出现双引号套双引号要么双引号套单引号要么单引号套双引号

<body>
    <input type="text" onblur="valid()">
    <button type="button" ondblclick="jump('你好')">按钮</button>
    <select onchange="change()">
        <option value="">吉林省</option>
        <option value="">辽宁省</option>
    </select>
    <script>
        //事件就是当我们和HTML标签元素发生交互时产生的行为
        /*
            onclick 单击事件
            ondblclick  双击事件
            onblur  失去焦点
            onfocus 获得焦点
            onchange 改变事件
            onl oad  加载事件
        */
        //当设置了对应的事件之后，会执行目标函数
        //点击按钮，弹出一个弹窗
        function jump(a) {
            alert("按钮被点击了" + a);
        }
        function valid() {
            console.log("失去了焦点");
        }
        function change() {
            console.log("发生了改变");
        }
    </script>
</body>

1.5练习

<script>
        // 需求 当用户名为admin  密码为123456时，提示登录成功
        // 否则，提示用户名或者密码错误
        /*
            思路:给按钮添加单击按钮
            当点击提交时，获取用户名和密码框输入的值        
            然后进行判断 if()登录成功else用户名或者密码错误!
        */

        let text = document.querySelector("#username");
        let password = document.querySelector("#password");
        function jump() {
            //  value 拿用户名框输入的内容
            if (text.value == "admin" && password.value == "123456") {
                console.log("登录成功");
                alert("登录成功");
            } else {
                console.log("用户名或者密码错误!");
                alert("用户名或者密码错误!");
            }
        }
    </script>

<script>
        /* 
            在用户名的文本框都输入用户名
            如果用户名为admin, 在span显示用户名已被占用
            否则,显示用户名可用
            分析:
            需要给文本框添加onchange  onblur 
            输入函数需要想span中写入内容   innerText    innerHTML
        */
        let input = document.querySelector("#username");
        let span = document.querySelector("span");

        function ll() {
            if (input.value == "admin" || " ") {
                span.innerText = "用户名已被占用";
            } else {
                span.innerText = "用户名可用";
            }
        }
    </script>

<body>
    <select id="sheng" onchange="setShi()">
        <option>----请选择省----</option>
        <option value="jl">吉林省</option>
        <option value="ln">辽宁省</option>
    </select>
    <select id="shi" onchange="setQu()">
        <option>----请选择市----</option>
    </select>
    <select id="qu">
        <option>----请选择区----</option>
    </select>
    <script>
        function setShi() {
            /*
                思路:
                1.抓取省的下拉菜单，知道你选择了哪个省
                2.判断选择了哪个省
                3.构建市的下拉菜单选项
                4.抓取市的下拉菜单

                区的注意事项:
                1.初始状态区没有选项
                2.选择了省、区没有选项
                3.选择了省、选择了市，选择了区，切换了一下省
            */
            let sheng = document.querySelector("#sheng").value
            let shi = document.querySelector('#shi');
            let qu = document.querySelector("#qu");
            //在写入选项之前，先清空一次
            shi.innerHTML = null;
            qu.innerHTML = null;
            shi.innerHTML = '<option>----请选择市----</option>';
            qu.innerHTML = '<option>----请选择区----</option>';
            let html = shi.innerHTML;
            let html1 = qu.innerHTML;
            if (sheng == 'jl') {
                //追加
                html += '<option value="cc">长春市</option><option value="sp">四平市</option>';
                //把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单选项
                shi.innerHTML = html;
            }
            if (sheng == 'ln') {
                //追加
                html += '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
                //在写入选项之前，先清空一次
                //把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单选项
                shi.innerHTML = html;
            }

        }


        function setQu() {
            let shi = document.querySelector('#shi').value;
            let qu = document.querySelector("#qu");
            qu.innerHTML = null;
            qu.innerHTML = '<option>----请选择区----</option>';
            let html1 = qu.innerHTML;
            if (shi == 'cc') {
                html1 += '<option value="ed">二道区</option><option value="ng">南关区</option>';
                qu.innerHTML = html1;
            }
            if (shi == 'sp') {
                html1 += '<option value="tx">铁西区</option><option value="td">铁东区</option>';
                qu.innerHTML = html1;
            }
            if (shi == 'sy') {
                html1 += '<option value="hp">和平区</option><option value="hg">皇姑区</option>';
                qu.innerHTML = html1;
            }
            if (shi == 'dl') {
                html1 += '<option value="zs">中山区</option><option value="">西岗区</option>';
                qu.innerHTML = html1;
            }
        }
    </script>
</body>

标签：12,qu,07,innerHTML,循环,let,2022,shi,document
来源： https://www.cnblogs.com/laizhedong/p/16471852.html

2022-07-12 第三小组 赖哲栋 学习笔记