JavaScript和jQuery快速入门

it2026-06-13 0

通俗易懂的JavaScript和jQuery

本文只作为简单了解

1、快速入门

1.1 引入JavaScript

1、内部标签

2、外部引入

asd.js

//...

test.html

我的第一个JavaScript程序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>      <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>  <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>

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

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();

最新回复(0)