JavaScript学习

最新推荐文章于 2025-08-13 21:05:35 发布

dddyyy_123

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_55376192/article/details/129073464

前端三要素

1.什么是JavaScript

1.1概述

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

1.2历史

ECMAScript它可以理解为是javascrpit的一个标准

最新版本已经到es6

但是大部分浏览器还只停留在支持es5代码上

开发环境、版本不一致

2.快速入门

2.1引入入门

1、内部标签

<script> 
//.....
</script>

2、外部标签

abs.js

//....

test.html

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

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    script标签内，写javascript代码
 alert弹窗-->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->
<!--外部引入-->
<!--注意：script标签必须成对出现-->
    <script src="js/d.js"></script>

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

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

2.2基本语法入门

var 定义变量

console.log(score) 在浏览器的控制台打印变量!

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

<!--    JavaScript 严格区分大小写-->
    <script>
        //1.定义变量   变量类型 变量名 = 变量值；
        var score = 71;
        //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>
</head>
<body>

</body>
</html>

浏览器必备调试须知：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sncUazBY-1676557702095)(E:\Snipaste_2023-02-11_21-31-30.png)]

2.3 数据类型

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

变量

var dd="cc"

number

js不区分小数和整数，Number

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

字符串

‘abc’ “abc”

布尔值

true, false

逻辑运算

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

|| 一个为真，结果为真


！真即假，假即真

比较运算符！！！！！重要

=
== 等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型一样，值一样，结果为true)

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

须知：

NaN===NaN，这个与所有的数值都不相等，包括自己

只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

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

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

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

null和underfined

null 空

undefined 未定义

数组

java的数值必须是相同类型的对象，js中不需要这样

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

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

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

underfined

对象

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

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

//Person person = new Person(1,2,3,4,5);
var person ={
    name:"dai",
    age: 3,
    tag:['js','java','web','....']
}

取对象的值

person.name
'dai

2.4 严格检查格式

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

3.数据类型

3.1字符串

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

2.注意转义字符 \

\'
\n
\t
\u4e2d   \u#### Unicode字符

 \x41 ASCLL字符

3.多行字符串编写

 //多行字符串 tab上面 esc键下面
    `
    var msg=
    hello
    world
    你好
`

4.模板字符串

let name = "dai"
let age =3;

let  msg =`你好呀，${name}`

5.字符串长度

str.length

6.字符串的可变性，不可变

7.大小写转换

//注意这里是方法，不是属性
student.toUpperCase()//大写
console.log(student.toLowerCase())//小写

8.获取某一个下标indexof

student.indexof('t')
1

9.截取一个范围substring

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

3.2数组

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

var arr =[1,2,3,4,5,6];//通过下标赋值和取值
arr[0]
arr[0]=1

1.长度

arr.length

注意：加入给arr.length赋值，数组长度就会发生变化，如果赋值过小，元素就会丢失

2.indexOf,通过元素获得下标索引

arr.indexOf(2)
1

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

4**.push(),pop()** 尾部

push 压入到尾部
pop   弹出尾部的一个元素

5.unshift(),shift() 头部

unshift    压入到头部
shift     弹出头部的第一个元素

6.排序sort()

(3)["C","B","A"]
arr.sort()
(3)["A","B","C"]

7.元素反转reverse（）

(3)["C","B","A"]
arr.reverse()
(3)["A","B","C"]

8**.concat()**

(3)["C","B","A"]
arr.concat([1,2,3])
(6)["C","B","A",1,2,3]
arr
(3)["C","B","A"]

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

9.连接符join

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

arr.join('-')
'1-2-3-4-5-6'

10.多维数组

arr=[[1.,2],[3,4],["5","6"]]
arr[1][1]
4

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

3.3对象

若干个键值对

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



 var person = {
      name: "dai",
      age: 3,
      email:"1234@.com",
      score:0

js对象，（…）表示一个对象，键值对描述属性 XXXX :XXXX,

多个属性之间使用逗号隔开，最后一个属性不加逗号

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

1.对象赋值

person.name
'dai'
person.name="q"
'q'
person.name
'q'

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

person.hh
underfined

3.动态删减属性，通过delete删除对象的属性

delete person.name
true

4.动态的添加，直接给新的属性添加值

person.haha = "haha"
'haha'

5.判断属性值是否在这个对象中 xxx in xxx

'age' in person
true
//继承
'tostring' in person
true

6.判断一个属性是否是这个对象自身拥有hasOwnProperty（）

person.hasOwnProperty("String")
false
person.hasOwnProperty("age")
true

3.4 流程控制

if判断

var age = 3;
if (age>3) {
  alert("haha");
}else {
  alert("kuku")

while循环

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

for循环

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

forEach循环>5.1

 'use strict'
    var age=[1,2,33,3];
    //函数
    age.forEach(function (value){
      console.log(age)
    })

for…in…

//for(var index in object){}
  for (var num in age){
      if (age.hasOwnProperty(num)){
          console.log("存在")
          console.log(age[num])
      }
  }

3.5 Map()和Set()

Map:

//Es6 Map
//学生的成绩，学生的名字
var names = ["tom","jerry","haha"];
var scores = [100,90,80];
var map = new Map(['tom',100],['jack',90],['haha',80]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456);//新增或修改
console.log(name);
map.delete("tom");//删除

Set：无序不重复的集合

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

3.6iterator

作业：使用iterator来遍历迭代我们Map，Set！

遍历数组

//通过for of / for in 下标
var arr = [3,4,5]
        for (let x of arr){
            console.log(x)
        }

遍历Map

  var map = new Map([["tom",100],["jack",90],["haha",80]]);
        for (let x of map){
            console.log(x)
        }

遍历Set

var set = new Set([5,6,7]);
for (let x of set){
    console.log(x)
}

4.函数

4,1定义函数

public 返回值类型 方法名（）{
  return 返回值；
}

定义方式一

绝对值函数

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可以传任意个参数，也可以不传递参数

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

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

//手动抛出异常来判断
if (typeof x!='number'){
  throw 'Not a Number';

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

arguments

arguments是一个免费赠送的关键字

代表，传递进来的所有参数，第一个数组!

 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 aaa(a,b,...rest){
  console.log("a=>"+a);
  console.log("b=>"+b);
 console.log(rest)

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

4.2变量的作用域

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

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

  function aj(){
     var x =i;
     x= x+1;
    }
    x= x+2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

  function aj(){
   var x =i;
   x= x+1;
  }
function dai2(){
      var x = 'a'
    x = x+1;
}

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

function dai() {
    var x = i;

    //内部函数可以访问外部函数的成员，反之则不行
    function dai2() {
        var y = x + 1;//2
    }

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

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

   function dai() {
        var x = i;

       
        function dai2() {
          var x = 'A';
          console.log('inner'+x);//outer1
        }

       console.log('outer'+x);//innerA
        dai2()
    }
dai()

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

提升变量的作用域

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

结果：xundefined

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

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

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

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

全局函数

// 全局变量
x = 1;
function f(){
    console.log(x);
    
}
f();
console.log(x);

全局对象window

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

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实际上只有一个全局作用域，任何变量（函数也可以视为变量）,假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefFreceError

规范

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

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

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

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

jQuery=$()

局部作用域 let

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

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

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

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

常量const

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

var PI = '3.14';

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

在ES6引入了常量关键字’const’

const PI = '3.14';//只读变量
console.log(PI);
PI = '123';

4.3方法

定义方法

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

var dai = {
  name:'全',
  birth:2000,
  //方法
  age: function (){
    //今年-出生的年
    var now = new Date().getFullYear();
    return now-this.birth;
    
  }
}

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

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

function getAge(){
  //今年 - 出生的年
  var now = new Date().getFullYear();
  return now-this.birth
   }
   var dai ={
  name: '全',
  birth : 2000,
  age: getAge
 }
   //dai.age ok
   //getAge() NaN window

this是无法指向的，是默认指向调用它的那个对象:

apply

在js中可以控制this指向

function getAge(){
  //今年 - 出生的年
  var now = new Date().getFullYear();
  return now-this.birth
   }
   var dai ={
  name: '全',
  birth : 2000,
  age: getAge
 };
getAge.apply(dai,[]);//this,指向了 dai 参数为空

5.内部对象

标准对象

typeof 123
'number'
typeof'123'
'string'
typeof true
'boolean'

typeof NaN
'number'
typeof[]
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1Date

 var now = new Date();
  now.getFullYear()//年
  now.getMonth();//月 0-11
  now.getDate();//日
  now.getDay();//星期几
  now.getHours();//时
  now.getMinutes();//分
  now.getSeconds();//秒

  now.getTime();//时间戳

  console.log(new Date(1676384186463))//时间戳转为时间

now.tolocalString//注意：调用是一个方式，不是一个属性

JSON

json是什么

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

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

格式：

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

JSON字符串和JS对象的转化

var user = {
  name: "dai",
  age:3,
  sex:'男'
  
};

//对象转换为json字符串{" name: "dai",age:3,sex:'男'"}
var jsonuser = JSON.stringify(user);

//json 字符串转化对象，参数为json 字符串
var obj = JSON.parse({"name": "dai","age":3,"sex":"男"});

很多人搞不清楚，JSON 和js 的区别

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

5.3Ajax

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

6.面向对象编程

6.1什么是面向对象

向对象是一种编程思想（oop）。很多个具有相同属性和行为的对象就可以抽象为类，对象是类的一个实例。JavaScript在ECMAScript 6中引入了类的概念。

类：模板
对象：具体的实例

在JavaScript这个需要大家换下思维方式

原型

var Student ={
  name:"dai",
  age:3,
  run:function (){
   
      console.log(this.name+"run....");
    }
  };
  var Bird ={
    fly:function (){
      console.log(this.name+"fly....");
    }
  
};
//小明的原型 Student
xiaoming._proto_ =Bird;

class 继承

class关键字，是在ES6引入的

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

//es6以后=======
//定义一个学生的类
class Student{
  constructor(name) {
    this.name = name;
  }
  hello(){
    alert('hello')
}
}

var xiaoming = new Student("xiaoming")
xiaoming.hello()

2.继承

//es6以后=======
//定义一个学生的类
class Student{
  constructor(name) {
    this.name = name;
  }
  hello(){
    alert('hello')
}
}
class pupic extends Student{
  constructor(name,grade) {
    super(name);
    this.grade = grade;
  }
  myGrade(){
    alert('我是一名小学生')
  }
}

var xiaoming = new Student("xiaoming")

本质：查看对象原型

_proto_:Student;

原型链

原型链：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。

7.操作BOM对象（重点）

浏览器介绍

javaScript 和浏览器关系

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

BOM:浏览器对象模型

IE
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
714
window.innerWidth
747
window.outerHeight
816
window.outerWidth
1536//大家可以调试窗口试试

Navigator

Navigator,封装了浏览器的信息

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

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

screen

代表屏幕尺寸

screen.width
1536
screen.height
864

location

location 代表当前页面的URL信息

host:""
href:""
protocol:
reload:f reload()//刷新网页
//设置新的地址
location.assign('')

document

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

document.title
document.title='dai'

获得具体的文档树结点

<dl id="app">
  <dt>java</dt>
  <dt>javaSE</dt>
  <dt>javaEE</dt>
</dl>
<script>
  var dl = document.getElementById('app');

获得cookie

document.cookie

劫持cookie原理

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

服务器端可以设置cookie: httpOnly

history

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

8.操作DOM对象（重点）

核心

浏览器页面就是一个Dom树形结构!

更新：更新Dom结点
遍历dom结点：得到Dom结点
删除：删除一个Dom结点

添加：添加一个新的结点

要操作一个新的Dom结点，就必须要先获得这个Dom结点

获得这个Dom结点

//对应css 选器
var h1 = document.getElementsByName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father =  document.getElementById('father');

var childrens = father.children;//获得父节点下的所有子节点
//father.firstChild
//father.firstChild

这是原生代码，之后我们尽量都是用jQuery（）

更新结点

innerText=‘456’ 修改文本值

id1.innerHTML='<strong>123</strong>'     加粗  可以解析HTML文本标签

操作js

id1.style.color = 'yellow';//属性使用 字符串 包裹

id1.style.fontSize='20px';//-转驼峰命名

id1.style.padding = '2em'

删除结点

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

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
        var self = decument.getElemntById('p1');
        var father = p1.parentElement;
        father.removeChild(p1)
        //删除是一个动态的过程：
father.removeChild(father.children[1])
father.removeChild(father.children[2])
father.removeChild(father.children[3]) 
</script>

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

插入节点

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

追加

<p  id="js">javascript</p>
<div id="list">
  <p id="se">se</p>
  <p id="ee">ee</p>
  <p id="me">me</p>

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

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

<script>
  var js = document.getElementById('js');//已经存在的节点
  var list = document.getElementById('list');
  //通过JS 创建一个新的节点
  var newp = document.createElement('p');//创建一个p标签
  newp.id = 'newP';
  newp.innerText='Hello';
  list.appendChild(newp);
    
    //创建一个标签节点(通过这个属性，可以设置任意的值)
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript')
    
     //创建一个style标签
  var myStyle = document.createElement('style');//创建一个空style标签
  myStyle.setAttribute('type','text/css')
  myStyle.innerHTML = 'body{background-color:chartreuse}';//设置标签内存

  document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

insertBefore

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

9.操作表单(验证)

表单是什么 form DOM树

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

表单的目的：提交信息

获得要提交的信息

<form action="#">
  <p>
    <span>用户名:</span> <input type="text" id="username">
  </p>
<!--  多选框的值，就是定义好的value-->
  <p>
    <span>性别:</span>
      <input type="text" 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>
</body>

提交表单

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

<script>
  function aaa(){
    var uname = document.getElementById('username');
    var pwd = document.getElementById('password');
    var md5pwd = document.getElementById('md5-password')
    console.log(uname.value);
    //MD5 算法
    pwd.value = md5(pwd.value);
    console.log(pwd.value);
    //可以效验判断表单内容，true就是通过提交，false,阻止提交
    return true;
  }
</script>

10.JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
  document.getElementById('id')
  //选择器就是css的选择器
  $('#test-jquery').click(function (){
    alert('hello,jQuery');
          })
</script>
</body>
</html>

选择器

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

//jQuery css 中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id').click();//ID选择器
$('.class').click();//class选择器

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

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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').onmousemove(function (e){
      $('#mouseMove').text('x:'+e.pageX+'y+'+ e.pageY)
    })
  });
</script>
</body>
</html>

操作DOM

节点文本操作

$ ('#test-u1 li[name=python] ').text(;//获得值
$( '#test-u7 1i[name=python] ').text('设置值');//设置值3 
$( '#test-u7').htm1(;//获得值
4$('#test-u7').htm1('<strong>123</strong>');//设置值

css的操作

$('#test-u1 li [name=python] ').css(i"color" , "red"})

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

 $('#test-ul 1i[name=python] ').show()
 $('#test-u1 li[name=python] ').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-u1 1i[name=python] ').toggle();

document.getElementById(‘id’)
//选择器就是css的选择器
$(‘#test-jquery’).click(function (){
alert(‘hello,jQuery’);
})

```

选择器

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

//jQuery css 中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id').click();//ID选择器
$('.class').click();//class选择器