JavaScript快速入门

已于 2022-09-04 13:36:47 修改
阅读量172 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 开发语言
于 2022-09-04 13:33:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingyibuok/article/details/126688465
版权

1、快速入门

1.1 引入JavaScript

  1. 内部标签

    <!--script标签内，写JavaScript代码-->
<script>
    alert('hello world!')
</script>

  2. 外部引入

    xxx.js

    alert('hello world!')

    xxx.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
<!--外部引入-->
<!--注意：script必须成对出现-->
    <script src="js/JY.js"></script>

<!--不显示定义type，也默认就是JavaScript-->
    <script type="text/javascript"></script>

</head>
<body>

<!--这里也可以存放-->
</body>
</html>

1.2 基本语法入门

<!--JavaScipt严格区分大小写-->
<script>
    // 1.定义变量   变量类型 变量名 = 变量植;
    var score = 70;
// 2.条件控制
if (score>60 && score<70){
    alert('60~70');
}else if(score>70 && score<80){
    alert('70~80')
}else{
    alert('other');
}

// console.log(score) 在浏览器控制台打印变量 System.out.println();

</script>

浏览器必备调试须知：
在这里插入图片描述

1.3 数据类型

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

变量

var a = 1;

number

js不区分小数和整数，Number

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

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算

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

||	//一个为真 结果为真

!	//真即假 假即真

比较运算符

=

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

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

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

须知：

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

浮点数问题：

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

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

console.log(Math.abs((1/3) === (1-2/3))<0.000000000001)
>true

null和undefined

  • null 空
  • undefined 未定义

数组

Java的数组中的数值必须是一系列相同类型的对象，JavaScript中不需要这样

//保证代码的可读性，尽量使用[]

var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,2,3,4,5,'hello');

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

undefined

对象

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

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

var person = {
    name: "JY",
    age: 3,
    tags: ['js','java','web','...']
}

取对象的值

person.name
> "JY"
person.age
> 3

1.4 严格检查模式

在这里插入图片描述

<!--
前提：IDEA需要设置支持ES6语法
'use strict'  严格检查模式 预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都使用let去定义
-->
<script>
    'use strict'
	//全局变量
	let i = 1;
	//ES6 let
</script>

2、数据类型

2.1 字符串

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

  2. 特殊符合使用转义字符 \

    \'
\n 		换行
\t 	 	table
\u4e2d  \u#### Unicode字符
\x41	Ascll字符

  3. 多行字符串编写

        var msg =
        `nihao
        你好呀
        啊啊
        `

  4. 模板字符串

    var name = 'JY';
var age = 1;

var msg = `你好，${name}，${age}`;

  5. 字符串长度

    str.length

  6. 字符串的可变性

    不可变
    在这里插入图片描述

  7. 大小写转换

    //注意，这里是方法，不是属性了
str.toUpperCase()
str.toLowerCase()

  8. 获取下标

    str.indexOf('t')

  9. 截取/切片字符串

    [)
str.substring(1)	//从下标为1的字符截取到最后一个字符
str.substring(1,3)	//[1,3)

2.2 数组

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

var arr = [1,2,3,4,5,6]
  1. 长度
arr.length

​ 注意：假如给arr.length赋值，数组大小就会发生变化。如果赋值过小，元素就会丢失。

  1. indexOf，通过元素获得下标索引
arr.indexOf(2)
> 1

字符串的“1”和数字 1 是不同的

  1. slice()，截取数组Array的一部分，返回一个新数组[start,end)，类似于String中的substring

  2. push()和pop() 尾部

push：压入到数组尾部
pop：弹出尾部的一个元素
  1. unshift()和shift() 头部
unshift()：压入到头部
shift()：弹出头部的一个元素
  1. 排序 sort()
arr = ['B','C','A']
arr.sort()
arr = ['A','B','C']
  1. 元素反转 reverse()
arr = [3, 4, 5, 6]
arr.reverse()
arr = [6, 5, 4, 3]
  1. 拼接 concat()
arr = [6, 5, 4, 3]
arr.concat(['A','B','C'])
> [6, 5, 4, 3, 'A', 'B', 'C']
arr = [6, 5, 4, 3]

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

  1. 连接符 join

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

arr = [6, 5, 4, 3]
arr.join('-')
> '6-5-4-3'
arr = [6, 5, 4, 3]
  1. 多维数组
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
> 4

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

2.3 对象

若干个键值对，JS中的对象，{…}表示一个对象，键值对描述属性 xxx: xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。

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

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

var person = {
    name: "JY",
    age: 3,
    score: 60,
    email: "2421500977@qq.com"
}
  1. 对象赋值
person.name
> 'JY'
person.name = 'LMX'
person.name
> 'LMX'
  1. 使用一个不存在的对象属性，不会报错！
person.haha
> undefined
  1. 动态的删减属性 delete
person
> {name: 'LMX', age: 3, score: 60, email: '2421500977@qq.com'}
delete person.name
> true
person
> {age: 3, score: 60, email: '2421500977@qq.com'}
  1. 动态添加属性
person
> {age: 3, score: 60, email: '2421500977@qq.com'}
person.haha = 'haha'
> 'haha'
person
> {age: 3, score: 60, email: '2421500977@qq.com', haha: 'haha'}
  1. 判断属性值是否在这个对象中 xxx in xxx
person
> {age: 3, score: 60, email: '2421500977@qq.com', haha: 'haha'}
'age' in person
> true

//继承
'toString' in person
> true
  1. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
> false
person.hasOwnProperty('age')
> true

2.4 流程控制

if 判断

var age = 3;

if (age<3){
    alert("haha");
}else if(age<10){
    alert("qaq");
}else{
    alert("kuwa");
}

while循环，避免程序死循环

var age = 3;

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

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

for循环

var age = 3;

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

forEach循环

5.1引入

var age = [1,3,45,646,4234]

age.forEach(function(value){
            console.log(value)
}
)

for…in循环

var age = [1,3,45,646,4234]

//for(var index in object){}
//num为数组下标
for(var num in age){
        console.log(age[num])
}

2.5 Map和Set

ES6的新特性

Map：

//ES6 Map
var map = new Map([['tom',99],['jack',80],['jerry',100]]);
var name = map.get('tom');//通过key获取value
map.set('admin',123456);//新增或修改
map.delete('tom');//删除
console.log(name);

Set：无序不重复的集合

var set = new Set([3,1,1,1,1]);
//set可以去重
set
> Set(2) {3, 1}

set.add(2)//添加
set
> Set(3) {3, 1, 2}

set.delete(1)//删除
set
> Set(3) {3,2}

console.log(set.has(3));//是否包含某个元素
> true

2.6 iterator

ES6新特性

for…of方法遍历数组

var arr = [3,4,5];

//for...of  ES6才出现
//x为数组元素
for(var x of arr){
    console.log(x);
}

遍历Map

var map = new Map([['tom',100],['jack',90],['haha',80]]);

for(var x of map){
    console.log(x);
}

遍历Set

var set = new Set([5,6,7]);
for(var 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(x){
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

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

调用函数

abs(10)
> 10
abs(-10)
> 10

参数问题：JavaScript可以任意个参数，也可以不传递参数。参数进来是否存在问题？假设不存在参数，如何规避？

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

arguements

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

var abs = function(x){

    console.log("x>="+ x);

    for(let i=0; i<arguments.length; i++){
        console.log(arguments[i]);
    }

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

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

rest

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

以前：

function aaa(a,b){
    console.log("a>="+ a);
    console.log("b>="+ b);
    if(arguments.length>2){
        for(var i=0; i<arguments.length; i++){

        }
    }
}

现在：

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

}

rest参数只能写在最后面，必须用 … 标识。

3.2 变量的作用域

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

假设在函数体中声明，则在函数体外不可以使用。（想要实现可以通过闭包）

function jy(){
    var x = 1;
    x = x + 1;
}

x = x + 2;//Uncaught ReferenceError: x is not defined

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

function jy(){
    var x = 1;

    function jy2(){
        var y = x + 1;
    }

    var z = y + 1;//Uncaught ReferenceError: z is not defined
}

在JavaScript中函数查找变量从自身函数开始，由"内"向“外”查找，如果外部函数存在与内部函数同名的变量，则内部函数会屏蔽外部函数的变量。

function jy(){
    var x = 1;

    function jy2(){
        var x = 'A';
        console.log('inner>='+x);
    }
    console.log('outer>='+x);
    jy2()
}

jy()

> outer>=1
> inner>=A

提升变量的作用域

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

结果：xundefined

说明：js的执行引擎自动提升了y的声明，但是不会提升变量y的赋值。

function jy(){
    var y;
    
    var x = 'x' + y;
    console.log(x);
    y='y';

}

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

function jy(){
    var x = 1,
    	y = x + 1,
    	z,i,a;//undefined
    
    //之后随意用
}

全局函数

//全局变量
var x = 1;

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

全局对象：window

var x = 'xxx';
alert(x);
//默认所有的全局变量，都会自动绑定在window对象下
alert(window.x);

alert()这个函数本身也是一个window的变量；

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//old_alert(x);

window.alert = function(){
    
}
//发现alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

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

规范

由于所有的全局变量都会自动绑定到 window 上。如果不同的js文件使用了相同的全局变量，就会产生冲突。

如何能够减少冲突？

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

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

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

局部作用域 let

function aaa(){
    for(var i=0; i<100; i++){
        console.log(i);
    }
    console.log(i+1);//问题？ i出了for循环作用域还可以使用
}

ES6引入了 let 关键字，解决局部作用域冲突问题

function aaa(){
    for(let i=0; i<100; i++){
        console.log(i);
    }
    console.log(i+1);//ReferenceError: i is not defined
}

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

常量 const

在ES6之前，怎么定义常量：只要用全部大写字母命名的变量就是常量，约定不要修改这样的值。

var PI = '3.14';

console.log(PI);
PI = '123';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字 const

const PI = '3.14';//只读变量

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

3.3 方法

定义方法

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

var JY = {
    name: 'jingyi',
    birth: 2000,
    //方法
    age: function (){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

//属性
JY.name
//方法，一定要带()
JY.age()

this.代表什么？拆开上面的代码块看看~

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

var JY = {
    name: 'jingyi',
    birth: 2000,
    //方法
    age: getAge
}

//JY.age()  ok
//getAge()	NaN   window

this一般情况下是无法指向的，默认指向调用它的那个对象；

apply

在JavaScript中可以通过 apply 控制this指向！

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

var JY = {
    name: 'jingyi',
    birth: 2000,
    //方法
    age: getAge
}

var jack = {
    name: 'jingyi',
    birth: 2001,
    //方法
    age: getAge
}

getAge.apply(JY,[]);
> 22
getAge.apply(jack,[]);
> 21
//this 指向了指定对象，并且参数为空

4、内部对象

标准对象

typeof 123
> 'number'
typeof '123'
> 'string'
typeof true
> 'boolean'
typeof NaN
> 'number'
typeof []
> 'object'
typeof {}
> 'object'
typeof Math.abs
> 'function'
typeof undefined
> 'undefined'

4.1 Date

基本使用

var now = new Date();
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(1660628868290))//时间戳转为时间

转换

now = new Date(1660628868290)
> Tue Aug 16 2022 13:47:48 GMT+0800 (中国标准时间)

//注意：调用是一个方法，不是一个属性！
now.toLocaleString()	
> '2022/8/16 13:47:48'
now.toGMTString()
> 'Tue, 16 Aug 2022 05:47:48 GMT'

4.2 JSON

JSON是什么

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

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

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

格式：

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

JSON字符串 和 JS 对象的转化

var user = {
    name: "jingyi",
    age: 3,
    sex: "woman"
}

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

//字符串转化为对象
var obj = JSON.parse('{"name":"jingyi","age":3,"sex":"woman"}')

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

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

4.3 Ajax

  • 原生的 js 写法 xhr 异步请求
  • jQuery封装好的方法 $(“#name”).ajax(“”)
  • axios 请求

5、面向对象编程

原型对象

JavaScript、c++、Java、c#…都行面向对象，但是JavaScript有一些区别！

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

在JavaScript中需要换一下思维方式

原型：

var Student = {
    name: "jingyi",
    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 关键字，是在ES6引入的

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

    以前：

    function Student(name){
    this.name = name;
};

//给Student新增一个方法
Student.prototype.hello = function{
    alert("hello");
};

    现在：

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

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

  2. 继承

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

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

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

    myGrade(){
        alert("I am a pupil")
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new pupil("xiaohong",1);

    本质：查看对象原型
    在这里插入图片描述

原型链

__ proto __ ：

在这里插入图片描述

6、操作BOM对象（重点）

浏览器介绍

JavaScript 和浏览器的关系？

JS诞生就是为了能够让它在浏览器中运行

BOM：浏览器对象模型

  • IE - egde
  • Chrome
  • Safari
  • FireFox

window

window 代表 浏览器窗口

window.innerHeight
> 555
window.innerWidth
> 150
window.outerHeight
> 678
window.outerWidth
> 772

Navigator

Navigator，封装了浏览器的信息

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

大多数时候，我们不会使用 navigator 对象，因为会被人为修改，不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
> 1280
screen.height
> 720

location（重要）

location代表当前页面的 URL 信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页

//设置新的地址
location.assign("https://kuangstudy.com/")

document（内容 DOM）

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

document.title
> "百度一下，你就知道"
document.title = "JY"
> "JY"

获取具体的文档树节点

<dl id="app">
    <dd>Java</dd>
<dt>JavaSE</dt>
<dt>JavaEE</dt>
</dl>

<script>
    var dl = document.getElementById("app")
</script>

获取 cookie

document.cookie
> ...

劫持 cookie 原理 www.taobao.com

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

服务器端可以设置cookie: httpOnly

history

history代表浏览器的历史记录

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

7、操作DOM对象（重点）

核心

DOM：文档对象模型，浏览器网页就是一个Dom树形结构！

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

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

获得Dom节点

<body>
    <div id="father">
      <h1>标题1</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
    </div>

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

      //获取父节点下的所有子节点
      var children = father.children[index];
      // father.firstChild
      // father.lastChild

    </script>
</body>

这是原生代码，之后我们都尽量使用jQuery();

更新节点

<div id="id1">
</div>

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

操作文本：

  • id1.innerText = “123” 修改文本的值
  • id1.innerHTML=“<strong>456</strong>” 可以解析HTML标签

操作CSS：

id1.style.color = 'red';	//属性使用字符串
id1.style.fontSize = '50px';//- 转 驼峰命名
id1.style.padding = '2px';

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

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

<script>
  var self = document.getElementById('p1');
  var father = self.parentElement;
  father.removeChild(self)
</script>

注意：删除多个节点的时候，children是在时刻变化的，一定要注意

插入节点

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

  1. 追加：
<p id="JS">JavaScript</p>
<div id="list">
  <p id="ee">JavaEE</p>
  <p id="se">JavaSE</p>
  <p id="me">JavaME</p>
</div>

<script>
  var js = document.getElementById('JS');
  var list = document.getElementById('list');
  var list = document.getElementById('list');
  list.appendChild(js);//追加到div里面
</script>

在这里插入图片描述

  1. 创建一个新的标签，并且实现追加插入：
<script>
  var js = document.getElementById('JS');//已存在的节点
  var list = document.getElementById('list');
  //通过JS创建一个新的节点
  var newP = document.createElement('p');
  newP.id = 'newP';
  newP.innerText = 'Hello';
  list.appendChild(newP);
    
  //通过这个属性，可以设置任意的值
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript')
    
</script>

在这里插入图片描述

  1. insertBefore
var js = document.getElementById('JS');
var se = document.getElementById('se');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode);
list.insertBefore(js,se);

8、操作表单（验证）

表单是什么 form Dom树

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

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!-- 多选值的框，就是定义好的value -->
    <p>
        <span>性别：</span>
        <input type="radio"name="sex"value="man"id="boy">男
        <input type="radio"name="sex"value="women"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.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中~
    girl_radio.checked = true;//赋值
</script>

提交表单 MD5 加密密码 表单优化

<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数 true/false
将这个结果返回给表单，使用onsubmit接收
οnsubmit="return check()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return check()">
    
  <span>用户名：</span><input type="text" id="username" name="username">
  <span>密码：</span><input type="password" id="input-password" >
  <input type="hidden" id="md5-password" name="password">

  <!--绑定事件 onclick 被点击-->
  <button type="submit">提交</button>
    
</form>

<script>
    function check(){
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        //MD5算法
        md5pwd.value = md5(md5pwd.value);
        //可以校验判断表单内容，true就是通过提交，false阻止提交
        return true;
    }
</script>

9、jQuery

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

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

<!--
公式：$(selector).action()
-->
<a href="" id="test-jQuery">点我</a>

<script>
     
    //CSS选择器
    $('#test-jQuery').click(function (){
        alert('hello jQuery');
    })

</script>

</body>
</html>

选择器

//原生JS，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery CSS中的选择器它全都能用
$('p').click();  //标签
$('#id1').click();  //id
$('.class1').click();  //类

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

事件

鼠标事件，键盘事件，其他事件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.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>
<!--当网页元素加载完毕之后，响应事件-->
  $(function (){
      $('#divMove').mousemove(function (e){
          $('#mouseMove').text('x:'+ e.pageX + 'y:'+ e.pageY);
      })
  });
</script>

</body>
</html>

效果：
在这里插入图片描述

操作DOM

节点文本操作：

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

css的操作：

$('#test-ul li[name=python]').css({"color":"red","background": "blue" });

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

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();
Kiwi1025
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ds.js做tree，可拖拽，缩放，右键菜单等
技术改变生活
06-27 1405
1.首先展示html代码，注意相关的引用 <!DOCTYPE html> <meta charset="utf-8"> <link href="smartMenu.css" rel="stylesheet"> <script src="jquery-1.10.2.min.js"></script> <script src="d3...
ds.js:键->值映射的Javascript哈希映射实现。 甚至适用于Javascript对象
05-13
ds.js Javascript数据结构，用于存储原始和复杂的Javascript对象。 每个库文件都是数据结构的实现。 浏览器和Node.js支持 它支持以下浏览器： Chrome19+ Firefox 4+ Safari 5+ IE9 + 这些Node.js版本也可以使用： 0.8.0+ 快速开始 有四个快速入门选项： 下载最新版本 克隆仓库： git clone https://github.com/evonove/ds.js.git 通过bower install ds.js （浏览器）： bower install ds.js 通过npm（node.js） npm install ds.js ： npm install ds.js 可用的数据结构 哈希图 hashmap.min.js ：389字节（gzip） set.min.js ：508字节（gzip） h
javascript
weixin_45752694的博客
09-11 660
javaScript学习笔记
javascript运行时错误:this.ds为空或不是对象
changyy的专栏
03-17 1232
发生错误的原因是,配制参数名写错:                        var grid = new Ext.grid.GridPanel({                                                            renderTo:hello3,                                            
找出不是两个数组共有的元素_数组排序--基础算法(JavaScript实现)
weixin_39913105的博客
12-03 121
数组排序算法中，分为基础算法，和高级算法，本篇文章给大家分享下常见当基础算法。本篇所介绍的基础算法：冒泡排序选择排序插入排序冒泡排序比较相邻的数据，当左侧值大于右侧值时将它们进行互换，每一轮都找出当前数组最大值，数组长度减1，继续从第一个元素开始。示例代码：function 算法分析：外层循环：作用是控制内部循环的索引最大值，因为内层循环每循环完一次，就能找到一个当前数组范围最大值，并将其放到当前...
JavaScript快速入门.docx
09-05
JavaScript 快速入门 JavaScript 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js。JavaScript 的标准是...
Javascript快速入门教程
12-13
### JavaScript快速入门教程知识点详解 #### 一、引言 JavaScript是一种广泛使用的脚本语言，因其易学且功能强大，在Web开发中占据了极其重要的地位。无论是前端还是后端开发，JavaScript都发挥着不可或缺的作用。...
javascript快速入门Source.rar
12-04
这个"javascript快速入门Source.rar"压缩包文件很可能是为了帮助初学者快速掌握JavaScript的基础知识和实际应用。以下是对其中可能包含的内容的详细解读： 1. **基础概念**：JavaScript的基础包括变量、数据类型...
javascript 快速入门
01-13
作为一个快速入门的话题，我们将深入探讨JavaScript的基础知识，帮助有编程经验的初学者快速上手。 1. **变量和数据类型**： JavaScript支持多种数据类型，包括基本类型（如字符串、数字、布尔值）和引用类型（如...
JavaScript快速入门经典 中文
04-06
总的来说，JavaScript快速入门需要掌握ECMAScript的基本语法、DOM的使用以及BOM的操作，同时熟悉开发环境和调试工具，理解变量的概念和规则，这些都是初学者建立坚实基础的关键步骤。随着经验的积累，可以深入学习更...
DSJS:该死的小JS扫描仪
05-22
该死的小JS扫描仪 该死的小型JS扫描程序（DSJS）是功能齐全JavaScript库漏洞扫描程序，用不到100行代码编写。 必须注意，它是项目的衍生作品。 当前，它会检查以下JavaScript库的易受攻击的版本： angularjs ， backbone ， dojo ， easyXDM ， ember ， handlebars ， jPlayer ， jquery ， jquery-migrate ， jquery-mobile ， jquery-ui-autocomplete ， jquery-ui-dialog ， jquery-ui-tooltip ， jquery.prettyPhoto ， mustache ， plupload ， prototypejs ， sessvars ， YUI 。 作为可选设置，它支持HTTP代理以及HTTP标头值User-Agent ，
Quick-Start-to-JavaScript-Volume-3:JavaScript快速入门
05-05
"Quick-Start-to-JavaScript-Volume-3: JavaScript快速入门"旨在帮助初学者迅速掌握这门强大的编程语言，为深入探索Web开发打下坚实基础。 在JavaScript的世界里，了解基本语法是第一步。包括变量声明（var、let、...
JavaScript快速入门与技巧.doc
06-09
这篇文档旨在帮助初学者快速掌握JavaScript的核心概念和技术，并提供一些实用的技巧，以提高开发效率。 首先，创建JavaScript脚本块是通过`<script>`标签实现的，通常会指定`language="JavaScript"`属性。例如： ``...
JavaScript 快速入门语法手册
11-01
JavaScript Quick Syntax Reference。 Author：Mikael Olsson
communication-services-javascript-quickstarts:Azure Communication Services JavaScript快速入门的示例代码
05-13
Azure通信服务Web（JS）SDK Azure通信服务使开发人员可以向其应用程序添加通信功能。先决条件创建具有活动订阅的Azure帐户。 有关详细信息，请参阅。 安装 Active LTS和Maintenance LTS版本（建议使用8.11.1...快速入门
JavaScript函数形参、函数内部变量、函数名命名冲突问题
weixin_47954860的博客
05-22 858
函数形参和函数内声明变量同名问题 我们首先看下下面的执行结果 function ab(x) { console.log(x); var x; console.log(x); } ab(30); // 30 // 30 输出结果竟然都是30，是不是非常奇怪？？？不着急，再看 function ab1(x) { console.log(x); var x = 4; console.log(x); } ab1(40) // 40 // 4 输出结果更
JavaScript学习笔记
ds8750802的专栏
10-08 333
JavaScript学习笔记 一．JS入门 script type="text/javascript">         alert(new Date().toLocaleDateString()); script> 1.JavaScript代码放在标签中，script可以放到、等任意位置，而且可以有不止一个标签。alert函数是弹出消息窗口，new Date()是创建一个Date类
JavaScript
qq_51302219的博客
05-07 113
JavaScript
JavaScript 基础 （函数）
weixin_46646051的博客
08-01 179
函数的声明和使用、立即执行函数、实参与形参的匹配、函数的作用域、匿名函数、return的含义、函数之间的相互调用（例如：判断平闰年）
javascript快速入门
最新发布
05-11
JavaScript是一种动态编程语言，主要用于在Web浏览器中创建动态效果和交互式用户界面。下面是一些快速入门的步骤...以上就是JavaScript的快速入门步骤。可以通过查找更多教程和示例来深入了解JavaScript的功能和用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值