狂神说——JavaScript最新教程通俗易懂
参考资料
文章目录
- 01 练练JavaScript这个东西
- 02 基本使用及HelloWorld
- 03 浏览器控制台使用
- 04 数据类型快速浏览
- 05 严格检查模式strict
- 06 字符串类型详解
- 07 数组类型讲解
- 08 对象类型详解
- 09 分支和循环详解
- 10 Map和Set集合(ES6新特性)
- 11 Iterable迭代和下周安排
- 12 函数的定义和参数获取
- 13 变量的作用域 let const详解
- 14 方法的定义和调用 apply
- 15 Date日期对象
- 16 JSON对象
- 17 面向对象 原型继承
- 18 面向对象class继承
- 19 操作BOM对象(重点)
- 20 获得DOM节点(重点)
- 21 更新DOM节点
- 22 删除DOM节点
- 23 创建和插入DOM节点
- 24 获得和设置表单的值(重要验证)
- 25 表单提交验证及前端密码MD5加密
- 26 初始JQuery及公示
- 27 JQuery选择器
- 28 JQuery事件
- 29 JQyery操作Dom元素
- 30 前端小结及开发技巧分享
01 练练JavaScript这个东西
狂神说前端体系介绍
JavaScript是一门世界上最流行的脚本语言
Javascript的历史
02 基本使用及HelloWorld
<!-- script 标签内 写js代码 --><script>alert('Hello World!');</script><script type="text/javascript">alert('Hello World!');</script><!-- 外部引用 --><script src="js/test.js"></script>
03 浏览器控制台使用
//js严格区分大小写// 1. 定义变量 变量类型 变量名 = 变量值;var num = 1;alert(1);// 2. 条件控制if (1 == 1) {// console.log(num) 在浏览器控制台 打印变量console.log('true');}else {console.log('false');}// 多行注释
04 数据类型快速浏览
// 数值 文本 视频 音频 ....
// js不区分整数和小数
number
123 //整数
123123.1 //浮点数
123.1123e2 //科学计数法
12300-99 //负数
-99NaN // 不是一个数字
NaNInfinity // 表示无限大
Infinity
字符串
'abc'
'abc'
布尔值
true
false
逻辑运算
&& 与 两个都为真,即为真
|| 或 一个为真,即为真
! 真即假,假即真
比较运算符 (重要)
=
== //等于 类型不同,但是值相同,也会为真
=== //绝对等于 类型一样,值一样1=='1' // true
1==='1' //falseJS的一个缺陷,坚持不用==特殊:
NaN和所有数值都不相等,包括自己都不相等
NaN ==NaN //false
NaN ===NaN //false
isNaN(NaN) // true
只能通过isNaN来判断这个数是否是NaN
// 浮点数有精度损失
// 尽量避免使用浮点数运算
console.log((1 / 3) === (1 - 2 / 3)); // false
console.log(Math.abs(1 - 2 / 3 - 1 / 3) < 0.000001); // true
null 和 undefined
null 空
undefined 未定义
//定义数组 中括号
var array=[1,true,'hello',null,5];
// 数组下标如果越界了,undefined//数组取值
console.log(array[2]);
console.log(array[3]);
console.log(array[5]);
// 对象定义 大括号
var person={ name:'Taohy', // 属性1age:18, // 属性2 tags:['js','html','css'] // 属性3};// 对象取值console.log(person.name);console.log(person.tags);console.log(person.tags[0]);
05 严格检查模式strict
// js严格检查模式 预防js的随意性问题
'use strict'; // 必须写在js的第一行
// ES6中 局部变量用let定义
// 前提 IDE需要支持ES6语法
i = 1; // 使用了 严格模式就报错了
let j = 1;
问题:VSCODE 不知道如何哪里查看ECMAScript6版本
06 字符串类型详解
'use strict';
// 正常字符串 单引号或者双引号
console.log('test'); // test
console.log("test2"); // test2// 转义字符 \
console.log('a\'b'); // a'b
console.log('a\rb');
console.log('a\tb'); // a b
console.log('\u08FF'); //unicode字符
console.log('\x65'); // ASCII码 e// 多行字符串 ` `
console.log(`你
好
呀`);// 模板字符串
let name = 'taohy';
let age = 18;
let msg = `你好,${name},我的年龄是${age}。`;
console.log(msg); //你好,taohy,我的年龄是18。// 字符串长度
var stu='student';
console.log(stu.length); // 7// 字符串 不可变性
console.log(stu[1]);
stu[1]='a';
console.log(stu);// 字符串 大小写(方法)
console.log(stu.toUpperCase()); // STUDENT
console.log(stu.toLowerCase()); // student// 字符串 出现的位置
console.log(stu.indexOf('t')); // 1// 字符串 截取
console.log(stu.substring(1,4)); // tud
字符串不可变性
07 数组类型讲解
'use strict';
// 数组定义
let arr=[1,2,3,4,5,6];
console.log(arr[1]);
arr[1]=9;
console.log(arr);// 数组长度 可以动态改变,但是一般不操作 如果过小,丢失元素
console.log(arr.length);
arr.length = 10;
console.log(arr.length);// 下标索引
console.log(arr.indexOf(6));
console.log(arr.indexOf('1'));// slice 截取数组一部分 跟字符串 substring一样
arr.slice(1,3);
console.log();// push() 把元素压入到尾部
arr.push('a')
console.log(arr);// pop() 把元素从尾部弹出
arr.pop();
console.log(arr);//unshift() 把元素压入头部
arr.unshift('b');
console.log(arr);//shift() 把元素从头部弹出
arr.shift();
console.log(arr);// sort 排序
arr = ['A', 'C', 'B'];
arr.sort();
console.log(arr);// reverse 反转
arr.reverse();
console.log(arr);// concat 拼接 并没有修改数组,只是返回一个新的数组
arr.concat([1,2,3]);
console.log(arr);// join 拼接数组 并用特定的字符串连接
console.log(arr.join('-'));// 多维数组
arr = [ [1,2],[3,4],['a','b']];
console.log(arr);
console.log(arr[1][1]);
08 对象类型详解
'use strict';
// 定义对象
// key:value 注意 key都是字符串!值可以任意!
var person = {name :"taohy",age:18,email:"823103015@qq.com",score:80
};
console.log(person);
// 对象取值
console.log(person.name);
// 对象赋值
person.name="dabao";
console.log(person.name);
// 使用一个不存在的属性,不会报错! undefined
console.log(person.haha);
// 动态的删减属性,通过delete
delete(person.age);
console.log(person);
// 动态的添加属性,直接给新属性赋值
person.gaga = 'gaga';
console.log(person);
// 判断属性值是否在这个对象中! xxx in xxx
// 注意 key 必须是字符串
console.log('name' in person);
console.log('haha' in person);
// toString继承父类
console.log('toString' in person);
// 判断一个属性是否是这个对象自身用的
console.log(person.hasOwnProperty('haha'));
09 分支和循环详解
'use strict';// if语句var age = 30;if (age < 30) {alert('年轻人');} else if (age < 40) {alert('中年人');}else {alert('老年人');}// while 语句 避免死循环while (age < 35) {age = age + 1;console.log(age);}// for 循环for (let i = 0; i < 10; i++) {console.log(i);}// foreach 循环 重点记忆var arr = [1, 2, 3, 4, 5, 6];arr.forEach(function (value) {console.log(value);});// for in 循环for(let index in arr){console.log(arr[index]); // index是下标}// ES6 新特性 for of
for (let value in arr){console.log(value); // 直接打印数值
}
10 Map和Set集合(ES6新特性)
'use strict';
// ES6 新特性
// 学生成绩 学生姓名
// var names=['tom','jerry','taohy'];
// var score=[99,80,100];
// Map 定义 多个 类似Python 列表
var student = new Map([['tom', 99], ['jerry', 80], ['taohy', 100]]);
console.log(student);
// 取值
var scoreJerry = student.get('jerry');
console.log(scoreJerry);
// 赋值
var addstu = student.set('gaga',99) ;
console.log(student);
// 删除值
student.delete('taohy');
console.log(student);// Set 无序不重复的集合 类似Python 元组
// 定义 自动去重
var testSet = new Set([1,2,1,3,1]);
// 新增
testSet.add(5);
console.log(testSet);
// 删除
testSet.delete(1);
console.log(testSet);
// 包含
console.log(testSet.has(1));
11 Iterable迭代和下周安排
'use strict';
// ES6 新特性 for of 值
// for in 下标
// 遍历数组
var arr = [1, 2, 3, 4, 5, 6];
for (let value of arr) {console.log(value);
}
// 遍历map
var map = new Map([['tom', 18], ['jerry', 19], ['taohy', 99]]);
for (let value of map) {console.log(value);console.log(value[0]);console.log(value[1]);
}
// 遍历set
var set = new Set([5,6,7]);
for(let value of set){console.log(value);
}
12 函数的定义和参数获取
参考廖雪峰网站 https://www.liaoxuefeng.com/wiki/1022910821149312
'use strict';
// 方式一 定义函数 function
function abs(x) {if (x <= 0) {return -x; // 执行到return函数结束,返回结果}else {return x;}
}
console.log(abs(-2));
console.log(abs(3));
console.log(abs()); // undefined
// 方式二 匿名函数
var abs2 = function (x) {if (x <= 0) {return -x; // 执行到return函数结束,返回结果}else {return x;}
}
console.log(abs2(-2));
console.log(abs2(4));
console.log(abs2()); //undefined
// 参数手动抛出异常
function abs3(x) {if(typeof(x) !== "number"){throw 'Not a Number';}if (x <= 0) {return -x; // 执行到return函数结束,返回结果}else {return x;}
}
console.log(abs3('tt')); //Uncaught Not a Number
// arguments是JS免费赠送的关键字;
// arguments 代表传递进来的所有参数,是一个数组
function abs4(x) {console.log('x->' + x);console.log('arguments的长度' + arguments.length)for (let i = 0; i < arguments.length; i++) {console.log(arguments[i]);}
}
console.log(abs4(1234, 567, 89));
//问题 arguments包含所有的参数,如何排除已有的参数?
/// ES6新特性 rest
function abs5(x, y, ... rest) {console.log('a->' + x);console.log('b->' + y);console.log(rest); // 返回除了xy的参数 数组形式
}
console.log(abs5(1, 2, 3, 4, 5));
13 变量的作用域 let const详解
// var定义变量是有作用域的,在函数体内声明,函数外不可使用
// 一定要实现的话,用闭包
function test() {var i = 1;i = i + 1;
}
i = i + 2; //主动报错 Uncaught ReferenceError: i is not definedfunction test2() {// 如果两个函数使用了相同的变量名,不冲突var i = 2;i = i + 1;
}function test3() {var i = 1;console.log('i->' + i);function test4() {// 内部函数能使用外部函数的变量y = i + 1;console.log('i->' + i);console.log('y->' + y);}// 外部函数不能使用内部函数变量var z = y + 1; //报错 Uncaught ReferenceError: y is not definedconsole.log('z->' + z);
}
function test5()
{// js自动提升了y的声明,但是不会提升变量y的赋值// 一般所有的变量定义 都放在函数头部 便于代码维护// var a,b,c=1,z;// 之后直接调用var x;x='x'+y;console.log(x); // xundefinedvar y ='y';
}
全局函数
// 全局函数
var i = 1;
function test6() {console.log(i);
}
test6(); //
console.log(i); // 1
全局对象window
// 全局对象window
alert(i);
alert(window.i); // 等价,所有的全局变量都会绑定在window对象下;
window.alert(i); // alert()函数本身也是window的对象
// 重新定义alert
var oldalert = window.alert;
window.alert = function () {};
// 发现alert失效了
window.alert(i);
// 重新恢复alert
window.alert = oldalert;
window.alert(i);// index.html:74 Uncaught ReferenceError: zz is not defined
window.alert(zz);
由于我们所有的全局变量都会绑定到我们的Windows上。如果不同的js文件,使用了相同的变量,导致冲突。如何能够减少冲突?
//降低全局命名冲突的问题
// 唯一全局变量
var taohyApp={};// 定义全局变量
taohyApp.name = "taohy";
taohyApp.add=function(a,b){return a+b;
}console.log(taohyApp.name);
console.log(taohyApp.add(5,10));
把自己的代码全部放入自己定义的唯一命名空间名字中,降低全局命名冲突的问题 jQuery库
局部变量 let
// 为了解决局部作用域冲突问题,ES6 给出了let关键字 定义局部变量
function yTest() {for (let y= 0; y < 12; y++) {console.log(y);}console.log(y + 1);
}
yTest(); //Uncaught ReferenceError:
为了解决局部作用域冲突问题,ES6 给出了 let 关键字 定义局部变量
建议都使用 let 去定义局部变量
常量 const
// ES6 引入常量关键字 const
const PI = 3.1415; // 只读变量
console.log(PI);
PI = 3.1213; //只读变量不能修改
console.log(PI); // Uncaught TypeError: Assignment to constant variable.
14 方法的定义和调用 apply
定义方法
方法 就是把属性放在对象里面 对象只有两个东西:属性和方法
// 方法一
// 对象是由属性和方法组成
var taohyApp = {name: "taohy", // 属性birth: 2000,age: function () { // 方法 就是把属性放在对象里面var nowyear = new Date().getFullYear(); // 获取当前年份return nowyear - this.birth;}
}
console.log(taohyApp.age()); // 调用age方法,一定要加()
this代表什么?拆开看。this是无法指向的,是默认指向调用它的那个对象
// 方法二 方法拆开
function getAge(){let nowyear = new Date().getFullYear();return nowyear - this.birth // this 要指向使用的对象
}
var taohyAppSep ={name:"taohySep",birth:1999,age : getAge // 调用外部方法 不用加()
}
console.log(taohyAppSep.age());
console.log(getAge); // NaN
apply 在js中可以控制this的指向
// apply可以控制this的指向
// this指向对象taohyAppSep 参数为空
console.log(getAge.apply(taohyAppSep, []));
15 Date日期对象
内部对象
标准对象
console.log(typeof 123); // numberconsole.log(typeof '123'); // stringconsole.log(typeof true); // booleanconsole.log(typeof []); // objectconsole.log(typeof {}); // objectconsole.log(typeof Math.abs); //functionconsole.log(typeof undefined); //undefined
Date对象
// 基本使用
var myDate = new Date();
console.log(myDate); // Fri Jun 03 2022 15:50:40 GMT+0800 (中国标准时间)
console.log(myDate.getFullYear()); // 年
console.log(myDate.getMonth()); // 月 0-11
console.log(myDate.getDay()); // 日
console.log(myDate.getHours()); // 时
console.log(myDate.getMinutes()); // 分
console.log(myDate.getSeconds()); // 秒console.log(myDate.getTime()); // 时间戳 全世界统一 从1970-1-1 00:00:00 开始的毫秒数 1654242640960
console.log(new Date(1654242640960)); // 根据时间戳获取时间 Fri Jun 03 2022 15:50:40 GMT+0800 (中国标准时间)// 转换
console.log(myDate.toLocaleString()); // 转换成本地时间 2022/6/3 15:54:44
console.log(myDate.toLocaleDateString()); // 转换成本地日期 2022/6/3
16 JSON对象
JSON是什么?
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript中一切皆对象,任何js支持的类型都可以用JSON表示;
JSON格式
- 对象都用{ }
- 数组都用[ ]
- 所有的键值对,都用key:value
JSON字符串和JS对象转换
// 定义一个对象
var taohyObj={name:'taohy',age:22,sex:'女'
}
console.log(taohyObj);
console.log(typeof taohyObj); // object// obj 转换成 json 字符串
var taohyJson=JSON.stringify(taohyObj);
console.log(taohyJson); // {"name":"taohy","age":22,"sex":"女"}
console.log(typeof taohyJson); //string// json 字符串 转换成 obj
// 参数为json字符串
var jsonObj = JSON.parse('{"name":"taohy","age":22,"sex":"女"}');
console.log(jsonObj);
console.log(typeof jsonObj); // object
很多人搞不清楚,JSON和JS对象的区别
var obj = { name: 'taohy', age: 22, sex: '女' };
var jsonstring = '{"name":"taohy","age":22,"sex":"女"}';
Ajax
- 原生的js写法 xhr异步请求
- jQuery 封装好的方法 $(‘#name’).ajax()
- axios 请求
17 面向对象 原型继承
什么是面向对象?
javascript Java c# … 都是面向对象,但是js有些区别
- 类:模板
- 对象:具体的实例
在js中需要换一下思维方式
原型
// 定义一个student对象
var student = {name: 'student',age: 22,run: function () {console.log(this.name + ' run ...');}
};var bird = {name: 'bird',fly: function () {console.log(this.name + ' fly ...');}
};
// 定义对象 xiaolv 复用student的属性和方法
var xiaolv = {name: "xiaolv"
}
// xiaolv 原型指向 student
xiaolv.__proto__ = student;
console.log(xiaolv.name);
console.log(xiaolv.age);
console.log(xiaolv.run());// 定义对象 xiaohuang 复用bird的属性和方法
var xiaohuang = {name: "xiaohuang",age: 23
};// xiaohuang 原型指向 bird
xiaohuang.__proto__ = bird;
console.log(xiaohuang.name);
console.log(xiaohuang.fly());
18 面向对象class继承
class
class关键字 ES6引入
//class 关键字 ES6之后引入
// 定义一个studentClass类
class studentClass{constructor(name,age){ // 属性 固定写法this.name=name;this.age =age;}hello(){ // 方法console.log('hello '+this.name+',I am '+this.age);}
}
var xiaohong = new studentClass('xiaohong',1); // 新建对象,参数name,age
var xiaoming = new studentClass('xiaoming',5);
console.log(xiaohong.hello()); // hello xiaohong,I am 1
console.log(xiaoming.hello()); // hello xiaoming,I am 5
class继承
// class继承
class xiaostudentClass extends studentClass { // studentClassconstructor(name, grade) {super(name); // 继承属性 namethis.grade = grade;}mygrade() { // 方法console.log('hello ' + this.name + ',I am ' + this.grade + ' 年级小学生');}
}
var xiaomei = new xiaostudentClass('xiaomei', 2);
console.log(xiaomei.mygrade());
本质:查看原型
原型链
- proto :是实例对象指向原型对象的指针,隐式原型,是每个对象都会有的一个属性。
- prototype:是构造函数的原型对象,显式原型,只有函数才会有。
- 原型链的源头是Object!
19 操作BOM对象(重点)
浏览器介绍
Javascript和浏览器的关系?Javascript的诞生就是为了让它在浏览器中运行。
BOM:浏览器对象
- Safari
- Firefox
- Chrome
- IE6-11
window对象 (重要)
window代表浏览器窗口
height 指的是元素本身的高度,不包括padding、border、margin,如下图所示:
innerHeight 包括元素自身的高度+padding部分,如图所示:
outerHeight高度为:元素自身高度 + padding + border
如果参数为true时,高度为:元素自身高度 + padding + border +margin,如下图所示:
// window对象
window.alert('window alert');
console.log(window.innerHeight); // 窗口内部大小 F12拖动试试
console.log(window.innerWidth);
console.log(window.outerHeight); // 窗口大小
console.log(window.outerWidth);
navigator对象(不建议使用)
注意:配置会人为修改,一般不建议使用这些属性判断和编写代码
//navigator对象 注意:配置会人为修改,一般不使用
console.log(navigator.appName); //'Netscape'
console.log(navigator.appVersion); // '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
console.log(navigator.platform); //'Win32'
console.log(navigator.userAgent); // 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
screen对象
代表屏幕尺寸
// screen对象 代表屏幕尺寸
console.log(screen.width); // 1280 px
console.log(screen.height); // 800 px
location对象(重要)
代表页面的URL信息
//以百度为例
location.host // 'www.baidu.com'
location.href // 'https://www.baidu.com/'
location.protocol //'https:'
// location对象 重要 代表当前网页的URL信息
location.reload();// 方法 重新加载网
location.assign('https://cn.bing.com/?mkt=zh-CN')// 方法 设置新地址
document对象(DOM)
代表当前的页面
document.title
'百度一下,你就知道'
document.title='taohyCSDN'
'taohyCSDN'
获取文档树节点
<dl id="app"><dt>前端</dt><dd>HTML</dd><dd>CSS</dd><dd>Javascript</dd>
</dl>//document对象 代表当前页面 HTML DOM文档树
var dl = document.getElementById('app');
console.log(dl);
获取cookie(不建议使用)
document.cookie
history对象(不建议使用)
代表浏览器的历史记录
history.back() // 后退
history.forward() // 前进
20 获得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>// 对应标签选择器var h1 = document.getElementsByTagName('h1');console.log(h1);// id选择器var p1 = document.getElementById('p1');console.log(p1);// 类选择器var p2 =document.getElementsByClassName('p2');console.log(p2);var father = document.getElementById('father');console.log(father);var fatherChildren = father.children;console.log(fatherChildren);var fatherfirstChild = father.firstChild;console.log(fatherfirstChild);var fatherlastChild = father.lastChild;console.log(fatherlastChild);</script>
</body>
这是原生代码,之后会用jQuery
21 更新DOM节点
- 操作文本
<div id="div1"> </div>
<script>var div1 = document.getElementById('div1');// 改变内容div1.innerText='div1'; // 直接文本div1.innerHTML='<strong>test</strong>'; // html格式div1.textContent='div2';
</script>
如果你要在一个DOM元素中改变文字内容,推荐使用textContent,而不是innerHTML,性能会更高一点。
- 操作js
// 改变样式
div1.style.color='red';
div1.style.fontSize='50px';
div1.style.background='white';
div1.style.padding='2em';
22 删除DOM节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id="father"><h1>h1</h1><p id="p1">p1</p><p id="p2">p2</p>
</div>
<script>var father = document.getElementById('father');var p1=document.getElementById('p1');var p2 = document.getElementById('p2');
</script>
// 删除子节点
father.removeChild(p1);
// 找到父节点
var p2 = document.getElementById('p2');
var p2_parent = p2.parentElement;
// 删除是一个动态的过程
father.removeChild(father.children[0]);
注意:删除结点的时候,children是时刻变化的,删除的时候要注意!
23 创建和插入DOM节点
- 追加
<p id="p3">p3</p>
<div id="div1"><p id="p1">p1</p><p id="p2">p2</p>
</div>
<script>var father = document.getElementById('div1');var p1 = document.getElementById('p1');var p2 = document.getElementById('p2');var p3 = document.getElementById('p3');father.append(p3);
</script>
- 创建一个新的标签,实现插入
// 通过js创建一个节点
var newE = document.createElement('p');
newE.id='newP';
newE.innerText='newP';
father.append(newE);
- 创建一个标签结点
// 创建一个标签结点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
father.append(myScript);
- 创建一个style标签
father.style.background='yellow';
- 在指定结点前插入
// 要包含的结点,在结点之前插入 insertBefore(新节点,目标节点)
father.insertBefore(p3,p2);
推荐jQuery的网站 https://jquery.cuishifeng.cn/
24 获得和设置表单的值(重要验证)
表单是什么?form DOM树
- 文本框 text
- 密码框 password
- 下拉框 select
- 单选框 radio
- 多选框 chekbox
- 隐藏域 hidden
表单的作用:提交信息
获得提交的信息
<body>
<form action="post"><p><span>用户名:</span><input type="text" id="uname"></p><!-- 多选框 值就是定义好的value 是否选中用checked --><p><span>性别:</span><input type="radio" id="usex_boy" name="usex" value="boy">男<input type="radio" id="usex_girl" name="usex" value="girl">女</p>
</form>
<script>var uname = document.getElementById('uname');// 设置输入框值uname.value = 'admin';// 获取输入框值console.log(uname.value);var usex_boy = document.getElementById('usex_boy');var usex_girl = document.getElementById('usex_girl');console.log(usex_boy.value);console.log(usex_girl.value);if(usex_boy.checked==true){cosnole.log('usex_boy.checked');}if(usex_girl.checked==true){cosnole.log('usex_girl.checked');}
</script>
</body>
25 表单提交验证及前端密码MD5加密
26 初始JQuery及公示
jQuery库,里面有大量的Javascript的库
- 下载 方法一:
官网 https://jquery.com/download/
- 下载 方法二 cdn jquery在线库
网址 https://www.jq22.com/cdn/
- 使用 引用script
<!-- cdn引用 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body><a href='' id="test-jquery">点我</a><script>// 选择器就是css的选择器// jquery公式 $(selector).action()$('#test-jquery').click(function () {alert('点我');});</script>
</body>
27 JQuery选择器
网址 https://jquery.cuishifeng.cn/
<script>// 原生js 选择器少// 标签document.getElementsByTagName();// iddocument.getElementById();// 类document.getElementsByClassName();// jQuery css中选择器都可以使用$('p').click() // 标签选择器$('#id').click() // id选择器$('.classname').click() //class选择器$('selector').action() // 万能公式
</script>
28 JQuery事件
- 鼠标事件
<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>
29 JQyery操作Dom元素
- 节点文本操作
// 获得值 name=js
$('#test_ul li[name=js]').text()
// 设置值
$('#test_ul li[name=js]').text('js123')
// 设置html值
$('#test_ul li[name=js]').html('<strong>123</strong>')
// 获取html值
$('#test_ul li[name=js]').html() // '<strong>123</strong>'// 获得值 class=python
$('#test_ul li[class=python]').text()
// 设置值
$('#test_ul li[class=python]').text('Python123')
- css的操作
$('#test_ul li[name=js]').css('color','green');
$('#test_ul li[class=python]').css({'color':'red','background':'blue'});
- 元素的显示和隐藏
// 元素的显示和隐藏 本质是display:none;
$('#test_ul li[class=python]').hide();
$('#test_ul li[name=js]').show();
- 娱乐测试
// 娱乐测试
$(window).width();
$(window).height();
$('#test_ul li[name=js]').toggle(); // 事件 隐藏显示切换
- ajax(未来重点)
30 前端小结及开发技巧分享
小技巧
- 如何巩固JS (看jQuery源码、看游戏源码)
- 巩固HTML CSS(扒网站 全部down下来,修改看效果)
之后扩展:
Layer 弹窗组件
Element UI
对应笔记代码下载:https://download.csdn.net/download/weixin_29431461/85650251
狂神说——JavaScript最新教程通俗易懂相关推荐
- 【笔记】【git】【狂神说Java】Git最新教程通俗易懂 -学习笔记
前言 学习视频:[狂神说Java]Git最新教程通俗易懂 感谢狂神!!! 此笔记用于记录本人在学习中还有不懂以及值得注意的地方.以方便日后的工作与学习. 笔记中有些个人理解后整理的笔记,可能有所偏差, ...
- Git最新教程通俗易懂----狂神说Java -- ---学习笔记
[狂神说Java]Git最新教程通俗易懂 https://www.bilibili.com/video/BV1FE411P7B3 P1.前言之版本控制 06:12 P2.Git和SVN的区别 07:3 ...
- 【狂神说Java】Git最新教程通俗易懂
目录 狂神视频地址 1.版本控制 1.1什么是版本控制 1.2.常见的版本控制工具 1.3.版本控制分类 2.聊聊git的历史 3.git环境配置 3.1软件下载 3.2启动git 3.3常用Linu ...
- 【学相伴】Nginx最新教程通俗易懂-狂神说
Nginx - 学相伴 分享人:秦疆(遇见狂神说) 公司产品出现瓶颈? 我们公司项目刚刚上线的时候,并发量小,用户使用的少,所以在低并发的情况下,一个jar包启动应用就够了,然后内部tomcat返回内 ...
- 2022年5月4日 【狂神说Java】MySQL最新教程通俗易懂5 数据库权限管理,备份与三大范式
8. 数据库的权限管理和备份 8.1 用户管理 可视化操作 SQL命令操作 用户表: mysql.user 本质:对这张表进行增删改查 -- 创建用户 create user 用户名 identifi ...
- Nginx最新教程通俗易懂
什么是Nginx?Nginx作用? ginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访 ...
- Docker02 狂神Docker视频学习笔记 :【狂神说Java 哔哩哔哩】Docker最新超详细版教程通俗易懂
目录 0. 视频源 0. 学习网址 基础篇 1. Docker概述 1.1 Docker为什么出现? 1.2 Docker历史 1.3 Docker能干什么 2. Docker安装 2.1 Docke ...
- 最通俗易懂的JavaScript进阶教程
前言:"当你停止尝试时,就是失败的时候."你好!我是梦阳辰.快和我一起继续学习起来吧! 如果你对JavaScript了解甚少,也许下面一篇文章对你有用! 最通俗易懂的JavaScr ...
- Docker超详细版教程通俗易懂 -之- 入门篇
前言 学习Docker,你可以熟练的操作命令,能够把你的项目构建成Docker镜像! 是后端开发人员必备的技能!下面是自己的学习笔记,希望能帮助到需要的你! 特别感谢哔哩哔哩狂神:[狂神说Java]D ...
最新文章
- imx6 uboot lvds clock
- perl6 中将 字符串 转成十六进制
- ios 边录音边放_关于Android和iOS系统OneNote支持边录音边记笔记的需求和建议
- 有关像素动作游戏《Resolutiion》美术哲学的讨论
- 搭建Mock Server
- 网站部署nginx--uwsgi
- 英特尔 AMT 漏洞比任何人想象的还要严重
- 极简风格的响应式简历模板
- 10虚拟机的删除和迁移
- hadoop入门简介
- windows2003事件记录中显示组策略错误,登录域控制器很慢(服务器自身)
- 54扑克牌轮流拿问题,Python实现(详解)
- Asp.net 使用weboffice实现Word在线编辑
- GEO数据挖掘(学习笔记)
- 知乎爬虫与数据分析(一)数据爬取篇
- Java - Certificate has been revoked
- 目前主流的移动广告联盟有哪些呢?
- 整理《我三年开发经验,从字节跳动抖音组离职后,一口气拿到15家公司Offer》
- 中国科学院大学计算机考研信息汇总
- 在OTFS学习中的一些总结
热门文章
- PHP 获取Excel列数
- BootStrap中修改navbar导航条的默认高度
- 软件验证(Verification)和确认(Validation)的区别
- tutk云平台服务器_Tutk P2P的原理和常见的实现方式 - 书弋江山的博客 - CSDN博客...
- 创建Global.asax文件
- 专科云计算的出路在哪里?
- ARM学习(15)Makefile编译以及CortexM4命令行STLINK 烧录
- 百度云AI获取access token的方法
- Python 解析har 文件将域名分类导出
- 并联串联混合的电压和电流_并联型的有源滤波器能够有多少种用法?