JavaScript

2024-05-10 1305阅读

一、什么是 JavaScritp

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

JavaScript
（图片来源网络，侵删）

JavaScript 控制了网页的行为

二、快速入门

1.内部标签引入



    
    内部标签引入e
    
    
    
        alert("hello,world!!!");

2.外部文件引入



    
    外部文件引入

js/qj.js

alert("hello，world！！！");

3.基本语法入门



    
    Title
    
    
        //1.定义变量
        var num = 1;
        var name = "lfq";
        //2.条件控制
        if (2>1) {
            if (3 > 2) {
                alert("true");
            } else {
                alert("false");
            }
        }

4.数据类型

数值，文本，图形，音频·，视频。。。

变量

var $a
var _q
var qqq

Number

js不区分小数和整数

123  //整数123
132.1    //浮点数123.1
1.123e3    //科学计数法
-99    //负数
NaN    //not a number
Infinity    //表示无限大

字符串

‘abc’ ，"abc"

布尔值

true，false

逻辑运算

&&与
||或
！非

比较运算符

= 赋值
==等于（类型不一样，值一样，也会判断为true）   //有缺陷，最好不要用
===绝对等于（类型一样，值一样，结果为true）

须知：

  • NaN与所有的数值都不相等，包括自己

  • 只能通过 isNaN(NaN)来判断这个数是否是NaN

    null和undefined

    null空
undefined未定义

    数组

    数组中的类型可以不相同

    var arr = [1,2,3,4,5,"abc",'bcd']

    对象

    每个属性之间使用逗号隔开，最后一个不需要添加

    var person = {
    name:"lfq",
    age:3,
    tags:['js','java','css']
}
alert(person.age)

    5. JavaScript的输出

    5.1 页面输出

        document.write("Hello,World!");

    5.2 控制台输出

        console.log("输出一条日志");//最常用

    5.3 弹出窗口输出

        alert("Hello,World!");

    三、数据类型

    1.字符串

    1.正规字符串我们使用单引号或者双引号包裹

    2.注意转义字符\

    \'
\n
\t
\u4e2d  \u#### Unicode字符
\x41           Asclll字符

    3.多行字符串编写

    var msg = `
hello
worle
你好
呀
`

    4.模板字符串

    let name = 'lfq';
let msg = `你好呀，${name}`
console.log(msg)

    5.字符串长度

    str.length

    6.字符串的是不可变的

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9z27RiHJ-1680686395089)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404181710291.png)]

    7.大小写转换

    student.toUpperCase()
student.toLowerCase()

    2.数组

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

    var arr = [1,2,3,4,5,"abc",'bcd']

    1.长度

    arr.length

    3.对象

    var person = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}

    1.赋值

    person.name = "lfq"
person.age = "123"

    2.使用一个不存在的对象属性,不会报错!

    person.halha
undefined

    3.动态的删减属性

    delete person.name    //删除了person对象的name属性

    4.动态的添加属性,直接给新的属性添加值即可

    person.halha = "haha"
"haha"
person

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

    'age' in person
true

    4.流程控制

    if判断

     if (2>1) {
            if (3 > 2) {
                alert("true");
            } else {
                alert("false");
            }
        }

    if-else if

    var age = 18;
if (age  

    while循环
     

    var i = 1;
while (i 
    console.log(i);
    i++;
}

    console.log(i);
    i++;
} while (i 
    console.log(i);
}

    console.log(x)
}

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

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

    //手动抛出异常来判断
    if(typeof x != 'number'){
        throw 'Not a Number';
    }
    if(x=0){
        return x;
    }else{
        return -x;
    }
}

     

    2.变量作用域
     

    函数体中声明，则在函数体外不可以使用
     

    function qj(){
    var x = 1;
    x = x + 1;
}
x = x + 2;//Uncaugh ReferenceError: x is not defined

     

    3.方法
     

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

    var lfq = {
    name: 'lfq',
    bith: 2001,
    age: function () {
        var now = new Date().getFullYear();
        return now-this.bith;
    }
}
//属性
lfq.name
//方法，一定要带()
lfq.age()

     

    this代表了什么？拆开上面的代码试试~
     

    function getAge () {
    var now = new Date().getFullYear();
    return now-this.bith;
}
var lfq = {
    name: 'lfq',
    bith: 2001,
    age: getAge()
}

     

    五、内部对象
     
 
 
    标准对象
     
 

    number，string，boolean，object，‘function’，undefined
     

    1. Date
     

    var date = new Date();
date.getFullYear();//年
date.getMonth();//月
date.getDate();//日
date.getDay();//星期几
date.getHours();//时
date.getMinutes();//分
date.getSeconds();//秒
date.getTime();//时间戳 全世界统一
console.log(new Date(1578106175991));//时间戳转换为时间

     

    2. JSON
     
 
 
    JSON是什么
     
 

    早期，所有数据传输习惯地使用XML文件
    • JSON是一种轻量级的数据交换格式
    • 简洁和清晰的层次结构是的JSON成为理想的数据交换格式
    • 易于人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率

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

      格式

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

        JSON字符串和js对象的转换

        //对象转换为JSON字符串
var jsonUser = Json.stringify(user);
//json字符串转换为对象
var obj = JSON.parse('{"name":"lfq","age":3,"sex":"男"}')

        六、面向对象编程

        原型对象

        ​ 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

        ​ 如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过_proto__（隐式原型）来访问该属性。当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。

        class继承

        1.定义一个类，属性，方法

        class Student{
    
 constructor(name) {
     this.name = name;
 }
    
 hello(){
     alert('hello')
 }
}
var student1 = new Student();
console.log(student1.hello())

        2.继承

        class xiaoStudent extends Student{
    constructor(name,grade) {
        super();
    }
}

        七、操作BOM对象

        1.概述

        浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。

        浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：

        • Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象

        • Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

        • Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

        • Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

        • Document：代表当前页面

        • History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效

        • 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

          2.window

          window代表 浏览器窗口

          window.alert(1)
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
//获取浏览器窗口高度宽度

          3.Navigator

          Navigator，封装了浏览器的信息

          navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.62'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.62'
navigator.platform
'Win32'

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

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

          4.screen

          screen代表屏幕尺寸

          screen.width
2048
screen.heigth
1152

          5.location

          location代表当前页面的URL信息

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XpbKbtQR-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405141727820.png)]

          location.assign('http://baidu.com/')  //设置一个新的地址
reload:f reload()  //刷新网页

          6.document

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

          document.title
'百度一下，你就知道'

          获取具体的文档树节点

          

    
    Title



    Java
    JavaSE
    JavaEE
    
    
        var dl = document.getElementById('app');

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-umHeVTKo-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405142756810.png)]

          获取cookie

          document.cookie

          7.history

          history代表浏览器的历史记录

          history.back()  //后退
history.forward()  //前进

          八、操作DOM对象

          DOM：文档对象模型

          浏览器网页就是一个Dom树形结构

          • 更新：更新Dom节点
          • 遍历dom节点：得到Dom节点
          • 删除：删除一个Dom节点
          • 添加：添加一个Dom节点

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

            1.获取dom节点：

            

    
    Title



            标题一
            

            p1
            

            p2
            

    document.getElementsByTagName('h1')
    document.getElementById('p1')
    document.getElementsByClassName('p2')

            2.更新Dom节点：

            操作文本：

            p1
            

    var p1 = document.getElementById('p1')
    p1.innerText = 'ppp'     //修改文本的值

            操作JS：

            p1.style.color = 'yellow'
p1.style.fontSize = '20px'
p1.style.padding = '2em'

            3.删除节点

            删除节点的步骤，先获取父节点，再通过父节点删除子节点

            
    
            p1
            

            
father.removeChild(p1)
father.removeChile(father.child[0])

            4.插入节点

            我们获得了某个Dom节点，假设这个Dom节点是空的，那我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，那就会产生覆盖

            追加：

            JavaScript
            

            
    
            JavaSE
            
    
            JavaEE
            
    
            JavaME
            

            

    var js = document.getElementById('js')
    var list = document.getElementById('list')
    list.append(js)    //追加

            [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCffyKlw-1680686395090)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230405151104350.png)]

            创建一个新的标签：

                var js = document.getElementById('js')
    var list = document.getElementById('list')
    var newP = document.createElement('p')
    newP.id = 'newP'
    newP.innerText = 'hello'

            九、操作表单(验证)

            表单：form

            • 文本框 text
            • 下拉框
            • 单选框 radio
            • 多选框 checkbox
            • 隐藏域 hidden
            • 密码框 password

              操作表单：

                  用户名：


    var input = document.getElementById('username')    //得到文本框的值
    input.value = '123'    //修改文本框的值

              提交表单：

                  
              
    用户名：
    
              
    
              
        密码：
    
              
    
              
        提交
    
              


    function aa(){
        var username = document.getElementById('username')
        var password = document.getElementById('password')
        console.log(username.value)
        console.log(password.value)
    }

              十、jQuery

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

              1.引入

              本地引入：

              

    
    Title

              CDN引入：

              2.快速使用

              

    
    jQuery




    $(function () {
        // 请将jQuery代码书写在这里 ...
        alert('Hello,World!');
    });

              3.选择器

              标签选择器：

              $('div')

              id选择器：

              $('#btn')

              class选择器:

              $('.red')

              4.方法

              attr()

              方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

              我是段落
              
$('#content').attr('title', '我是attr修改后的段落标题');

              prop()

              方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

              复选框
$(':checkbox').prop('checked', 'true');

              val()

              方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

              $(':text').val('123456');

              css()

              方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

              我是div
              
$('div').css({
    'background': 'red',
    'color': 'white'
});
VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

相关阅读

目录[+]