javascript详解（包括jQuery的简要使用）

最新推荐文章于 2021-03-18 00:11:54 发布
最新推荐文章于 2021-03-18 00:11:54 发布
阅读量983 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44339531/article/details/108287450
版权

个人博客：http://blog.kunpw.cn/

javascript

1.引入script

  • 内部写入；
  • 外部引入；
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--1.在html页面内部写入js代码    -->
    <!--script标签内，写js代码    -->
    <!--    <script>-->
    <!--        alert('hello,world');-->
    <!--    </script>-->

    <!--2.外部导入    -->
    <!--默认type="text/javascript" 可以不用写出     -->
    <script src="js/helloworld.js" type="text/javascript">

    </script>

</head>

2.基本语法入门

  • 定义变量 var 变量名 = 变量值; 只有var一种变量类型；
  • 条件控制同java；
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        // 1.定义变量 var 变量名 = 变量值;    只有var一种变量类型
        var score = 75;
        // 2.条件控制同java
        if(score>=60&&score<70){
            alert("60-70");
        }else if(score>=70&&score<80){
            alert("70-80");
        }else if(score>=80&&score<90){
            alert("80-80");
        }else {
            alert("other")
        }
        console.log(score);
        //console.log(score); 在浏览器控制台打印变量，相当于sout;
    </script>
</head>
  • 使用浏览器：
    • Elements：html+css代码区域；
    • Console：控制台，可以在此处写入js执行代码；
    • Source：js源代码区域，可以断点debug，在此处debug代码；
    • Network：网络元素；
    • Application：应用；

在这里插入图片描述

3.数据类型

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

3.1变量

  • 以字母、$、_ 等符号开头，可以使用中文定义，大小写敏感；
  • 定义变量类型只有var一种类型；
var 王者荣耀 = "倔强青铜";

3.2number

  • js不区分小数和整数；
123			//整数123
123.1		//浮点数123.1
1.123e3		//科学计数法1123
-99			//负数-99
NaN			//Not a Number
Infinity	//无穷大

3.3字符串

  • 正常字符串表示形式：

    • ‘abc’；
    • “abc”；

  • 转义字符：

    • \'
\n
\t
\u		//\u#### Unicode字符
\x		//Ascll字符

  • 多行字符串：

    • //使用Esc下键``
var msg =
    `hello
	world`

  • 模板字符串：

    • let name = "zhaoxiaoan";
let age = 3;

//模板：${}
let msg = `hello,${name}`;
console.log(msg);
//>hello,zhaoxiaoan

  • 字符串长度：

    • str.length;

  • 大小写转换：

    • //注意，此处是方法而不是属性
str.toUpperCase();
str.toLpwerCase();

  • 该字符在字符串中第一次出现的位置：

    • str.indexOf('t');//获得下标索引

  • substring：

    • [)
str.substring(1);		//从第一个字符直到最后一个字符
str.substring(1,3);		//[1,3)

  • 字符串数组操作（不可变性）：

在这里插入图片描述

3.4布尔值

  • true；
  • false；
  • 判断输出时显示；

3.5逻辑运算符

&&	//与
    
||	//或
    
!	//非

3.6比较运算符

=		//赋值符号
==		//等于（类型不一样，值一样，也会判断为true，如1==“1”得到true）
===		//绝对等于（类型一样，纸一样，才为true），所以一般使用===比较而不使用==

  • NaN===NaN，false，NaN与所有的数值都不相等，包括自己；

  • 使用isNaN()判断变量是否为NaN；

  • 浮点数问题：

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

    • 浮点数存在精度问题；

    • 常使用以下方式解决：

    • Math.abs((1/3)-(1-2/3)<0.000000001);

3.7null和undefined

  • null：空；
  • undefined：未定义；

3.8数组

  • java的数组中必须为相同类型，js不是；
var arr = [1,2,3,"abs",null,true];//常用此方式定义数组类型

new Array(1,2,3,"abs",null,true);//不常用

  • 取数组下标，如果越界，会显示undefined而不会执行更多的安全性检查；

  • 多维数组：

    • arr = [[1,2,3],['a','b','c']]
>(2) [Array(3), Array(3)]
arr[1][1]
>"b"

  • 常用的方法和属性：

    • var arr = [1,2,3,4,5,6];

//1.length
arr.length
>6
//给arr.length赋值时，长度增大则显示undefined，长度减小则从后往前删减元素

//2.indexOf
arr.indexOf(2)
>1
//字符索引，对所给元素判断最先出现位置下标，注意：1和'1'不同，索引也不同

//3.slice()
arr.slice(3)
>(3) [4, 5, 6]
//截取array的一部分，返回一个新数组，类似于String中的substring()

//4.push()、pop()
arr.push('a','b')
>8
arr
>(8) [1, 2, 3, 4, 5, 6, "a", "b"]
arr.pop()
>"b"
arr
>(7) [1, 2, 3, 4, 5, 6, "a"]
//在原数组的尾部插入或取出元素，push可以同时处理多个元素，而pop每次只能取出一个元素

//5.unshift()、shift()
arr.unshift('a')
>8
arr
>(8) ["a", 1, 2, 3, 4, 5, 6, "a"]
arr.shift()
>"a"
arr
>(7) [1, 2, 3, 4, 5, 6, "a"]
//从数组头部插入或取出元素

//6.sort()
arr = ['B','b','C']
>(3) ["B", "b", "C"]
arr.sort()
>(3) ["B", "C", "b"]
//将数组按照Ascll码值进行顺序排序

//7.reverse()
arr.reverse()
>(3) ["b", "C", "B"]
//将数组元素反转

//8.concat()
arr.concat([1,2,3,])
>(6) ["b", "C", "B", 1, 2, 3]
arr
>(3) ["b", "C", "B"]
//拼接数组，并且返回一个新数组而不是在原数组上修改

//9.join()
arr.join('-')
>"b-C-B"
arr
>(3) ["b", "C", "B"]
//添加连接符号并且输出新的数组

3.9对象

  • 所有键都是字符串，尤其是在判断中要加上引号；
  • 对象使用大括号，相当于匿名内部类；
  • 使用键值对定义赋值，属性之间使用 ”,“ 隔开最后一个属性不需要添加；
var person = {
    name:"zhaoxiaoan",
    age:3,
    tags:['js','java','web','...']
}
  • 取变量值：
person.name
>zhaoxiaoan
  • 使用一个不存在的属性，不会报错，而是undefined
person.haha
>undefined

  • 常用的方法和属性：

    • //1.delete
delete person.name
>true
person
>{age: 3, tags: Array(4)}
//动态地删减对象的属性

//2.增加
person.haha = 'haha'
>"haha"
person
>{age: 3, tags: Array(4), haha: "haha"}
//动态地增加属性直接赋值即可

//3.判断属性值是否在对象中
'age' in person
>true
'toString' in person
>true
//有继承性质，'toString'是继承属性

//4.hasOwnProperty()
person.hasOwnProperty('age')
>true
person.hasOwnProperty('toString')
>false
//判断是否为自身定义属性

3.10.流程控制

  • if、while、for普通使用同Java；

  • 常用用法：

    //shift+tab对齐
//1.forEach循环
var age = [1,2,3,6,4,5,8,21,3,5];
age.forEach(function (value) {
    console.log(value);
})
>1
>2
>3
>6
>4
>5
>8
>21
>3
>5

//2.for in 循环
for (var num in age){
    console.log(age[num]);
}
>1
>2
>3
>6
>4
>5
>8
>21
>3
>5
//适用于未知数组长度，用于得到数组索引

//3.for of 循环

3.11.Map、Set

  • Map
var map = new Map([['Tom',100],['jack',90],['hash',80]]);	//键值对数组
var name = map.get('Tom');
console.log(name);
map.set('admin',60);	//添加和修改
map.delete('Tom');		//删除

>100
map
>Map(3) {"jack" => 90, "hash" => 80, "admin" => 60}
  • Set
var set = new Set([3,6,2,2,1,1,3]);     //去重数组
set.add(100);   //添加
set.delete(2);  //删除
console.log(set.has(3));    //判断是否存在该元素

>true
set
>Set(4) {3, 6, 1, 100}
  • 遍历
//1.数组遍历元素
var arr = [3,4,5];
for (let x of arr){
    console.log(x);
}
>3
>4
>5

//2.Map遍历元素
var map = new Map([['Tom',100],['jack',90],['hash',80]]);
for(let x of map){
    console.log(x);
}
>(2) ["Tom", 100]
>(2) ["jack", 90]
>(2) ["hash", 80]

//3.Set遍历元素
var set = new Set([3,6,2,2,1,1,3]);     
for (let x of set){
    console.log(x);
}
>3
>6
>2
>1

//注意：for in只有数组可用，Map，Set皆不可用，且只能遍历索引
//bug:
arr.name = 'zhaoxiaoan';
for (let x in arr){
    console.log(x);
}
>0
>1
>2
>name
//此时索引号会变成键名，且不能输出name相对应的值zhaoxiaoan

3.12.严格检查模式

  • 是为了防止多个js文件中全局变量互相矛盾的问题，在每个js文件或

4.函数

4.1定义函数

//绝对值函数
//方式一：
function abs(x) {
    if(x>=0){
        return x;
    }else {
        return -x;
    }
}

//方式二：
var abs = function (x) {
    if(x>=0){
        return x;
    }else {
        return -x;
    }
}

//两种定义方式效果相同，常用一
abs(10)
>10
abs(-10)
>10
abs()
>NaN
//注意，未传入参数则undefined

4.2参数

  • 函数可以传入任意个参数，即使未定义
function abs(x) {
    //手动抛出异常
    if (typeof x!== 'number'){//x的数据类型不为'number'，不传入参数时x未定义，会抛出异常
        throw 'Not a Number';
    }

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

abs()
>Uncaught Not a Number
  • arguments：
function abs(x) {
    console.log('x='+x);
    for (var a of arguments){
        console.log(a);
    }

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

abs(1,3,6,2,555,5)
>x=1
>1
>3
>6
>2
>555
>5
>1
//arguments用于接收所有传入参数
  • rest：
function f(a,b,...rest) {//...rest只能放在参数列最后一个，用于接收多余的参数
    console.log('a='+a);
    console.log('b='+b);
    console.log(rest);
}

f(1,5,2,63,9,52,85,666,555,985)
>a=1
>b=5
>(8) [2, 63, 9, 52, 85, 666, 555, 985]

4.3变量的作用域

  • var 关键字具有作用范围：

    • 在一个函数内部定义的变量名，只能往下延伸，不能在该函数外使用；
    • 在函数内部的函数中，定义一个与父函数相同的变量，调用时优先调用自身变量；
    • ES6之前，var变量存在一定Bug：
    function f1() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i);
}
f1();
//结果如下，i值在函数f1()外依然可以调用

在这里插入图片描述

  • 由此引入 let 关键字解决局部作用域冲突问题：
function f1() {
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i);
}
f1();
//let定义变量只在作用域内部有效，外部调用报错：ReferenceError: i is not defined

在这里插入图片描述

  • 作用域内部所有变量定义，无论位置，在 js 编译时都自动将定义提前，但并不会赋值初始化：
function f2() {
    let x = 'x' + y;
    console.log(y);
    let y = 'y';
}
f2();

//未定义 let y = 'y'; 时:ReferenceError: y is not defined
//定义 let y = 'y'; 后:ReferenceError: Cannot access 'y' before initialization

//规范写法：将所有变量定义提前到作用域开头
  • 在
var x = 'x';
alert(x);
alert(window.x);
window.alert(window.x);
//三条语句实质上等价

var old_alert = window.alert();
window.alert() = function (){
    
}//给window.alert()赋予了新的函数，导致原函数失效
window.alert(123);//失效了无法显示弹窗

//恢复window.alert()
window.alert = old_alert;
window.alert(456);//可以显示该弹窗
  • 因为window全局对象的危险性，为确保在多个js文件中代码保持安全性，规范法则，自己单独创建一个对象用于存放自己的变量，相当于每个人都拥有一个属于自己的window对象，而不会被其它人无意篡改：
//创建唯一全局对象
var ZhaoApp = {}

//定义属于自己的全局变量
ZhaoApp.name = 'zhaoxiaoan';
ZhaoApp.add = function(a,b){
    return a+b;
}
  • ES6引入常量 const 关键字，只读：
const PI = '3.14';
PI = '314';//该语句会报错

//在引入const之前都使用大写字母表示常量，但依然由var定义，值可改变

4.4方法

  • 定义方法：对象内部定义的函数叫做方法；
    • 其中this的用法和java相似，但更丰富，它默认指向调用该函数或者该方法的对象，如方式二中外部调用函数也是可行的，然而直接调用getAge()函数时却得到NaN，本质是此时调用函数对象是window本身，而window对象并不存在.name属性；
//方式一
var zhaoxiaoan = {
    name:'朝小闇',
    birth:2000,
    age:function () {
        let nowYear = new Date().getFullYear();
        return (nowYear-this.birth);
    }
}

//对象内部只存在属性和方法两种内容
//调用方法需要()
zhaoxiaoan.age()
>20
//调用属性则不用()
zhaoxiaoan.name
>"朝小闇"

//方式二
function getAge() {
    let nowYear = new Date().getFullYear();
    return (nowYear-this.birth);
}

var zhaoxiaoan = {
    name : '朝小闇',
    birth : 2000,
    age : getAge
}
zhaoxiaoan.age()
>20
zhaoxiaoan.name
>"朝小闇"
getAge()
>NaN
  • apply()方法：所有函数共有，它的作用是将this默认指向改为指定指向对象：
function getAge() {
    let nowYear = new Date().getFullYear();
    return (nowYear-this.birth);
}

var zhaoxiaoan = {
    name : '朝小闇',
    birth : 2000,
    age : getAge
}

//其中第一个参数为指向对象名，第二个为传入该函数的参数列表，用数组表示
getAge.apply(zhaoxiaoan,[])
>20

5.内部对象

5.1 标准对象类型

typeof 123
>"number"
typeof '123'
>"string"
typeof true
>"boolean"
typeof NaN		//NaN 虽然含义为Not a Number,但却是number类型
>"number"
typeof []		
>"object"		//对象类型
typeof {}
>"object"
typeof Math.abs
>"function"
typeof undefined
>"undefined"

5.2 Date

  • 常用时间方法：
let nowDate = new Date();

nowDate.getFullYear();	//年
>2020
nowDate.getMonth();		//月，注意，设计月份为0-11，得到7实质是8月
>7
nowDate.getDate();		//日
>27	
nowDate.getDay();		//星期
>4
nowDate.getHours();		//时
>18
nowDate.getMinutes();	//分
>52
nowDate.getSeconds();	//秒
>43
nowDate.getTime();		//时间戳，以1970-1-1 00:00:00为始计算毫秒数
>1598525563925
  • 时间转化：
console.log(new Date(1598525563925))	//时间戳转化成具体标准时间
>Thu Aug 27 2020 18:52:43 GMT+0800 (中国标准时间)//GMT中国标准时间

nowDate.toLocaleString();		//转化为当地时间
>"2020/8/27 下午6:52:43"

nowDate.toGMTString();
>"Thu, 27 Aug 2020 10:52:43 GMT"

5.3 JSON

  • 定义：

    • JSON是一种轻量级的交换格式；
    • 具有简洁和清晰的层次结构；
    • 能够有效提升网络传输效率；

  • 在 javascript 中一切都皆对象，任何 js 支持的类型都能用 JSON 来表示；

  • 格式：

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

  • 对象与JSON格式相互转换：

let user = {
    name : 'zhaoxiaoan',
    age : 3,
    sex : '男'
}
//JSON.stringify()将对象转换为JSON格式
let jsonUser = JSON.stringify(user);
jsonUser
>'{"name":"zhaoxiaoan","age":3,"sex":"男"}'
// 得到字符串 注意，外部用'',内部用"";

//JSON.parse()将JSON格式转换为对象
let parseUser = JSON.parse('{"name":"zhaoxiaoan","age":3,"sex":"男"}');
parseUser
>{name: "zhaoxiaoan", age: 3, sex: "男"}
// 得到对象，可展开
  • 对象与JSON区别
//对象格式
var obj = {name: "zhaoxiaoan", age: 3, sex: "男"};
//json本质是字符串
var json = '{"name":"zhaoxiaoan","age":3,"sex":"男"}'

6.面向对象编程

  • 基础概念：javascript、java、C#等编程语言都是面向对象的；
  • 面向对象编程：
    • 类：模板
    • 对象：具体实例

java一切都是对象博客链接

6.1 原型继承

  • 原型的特性就在于可以随时修改；
  • 一个对象定义之后指向自己本身的原型，对象和对象原型并不是一个同一样事物；
var Student = {
    name : 'zhaoxiaoan',
    age : 3,
    run : function () {
        console.log(this.name + "is running");
    }
}

var xiaoming = {
    name : "xiaoming"
}

//小明的原型指向Student，相当于父类
xiaoming.__proto__ = Student;

xiaoming
>{name: "xiaoming"}
>name: "xiaoming"
>__proto__:
>age: 3
>name: "zhaoxiaoan"
>run: ƒ ()
>__proto__: Object

xiaoming.run()
>xiaomingis running

//其中 __proto__ 原型指向Student，属性和方法直接继承原型，但是相同属性name依然默认调用自身name属性，而Student的原型则为Object对象(window全局对象最终原型同样指向Object对象)



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

xiaoming.__proto__ = Bird;
//可以随时修改指向原型，修改后:
xiaoming.run()
>TypeError: xiaoming.run is not a function
xiaoming.fly()
>xiaomingis flying
xiaoming
>{name: "xiaoming"}
>name: "xiaoming"
>__proto__:
>fly: ƒ ()
>__proto__: Object

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

//给Student新增一个方法
Student.prototype.hello = function () {
    console.log('hello');
}

//prototype 是指对Student原型添加一个方法，而Student对象指向自身的原型

6.2 class继承

  • ES6之后出现的新的继承方式；
class Student{
    //constructor就是构造方法
    constructor(name) {
        this.name = name;
    }

    //类中定义的方法不需要使用function，类中只存在属性和方法
    hello(){
        console.log('hello');
    }

}

class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);//重写构造方法必须涉及父类原型构造方法中的属性
        this.grade = grade;
    }
    myGrade(){
        console.log("我今年的年级是："+this.grade+"年级");
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",2);

//class继承的本质还是原型继承
xiaoming
>Student {name: "xiaoming"}
>name: "xiaoming"
>__proto__: Object		//原型依然指向于Object
xiaoming.hello()
>hello

xiaohong
>XiaoStudent {name: "xiaohong", grade: 2}
>grade: 2
>name: "xiaohong"
>__proto__: Student		//继承自Student
>constructor: class XiaoStudent
>myGrade: ƒ myGrade()
>__proto__: Object
xiaohong.myGrade()
>我今年的年级是：2年级

6.3 原型链

  • 原型指向最终直到Object截止，再往后就是Object和Object原型互指；

在这里插入图片描述

7.操作BOM对象（重点）

7.1 BOM

  • 是浏览器对象模型；
  • 常用浏览器内核：
    • IE
    • Chrome
    • Safari
    • FireFox
  • 第三方浏览器：
    • QQ浏览器
    • 360浏览器
    • …

7.2 浏览器常用对象属性方法

  • window：

    • 代表浏览器窗口；
    window.alert(1)		//弹窗
>undefined
window.innerHeight	//浏览器内部显示部分大小
>582
window.innerWidth
>150
window.outerHeight	//浏览器全部大小
>701
window.outerWidth
>712

  • navigator：

    • 封装了浏览器的信息，也可以通过window.navigator调用；
    • 大多数时候不使用navigator属性（不建议使用），因为会被认为修改；
    window.navigator.appName
>"Netscape"
navigator.appVersion
>"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
navigator.userAgent
>"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
navigator.platform
>"Win32"

  • screen：

    • 代表电脑屏幕尺寸；
    screen.width
1536
screen.height
864
//上述屏宽有125%的显示屏放大，设置回100%后即为以下
screen.width
1920
screen.height
1080

  • location（重点）：

    • 代表当前网页的URL信息；
    //以 https://www.baidu.com 为例
location

>host: "www.baidu.com"			//网页主机
>href: "https://www.baidu.com/"	//网页链接
>protocol: "https:"				//网络协议

location.reload()				//重载页面，即刷新页面


//很牛逼的方法
//设置新的地址，访问此网页则自动打开新地址
location.assign('https://www.baidu.com/')

  • document：

    • 代表当前的页面，HTML、DOM文档树；
    document.title
>"百度一下，你就知道"
//网页标题，可娱乐修改
document.title = 'zhaoxiaoan'
>"zhaoxiaoan"
    • 获取具体的文档树节点：
    <dl id="app">
    <dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>

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

dl:

在这里插入图片描述

  • 获取网页cookie：
//以 https://www.baidu.com 为例
document.cookie
>"BIDUPSID=D82CB30D89EEDA3F955B622F870B5FE0; PSTM=1582882414; BAIDUID=B04A05793CE4AE9F77A02ECD55450F04:FG=1; BD_UPN=12314753; sugstore=0; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; delPer=0; BD_CK_SAM=1; PSINO=6; BD_HOME=1; H_PS_645EC=5d9esAXtgUE7WN%2F8FMHnWe2t10nBl8dCBY4JYI0tWWyKYGKF5r5VvZyY6d4; H_PS_PSSID=32653_32606_1452_32045_32675_32116_32090_32618_32506_22159"
  • 劫持cookie原理：
    • 不要访问浏览器报警网页；
<script src="a.js"></script>
<!--未知js文件，恶意人员获取你的cookie上传到他自己的服务器-->

  • history：

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

8.操作DOM节点（重点）

8.1 基本说明

  • 浏览器网页就是一个DOM树形结构；
    • 更新：更新DOM节点；
    • 遍历：遍历DOM节点，得到DOM节点；
    • 删除：删除一个DOM节点；
    • 添加：添加一个DOM节点；
  • DOM树形结构：
    • 每一个标签都是一个DOM节点；

在这里插入图片描述

8.2 获得DOM节点

  • 这是原生代码，之后一般都使用JQuery；
<div id="father">
    <h1>标题一</h1>
    <p id="p1">这是p1</p>
    <p class="p2">这是p2</p>
</div>
<script>
    //对应css选择器
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');

    let childrens = father.children;    //获取father节点的所有子节点
    // father.children[0] 以数组下标的方式取得子节点
    // father.firstChild;
    // father.lastChild;
</script>

8.3 更新DOM节点

<div id="id1">

</div>

<script>
    let id1 = document.getElementById('id1');
</script>
  • 操作文本：
id1.innerText = '123'
>"123"
id1.innerHTML = '<p>111111111111111</p>'
>"<p>111111111111111</p>"
  • 操作CSS：
id1.style.color = 'yellow'		//属性使用，要使用字符串
>"yellow"
id1.style.fontSize = '40px'		// _ 转 驼峰命名规则
>"40px"
id1.style.padding = '40px'
>"40px"

8.4 删除DOM节点

  • 删除子节点前必须获得父节点，自己不能删除自己；
<div id="father">
    <h1>标题一</h1>
    <p id="p1">这是p1</p>
    <p class="p2">这是p2</p>
</div>

<script>
    //删除节点步骤：1.先通过该节点获得父节点；2.再由父节点删除该节点
    let self = document.getElementById('p1');
    let parent = self.parentElement;

    //删除方式一：
    parent.removeChild(self);

    //删除节点过程中children时刻在变化，是一个动态的过程
    //删除方式二：
    parent.removeChild(parent.children[0]);     //删除一次之后，后续子节点会自动往前补充

</script>

8.5 插入DOM节点

  • 前面学过的 innerHTML 属性会覆盖目标DOM下所有的标签；
  • append：
    • 通过append甚至可以插入、、
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    
    //1.将已有的节点追加到目标节点尾端
    
	//1.1 获得节点
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    
    //1.2 直接追加到节点末尾
    list.appendChild(js);
    
    //2.创建新的节点，并追加到节点末尾
    //2.1创建一个新的节点
    let newP = document.createElement('p');//创建一个p标签
    //2.2给新创建的节点赋值
    //方式一：
    newP.id = 'newP';
    newP.innerText = '123';
    
    //方式二：（更常用）
    newP.setAttribute('id','newP');		//参数就是键值对格式
    
    //2.3将新创建的标签追加到目标节点
    list.appendChild(newP);

    //3.添加style标签尝试修改css属性
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse}';

    document.getElementsByTagName('head')[0].appendChild(myStyle);
    //注意，标签名字后面可以跟数组以确保是该标签
</script>
  • insertBefore：
    • 将新节点插入到目标节点的前面；
    • 要被目标节点包含的节点调用（自身调用无效）；
<script>
    let list = document.getElementById('list');
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    
    //要包含的节点.insertBefore(newNode,targetNode)
    list.insertBefore(js,ee);
</script>

9.操作表单（验证）

9.1 表单简介

  • 是一个DOM树；
  • 具有如下属性：
    • 文本框：text
    • 下拉框：
    • 单选框：radio
    • 多选框：checkbox
    • 隐藏域：hidden
    • 密码框：password
    • …

9.2 获得要提交的信息

<form method="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username">
    </p>

<!--    单选框的value属性就是其设置好的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>
    let input_text = document.getElementById('username');
    let boy_radio = document.getElementById('boy');
    let girl_radio = document.getElementById('girl');

    //得到输入框的值
    input_text.value;
    >"123322553"
    //修改输入框的值
    input_text.value = '123'
	>"123"
    
    //得到单选框是否被选中
    girl_radio.checked;
    >false
    //修改其是否被选中
    girl_radio.checked = true;
    >true
    
    //单选框和复选框的value值只是设定好的value属性
    girl_radio.value
	>"women"

</script>

9.3 提交表单

  • 使用md5算法加密，同时使用隐藏域防止密码框修改：

    • <!--md5加密算法引入，可以自己下载到本地，下载地址在引入地址的上级-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<form action="https://www.baidu.com" method="post">
    <p>
        <span>用户名：</span>
<!--        添加name属性才可在提交时被看见-->
        <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密  码：</span>
        <input type="password" id="password">
    </p>
	<!--隐藏域用来-->
    <input type="hidden" id="md5-password" name="password">
    <button type="submit" onclick="f()">提交</button>

</form>

<script>
    function f() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
        let md5pwd = document.getElementById('md5-password');

        console.log(md5pwd.value);//隐藏域的值自己设置，可以为空，此处为空下面没有输出
        >
		md5pwd.value = md5(pwd.value); //md5算法，直接以密码域值作参，修改原密码
        console.log(md5pwd.value);//经过md5算法之后可以改密
        >ae6e334f62fb5d989398deed87568c94
    }
</script>
  • name属性的作用：
    • 没有name属性则无法看到表单提交的内容；

在这里插入图片描述

  • onsubmit：
    • οnsubmit=“return f()” 固定格式，将函数返回值返回给表单，如果函数返回false，则不会跳转页面不会提交；
    • 注意一下标签中type属性的变化；
<form action="https://www.baidu.com" method="post" onsubmit="return f()">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密  码：</span>
        <input type="password" id="password">
    </p>

    <input type="hidden" id="md5-password" name="password">
    <button type="button" onclick="f()">提交</button>

</form>

<script>
    function f() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
        let md5pwd = document.getElementById('md5-password');

        console.log(md5pwd.value);//隐藏域的值自己设置，可以为空
        md5pwd.value = md5(pwd.value);
        console.log(md5pwd.value);//经过md5算法之后可以改密
        return false;
    }
</script>

10.jQuery

10.1 获取jQuery

10.2 初步使用jQuery

  • 两种引入方式，对应两种获取方式：
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    1.外部引入在线cdn-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!--    2.内部导入-->
    <script src="lib/jquery-3.5.1.min.js"></script>
</head>
  • jQuery使用：
<!--    jQuery调用公式 $(selector).action()-->
<a href="#" id="test-jQuery"></a>

<script>
    // $ 符号代表jQuery对象，相当于前面所说的window对象，是一种自己创建的对象
    //此处selector选择器就是css中的选择器，有自动提示，后面的click()就是动作，而函数作为匿名参数传入动作内
    $('#test-jQuery').click(function () {
        console.log('123');
    });
</script>

10.3 jQuery选择器

  • jQuery选择器与原生javaScript选择器比较：
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//class
document.getElementsByClassName();

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

10.4 jQuery事件

  • 事件一般分为（细学自行去看前文文档网站）：

    • 鼠标事件

    在这里插入图片描述

    • 键盘事件

    在这里插入图片描述

    • 其它事件
<!--3.事件-->
<span id="mouseMove"></span>
<div id="divMove">
在这里意动鼠标试试！
</div>

<script>
    //当网页元素加载完毕之后响应事件
    /*$(document).ready(function (e) {

    })*/
    //上述是原始写法，简写为：
    $(function () {
        $('#divMove').mousemove(function (e) {//e即为得到的鼠标移动信息
            $('#mouseMove').text('mouse:    x:'+e.pageX+'y:'+e.pageY)
        })
    })
</script>
  • 结果：

在这里插入图片描述

10.5 jQuery操作DOM

  • 节点文本操作：
$('#test-ul li[class=js]').text();				//获得值
$('#test-ul li[class=js]').text('123456');		//修改值

$('#test-ul').html();							//获取值
$('#test-ul').html('<strong>123</strong>');		//修改值
  • css操作：
$('#test-ul li[class=js]').css({"color":"red"});
  • 元素的显示和隐藏：
$('#test-ul li[class=js]').show();
$('#test-ul li[class=js]').hide();
$('#test-ul li[class=js]').toggle();		//显示和隐藏相互转换
  • 娱乐：
$(window).width();
$(document).width();
  • ajax()就是研究事件的；

10.6 复习小技巧

  • 巩固js、jQuery：
    • 看jQuery源码；
    • 看游戏源码（源码之家）；
  • 巩固HTML、CSS：
    .log(‘123’);
    });

由于从Typora导入文件，可能存在一些错误，因此附原图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

jQuery响应式流程步骤进度条插件.zip
07-04
jQuery响应式流程步骤进度条插件是一款可设置是否显示上一步下一步按钮，是否可点击进度条节点。
jQuery多步骤进度条_网页步骤流程进度条代码
10-30
jQuery多步骤进度条_网页步骤流程进度条代码
JavaScript和JQuery
西北的博客
03-18 443
日常闲聊：最近一直在认真学习，学的有点多，也有点快。感觉快消化不掉了，所以我决定暂停两天来总结一下。这个星期学了点前端技术，先从简单的html开始学，再到css，接着就是JavaScript，再就是JQuery，最后还学了bootstrap。实话说，学完这些我只用了三天的时间。感觉一下子接收了太多新鲜的东西，脑子有点膨胀。我反思了自己，发现自己的一个致命缺点，无论学什么都只想着快点学完，完全没考虑自己真正吸纳了多少，总结下来就只顾着学，却忽略了练习。所以我得改，不能一昧的求快，还要把所学的知识都变成自己的掌
JavaEE-JavaWeb学习之JavaScript篇
小林夕
03-05 826
HTML&CSS&JavaScript&JQuery之JavaScript篇 目录HTML&CSS&JavaScript&JQuery之JavaScript篇1 JavaScript介绍1.1 JavaScript与Html的结合1.1.1 方式一1.1.2 方式二1.2 变量1.3 关系运算1.4 逻辑运算1.5 数组1.6 函数1.6.1 隐形参...
JQuery技术详解
Lsh69的博客
09-05 815
转载自https://blog.youkuaiyun.com/qq_39949109/article/details/80209397?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159926829119725254057251%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159926829119725254057251&biz_id
jQuery extend()详解及简单实例
10-19
该方法有两种使用方式：一种是作为jQuery对象的方法jQuery.extend()，另一种是作为jQuery类的静态方法jQuery.fn.extend()。两者的主要区别在于它们处理的对象不同。 1. jQuery.extend(target, obj1, [obj2, obj3, ....
详解jquery.form.js插件的使用与优化技巧
jQuery在Web开发中被广泛使用，尤其是处理DOM操作和JavaScript代码简化方面。它的设计目标是尽量减少浏览器之间差异的影响，使开发者能够编写出更少bug的代码。 描述中没有提供额外信息，但是由于标题中提到的...
jquery-mobile基础属性与用法详解
10-21
以上就是 jQuery Mobile 的基础属性和用法的简要介绍。通过熟练掌握这些概念，你可以轻松地构建出功能丰富的移动网页应用。请注意，jQuery Mobile 的版本可能已经更新，建议查阅最新文档获取最准确的信息。
jQuery Ajax详解与高级用法
jQuery的Ajax用法详解涵盖了基础的使用方法，如`load()`的简要示例，以及`.ajax()`的高级特性，对于提高前端开发效率和构建现代Web应用具有重要作用。无论是初级开发者还是进阶者，深入理解并熟练运用这些技术都是不...
portfolio:使用 jQuery 事件的作品集
06-06
以上只是对jQuery事件处理和灯箱效果的简要介绍，实际的"portfolio:使用 jQuery 事件的作品集"项目可能会包含更复杂的逻辑和设计。开发者可能还利用了jQuery的其他特性，如事件冒泡、事件委托、AJAX请求来加载更多...
Java判断对象是否为空(包括null ,"")的方法
08-26
主要介绍了Java判断对象是否为空(包括null ,"")的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Java中判断对象是否为空的方法的详解
08-26
主要介绍了Java中判断对象是否为空的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Eclipse写的html文件中JavaScript代码不能执行可能存在的问题
lingtouyang的博客
01-13 3468
Eclipse写的html文件中JavaScript代码不能执行可能存在的问题 1、由于Eclipse写html文件没有错误提示。js遇到问题就不会执行了，而且在一个&lt;script&gt;&lt;/script&gt;标签内定义几个函数，某个函数有错，其他的函数也不能被调用。笔者遇到的问题是，在其中一个函数中不小心多敲了一个‘}’，而且在一个&lt;script&gt;&lt;/script...
java script 开发环境_Eclipse开发Javascript环境配置（含EXTJs配置）
weixin_42468321的博客
02-19 311
有三种Javascript编辑器可供选择：1. JSDT2. JSEclipse3. Spket分别介绍这三种插件的安装：1. JSDT 是WPT自带的插件2. JSEclipse如上图所示，安装打勾的JEclipse插件即可。JEclipse是Javascript的编辑器，要想使用ExtJs，还需要下载这个文件，把所有xml文件解压缩到你的Eclipse Workspace中目录：Eclipse...
Eclipse java jee出现 “cannot be resolved to a type”的解决办法（小白向）
qq_42912216的博客
04-21 6779
很长时间没有使用eclipse，然后当新的作业项目需要用的时候，发现打开并不好用，出现了上述问题，”cannot be resolved to a type”。然后就查了很多资料，尝试了很多方法，但是都没有什么作用。最后意外的解决了问题。（以下图片均是正常设置之后的图片）首先在问题项目上，右键，然后点击最底端properties，然后出现一个大框框。在这个框框的左边，有一行叫做java build...
JavaEE--JSP详解
weixin_30265171的博客
08-02 251
一、JSP 　　JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计，它是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML（标准通用标记语言的子集）文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)...
JavaScript笔记
qq_43120504的博客
09-19 348
JavaScript 1.快速入门 1.1.第一个JavaScript程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部引入--> <!-- <script>--> <!-- alert('Hello World');
js中取得变量绝对值的方法
热门推荐
Golden_lion的博客
05-20 1万+
本文实例讲述了js中取得变量绝对值的方法。分享给大家供大家参考。具体分析如下： 绝对值在js中我们直接使用abs函数来求，这里就来整理一些关于js中取得变量的绝对值的方法，以便让大家更深入的理解js绝对值的用法 js中的绝对值不怎么常用到，今天在写一个方法的时候遇到了，于是记录下来，与大家共同学习。 js中的默认对象——Math对象下面有一个abs函数，专门用来获取数字的绝对值，
mysql自定义函数:传入值(0显示值为女,1显示值为男)
茶杯的博客
05-22 1059
DELIMITER $$CREATE    /*[DEFINER = { user | CURRENT_USER }]*/    FUNCTION `t204`.`fun_student`(sex INT)    RETURNS VARCHAR (50)    /*LANGUAGE SQL    | [NOT] DETERMINISTIC    | { CONTAINS SQL | NO SQL ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值