JavaScript整合笔记

诗诗Pure

已于 2022-04-29 16:42:26 修改

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签： java

于 2022-04-26 08:37:08 首次发布

本文链接：https://blog.csdn.net/BubblesMusic/article/details/124407256

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.1、JavaScript介绍

什么是JavaScript

JavaScript是一门世界上最流行的脚本语言。

ECMAScript

ECMAScript可以理解为是JavaScript的一个标准。

1.2、JavaScript使用

引入JavaScript

1.内部标签

<script> alert('hello,world'); </script>

2.外部引入

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

js文件

<!--弹窗--> alert('hello,world');

1.3、基本语法入门

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

    <script>
       // 1.定义变量  变量类型  变量名  =  变量值;
       var score = 71;
       //alert(num)
       // 2.条件控制
       if (score>60 && score<70 ){ //成绩大于60小于70
           alert("60~70")
       }else if (score>70 && score<80){
           alert("70~80") //弹窗
       }else{
           alert("other") //结束
       }
    </script>

</head>
<body>

</body>
</html>

浏览器必备调试须知

1.4、数据类型（入门）

数值,文本，图形，音频,视频...

变量

变量不能以数字开头和以下符号开头，$和_可以

number

js不区分小数和整数，number

1  //整数
1.5 //浮点数
1.5e5 //科学计数法
-99 //负数
NaN  // not a number

字符串

'666 '  

"666"

布尔值

true 
false

逻辑运算

&& //与,两个都为真，结果为真 
|| //或，一个为真，结果为真 
! //非，真即假，假即真

比较运算符

=    赋值符号
==   等于   （类型不一样，值一样，也会判断为true）
===  绝对等于 （类型一样，值一样，结果为true）

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

通过isnan(nan) 来判断这个数是否是nan

浮点数问题

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

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

<script>
console.log(Math.abs(1/3-(1-2/3))<0.00000001)
</script>

null(空指针)和undefined

null 空

undefined 未定义

//保证代码的可读性，尽量使用 []
var arr = [1,2,4,5,6,'hello',true,null] 
new Array(1,2,3,4,5,6,'hello');

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

对象

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

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

//java的写法:bubbles bubbles = new bubbles
var bubbles = { //javascript的写法
     name: "彬哥",
     age: 18,
     tags: ['js','ssm','mysql','...']

}

1.5、严格检查模式strict

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格检查模式strict</title>
</head>
<body>
  <script>
      //使用strict严格检查模式，预防随意性的问题，必须写在第一行
      'use strict' //放上代码报错有提示，放下代码报错无提示
       //全局变量
       let i = 1; //补充残缺的语句
      //ES6 let
  </script>
</body>
</html>

1.6、数据类型

字符串

正常字符串我们使用单引号' '，或者双引号" "包裹

注意转义字符\

\'
\n
\t
\u4e2d   Unicode字符
\x41  Ascll字符

多行字符串编写

var msg = `hello
world
bubbles`b

模板字符串

let name = '彬哥'; 
let age = 3; 
let msg = `你好,${name}`

字符串长度

console.log(src.length)

字符串的可变性，不可变

var bubbles = 'you'
undefined
bubbles[0] = 1
1
console.log(bubbles)
you

大小写转换

//大写
console.log(bubbles.toUpperCase())
//小写
console.log(bubbles.toLowerCase()))

获取指定的下标

console.log(bubbles.indexOf('e'))

截取

console.log(bubbles.substring(1)) //从第一个字符串截取到最后一个字符串
console.log(bubbles.substring(1,3)) //[1,3)

数组

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

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

长度

arr.length //长度

注意:加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失。

indexOf，通过元素获得下标索引

arr.indexOf(2) 
1

字符串的"1"和数学1是不同的

slice() 截取Array的一部分，返回一个新数组，类似于String中subString

arr.slice(2,3)

push()、pop()

push：压入到尾部

arr
(5) [1, 2, 3, 4, 5]
arr.push('a','b') //压入到尾部
7
arr
(7) [1, 2, 3, 4, 5, 'a', 'b']

pop：弹出尾部的一个元素

arr.pop //弹出尾部的一个元素

unshift()，shift()头部

unshift: 压入到头部

var arr = [1,2,3,4,5,6]
undefined
arr.unshift('a','b')  //压入到头部
8
arr
(8) ['a', 'b', 1, 2, 3, 4, 5, 6]

shift: 弹出头部的一个元素

arr.shift() //弹出头部一个元素

排序sort

arr
(4) ['b', 'c', 'd', 'a']
arr.sort() //排序
(4) ['a', 'b', 'c', 'd']

元素反转reverse

arr.sort()
(4) ['a', 'b', 'c', 'd']
arr.reverse() //元素反转
(4) ['d', 'c', 'b', 'a']

concat

(4) ['d', 'c', 'b', 'a']
arr.concat(1,2,3)
(7) ['d', 'c', 'b', 'a', 1, 2, 3]
arr
(4) ['d', 'c', 'b', 'a']

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

连接符join

打印拼接

var bubbles = [1,2,3,4,5]
undefined
bubbles.join('-')
'1-2-3-4-5'

多维数组

var arr = [[1,2],[3,4],[5,6]]
undefined
arr
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) [5, 6]
length: 3
arr[1][1]
4

填充fill

arr.fill(1)

总结

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

对象

若干个键值对

var 对象名 = {
 属性名: 属性值,
 属性名: 属性值,
 属性名: 属性值
}
//定义了一个person对象，它有四个属性！
 var score = {
      name: "bubbles",
      age: 18,
     email:'2019882328@qq.com',
     score: 0
}

js中的对象，{.....}表示一个对象,键值对描述属性xxxx;xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！

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

对象赋值

score.name = '彬哥' 
'彬哥' 
score.name 
'彬哥'

使用一个不存在的对象属性，不会报错！undefined

score.haha //值是瞎写的，不存在 
undefined

动态的删减属性

delete score.name 
true

动态的添加，直接给新的属性添加值即可

score.bubbles = '彬哥' //自定义 
'彬哥'

判断属性值是否在这个对象中！ xxx in xxx!

'age' in score 
true 
'toString' in score 
true

判断一个属性是否是这个对象自身拥有的hasOwnProperty

score.hasOwnProperty('age')
true //有
score.hasOwnProperty('ssm')
false //没有

流程控制

if判断

var score = 3
  if (score>3){  //判断1
      alert('hehe')
  }else if (score<5){ //判断2
      alert('wawu~')
  }else{ //否则
      alert('wawu~')
  }

while循环，避免程序死循环

var score = 3
while (score<100){
    score = score+1
    console.log(score)
}

dowhile循环，避免程序死循环

var score = 3
do{
    score = score+1
    console.log(score)
}while(score<100)

for循环

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

forEach循环 5.1

var bubbles =[1,2,45,66,3,7,7,9]
bubbles.forEach(function (value){
    console.log(value)
    })

for...in

var bubbles =[1,2,45,66,3,7,7,9]
//函数
 for(var num in bubbles){
    if (bubbles.hasOwnProperty(num)){
        console.log('存在')
        console.log(bubbles[num])
    }

Map和Set

ES6新特性

Map

//ES6,Map
//学生的姓名、成绩
var map = new Map([['xiaobin',100],['bubbles',90],['xiao',60]]);
var name = map.get('xiaobin')
map.set('admin',123456)  //添加和修改
map.delete('xiao')//删除
console.log(name)

Set

去除重复的值

//Set，去除重复的值
var set = new Set([1,2,1,1,3]);
 console.log(set)

var set = new Set([1,2,1,1,3]);
set.add(2) //添加
set.delete(1) //删除
console.log(set.has(3)) //是否包含某个元素

iterator迭代

遍历数组

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

遍历Map

var map = new Map([['bubbles',100],['小明',90],['小美',89]]);
for(let you of map){
    console.log(you)
}

遍历Set

//遍历Set
var set = new Set([1,2,3,4,5,6]);
for (let et of set){
    console.log(et)
}

1.7、函数

定义函数

定义方式一

绝对值函数

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

一旦执行到return代表函数结束，返回结果！

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

定义方式二

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

function(x){......}这是一个匿名函数。

但是可以把结果赋值给you(自定义)，通过you(自定义)就可以调用函数！

方式一和方式二等价！

调用函数

abs(10) //10
abs(-10) //10

参数问题：javascript可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题？

假设不存在参数，如何规避？

function you(x){
    if(typeof x!=='number'){ //手动添加异常
        throw 'Not a Number'
    }
    if(x>=0){
         return x;  
    }else{
        return  -x;
    }
}

arguments

arguments是javascript免费赠送的关键字;

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

var abs = function(x){

    console.log("x=>"+x);
    for (var i = 0; i<arguments.length;i++){
      console.log(arguments[i]);
    }
    if (x>=0){
        return x;
    }else{
        return -x;
    }
}

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。

需要排除已有的参数~

rest

以前

if(arguments.length>2){
  for (var i = 2;i<arguments.length;i++){
      
  }
}

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

function bubbles(a,b,...rest) {
    console.log('a=>'+a)
    console.log('=>'+b)
    console.log(rest);
}

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

变量的作用域

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

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

function f() {
    var x = 1;
    x= x+1;
}
x= x+2;

如果两个函数使用了相同的变量名

function f() {
    var x = 1;
    x= x+1;
}
function f2() {
    var x = 'a';
    x= x+1;
}

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

function f() {
    var x = 1;
}
//内部函数可以访问外部函数的成员，反之则不行
function f2() {
  var y =  x +1;
}
var z = y+1; //Uncaught ReferenceError: y is not defined

假设，内部函数变量和外部函数的变量，重名!

function f() {
  var x = 1;

  //内部函数可以访问外部函数的成员，反之则不行
  function f2() {
    var x = 'a';
    console.log('inner' + x) //outer1
  }
  console.log('outer' + x) //innera
  f2()
}
f() //调用

假设在javaScript中函数查找变量从自身函数开始~，由’内‘向‘外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function f(){
    var x = 'x'+y;
    consloe.log(x)
    var y = 'y';
}

说明：javascript执行引擎，自动提升了y(自定义)的声明，但是不会提升变量y(自定义)的赋值；

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

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

function fa2(){
    var x = 1
        y = x+1
        z,i,a;//undefined
}

全局函数

var  x =1
function f() {
    console.log(x)
}
f()
console.log(x)

、

全局对象window

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

alert这个函数本身也是一个window 变量;

var x = 'xxx';
window.alert(x)
var old_alert = window.alert;
window.alert = function (){

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

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

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

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~ >如何能够减少冲突？

//唯一全局变量
var bubbles = {}

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

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

局部作用域let

function f() {
    for (var i = 0; i <100 ; i++) {
        console.log(i)
    }
    console.log(i+1) // i 出了这个作用域还能使用
}

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

function f() {
     for (let i = 0; i <100 ; i++) {
         console.log(i)
     }
     console.log(i+1) // i 出了这个作用域还能使用
 }

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

常量 const

在ES6之间，怎么定义常量；只有用全部大写字母命名的变量就是常量，建议不要修改这样的值

var  PI = '3.14'
console.log(PI)
PI = 123  //修改变量
console.log(PI)

在ES6引入了常量关键字const

const PI  = '3.14' //只读变量，不能修改
onsole.log(PI)
PI = 123 //修改变量
console.log(PI)

方法

定义方法

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

var bubbles  = {
  name : '彬哥',
  bitrh: 2003, //出生日期
  //方法
  age: function () {
     //今年 - 出生的年
    var on = new Date().getFullYear();
    return on-this.bitrh
  }
}

this代表什么？拆开代码试试

function x () {
  //今年 - 出生的年
  var on = new Date().getFullYear();
  return on-this.bitrh
}
'use strict'//使用严格检查模式
var bubbles  = {
  name : '彬哥',
  bitrh: 2003, //出生日期
  //方法
  age: x

}

apply

在js中可以控制this指向！

function x () {
  //今年 - 出生的年
  var on = new Date().getFullYear();
  return on-this.bitrh
}
'use strict'//使用严格检查模式
var bubbles  = {
  name : 'bubbles',
  bitrh: 2020, //出生日期
  //方法
  age: x

}
var  binge  = {
  name : '彬哥',
  bitrh: 2003, //出生日期
  //方法
  age: x
}
x.apply(bubbles,[]) //this，指向对象参数为null

1.8、内部对象

标准对象

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

Date

基本使用

var date = new Date();//当前时间
date.getFullYear()  //年
date.getMonth() //月  0~11 代表月
date.getDate() //日
date.getDay() //星期几
date.getHours() //时
date.getMinutes() //分
date.getSeconds() //秒
date.getTime() //时间戳，全世界统一
console.log(new Date(1650866500836))//通过时间戳，获取当前时间

转换

date.toLocaleString()
'2022/4/25 14:01:40'
date.toGMTString()
'Mon, 25 Apr 2022 06:01:40 GMT'

JSON

json是什么

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

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式

对象都用{}

数组都用[]

所有键值对都是用key:value

var user = { //对象
  name :'binge',
  age:18,
  sex:'男'
}
//对象转化为json字符串，{name: 'binge', age: 18, sex: '男'}
var jsonuser = JSON.stringify(user)

var user = { //对象
  name :'binge',
  age:18,
  sex:'男'
}
//json字符串转化为对象参数为json字符串
var obj = JSON.parse('{"name":"binge","age":18,"sex":"男"}')

JSON和JS对象的区别

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

1.9、面向对象

原型对象

javascript..java.....面向对象，javascript有些区别！

类：模板原型对象

对象：具体的实例

原型继承

var Student  ={
   name:'xiaoming',
    age:18,
    run:function (){
       console.log(this.name+'在学习...')
    }
};
var bubbles = {
    name: '彬哥'
};
//泡泡的原型指向鸟(继承)
bubbles.__proto__ = Student;

function f(name) {
  this.name = name;
}
//给f新增一个方法
f.prototype.hello = function (){
  alert('hello')
};

class继承

class关键字，是在ES6引入的

定义一个类，属性、方法

//ES6
class Class {
   //构造器
   constructor(name) {
     this.name = name;
   }
   hello(){
     alert('hello')
   }
}
var c1 = new Class('bubbles');
var c2 = new Class('彬哥');

继承

<script>
    //ES6
    class Class {
       //构造器
       constructor(name) {
         this.name = name;
       }
       hello(){
         alert('hello')
       }
    }
    //继承
    class pupil extends Class{
       constructor(name,grade) {
         super(name);
         this.grade = grade;
       }
       mygrade(){
           alert('pupil')
       }
    }
    var c1 = new Class('bubbles');
    var c2 = new Class('彬哥');
    var c3 = new pupil('(*Φ皿Φ*)',11);

</script>

本质：查看对象原型

原型链

__proto__

2.0、BOM对象

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是为了能够让他在浏览器运行！

BOM：浏览器对象模型

IE6~11
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

window.alert('我是神') //弹窗显示
windew.innerHeight    //内高
windew.innerwidth  //内宽
window.outerHeight  //外高
window.outerwidth //外宽

Navigator（不建议使用）

Navigator封装了浏览器的信息

navigator.appName //名字
'Netscape' //网景浏览器
navigator.appVersion  //当前浏览器的版本
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Mobile Safari/537.36 Edg/100.0.1185.50'
navigator.userAgent //用户代理
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Mobile Safari/537.36 Edg/100.0.1185.50'
navigator.platform //站台
'Win32'
...

大多数时候，我们不会使用navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width //屏幕宽度
145px
screen.height //屏幕高度
376px

location

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/s?wd=q%27q&ie=utf-8&tn=54093922_22_hao_pg"
protocol: "https:"
reload: ƒ reload() //刷新网页

//设置新的地址
location.assign('https://blog.csdn.net/BubblesMusic?type=blog')

document

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

document.title
'百度一下，你就知道'
document.title = '彬哥一下，你就知道' //改名
'彬哥一下，你就知道'

获取具体文档树节点

<dl id="app">
      <dt>Java</dt>
      <dd>JavaScript</dd>
</dl>

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

获取cookie

document.cookie

劫持cookie原理

淘宝网 - 淘！我喜欢

<script src ='aa.js'></script>

恶意人员：获取你的cookie上传到的服务器，例如你打开两大购物网站淘宝和天猫，
通过手机号登录淘宝，天猫也自动登录了

服务器端可以设置cookie： httpOnly

history（不建议使用）

history，代表浏览器的历史记录

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

2.1、操作DOM对象（重点）

浏览器网页就是一个DOM树形结构！

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

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

获取DOM节点

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
   <!--节点 -->
   <div id="ceiling">
       <h1>我是帅哥</h1>
       <p id="p1">p1</p>
       <p class="p2">p2</p>
   </div>



<script>
       <!--获得节点 -->
     var h1 = document.getElementsByTagName('h1')
     var p1 = document.getElementById('p1')
     var p2 = document.getElementsByClassName('p2')
     var ceiling = document.getElementById('ceiling')

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

</script>

</body>
</html>

这是原生代码，之后都是用jQuery

更新节点

操作文本

au.innerText = '456' //修改文本的值
au.innerHTML = '<strong>34323</strong>' //可以解析HTML文本标签

注意：会覆盖原先的数据

操作CSS

au.style.color = 'rgba(255,173,173,0.5)'
au.style.fontStyle = '20px'
au.style.padding = '2em'
...

删除节点

删除节点步骤:先获取父节点，在通过父节点删除自己

<div id="app">
  <h1>我是帅哥</h1>
  <p id="p2">p2</p>
</div>
<script>
 var p2 = document.getElementById('p2')
 var app = document.getElementById('app');
 app.removeChild(p2) //删除节点
 app.removeChild(app.children[0])
</script>

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

插入DOM节点

我们获得了某个Dom节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM

追加

<p id="js">javascript</p>
<div id="you">
     <p id="se">javase</p>
     <p id="ee">javaee</p>
     <p id="me">javame</p>
</div>

<script>
  var js = document.getElementById('js')
  var you = document.getElementById('you')
</script>

you.appendChild(js) //追加放置底部

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="" type="text/css">
    <script type="text/javascript" src=""></script>
</head>
<body>
    <p id="js">javascript</p>
    <div id="you">
         <p id="se">javase</p>
         <p id="ee">javaee</p>
         <p id="me">javame</p>
    </div>
    <script>
      var js = document.getElementById('js')
      var you = document.getElementById('you')
      //通过js创建一个新的节点
      var newP = document.createElement('p')
      newP.id = 'newP'
      newP.innerText  = 'Hello,bubbles';
      ///创建一个标签节点(通过这个属性，可以设置任意的值)
      var myScript = document.createElement('script');
      myScript.setAttribute('type','text/javascript')
    </script>
</body>
</html>

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

</head>
<body>
    <p id="js">javascript</p>
    <div id="you">
         <p id="se">javase</p>
         <p id="ee">javaee</p>
         <p id="me">javame</p>
    </div>

    <script>
      var js = document.getElementById('js')
      var you = document.getElementById('you')

      //通过js创建一个新的节点
      var newP = document.createElement('p')
      newP.id = 'newP'
      newP.innerText  = 'Hello,bubbles';

      ///创建一个标签节点(通过这个属性，可以设置任意的值)
      var myScript = document.createElement('script');
      myScript.setAttribute('type','text/javascript');

      var mystyle = document.createElement('style'); //创建一个空style标签
      mystyle.setAttribute('type','text/css');
      mystyle.innerHTML = 'body{background-color:chartreuse;}'; //设置标签内容
      document.getElementsByTagName('head')[0].appendChild(mystyle)

    </script>

</body>
</html>

insertBefore

 <p id="js">javascript</p>
 <div id="you">
      <p id="se">javase</p>
      <p id="ee">javaee</p>
      <p id="me">javame</p>
 </div>

<script>
var ee = document.getElementById('ee')
var js = document.getElementById('js')
var you = document.getElementById('you')

//要包含的节点，insertBefore(newNode,targetNode)
you.insertBefore(js,ee)
</script>

2.2、操作表单（验证）

表单是什么 form DOM 树

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

表单的目的：提交信息

获取要提交的信息

//得到输入框的值
username.value()
//修改输入框的值
username.value() = '123'

单选框

girl_radio.value
'lu'
boy_radio.value
'nan'

单选框只能读取当前选中的值

单选框选中的值

girl_radio.checked
true
boy_radio.checked
false

选中为true，没选中为false

指定赋值选中的值

girl_radio.checke = true
boy_radio.checked = true

测试

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

<form action="post">
  <div>
      <span>用户名</span><input type="text" name="username" id="username" placeholder="请输入用户名" >
  </div>

    <div>性别
        <input type="radio" name="sex" value="nan" id="boy"> 男
        <input type="radio" name="sex" value="lu" id="girl" > 女
    </div>
    
    <div>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
    </div>
</form>

  <script>
       var username = document.getElementById('username');
       var boy_radio = document.getElementById('boy');
       var girl_radio = document.getElementById('girl')

      // 单选框只能读取当前选中的值
       // //得到输入框的值
       username.value
       //修改输入框的值
       username.value = '123'

      //单选框选中的值,选中为true，没选中为false
       girl_radio.checked
       boy_radio.checked

       //指定赋值选中的值
       girl_radio.checke = true
       boy_radio.checked = true


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

MD5

工具类

<!--MD5工具类 -->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

使用

//MD5算法
password.value = md5(password.value);

提交表单，md5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
  <!--MD5工具类 -->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定提交事件，onsubmit
绑定一个提交检测的函数，true，false将结果返回给表单，使用onsubmit接收
 -->
<form action="https://www.baidu.com/" method="post" onsubmit="return f()">
  <p>
    账号 <input type="text"  value="" name="username" id="username" title="输入账号" maxlength="10" required size="15" placeholder="请输入账号">
 </p>
  <p>
    密码 <input type="password"  value="" id="input-password" title="输入密码" maxlength="*" required size="15" placeholder="请输入密码">
  </p>
  <input type="hidden" id="md5-password" name="password">
   <!-- 绑定事件 -->
  <button type="submit" >登录</button>

  <input type="reset" value="重置">

</form>
<script>

  function f() {
    alert('登录成功')//弹窗提示
    var username = document.getElementById('username');
    var pwd = document.getElementById('input-password');
    var md5pwd = document.getElementById('md5-password');

    //MD5加密
    md5pwd.value = md5(pwd.value);
    return true;
  }

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

2.3、jQuery

初始JQuery

JavaScript

JQuery库，里面存在大量的javascript函数

在线CDN JQuery（百度）

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

获取jquery，测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始JQuery</title>
    <!--在线jdn jquery -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<a href="" id="text-jquery">点我试试</a>

<!--jquery公式$(#).#() -->
<script>
    document.getElementById('id');
    $('#text-jquery').click(function (){
        alert('hello,jquery')
    })
</script>
</body>
</html>

JQuery选择器

js和jquery的对比

//原生js
//标签选择器
document.getElementsByTagName()
//类选择器
document.getElementsByClassName()
//id选择器
document.getElementById()

//jquery
$('id').click() //标签选择器
$('.class').click() //类选择器
$('#id').click() //id选择器

JQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件</title>
  <!--在线jdn jquery -->
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <style>
    #divMode{
      /*高宽*/
      height: 600px;
      width: 600px;
      /*边框*/
      border: 5px solid  red;
    }
  </style>
</head>
<body>
mouse：<span id="mouseMode"></span>

<div id="divMode">
  在这里移动鼠标试试
</div>

<script>
  //当网页元素加载完毕之后，响应事件
  //$(document).ready(function () {})
  $(function () {
     $('#divMode').mousemove(function (e){
       $('#mouseMode').text('x:'+e.pageX+'y:'+e.pageY)
     })
  });
</script>
</body>
</html>

JQuery操作DOM元素

操作DOM

节点文本操作

 $('#test-ui li[name=python]').text(); //获得值
'javascript'
 $('#test-ui li[name=python]').text('设置值'); //设置值
 $('#test-ui').html(); //获得值
 $('#test-ui').html('设置值'); //设置值

css操作

$('#test-ui li[name=python]').css('color','red') //文字颜色
$('#test-ui li[name=python]').css('background','red') //背景颜色

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

$('#test-ui li[name=python]').show() //显示
$('#test-ui li[name=python]').hide() //隐藏

诗诗Pure

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript整合笔记

1.1、JavaScript介绍什么是JavaScriptJavaScript是一门世界上最流行的脚本语言。ECMAScriptECMAScript可以理解为是JavaScript的一个标准。1.2、JavaScript使用引入JavaScript1.内部标签<script> alert('hello,world'); </script>2.外部引入<script src="js/alert.js"></s.
复制链接

扫一扫