2021年9月7日

回顾

css

1.选择器（class,id,组合，层级）

2.css一些属性

边框的属性

文本字体

背景

浮动

定位

盒子模型

内边距

外边距

让你们布局页面不是为了布页面而布页面的！！！

为了回顾记住这些常用属性！！！

咱们以后学的东西都是封装好的，直接拿来用，但是你得明白这个css是什么意思！！！

bootstrap layui vue 等这些框架，都是封装好的 css不用写，但是你看懂别人什么意思，然后去修改啊！！！

学习js的形式和java特别象！！！是因为这是一门独立的语言！！！

java先学的声明变量的语法格式：int num = 20;

Js中声明变量的语法格式：var num = 20; var值一个关键字，有些同学是有疑问的？你怎么知道这个nums数据类型了呢？浏览器会自动识别，JDK不一样的。js不写前面限制的数据类型也是可以的，好比python,PHP这些语言。java是一个强类型的语言，要求是比较严格的。不然编译器直接报错！！！

1.JS的基本语法格式

1.1Js的数据类型

number 数字（包含了咱们的整数和浮点数）

string 字符串

boolean 布尔

object 对象

array 数组特殊的object

/*
js基本数据类型：
    1.number  包含了整数和小数
    2.String  字符串
    3.boolean  布尔



    关于js的语法格式的注意事项：
            1.如果js代码换行写的话，必须带分号，代表结束
                以后会碰到不换行的写法吗？会，很多！！！
                不换行写的时候，执行效率高！！！（是咱们js代码中一个换行也是需要执行的）
                但是可读性特别差！！！
            2.变量的命名和java中变量命名一模一样！！！
*/
var num= 10;console.log(num);//控制台打印的一个变量叫num
//我怎么知道这个num是一个数字类型的数据
console.log(typeof num);//查看num这个数据类型的  number
var num1 = 22.444488;
console.log(num1);//
console.log(typeof num1);//number

//声明字符串类型的数据
//可以使用单引号吗,也可以使用双引号
var str1 = "你好";
var str2 = '好的很';
console.log(str1)
console.log(str2)
console.log(typeof str1)//string类型的
//字符串拼接输出打印你好好的很
console.log(str1 + str2)

//布尔类型的数据  也是只有两个值   true  false
var ret1 = true
var ret2 = false
console.log(ret1)
console.log(ret2)
console.log(typeof ret1)

//字符串的一些操作，和java中的大差不差！！！
str2  = str2 + "，睡吧"//字符串的拼接,一般用这个
console.log(str2)

str3 = '大肠刺身'.concat(",羊眼刺身")//字符串拼接的一个方法
console.log(str3)

//分割一个字符串，把一个字符串变成一个数组
var arr = "生吃鸡蛋,生吃韭菜,生吃腰子".split(",")
console.log(arr)//和java的数组长得非常象
console.log(arr[2])
console.log(typeof arr)//数组也是objet  数组也看成一个对象了

//去空格  trim
var str4 = "   干锅榴莲 "
 console.log(str4)
 //str4 = str4.trim()//去除空格
 str4 = str4.trimLeft()//去除左边空格
 str4 = str4.trimRight()//去除右边空格
 console.log(str4)
 
 //charAt()  indexOf   lastIndexOf  subString  toLowerCase  toUpperCase 等当时让大家默写java string方法
 
//可以字符串类型的数据，转为number 类型的数据
var i = parseInt("12")//重要，分页需要使用，传参数只能是数字字符串
console.log(i)
console.log(typeof i)
var i1 = parseFloat("3.14")//转换成浮点类型的数据
console.log(i1)
console.log("abcdef".length)//6

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
    </body>
    <!-- 使用第二种引入方式 -->
    <script>
        //对象  以后还会再讲  json对象【重点】
        //主要是  后端java代码返回一个json字符串，然后前端（js）拿到以后转为json对象进行操作
        //全靠这个东西进行前后端数据交互的！！！
        //大括号代表的是一个对象，大括号里面是键值对的数据
        var student = {"name":"梅青", "age":38};
        console.log(student)
        //获取name的值，怎么获取？
        console.log(student.name)
        
        console.log(student.age)
        //还有一种写法
        console.log(student["name"])
        //刚才让大家看了，数组也是Object
        //搞了一个数组，这个数组放了多个对象
        var students = [{"name":"狗蛋", "age":34},
                        {"name":"翠翠","age":12},
                        {"name":"大黄","age":13}]
        console.log(students)
        //获取第一个的对象,name值
        console.log(students[0].name)
        //难一点的对象
        var students1 = {"java":[{"name":"京京"},{"name":"红红"},{"name":"华华"}]}
        console.log(students1.java[0].name)
        //碰到大括号就使用.通过键获取后面的值
        //碰到中括号就使用[]索引下边来获取值
        
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        //声明数组  第一种声明方式
        var arr1 = new Array()
        arr1[0]=12;
        arr1[1]=13
        arr1[2]=14
        console.log(arr1)
        //第二种声明方式  简单 常用
        var arr2 = ["狗蛋", "划算", "旺财"];
        //取数据
        console.log(arr2[2])//旺财，和java中一样都是通过索引进行取数据的
        console.log(typeof arr2)
    </script>
</html>

1.2运算符和分支结构

太简单了，扛不住了，感觉在侮辱你们的智商。

和java一样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        /* 
         算术运算符：+   -  *  /  %
         关系运算符：  >  <  >=  <=  !=  ==   ===
         逻辑运算符：&&  ||  ！
         */
        /* 
         分支结构的语法结构：
            和java一模一样！！！
            if() {}
            if() {} else{}
            if () {} else if(){} else if() {} else{}
            
         */
        var num = 20
        if (num > 20) {
            console.log("hehehda")
        } else {
            console.log("hahada")
        }
        //==  判断数据是否一致
        console.log(1 == "1")//比较的是内容，不看数据类型  true
        console.log(1 === "1")//比较更加严格，要看数据类型的 false
        var num1 = 3;
        switch(num1) {
            case 1:
                console.log("给爸爸打电话")
                break;
            case 2:
                console.log("给妈妈打电话")
                break;
            case 3:
                console.log("给爷爷打电话")
                break;
            default:
                console.log("给奶奶打电话")
                break;
        }
    </script>
</html>

1.3循环

循环可java一样，但是有几个东西比java用起来还方便的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
         /* js里面的循环 和java一样，只不过多了一些东西*/
         /* 
         while() {}
         for() {}
         do{} while()
         */
        var a = 10
        // while(a-- > 0) {
        //  console.log(a)
        // }
        var b = 10
        // do {
        //  console.log("回锅肉"+b)
        //  b--;
        // }while(b > 0);
        // for(var i = 0; i<= 10;i++) {
        //  console.log(i)
        // }
        // for(var i = 1;i < 10;i++) {//控制行
        //  for(var j = 1; j <= i;j++) {
        //      document.write(i + "*" + j + "="+ i*j + "&nbsp;&nbsp;&nbsp;")
        //  }
        //  document.write("<br>")
        // }
        var student = {name:"大黄", age:10};
        //也可以使用循环  类似于增强for循环
        //循环出来key值，有了key能不能获取value值
        for (var studentkey in student) {//遍历对象的
            console.log(studentkey + ":" + student[studentkey])
        }
        
        var students = [{"name":"狗蛋", "age":34},
                        {"name":"翠翠","age":12},
                        {"name":"大黄","age":13}]
        for(var i =0; i < students.length; i++) {
            console.log(students[i].name)
            console.log(students[i].age)
        }
    </script>
</html>

1.4函数（方法）

java中语法格式：public void 方法名字(){}

js中的语法格式：
function 方法名字(参数 1, 参数 2, 参数 3) {
 要执行的代码
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        //声明一个函数，函数是一个功能
        function alertInfio(a) {//带有一个参数的方法,不用带数据类型
            alert(a)//没有返回值，只是一个弹框效果
        }
        //函数调用  函数是条狗，哪里需要哪里吼
        //alertInfio("呵呵哒")
        function add(a, b) {//在声明方法的时候不用写返回值类型，是因为
        //参数都没有带返回值的
            return a + b;//有返回值的
        }
        var num = add(3,4);
        console.log(num)//NaN  not a number  咱们代码出错的时候，额没有报错，但是nan错
        function add(a, b, c){//没有方法的重载的！！！
            return a+b+c
        }
        var num1 = add(1,2,3)
        console.log(num1)
        //开发中很少声明名字一样的方法！！！
        
        //匿名函数，就是没有名字的函数，后面用的相当多
        var func = function (a, b) {
            return a+b
        }
        //变量名字()，相当于调用了这个匿名函数了
        console.log(func(2,3))
        
        //讲解一下闭包
        var arr = [10,5,70,50]
        // var sortFun = function (a, b) {
        //  return a - b;
        // }
        //js中方法的参数可以是一个匿名函数，这个匿名函数被称为闭包
        //当 a- b 是一个正数的话  a  大于b   a和b交换位置
        document.write(arr.sort(function(a, b) {
            return a - b;
        }))
        //java中匿名内部类
        //一个方法的参数是一个接口或者抽象类，咱们直接传参传的是一个接口对象或者
        //抽象类对象
        //js中匿名函数
        //一个方法的参数是一个匿名函数，这个又叫闭包！！！
    </script>
</html>

1.5DOM【重要】

咱们js要修饰html里面的标签，第一步需要找到标签。然后再对标签加一些个效果

document object model 文档对象模型，这个很吊的。

javascript可以把html每一个标签看成一个对象

找到标签，然后标签变成js中的对象

document.getElementById（） ;返回的是一个对象，通过id的事属性值获得的

document.getElementsByClassName("cls1")；返回的是一个数组，通过class属性值获取的

document.getElementsByTagName()；返回值是一个数组，通过标签的名字获取的

document.getElementsByName("ft")；返回的是一个数组，通过name属性获取的

四个方法的目的是找到js要修饰的标签对象。css选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="div1">
            <div>龙飞❤鹏远</div>
        </div>
        <span class="cls1">红牛</span>
        <span class="cls1">雷碧</span>
        <span class="cls1">康帅傅</span>
        <span class="cls1">大个核桃</span>
        
        <p><span>越成熟越真诚</span></p>
        <footer name="ft">想吃辣条了</footer>
        
        <br>
        <!-- onclick单击事件，点一下会执行属性值 刚好放的是一个js的函数，函数在执行 -->
        <button type="button" onclick="divChange()">点一下</button>
        <br>
        <button type="button" onclick="clsChange()">点一下变大变红</button>
        <br>
        <button onclick="tagNameChange()">点击一下内容变化</button>
        <br>
        <button onclick="nameChange()">点击一下内容变化</button>
    </body>
    <script>
        function divChange() {
            console.log("qwer")
            //1.首先找到div1，通过document把div变成一个对象
            //getElementById  得到元素对象依靠id
            var div1 = document.getElementById("div1");
            console.log(div1)
            //innerHTML  获取元素对象的内部包裹的东西
            console.log(div1.innerHTML)//打印，带有标签的！！！
            //替换掉了div1包裹的内容
            //如果赋值的话，替换
            div1.innerHTML = "<span>樯橹灰飞烟灭</span>"
            
            
        }
        function clsChange() {
            
            //找到上面多个span标签对象,验证一句话，id是唯一的，class是可以有多个值的
            var cls = document.getElementsByClassName("cls1")
            console.log(cls)//碰到数组有什么想法？循环
            for (var i = 0; i < cls.length; i++) {
                console.log(cls[i])//每一个span标签对象
                //修饰上面标签的css
                console.log(cls[i].style)//获取标签对象所有的属性
                cls[i].style.color="red"
                // 想要通过js设置样式的时候
                //对像调用style 再调用css样式就行了
                //只不过 css带有-   变为了小驼峰的命名规则
                cls[i].style.fontSize="50px"
            }
            
            
        }
        function tagNameChange() {
            //通过js通过标签的名字来找要修饰的标签对象 
            //
            var tags = document.getElementsByTagName("p")
            console.log(tags)
            //字体的颜色变为金色的，字体大小50px，内容变为说的对
            console.log(tags[0])
            console.log(tags[0].innerHTML)//带有html标签
            console.log(tags[0].innerText)//不带标签只有文本
            //一定要注意先变为对象，数组是没有这些属性的
            tags[0].style.color= "gold"
tags[0].style.fontSize = "50px"
tags[0].style.fontFamily = "宋体"
tags[0].innerText = "说的对"
    }
function nameChange() {
//通过name属性找到footer标签
var ft = document.getElementsByName("ft")
ft[0].style.color = "tomato"
ft[0].style.fontSize = "50px"
ft[0].innerHTML = "大辣片"
    }
</script>
</html>

1.6动态创建div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body id="b1">
		
		<!-- 我一点击button
			按钮，给我在body标签再创建一个div标签
			可以通过js来创建
		-->
		<button onclick="test()">点我啊！！！</button>
	</body>
	<script>
		function test() {
			//1.找到body标签的对象
			var b1 = document.getElementById("b1")
			//2.创建一个div标签对象
			var div1 = document.createElement("div")
			console.log(div1)//3.对这个空的div加一些css属性
			div1.style.width = "300px"
			div1.style.height = "200px"
			div1.style.backgroundColor = "red"
			div1.innerHTML = "我是谁"
			console.log(div1)
			//4.将新建的div对象放到body对象中就行了。
			b1.appendChild(div1)
			
			}
	</script>
</html>

今天多消化消化，看看官方手册，然后官方手册没有看懂，就百度

posted @ 2021-09-07 16:49 张三疯321 阅读(53) 评论(0) 收藏举报

张三疯321