JavaScript学习

最新推荐文章于 2024-07-16 16:43:05 发布

weixin_45803006

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量62

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45803006/article/details/133305878

版权

一.什么是JavaScript

1.概述

是一门世界上最流行的脚本语言

Java JavaScript

10天

一个合格的后端人，必须要精通JavaScript

2.历史

ECMAScript是JavaScript的一个标准

二.快速入门

1.引入 JavaScript

1.1内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!-- script内写 JavaScript代码 -->
    <script>
        alert('Hello World！')
    </script>

</head>
<body>


</body>
</html>

1.2外部标签

kk.js中写js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!-- 外部引入-->

    <!-- script标签必须成对出现-->
    <script src="js/kk.js"></script>
    
</head>
<body>


</body>
</html>

2.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--JS严格区分大小写-->
    <script>
         // 1.定位变量 var 变量名=变量值
        var score=71;
        // alert(a)

            // 2. 条件控制
         if(score>60 && score<70){
             alert("良好")
         }else if (score>70 && score<80){
             alert("优秀")
         }else {
             alert("其他")
         }

    //     console.log(score)  在浏览器的控制台打印变量！
    //    F12 
    </script>

</head>
<body>

</body>
</html>

浏览器F12调试需知：

Elements 复刻网站
Console 控制台可以再浏览器的控制台打印变量（调试JS）
Sources 可以打断点进行调试
Network 显示网页请求（抓包）
Application 存储一些简单的数据保存在网页里（查看Cookies ）

3.数据类型

数值吗，文本，图形，音频，视频

变量

名字规范: 下划线 $ 可以存在，不能用数字开头

3.1number

js不区分小数和整数同一用 numer 类型

123 //整数
123.1 //浮点数
1.123e3 //科学记数法
-99 //复数
NaN //不是一个数字
Infinity //表示无限大

3.2字符串

'abc' "abc"

3.3布尔值

true false

3.4逻辑运算

&& 与：两个都为真结果为真

|| 或：一个为真，结果为真

！非：取反

3.5比较运算符（重要）

= 赋值
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用==比较

注意：

NaN与所有的数值都不相等，包括自己
只能通过isNaN(NaN)判断这个数是否是NaN

浮点数问题

<script>
    console.log((1/3)===(1-2/3))
</script>

尽量避免存在浮点数计算，存在精度问题！

<script>
    console.log(Math.abs(1/3-(1-2/3))<0.000001)
</script>

null和underfined

null 空
underfined 未定义

数组

Java必须是相同类型的对象 JS中不需要这样！

var array={1,2,3,4,5,"hello",null,true};

new  Array(1,2,3,4,5,true)

取数组下标，如果越界了，就会 undefined

对象

对象是大括号，数组是方括号

    <script>
        // Person person =new Person(1,2,3,4,5);
        var person={
            name:"kk",
            age:3,
            tags:['js','java','web']

        }
    </script>

控制台取对象的值

person.name
'kk'
person.age
3

4.严格检查格式

局部变量尽量用let定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
/*        'use strict';     严格检查模式 预防JavaScript的随意性导致产生的一些问题
        必须写在JS的第一行
        局部变量建议使用let去定义*/
        'use strict';

        let i=1;
    </script>

</head>
<body>

</body>
</html>

三.数据类型

1.字符串

1.1正常字符串，我们使用单引号或者双引号包裹

1.2注意转义字符

\’

\n

\t

\u4e2d : 中

\u#### ：Unicode字符

\x41 : AscII字符

1.3多行字符串编写

        //tab上面 esc下面
        var msg=`hello
                world
                你好

        `

1.4模板字符串

        /*模板字符串*/
        console.log("a")
        let name="kk"

        let msg=`你好呀、${name}`

1.5字符串长度

str.length

1.6字符串的不可变性

1.7大小写转换

注意：这里是方法，不是属性了

小写:console.log(str.toLowerCase())

1.8 student.indexOf('t')

获取t字母的下标

1.9 substring

student.substring(1) // 从第一个字符串截取到最后一个字符串

student.substring(1,3) // [1,3)

2.数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6]

1.长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化；

如果赋值过小，元素就会丢失

2.indexOf 获取下标

通过元素获得下标索引

字符串的1和“1”是不同的，但用console.log打印出来是差不多的

3.slice（）截取

截取数组的一部分，返回一个新的数组，跟string中的substring原理类似（包头不包尾）

4.push（）,pop（）尾部

push（）压入尾部

pop（）弹出一个尾部元素

5.unshift（）shift（）头部

unshift（）：压入到头部

shift（）：弹出头部的一个元素

6.排序 sort（）

7.元素反转 reverse（）

8.拼接 concat（）

注意：concat()并没有修改数组，只是会返回一个新的数组

9.连接符 join

打印拼接数组，使用特定的字符串连接

10.多维数组

arr=[[1,2],[3,4],["5","6"]];

arr[0][1]
2

数组：存储数据（如何存，如何取，方法都可以自己实现！）

重要：1创数组 4push添加 8拼接

3.对象

若干个键值对

var 对象名={

属性名：属性值，

属性名：属性值，

属性名：属性值

}
    <script>
        'use strict'
        var person={
            name:"kk",
            age:23,
            email:"86870805@qq.com",
            score:0
        }
    </script>
js中对象，{ , , , , }表示一个对象，键值对属性xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript中所有的键都是字符串，值是任意对象！

1.对象赋值

直接：对象名.属性=“ ”；

2.使用一个不存在的对象属性，不会报错！underfined

3.动态的删减属性，通过delete删除对象的属性

delete 对象属性名

4.动态的添加

跟赋值类似，直接给新的属性添加值即可

5.判断属性是否在这个对象中！

xxx in xxx

tostring in person判断为true //继承

6.判断一个属性是否是这个对象自身拥有的hasOwnProperty（）

4.流程控制

1.if判断

2.for,while循环

while循环，避免程序死循环；

3.forEach循环

    <script>
        /*函数*/
        'use strict'
        var age=[2,4,1,5,3];
        age.forEach(function (value) {
            console.log(value);
        })
    </script>

4.for in 循环

1.类似Java增强for循环

for(type str:element){
}

2.for(var index in object){} (index表示下标)

        var age=[2,4,1,5,3];
        for (var key in age) {
            console.log(age[key])
        }

5.Map和Set

1.Map

map.delete(key):删除元素

map.set（key,value）：添加元素

map.get(key):通过key获取value

    <!--Map集合 -->
    <script>
        // var names=["tom","jack","haha"];
        // var sores=[100,90,80];

        var map=new Map([['tom',100],['jack',90],['haha',80]]);
        var name=map.get('tom'); /*通过key获取value*/
        map.set('admin',20)/*添加元素*/
        map.delete('tom');/*删除*/
    </script>

2.Set

无需不重复的集合（集合内无重复元素）

set.delete(value)：删除元素

set.add（value）：添加

console.log（set.has(3)) ：是否包含某个元素

6.iterator

使用迭代器遍历数组

        var age=[2,4,1,5,3];
        for(var x of age){
            console.log(x)
        }

遍历map

        var map=new Map([["tom",100],["jack",90],["haha",80]]);
        for (let x of map) {
            console.log(x);
        }

遍历set

        var set=new Set([3,2,5]);
        for (let number of set) {
            console.log(number);
        }

四.函数

方法：对象（属性，方法）

函数：没在对象内

1.定义函数

java

public 返回值类型 方法名（）{

        return  返回值；

}

定义方式一

绝对值函数

        function abs(x) {
            if(x>=0){
                return x;
            }else {
                return -x;
            }
        }

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是underfined

定义方式二

function(x){....} 这是一个匿名函数，但是可以把结果赋给abs，通过abs就可以调用函数！

        var abs=function (x) {
            if ((x>=0)){
                return x;
            }else {
                return -x;
            }
        }

方式一和方式二等价，但建议使用方式一

调用函数

abs(10)  //10
abs(-10) //-10

参数问题：JavaScript可以传任意个参数，也可以不传递参数~

假设不存在参数，如何规避？

        var abs=function (x) {
            //手动抛出异常
            if(typeof x!=='number'){
                throw 'Not number';
            }
            if ((x>=0)){
                return x;
            }else {
                return -x;
            }
        }

arguments

是一个JS免费赠送的关键字；

代表：传递进来的所有参数，是一个数组！

        var abs=function (x) {
            console.log("x=>"+x);
            for(var i=0;i<arguments.length;i++){
                console.log(arguments[i])
            }
            if ((x>=0)){
                return x;
            }else {
                return -x;
            }
        }

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加的操作。需要排除已有参数~

rest

以前：

            if(arguments.length>2){
                for(var i=2;i<arguments.length;i++){
                    //...
                }
            }

ES6新特性：获取除了已经定义的参数之外的所有参数~ ...

            function aaa(a,b,...rest) {
                console.log("a=>"+a);
                console.log("b=>"+b);
                console.log(rest);
            }

rest参数只能写在最后面，必须用...标识，出去a,b前两个元素，后面的保存在rest数组中

2.变量的作用域

2.1函数的作用域

在JavaScript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数外不可以使用~（非要实现的话，可以研究闭包）

        function k() {
            var x=1;
            x=x+1;
        }
        x=x+2; /*Uncaught ReferenceError: x is not defined*/

内部函数可以访问外部的函数的成员，反之则不行
假设，内部函数变量和外部函数的变量重名，函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

2.2提升变量的作用域

function f() {
    var x="x"+y;
    console.log(x);
    var y='y';
}

结果：xundefined

说明：js执行引擎，自动提升y的声明的位置，但没有提升赋值的位置

这个是JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，利于代码维护。

        function f() {
            var x=1;
            y=x+1,
                z,i,a   /*undefined*/

        }

2.3全局函数

        x=1;
        function f() {
            console.log(x);
        }
        f();
        console.log(x);

全局对象window

        var x='xxx';
        alert(x);
        alert(window.x);

默认的所有全局变量，都会自动绑定在window对象下,包括自己创造的和 alert

        var x='xxx';

        var a=window.alert(x);
        window.alert=function () {

        }
        window.alert(123);/*失效*/

操作window.alert

        var x='xxx';
        var a=window.alert(x);
        window.alert=function () {
        }
        window.alert(123);     /*失效*/
        window.alert=a;        /*恢复*/

JavaScript实际上只有全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找。如果在全局作用域都没有找到，报错RefrenceError

2.4规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突-》如何能够减少冲突？

        //唯一全局变量
        var FanApp={};

    //    定义全局变量
        FanApp.name='Fank';
        FanApp.add=function (a,b) {
            return a+b;
        }

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

jQuery等价于$()

2.5局部作用域 let

        function aaa() {

            for (let i = 0; i < 100; i++) {
                console.log(i)
            }
            console.log(i+1)  //Uncaught ReferenceError
        }

for位置的i定义时候，如果用let 则输出i+1会报错；

如果用var 则会输出101，这是不规范的！

建议大家都用let去定义局部作用域的变量！！！

2.6常量const

在ES6之前，定义常量，将名字定义为大写字母。

在ES6引入了常量关键字，const

        const PI='3.14';
        console.log(PI);
        PI='123';  //TypeError: Assignment to constant variable.
        console.log(PI);

2.7重点练习

操作window.alert()
常量const
局部变量let

3.方法

3.1定义方法

方法就是把函数放在对象的内部，对象只有两个东西：属性和方法

        var f={
            name:'kk',
            birth:1999,
            age:function () {
                var now=new Date().getFullYear();
                return now-this.birth;
            }
        }
        //属性
        f.name;
        //方法，一定要带（）
        f.age();

this.代表什么？this始终指向调用他的对象，当window对应this时，存在无法调用的情况

拆开写上面的代码：

            function getAge() {
                var now=new Date().getFullYear();
                return now-this.birth;
            }
            var f={
            name:'kk',
            birth:1999,
            age:getAge
         };

         f.age()  //ok
        getAge()  //NaN  由window调用，this中不含有birth参数

apply

在js中可以控制this的指向

            function getAge() {
                var now=new Date().getFullYear();
                return now-this.birth;
            }
            var f={
            name:'kk',
            birth:1999,
            age:getAge
         };

/*         f.age()  //ok
        getAge() */ //NaN  由window调用，this中不含有birth参数

        getAge.apply(f,[]);  /*this 指向了f 参数为空*/

五.内部对象

标准对象

1.基本使用

    <script>
        var now=new Date();//Mon Oct 09 2023 13:39:31 GMT+0800 (中国标准时间)
        now.getFullYear();//年
        now.getMonth();//月   国外：0-11月
        now.getDate();//日
        now.getDay();//辛弃疾
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒

        now.getTime();//时间戳：全世界统一，从1970年1月1日 00:00:00

        console.log(new Date(now.getTime()));  //通过时间戳获取当前时间
    </script>

转换

now=new Date();

2.JSON

json是什么

早期，所有的数据传输习惯使用XML文件！

JSON（Java Script Object Notation,js对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中，一切皆为对象，任何js支持的类型都可以用JSON来表示；

格式：

对象都用{}
数组都用[]
所有的键值对都是用 key:value

JSON字符串和JS对象的转化

JSON.stringify JSON.parse

     var user = {
         name: "kk",
         age: 3,
         sex: '男'
     }
     /*  对象转化为json字符串  */
     var jsonUser=JSON.stringify(user)

     /*  json字符串转化为对象,参数为JSON字符串 */
     var obj=JSON.parse('{"name":"kk","age":3,"sex":"男"}');

很多人搞不清楚JSON和JS对象的区别

var obj={a:'hello',b:'hellob'}

var json='{"a":"hello","b":"hellob"}'

3.Ajax

原生的js写法 xhr 异步请求
jQuey 封装好的方法 ${"#name"}.ajax{" "}
axios请求

原生的一般不用，用jQuey即可

六.面向对象编程

1.原型对象

JavaScript、Java/c#。。。。面向对象：JavaScript有一些区别！

类：模板（原型对象）
对象：具体的实例

在JavaScript中，需要大家换一下思维方式！

原型：

    <script>
        var Student={
            name:'kk',
            age:3,
            run:function () {
                console.log(this.name+"在奔跑");
            }
        };

        var xiaoming={
            name:"xiaoming"
        };

    //    原型对象
        xiaoming.__proto__=Student;

    </script>

原型赋给小明后，小明可以调用run方法，类似父类的概念！！

2.class继承

class关键字实在ES6引入的

类定义：

    <script>
        /*定义一个学生类*/
        class Student{
            constructor(name) {
                this.name=name;
            }
            hello(){
                alert('hello')
            }
        }
        
        var xiaoming=new Student("xiaoming");
        new Student("xiaoh");
    </script>

继承

        /*定义一个学生类*/
        class Student{
            constructor(name) {
                this.name=name;
            }
            hello(){
                alert('hello')
            }
        }
        
        var xiaoming=new Student("xiaoming");
        new Student("xiaoh");

        class XiaoStudent extends Student{
            constructor(name,grade) {
                super();
                this.grade=grade;
            }

            myGrade(){
                alert("我是一名学生")
            }
        }

        var xiaoStudent = new XiaoStudent("xh",1);

本质：查看对象原型

原型链

__photo__:

七.操作BOM对象（重点）

JavaScript和浏览器的关系？

JavaScript诞生是为了让他在浏览器中运行！

BOM：浏览器对象模型

IE 6-11
chrome
Safari
FireFox //开发者使用多，linux

三方

QQ浏览器
360浏览器

1.window

window代表浏览器窗口

window.alert(1)
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth

调整浏览器窗口，会发生改变。

2.Navigator

Navigator,封装了浏览器的信息

具体的可以去查手册！

大多时候，我们不会使用navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

3.screen

（代表屏幕尺寸）

屏幕属性，可以通过网页去操作屏幕

4.location（重要！！）

location代表当前页面的url信息，利用这个可以实现重定向

常用属性：

host: "www.baidu.com" （主机）
href: "https://www.baidu.com/" （当前指向的位置，可以实现跳转）
protocol: "https:"
reload: ƒ reload() （刷新网页，重新加载）
设置跳转地址： location.assign（'url'） url为需要跳转的网址

5.document（内容）

document 代表当前的页面 HTML DOM文档树

5.1 获取具体的文档树结点

getElementById（或者利用其它选择器）


<dl id="app">             //自定义列表
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>

</dl>


<script>
    var d1=document.getElementById('app')
</script>

5.2 获取cookie

1.劫持cookie原理

www.taobao.com

<script src="aa.js">  
</script>  //恶意人员：获取你的cookie上传到他的服务器

淘宝登录时候，天猫自动登录，清除cookie后，退出登录。

2.应对措施

服务器端可以设置cookie:httpOnly

6.history（不建议使用）

history代表浏览器的历史记录

 history.back()  // 后退

history.forward() //前进

一些人编写登录成功后，就返回的代码！

八.操作DOM对象（重点）

DOM:文档对象模型

核心

浏览器网页是一个DOM树形结构！

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个DOM节点，必须要先获得这个Dom节点

1.获得dom节点

<script>
    //对应css选择器
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');

    var childrens=father.children;/*获取父节点下所有的子节点*/
/*    father.firstChild
    father.lastChild*/
</script>

2.更新节点

3.删除节点

4.插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干，因为会产生覆盖。

4.1追加（插入已有标签）

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var
        js=document.getElementById("js"),//已经存在的节点
        list=document.getElementById('list');
        list.appendChild(js)

</script>

效果：

4.2 创建一个新的标签，实现插入

<script>
    var
        js=document.getElementById("js"),
        list=document.getElementById('list');

    //通过JS 创建一个新的结点
    var newP=document.createElement('p');//创建一个p标签
    newP.id='newP';
    newP.innerText='Hello newP';
    
    list.appendChild(newP);
</script>

4.3 案例：获取body标签

因为是通过标签名来查找，所以这个方法返回的是一个数组，要制定body[0]才能寻找到该bom结点，使用class选择器也是一样

by标签获得不止一个对象，所以返回集合

方法一通过标签名获取

    var body = document.getElementsByTagName('body');
    body[0].style.backgroundColor='orange';

方法二通过创造style标签

    var mystyle=document.createElement("style");/*创建一个空style标签*/
    mystyle.setAttribute('type','text/css');
    mystyle.innerHTML='body{background-color:yellow}'; /*设置标签内容*/

    document.getElementsByTagName('head')[0].appendChild(mystyle)

九.操作表单

1.表单是什么 form DOM树

文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.....

表单的目的：提交信息

2.获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form>
    <p>
        <div>
            <span>用户名：</span> <input type="text" id="username">
        </div>
    </p>

<!--    多选框和单选框的值都是定义好的value值-->
    <p>
        <span>性别：</span>
            <input type="radio" name="sex" value="Man" id="boy">男
            <input type="radio" name="sex" value="Gril" id="girl">女

    </p>
</form>


<script>
    var input_text = document.getElementById('username');
    input_text.value;//得到输入框的值
    input_text.value='132321' //修改输入框的值

    var boy = document.getElementById('boy');
    var girl = document.getElementById("girl");
    boy.checked;  //如果被选中，显示true 如果没被选中，显示false

    
</script>

</body>
</html>

3.提交表单加密优化

密码加密实现：

设置一个提交表单的拦截函数

通过隐藏域提交

重要！！！

十.jQuery

JavaScript

jQuery库，里面存在大量的javascript函数

1.获取jQuery

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<!--
jQuery的唯一公式
公式：$(selector).action()
-->

<a href="" id="test-jquery">点我</a>

<script>
    // document.getElementById('');

    /*选择器就是css的选择器*/
    $('#test-jquery').click((function () {
        alert('Hello,jQuery！')
    }))
</script>
</body>

jQuery公式：$(selector).action()

选择器+事件（选择器同css一样事件写function()）

2.选择器

<script>
    /*原生js 选择器少  不好记*/
    //标签
    document.getElementsByTagName()
    //id
    document.getElementById()
    //类选择
    document.getElementsByClassName()

    //jQuery   :   css中的选择器 全部可以用
    $('p').click()    // 标签
    $('#id1').click()   //id选择器
    $('.class1').click()   //类选择器
    //文档工具站 https://jquery.cuishifeng.cn/
</script>

文档工具站 https://jquery.cuishifeng.cn/

3.事件

鼠标事件键盘事件

3.1鼠标事件

3.2 案例：获取鼠标当前坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

    <style>
        #divMove{
            width:500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求 获取鼠标当前的一个坐标-->

mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件
/*    $(document).ready(function () {

    })*/

    //该代码相当于上面的简写
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y'+e.pageY)
        })
    })
</script>
</body>
</html>

4.操作Dom

4.1节点文本操作

$('#test-ul li[name=python]').text();  //获得值
$('#test-ul li[name=python]').text('312132'); //设置值
$('#test-ul').html()  //获得值
$('#test-ul').html('<strong>123</strong'); //设置值

4.2 css的操作

$('#test-ul li[name=python]').css({'color','orange'}，{ }, {}...... )

4.3元素的显示和隐藏

元素的显示和隐藏：本质 display：none；

$('#test-ul li[name=python]').show()

$('#test-ul li[name=python]').hide()

$('#test-ul li[name=python]').toggle() //在隐藏图和显示之间切换

娱乐测试

$(window).height()

$(window).width()

$(document).width()

未来ajax（）：

ctrl+alt+l自动对齐！

十一.学习方法

1.小技巧

1.1如何巩固js？

看框架源码.jQuery
看游戏源码

2.1如何巩固html css

扒网站 del逐步删除
全部down下来对应修改看效果

Layer 弹出组件

element-ui(element 网站阿里的样式)

weixin_45803006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

javapublic 返回值类型方法名（）{return 返回值；绝对值函数if(x>=0){return x;一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是underfinedfunction(x){....} 这是一个匿名函数，但是可以把结果赋给abs，通过abs就可以调用函数！return x;方式一和方式二等价，但建议使用方式一。
复制链接

扫一扫