javaScript详解

这篇博客详细介绍了JavaScript的基本语法,包括数据类型、逻辑运算、字符串、对象和数组的使用。还深入讲解了函数的定义、调用以及作用域,特别提到了严格检查模式和局部变量的let定义。此外,文章还涵盖了DOM操作,如获取、更新、删除和添加节点,以及BOM对象的window、navigator、screen、location和document等。最后,简要提及了jQuery的基本用法和事件处理。
摘要由CSDN通过智能技术生成

javaScript内容详解

定义

JavaScript是一种弱类型的脚本语言,其源代码不需要经过编译,而是有浏览器解释运行用于控制网页的行为

注:CSS的层叠样式是一门表现型语言,并不是编程语言。

快速入门

  1. 通过来引入JavaScript语句

数据类型

数字

number **注:在js中不区分小数和整数。**统一都是number来表示

布尔值

false true

逻辑运算

|| && !

字符串

‘abc’ “abc”

比较运算符

=//表示是赋值运算符
==    //表示的是相等,(注当两个值的类型不相同时,但是值时相等的,其返回的结果仍然为true)
===   //表示绝对等于,在JavaScript中建议使用绝对等于(必须时类型一样值一样)

对象

注:对象时大括号,数组时中括号

var 对象名称={
   属性名:属性值,
   属性名:属性值,
   属性名:属性值,
   属性名:属性值
}
var person={
    age: 3,
    sex:"男",
    name:"张三"
}//在JavaScript中定义对象采用键值对的形式来对对象进行一些赋值

JavaScript中对象,{…}(大括号)表示一个对象,键值对的形式描述属性和属性值,多个属性之间通过逗号隔开,最后一个属性不加逗号

JavaScript中所有的值都是一个字符串,值是任意对象

1、对象的赋值

person.age=3;
person.age;

2、当使用一个对象中不存在的属性的时候,在JavaScript中不会报错,之会显示undefined

3、 在JavaScript中对象的属性可以进行动态的删除

delete person.age  //表示删除person对象中的age属性
true
person

4、在JavaScript中可进行动态的添加新的属性

person.haha="haha"  //表示在person对象中添加新的haha属性
"haha"
person

5、判断属性值是否在对象之中 xxx in xxx

'age' in person
true

6、判断属性是否为这个对象自身所拥有的

person.hasOwnProperty('toString');
false
person.hasOwnProperty('age');
true

严格检查模式

'use strict'//表示严格检查模式,预防JavaScript的随意性出现的问题(必须写在JavaScript的第一行)

在javascript中设置局部变量的时候建议使用let进行变量的定义

'use strict'   //有助于对变量的定义进行审查,当去掉let时,代码会报错。
let i=1;
console.log(i);

注:当在idea中写入‘use strict’报错时,可能的原因是没有设置支持ES6语法

数组

var arry=[1,2,3,4,5,6,7]
arry.length=10;
console.log(arry.length)=10;
arry.length=2;
console.log(arry.length)=2;

注:在JavaScript中数组的长度是动态可变的,当数组的长度变小的时候,会造成数据的丢失

数组中常用的方法

arry.indexof(2)//表示显示在数组中值为2的数值的索引
slice    //表示截取数组的一部分并返回一个新的数组,类似于string中的substring
arry.push  //表示在数组后面添加相应的数值
arry.pop  //表示弹出数组中最后一个元素并相应的减少数组的长度
arry.unshift  //表示在数组的头部添加元素,并相应的增加数组的长度
arry.shift  //表示弹出数组头部的元素,并相应的减少数组的长度
arry.concat([1,2,3])    //对数组进行相应的拼接

Map和 Set

Map

//ES6 Map
//学生的成绩,学生的名字
//var names=["tom","jack","haha"]
// var scores=[100,80,90]


var map =new Map([["tom",100],["jack",90],["haha",80]]);
var name=map.get("tom");//通过key获得value
map.set("sdmin",123456);//新增或者是修改
map.delete("tom");//删除

Set:无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

4、函数

4.1、定义函数

绝对值函数

定义方式一

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

定义方式二

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

方式一与方式二等价

4.2、函数的调用

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

参数问题:JavaScript可以传任意个函数,也可以不传递参数

参数进来是否存在问题

假设不存在参数,如何规避(通过手动来抛出异常)

例:

var abs =function(x){
    //手动抛出异常
    if(typeof x!=="number"){
        throw "this is not a number";
    }
    if(x>=0){
        return x;
    }else{
        return x;
    }
}

4.3、变量的作用域

注:在JavaScript,var定义变量实际是有作用域的。

假设在函数体中声明,则在函数体外不能使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/demo0.js"></script>
    <script>
        function qj(){
            var x=1;
            x=x+1;
        }
        x=x+2;//Uncaught ReferenceError: x is not defined
    at
    </script>
</head>
<body>

</body>
</html>

如果两个函数使用了两个相同的函数名,只要在函数的内部,则不会产生冲突。

当内部函数与外部函数的变量重名的时候!

假设在JavaScript中,函数查找变量从自身的函数开始~,由内向外进行查找,当外部函数存在这个同名变量的时候,其会自动屏蔽外部的函数变量。

注:在js中默认所有的全局变量都绑定在window对象中。

var x="xxx"
window.alert(x);
var old_alert=window.alert;//表示将window.alert赋值给old_alert.
window.alert=function(){
    //表示window.alert被函数function()函数给覆盖
}
window.alert=old_alert;

注:JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果子啊全局作用域都没有找到,报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,则会产生冲突

解决办法

var li={};
li.name="zhangsan";
li.sex="nan";   //表示通过自定义全局变量空间进行全局变量的绑定。

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

局部作用域let
常量const
const pi=3.14//表示为常量不能进行修改
let pi =3.14//表示通过let来表示其为局部变量

5、函数

方法:方法存在与对象当中,对象存在属性,对象中存在方法

函数:

5.1、定义函数

public 返回值类型 方法名(){
    return 返回值;
}
5.1.1、arguments

arguments是一个JS免费赠送的关键字,代表,传递进来的所有的参数,是一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function abd(x){
            for (var i=0;i<=arguments.length;i++) {
                console.log("x是" + x);
                console.log("i是"+i);  //表示对所有的输入的元素进行遍历显示。
            }
        }
        abd(10,12,13,15,1234,78,89,23);
    </script>
</head>
<body>

</body>
</html>

image-20210904093251235

5.1.2、rest

ES6引入的新特性,获取除了已经定义的参数之外的所有参数…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function abc(a,b,...rest){
            console.log("a是"+a);
            console.log("b是"+b);
            console.log("rest是"+rest);//获取除了ab之外其他的参数。
        }
        
    </script>
</head>
<body>

</body>
</html>

image-20210904094356233

注:rest参数只能写在最后面,必须用…来标识。

5.1.3、apply

apply可以改变this的指向。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getAge(){
            var now=new Date().getFullYear();  //获取当前的年份

            return now-this.birth;
        }

        var gq={
            name:"lisi",
            birth:2000,
            age:getAge
        }

        console.log(gq.age());//获取年龄
        console.log(getAge.apply(gq,[]));//apply改变this的指向

    </script>
</head>
<body>

</body>
</html>

image-20210904103820611

5.1.4、Date:表示是展示时间
5.1.5、typeof:判断数据的类型
5.1.6、JSON

JSON定义:是一种轻量级的数据交换格式

在JavaScript中,万物皆对象,任何js支持的类型都可以通过JSON来表示

格式:

  • 对象与map都用{}
  • 数组与list都用[]
  • 所有的键值对都是用key:value
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var abc={
            name:"lisi",
            sex:"男",
            phone:"18366636373",
        }
        console.log(abc);
        var obj=JSON.stringify(abc);//将对象转换为JSON字符串
        console.log(obj);
        var obj1=JSON.parse(obj);//将JSON字符串转换为对象
        console.log(obj1);
    </script>
</head>
<body>

</body>
</html>

image-20210904145622950

5.1.7、class

注:其是在ES6中的新特性

定义一个类、属性、方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        class Student(){
            constructor(name){
                this.name=name;
            }
            hello(){
                alert("hello world");
            }
        }
        var xiaoming=new Student("xiaoming");//继承上边的特性
    </script>
</head>
<body>

</body>
</html>

6、操作BOM对象

浏览器介绍

JavaScript和浏览器的关系?

JavaScript诞生就是为了能够让他们在浏览器中运行

BOM:浏览器对象模型

window

window代表的是浏览器的窗口

Navigator

Navigator,封装了浏览器的信息

navigator.appName   //表示浏览器的名字
'Netscape'
navigator.appVersion  //表示浏览器的版本号
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36'
navigator.userAgent  //表示获取当前用户的信息
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36'

screen

screen表示屏幕尺寸

screen.width//表示屏幕的宽度
1536
screen.height//表示屏幕的高度
864

location

location代表当前页面的URL的信息

location.assign("url")//表示修改URL进行相关地址的跳转

document

  1. document代表的是当前的页面 HTML DOM的文档数,可以改变一些标题
  2. 获取文档的具体的树节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<dl id="app">
    <dt>javaee</dt>
    <dd>java</dd>
    <dd>javase</dd>
</dl>
<script>
    var dl=document.getElementById("app");//获取id为app的节点
    console.log(dl);
</script>   
</body>
</html>
//注:注意在写js语句的时候,注意js语句的顺序

image-20210904191047887

3、document.cookie可以获取网页当前的一些cookie,(网页的一些当前的信息)

image-20210904190911732

history

history代表的浏览器的历史纪录

history.back();//历史记录后退
history.forward()//历史记录前进

7、操作DOM对象

DOM:文档对象模型

核心

浏览器网页就是一个DOM属性结构

  • 更新:更新DOM节点
  • .遍历DOM节点,得到DOM节点
  • 删除:删除DOM节点
  • 添加:添加一个DOM节点

注:要操作一个DOM节点,必须先获取这个DOM节点

获取DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<div id="father">
   <h1>标题一</h1>
   <p class="p1">p1</p>
   <p id="p2">p2</p>
</div>
<script>
   var p2=document.getElementById("p2");//获取id为p2的DOM节点
   var p1=document.getElementsByClassName("p1");//获取Class为p1的DOM节点
   var h1=document.getElementsByTagName("h1")//获取标签为h1的DOM节点
   var father=document.getElementById("father");
   var child=father.children;//获取父节点的所有孩子节点
   var last=father.lastChild;//获取父亲节点的最后一个孩子节点
   var first=father.firstChild;//获取父节点的第一个孩子节点
   var next=p1.nextElementSibling;//获取P1节点的下一个节点
   console.log(next);
</script>
</body>
</html>

更新DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    你好,世界!!
</div>
<script>
   var d2=document.getElementById("d1")
   d2.innerText="你好呀世界";  //可以修改获取相应节点的内容
</script>
</body>
</html>
d2.style.color="red";  //修改相应节点内容的颜色
d2.style.fontsize="200px";  //表示修改其文字的大小
d2.style.padding="20px";//修改内容的内边距

删除节点

删除节点的步骤:先获取父亲节点,只能通过父节点进行相关的删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p class="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    var self2=document.getElementsByClassName("p1");


    var p2=document.getElementById("p2");//获取id为p2的DOM节点
    var p1=document.getElementsByClassName("p1");//获取Class为p1的DOM节点
    var h1=document.getElementsByTagName("h1")//获取标签为h1的DOM节点
    var father=document.getElementById("father");
    var child=father.children;//获取父节点的所有孩子节点
    var last=father.lastChild;//获取父亲节点的最后一个孩子节点
    var first=father.firstChild;//获取父节点的第一个孩子节点
    var next=p1.nextElementSibling;//获取P1节点的下一个节点

    

    var self=document.getElementById("p2");
    var father2=self.parentElement;

</script>
</body>
</html>

插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="p2" style="color: pink;">你好世界!!!</p>
<div id="dt">
    <p id="p1">p1</p>
    <h1 id="h1">h1</h1>
    <h2 id="h2">h2</h2>
</div>
<script>
    var dt=document.getElementById("dt");  //获取父元素的id
    console.log(dt);
    var p2=document.getElementById("p2");  //获取id为p2的id
    dt.appendChild(p2);  //将id为p2的标签移动到div中
    var newp=document.createElement("p");  //创建一个p标签
    newp.id=newp;  //表示为p标签设置id属性
    newp.innerText="hello world";  //表示给id为newp的标签添加hello world的内容
    dt.appendChild(newp);  //表示在父元素中添加一个p标签,
</script>
</body>
</html>

image-20210905193002336

image-20210905193918095

创建一个新的节点标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="" type="text/css">
    <script type="text/javascript">

    </script>
</head>
<body>
<div id="dt">
    <p id="p1">p1|</p>
    <h1 id="hel">hello world</h1>
    <h2 id="hel2"> hello world</h2>
</div>
<script>
    var dt=document.getElementById("dt");
    var myScript=document.createElement("script");   //创建一个script标签
   
</script>
</body>
</html>

效果:

image-20210905200235785

image-20210905200303131

insert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3 id="hel3">hello world</h3>
<div id="dt">
    <p id="p1">p1|</p>
    <h1 id="hel">hello world</h1>
    <h2 id="hel2"> hello world</h2>
</div>
<script>
    var dt=document.getElementById("dt");
    var hel3=document.getElementById("hel3");
    var hel=document.getElementById("hel");
    //dt表示要包含的标签
    dt.insertBefore(hel3,hel);  //hel3表示一个新的标签,hel表示旧的标签。表示在标签hel的前边插入标签hel3

</script>
</body>
</html>

image-20210905201822310

8、操作表单(验证)

表单是什么 from、DOM树

  • 文本框
  • 下拉框
  • 单选框
  • 多选框

获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <p>
        <span>用户名:</span>
        <input type="text"  id="text1">
    </p>
    <p>
        <span>性别</span>
        <input type="radio" value="man"  name="man" id="man" /><input type="radio" value="woman" name="man" id="woman" />//当type类型为radio时,进行单选必须保证name的属性值一致
    </p>
</form>

<script>
    var text1=document.getElementById("text1");
    var man=document.getElementById("man");
    var woman=document.getElementById("woman");
    text1.value="你好世界";  //表示对其赋值
//注:在获取多选按钮value值的时候需要通过false与true来进行判断哪一个被选中
</script>
</body>
</html>

image-20210905223645815

image-20210905223807945

提交表单 MD5加密密码 form表单进行优化

image-20210906105449289

9、初始jquery

注:在jQuery中存在着大量的JavaScript的函数

获取jquery

注:建议使用的jQuery的CDNjQuery查找网络地址

事件

  • 鼠标事件

  • 键盘事件

  • 其他事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <style>
            #divMove{
                height: 500px;
                width: 500px;
                border: 2px solid rebeccapurple;
            }
        </style>
    </head>
    <body>
     mouse: <p id="mouseMove"></p>
    <div id="divMove">
    
    </div>
    <script>
        $(document).ready(function (){
           $("#divMove").mousemove(function (e){
               $("#mouseMove").text("x="+e.pageX+"y="+e.pageY);//获取鼠标在页面中的移动的坐标
           }) ;
        });
    </script>
    </body>
    </html>
    

    image-20210906210412605

操作DOM

常用的框架

获取jquery

注:建议使用的jQuery的CDNjQuery查找网络地址

事件

  • 鼠标事件

  • 键盘事件

  • 其他事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <style>
            #divMove{
                height: 500px;
                width: 500px;
                border: 2px solid rebeccapurple;
            }
        </style>
    </head>
    <body>
     mouse: <p id="mouseMove"></p>
    <div id="divMove">
    
    </div>
    <script>
        $(document).ready(function (){
           $("#divMove").mousemove(function (e){
               $("#mouseMove").text("x="+e.pageX+"y="+e.pageY);//获取鼠标在页面中的移动的坐标
           }) ;
        });
    </script>
    </body>
    </html>
    

    [外链图片转存中…(img-SR2YWzh5-1630940740346)]

操作DOM

常用的框架

image-20210906215036875

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值