javaScript中的语法和基本使用

javascript

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

快速入门

方式一，运行在html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不要写成自闭合 -->
    <script>
        alert("hello,js");
    </script>
</head>
<body>
</body>
</html>

方式二，运行单独的js文件

alert("hello,js");

引入在html中

注意类型不能直接为javascript，否则浏览器窗口无响应！

<script src="js/js1.js" type="application/javascript"></script>

数据类型快速预览

数字：123,12

字符串：‘ss’，"s"

布尔值：true，false

逻辑运算：&&，||，！

比较运算符：=，（数值相等，类型不相同也为true），=（类型和数值都相等结果为true）

数组：

//js中的数组可以存放各种数据：
var s=[1,2,"s",'f',true]

对象

var person={
    name:"xiaoming ",
    age:3,
    tags:["js","java","linux"]
}

取值

person.name

>"xiaoming "

person.age

>3

严格检查模式

<script>
    //严格检查模式
    'use strict'
    //这种定义也成功，并且为全局变量很危险
    //i=1;

    //上面开启了严格检查模式，所以这种用法将会在运行报错未定义
    s="ss";
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JVeAPyWc-1657954818031)(../AppData/Roaming/Typora/typora-user-images/image-20220716080807719.png)]

数据类型

字符串

\'
\n
\t
\u4e2d   \u#### unicode
\x41  ascll
s.length
s.indexOf(1)
s.indexOf('s')
s.constructor

数组

//常用方法
var arr=[1,2,3,4]  //定义数组
arr.length    //长度
arr.indexOf(2) //索引 
arr.slice(3)  //分割
arr.push('a','b') //尾插
arr.pop()  //尾出
arr.shift(3)//头插
arr.sort()  //排序
arr.join('-') //连接字符串

对象

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
    ……
}

动态的删除属性：

delete person.name

动态的添加属性：

person.name="hhh"

判断属性值是否在对象中：

name in person

判断属性是自己的还是父类的：

hasOwnProperty

流程控制

if判断：

var age=3;
 if(age>3){
     alert("3");
 }
else if(age<3){
            alert(1);
        }
else
    alert(2);

while判断：

while(age<100){
    age+=1;
    console.log(age);
}

for循环：

for(var i=0;i<100;i++){
    console.log(i);
}

forEach循环：

var arr=[12,2,3,4,21,23]
arr.forEach(function (value) {
    console.log(value)
})

for……in……循环：

map和set不能使用此方法遍历！！！

for(var num in arr){
    console.log(arr[num]);
}

map：

var map = new Map([["tom",100],["jack",80],["haha",70]]);
var name=map.get("tom");//通过key获取value
console.log(name);
map.set("admin",123);//添加或者修改
map.delete("admin");//删除

set：

无序不重复

//会自动去重
var set = new Set([2,1,1,1]);
set.delete(1); //删除元素1
set.add(3);//添加3
set.has(3);//是否包含某个元素

for of遍历：

遍历数组：

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

遍历map

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

遍历set

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

函数

定义方式一：

function f(x) {
    if(x>10){
        return x;
    }else
        return 0;
}

定义方式二：

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

调用函数：

f(10);
f(22);

手动抛出异常：

function f(x) {
    if(typeof x!=='numberm'){
        throw "not a number";
    }
    if(x>10){
        return x;
    }else
        return 0;
}

arguments关键字：

传递过来的所有参数为一个叫arguments的数组，可以拿到所有参数！

function f(x) {
    for(var i=2;i<arguments.length;i++){
        console.log(arguments[i]);
    }
}

rest关键字：

当传递的的参数过多时，不必都定义定义，使用rest取出

function a(x,y,...rest) {

        console.log("x==="+x);
        console.log("y==="+y);
        console.log(rest);

}

变量作用区域

1.var定义的变量，在函数体内，只能在函数体内有效。因此不同函数内可以定义相同名字的变量。

2.内部函数可以访问外部的成员，反之则不行。

3.内部和外部函数重名的时候，从自身变量开始，从内部到外部查找，重名后内部会屏蔽外部。

4.在定义之前引用，不会报错只会说没有赋值。因此所有的变量定义放在头部，可以不用赋值，规范统一定义。

5.window全局对象，全局变量都会绑定到它下面。

6.如果有多个js文件都要去绑定到window是会产生冲突和问题的，因此我们需要定义自己的全局对象绑定变量。

//解决window冲突问题
//定义自己的全局对象名，所有变量绑定给它
var pangApp={};
pangApp.name="panglili";
pangApp.add=function (a,b) {
    return a+b;
}

7.局部作用变量定义为let。

8.常量用const定义。

方法

直接定义在对象内部的就是一个方法，但是通常在函数内部只写一个函数名，函数体放在外面，看起来更加规范。

function hobby() {
    var h="sleep";
    return h;
}
var person={
    name:"tata",
    age:18,
    hobby:hobby
}
console.log(person.name+person.age+person.hobby());

apply方法：通常所有的函数都会有一个apply方法，可以指向具体调用者。

hobby.apply(person,[])//后面参数为空

Date使用

var date = new Date();
/*
date  
Sat Jul 16 2022 10:15:24 GMT+0800 (中国标准时间)
date.getDate() 
16 日
date.getHours()
10  //时
date.getMonth()
6   //月 从0-11
date.getDay()
6   //星期几并非当前日

*/

json对象

轻量级的数据交换格式。任何js的类型都可以用json表示。

  • 对象都用{}
  • 数组都用[]
  • 键值对都用：key：value
var user={
    name:"tata",
    age:18,
    sex:"nv"
}
//对象转换为json
var s = JSON.stringify(user);
console.log(s);
//json转换为对象
var parse = JSON.parse(s);
console.log(parse);

json格式：'{"name":"tata","age":18,"sex":"nv"}',本身是一个字符串

面向对象编程

类：模板

对象：具体的实例

继承方式一：原型继承

//一个学生对象，有名字有年龄，有跑步的方法
var Student={
    name:"student",
    age:4,
    run:function () {
        console.log(this.name+"run……")
    }
};
Student.run();
//小明只有名字
var xiaoming={
    name:"xiaoming"
};
//小明以原型的方式继承了students
//注意是有两个下划线……
xiaoming.__proto__=Student;
xiaoming.run();

继承方式二：class继承

class Student{
    constructor(name){
        this.name=name;
    }

    hello(){
        alert("hello");
    }
}

class s extends Student{
    constructor(name,grade){
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert("i is a xiao xue sheng")
    }
}

var student = new Student("xioaming");
var s1 = new s("xiaoming",1);

本质还是查看对象原型。

操作BOM对象

BOM：浏览器对象模型。

window代表浏览器窗口

//浏览器窗口信息
window.alert
ƒ alert() { [native code] }
window.innerHeight
75
window.innerWidth
527
window.outerHeight
616
window.outerWidth
1069

screen:屏幕信息

screen.width
1536
screen.height
864

location

host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/javaSE_01/base/com/javascript/demo13.html?_ijt=pp0bf3uuq413bgr2guo60ec6b5"
origin: "http://localhost:63342"
pathname: "/javaSE_01/base/com/javascript/demo13.html"
port: "63342"
protocol: "http:"
reload: ƒ reload() //刷新
location.assign('https://blog.csdn.net/weixin_48595687?type=blog')//跳转页面

document：代表当前页面

document.title   //获得标题
'知乎 - 有问题，就会有答案'
document.title='塔塔是最棒的' 
'塔塔是最棒的'
document.getElementById  //通过id获得元素
ƒ getElementById() { [native code] }
document.cookie   //获得cookie
''

history：前进后退

history.forward()；

history.back();

操作DOM

  • 查找dom节点

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>h1</h1>
<p id="p">p</p>
<p class="p1">p1</p>

<script>

     document.getElementsByTagName('h1');
     document.getElementsByClassName('p1');
     document.getElementById('p');
</script>
</body>
</html>

  • 更新dom节点

    //给节点添加html属性
id1.innerHTML='<strong>123</strong>';
'<strong>123</strong>'
//给节点添加文本
id1.innerText='456';
'456'

    //给节点添加样式
id1.style.color='yellow';
'yellow'
id1.style.fontSize='20px';
'20px'

  • 删除dom节点

    步骤：1.获取父节点

    ​ 2.通过父节点删除

    var name1 = document.getElementById('father');

    name1.removeChild(id1);

  • 添加dom节点

在没有dom节点的时候，使用innerHtml已经可以实现插入一个节点了，但是有节点的时候就不可以了，会覆盖以前的节点。

追加

list.append(id1);

//创建标签

var myScript=document.createElement("script")

//加属性

myScript.setAttribute("type","text/JavaScript)

//插入

list.insertBefore('new','old')

操作dom中的表单

  • 文本框

  • 下拉框

  • 单选框

  • 多选框

    ……

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

<form action="#" >
    <p>name:</p>
    <p><input type="text" id="username" ></p>
    <p>sex:</p>
    <p><input type="radio" checked="checked" id="boy" name="sex" value="nan"></p>
    <p><input type="radio" id="girl" name="sex" value="nv"></p>

</form>
<script>
    var byId = document.getElementById('username');
    var boy = document.getElementById('boy');
    var girl = document.getElementById('girl');
    
</script>

</body>
</html>

jquery

jQuery库存放大量的jar包。

使用：$（） 相当于jQuery.可以获取它的参数。

jQuery入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<a href="" id="text-jquery">dianwo</a>
<script>
    $('#text-jquery').click(function () {
        alert("1");
    })

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

jquery选择器：$('selector').action()

<script>
    //原生js选择
    //id
    document.getElementById();
    //标签
    document.getElementsByTagName();
    //类
    document.getElementsByClassName();

    //jquery选择器 还有css中的选择器它也包含
    $('p').click();//标签
    $('.class1').click();//类
    $('#id1').click();//id
    
</script>

鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpnveyuM-1657954818034)(../AppData/Roaming/Typora/typora-user-images/image-20220716141847918.png)]

jQuery操作dom

<ul>
    <li id="java">java</li>
    <li id="python">python</li>
    <li class="li1">linux</li>
    <li class="li">php</li>
</ul>
<script>
    $('li[id=java]').text(); //获得值
    $('li[id=python]').html();//获得html元素
    $('li[id=python]').html('<strong>123123</strong>');//添加html属性
    $('li[class*=li]').css({"color":"red"});//添加css属性
    $('li[class*=li]').show(); //显示
    $('li[class*=li]').hidden();//隐藏
</script>
posted @ 2022-07-16 15:04  路漫漫qixiuyuanxi  阅读(89)  评论(0)    收藏  举报