JavaScript和jQuery快速入门

最新推荐文章于 2022-08-19 19:48:57 发布

BitZ2

最新推荐文章于 2022-08-19 19:48:57 发布

阅读量494

点赞数 1

文章标签： javascript intellij idea jquery html

本文链接：https://blog.csdn.net/BitZ2/article/details/109227343

版权

通俗易懂的JavaScript和jQuery

本文只作为简单了解

1、快速入门

1.1 引入JavaScript

1、内部标签

    <script>
        //.....
    </script>

2、外部引入

asd.js

//...

test.html

<script src="asd.js"></script>

我的第一个JavaScript程序

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

<!--    <script>-->
<!--        alert("hello，world");-->
<!--        //注释方法和java一样     结尾要加分号-->
<!--    </script>-->

          <!--     外部引入-->
    <script src="js/first.js"></script>

</head>
<body>

</body>
</html>

1.2 语法入门

基本语法

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

<!--    JavaScript严格区分大小写-->
    <script>
        // 1. 定义变量 变量类型 变量名 = 变量值；
        var score=1;
        // 2. 条件控制
        if (score<60){
            alert("不及格")
        }else {
            alert("及格")
        }

        //console.log(score) 在浏览器的控制台打印变量 -----System.out.println()
        /*
        * 多行注释
        * */
    </script>
</head>
<body>
</body>
</html>

浏览器必备调试须知：

在这里插入图片描述

1.3 数据类型

数值、文本、图形、音频、视频……

js不区分小数和整数

Number

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

字符串

‘asd’ “asd”

布尔值

true false

逻辑运算

&& 两个都为真，结果为真

|| 一个为真，结果为真

！真即假，假即真

比较运算符

== 等于（类型不一样，值一样，也会判断为true）（不要用==比较）

=== 绝对等于（类型一样，值一样，结果为true）

须知：

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

浮点数问题：

console.log(1/3) === (1-2/3)

尽量避免使用浮点数进行运算，存在精度问题。

Math.abc(1/3-(1-2/3))<0.00000000001

null和undefined

null 空
undefined 未定义

数组

var arr = [1,2,3,'hello',null.true]

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

对象

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

// 每个属性之间用逗号隔开，最后一个不用加逗号
var man ={
    name:"kevin",
    age:18,
    tags:['js','java','...']
}

取对象的值

man.name
>"kevin"
man.age
>18

总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 对象
        // 对象是大括号，数组是中括号, 每个属性之间用逗号隔开
         var person = {
             name: "kevin",
             age: 18
         }
         /*对象的取值：
         * person.name   ---->kevin
         * person.age   --->18
         * */

        /*null和undefined
        * null空   undefined未定义
        * */

        //数组
        var arr = [1,2,3,4,5,null,1.5,ture,'hello'];
        new Array [1,22,10,'hello'];

        //逻辑运算
        /* && 两个为真，结果为真
        *  || 一个为真，结果为真
        *  ！ 真即假，假即真
        * */

        //比较运算符
        /*   =  赋值
        *    ==  等于（类型不同，值一样，也会为true）
        *    === 绝对等于（类型和值都相同 结果为true）
        * NaN==NaN，这个与所有的数值都不相等，包括自己
        * 只能通过isNaN(NaN)来判断这个数是否是NaN
        * */

        //number  js不区分小数整数     NaN(not a number)  Infinity无限大

        //字符串  "abc"  "ABC"

        //布尔值  true  false

        //浮点问题
        console.log(1/3) === (1-2/3)
        //尽量避免使用浮点数进行运算，存在精度问题
        Math.abs(1/3-(1-2/3))<0.00000000001

        //变量
        //var 数字不能放第一位 = 值
    </script>
</head>
<body>
</body>
</html>

1.4 严格检查模式

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

    /* IDEA需要设置支持ES6版本
      ‘user strict’严格检查模式 预防JavaScript的随意性导致一些问题 放在第一行
    局部变量建议都用let定义
    */
    <script>
        'user strict'
        //全局变量
        let a = 1;
        // ES6 let      
    </script>
</head>
<body>
</body>
</html>

2、数据类型

2.1 字符串

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

    <script>
        //  `多行字符串  tab键上面那个点，反引号
        var msg = `
        hello
        what
        hi
        你好啊`

        /*  \转义字符
        *   \'
        *   \n
        *   \t
        *   \u****  unicode字符
        *   \x41   Asc11字符
        * */

        //字符串长度  str.length
        //大小写转换  student.toUpperCase()
        //大小写转换  student.toLowerCase()
        
    </script>
</head>
<body>
</body>
</html>

2.2 数组

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

1、长度

arr.length
//假如给arr.length赋值，数组大小就会发生变化，如果赋值太小，数组就会丢失

2、indexOf 获得下标索引 arr.indexof(1)

3、slice() 截取Array的一部分，返回一个新数组

4、push()、pop() 尾部

push;  压入尾部
pop:   弹出尾部的一个元素

**5、unshift()、shift()**头部

unshift();  压入到头部
shift();   弹出头部的一个元素

6、sort() 排序

7、reverse() 元素反转

8、concat()

["A","B","C"]
arr.concat([1,2,3])
["A","B","C",1,2,3]

9、连接符join

["A","B","C"]
arr.join('-')
"A-B-C"

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

       var age = [12,15,18,22,15,13,19,24,29,33];

       //forEach  for in 循环
       // age.forEach(function (value) {
       //     console.log(value)
       // })

       for (var num in age) {
           if (age.hasOwnProperty(num)){
               console.log("存在")
               console.log(age[num])
           }
       }
    </script>
</head>
<body>
</body>
</html>

2.3 对象

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

js中对象{……}表示一个对象，键值对描述属性xxxx：xxxx 属性之间逗号隔开，最后一个属性不加逗号

2.4 流程控制

if判断

var age = 3;
if (age>3){
    alert("aaaaa");
}else{
    alert("bbbb");
}

while循环

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

for循环

for(let i=0;i<10;i++){
    console.log(i)
}

2.5Map和Set

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

    <script>
        'use strict'
        //ES6新特性

        // const names = ['a', 'b', 'c'];
        // const score = [100, 80, 60];

        var map = new Map([['a',100],['b',80],['c',60]]);
        var name = map.get('a');   //通过key获得value
        map.set('admin',12345);    //增加或修改
        map.delete('a');           //删除

        //set 无序不重复集合
        var set = new Set([1,2,33,33,33]);  //set可以去掉重复项
        set.add(4);                         //添加
        set.delete(1);                      //删除
        console.log(set.has(2));            //查找set中是否含有某个元素
    </script>
</head>
<body>
</body>
</html>

2.5 iterator

遍历数组

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

遍历map

var map = new Map([["a",100],["b",80],["c",60]])
for(let x of map){
    console.log(x)
}

遍历set

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

3、函数

3.1 定义函数

方式一

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

执行return代表函数结束，返回结果

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

方式二

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

函数调用

abs()

arguments

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

rest

获取除了已经定义的参数之外的所有参数

function aa(a,b,...rest){
     console.log("a---"+a);
     console.log("b---"+b);
     console.log(rest);
}

3.2 变量的作用域

在JavaScript中，var定义变量是有作用域的

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

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

如果两个函数使用了相同的变量名，只要在函数内就不冲突

function aa(){
    var x=1;
    x = x+1;
}
function aa2(){
    var x= 'b' ;
    x = x+1;
}

内部函数可以访问外部函数的成员，外部则不可以访问内部

全局函数

//全局变量
x=1;
function f(){
    console.log();
}
f();
console.log(x);

局部作用域let

解决局部作用域冲突问题

function aa(){
    for(let i = 0; i<100; i++){
        console.log(i)
    }
    console.log(i+1);
}

常量const

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

3.3 方法

方法就是把函数放在对象里面

定义方法

var kevin = {
    name:'aaa',
    birth:2000,
    //方法
    age:function(){
        var now = new Date().getFullYear();
        return new =this.birth;
    }
}
//属性
kevin.name
//方法  一定加（）
kevin.age()

apply 在js中可以控制this的指向

function getAge(){
     var now = new Date().getFullYear();
        return new =this.birth;
}

var kevin = {
    name:'a',
    birth:2000;
    age:getAge
};

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

4、内部对象

4.1 Date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var now = new Date();
        now.getFullYear();   //年
        now.getMonth();      //月
        now.getDate();       //日
        now.getDay();        //星期
        now.getHours();      //时
        now.getMinutes();    //分
        now.getSeconds();    //秒

        now.getTime();       //时间戳  自1970-1-1 00:00:00 至今的 毫秒数
        console.log(new Date(1602034705729))  //时间戳转为时间

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

4.2JSON

格式：

对象都用{}
数组都用[]
键值对都用key:value

JSON字符串和JS对象的转化

var man = {
name: "Kirk",
age: 3,
sex: "男"
}
//对象转化为json字符串   {"name":"Kirk","age":3,"sex":"男"}
 var jsonman = JSON.stringify(man);
//json字符串转化为对象
  var obj = JSON.parse('{"name":"Kirk","age":3,"sex":"男"}');

在这里插入图片描述

5、面向对象编程

类：模板
对象：具体的实例

        var Student = {
            name: "kevin",
            age: 3,
            run: function (){
                console.log(this.name + "run...");
            }
        };

        var xiaoming = {
            name : "xiaoming"
        };
        
        xiaoming.__proto__ = Student;

        var Bird = {
            fly:function (){
                console.log(this.name + " fly...");
            }
        };

        xiaoming.__proto__=Bird;

class继承

定义一个类、属性、方法

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

var xiaoming = new Student("xiaoming");
var xiaoming = new Student("xiaohong");
xiaoming.hello()

继承

class Student{
      constructor(name){
         this.name=name;
      }
      hello(){
         alert('hello')
      }
  }
class kids extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我还是个孩子')
    }
}
var xiaoming = new Student("xiaoming");
var xiaoming = new Student("xiaohong",1);

6、操作BOM对象

window

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

screen

屏幕尺寸

screen.width
screen.height

location

当前页面URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload()  //刷新页面
location:assign('地址')  //设置新的地址

document

document.title
"百度一下，你就知道"
document.cookie  //获取cookie

history

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

7、操作DOM对象

获得dom节点

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

 var childrens = father.children;  //获取父节点下的所有子节点
//father.firstChid
//father.lastChild

更新节点

<div id="id1">
    </div>
<script>
    var id1 = document.getElementById('id1');
</script>

删除节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>

    var self = document.getElementById('p1');
    var father = p1.parentElement;  
    father.removeChild(self)
    //删除是一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
</script>

插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="p1"> p1 </p>
    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);
</script>

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

<script> 
    var js = document.getElementById('js');  //已存在的节点
    var list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.createElement('p');  //创建一个p标签
    newP.innerText = 'hello';
    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以创建一个style标签
    var myStyle = document.createElement('style');  //创建了一个空style
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}';  //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

8、操作表单

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

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //得到输入的值
    input_text.value
    //修改输入的值
    input_text.value = '123'

    boy_radio.checked; //查看返回的结果
    girl_radio.checked = true; //赋值

</script>

9、jQuery

公式：$(select).action()

<a href="" id="test-jQuery">点击</a>
<script>
    $('#test-jQuery').click(function(){
        alert('hello');
    })
</script>

选择器

//jQuery css中的选择器它都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class').click(); //class选择器

事件

鼠标事件，键盘事件，其他事件

[外链图片转存中…(img-q9BK3iis-1603360505055)]

操作DOM

//节点文本操作
<ul id="id1">
    <li class="js">JavaScript</li>
    <li name="aaa">aaa</li>
</ul>
$('#id1 li[name=aaa]').text();  //获得值
$('#id1 li[name=aaa]').text('设置值');  //设置值
$('#id1').html(); //获得值
$('#id1').html('<strong>123</strong>'); //设置值

//元素的显式和隐藏
$('#id1 li[name=aaa]').show();
$('#id1 li[name=aaa]').hide();