JAVAscrpt笔记

javascript

基本格式

    <!--script标签内，写javascript代码-->
    <script>
        // 内部标签
        alert('hello world')
    </script>

	    <!--外部引入  -->
    <script src="js/qj.js"></script>

基本语法

• 定义变量（一行可以同时定义两个变量）

//定义变量 变量类型 变量名 = 变量值
var num = 1;  var num02 = 2;
name = "neo";
alert(num02)

• 条件控制

//判断条件控制 &&（and）
//javascript 严格区分大小写
if (score<60) {
    alert("60~70")
}else if (score>70 && score<80){
    alert("70~80")
}else{
    alert("other")
}

浏览器控制台

• 通过web浏览器自带的检查功能进入到控制器，可实现简单的排查功能

alert(num02)
console.log(score) // 在浏览器中打印变量 System.out.println();

1. 在浏览器中可以做到简单查看，控制台输出，断点测试，cookie查看，网络抓包。

数据类型（简介）

• 变量

var 王者 = ”最强”

• JS不区分小数和整数

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

• 字符串

j = 'abc'
b = "abc"

• 布尔值

Ture / False

• 逻辑运算

&& 两个都为真 结果为真

|| 一个为真 结果为真

！ 真即假 假即真

• 比较运算符

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

NaN === NaN  // 这个与所有的数值都不相等，包括自身
			 // 只能通过isNaN(NaN)来判断这个数是否是NaN

注意：是JS的缺陷设计，尽量使用=

• 浮点数问题

console.log(1/3) === (1-2/3)
math.abs（1/3 - (1-2/3)）< 0.00001

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

null 和 undefined

• null 空

• undefined 未定义

• 数组

一系列相同类型的对象，可以同时定义

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

new array(1,2,3,6,6,'hello')

取数组下标：如果越界会返回undefined

• 对象
  • 对象是大括号，数组是方括号
  • 每个属性之间使用逗号隔开，最后一个不需要添加逗号

var person = {
    name: 'neo',
    age:22,
    tags:['python','html','mysql']
}

• 取对象的值

>>person.name
"neo"

严格检查模式

‘use strict’; 严格检查模式，预防JavaScript的随意性导致的一些问题

必须写在JavaScript的第一行！

前提： IDEA 需要设置支持ES6语法

'use strict';
let i = 1;  // 局部变量建议使用let定义

数据类型（详细）

• 字符串

  • 正常字符串使用单引号，或者双引号包裹
  • 注意转义字符 \

  \'	转义符
  \n  换行符
  \t  
  \u4e2d   \u#### Unicode字符
  >>console.log("\x45");  Ascll字符
  

  • 多行字符串编写

var msg = `
    hello
    neo
    welcome
    new
    world
`   //tab键上面

​ - 模板字符串

var name = 'neo'
let msg01 = `hello ${name}`

		- 字符串长度

【str】.length

​ - 字符串的可变/不可变性

>>var student = "student";
undefined
>>console.log(student.length)
7 debugger eval code:1:9
console.log(student.[5] + 1)
>>console.log(student)
student

​ - 大小写转换

//注意，这是方法，不是属性
student.touppercase()
student.tolowercase()

​ - 查找指定字符所在位置数

student.indexof（‘t‘）

		 - 显示指定位置之内的字符，

student.substring（1，6）

• 数组

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

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

1. 长度

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

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

arr.indexOf（2）

3. **slice（）**截取array的一部分，返回一个新数组，类似string中的substring
4. push()，pop() 尾部

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

5. unshift() , shift() 头部

UNshift: 压入到头部
shift:   弹出头部的一个元素

6. 排序sort()

>>arr.sort()
Array(6) [ 1, 2, 3, 4, 5, 6 ]

7. 元素反转 reverse()

Array(6) [ 1, 2, 3, 4, 5, 6 ]
>>arr.reverse()
Array(6) [ 6, 5, 4, 3, 2, 1 ]

8. 元素拼接concat()，concat并没有修改数组，只会返回一个新的数组

Array(6) [ 6, 5, 4, 3, 2, 1 ]
>>arr.concat([7,8,9])
Array(9) [ 6, 5, 4, 3, 2, 1, 7, 8, 9 ]

9. 连接符join

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

Array(9) [ 6, 5, 4, 3, 2, 1, 7, 8, 9 ]
arr.join('-')
"6-5-4-3-2-1"

10. 多维数组

>>arr = [[1,2],[4,5],[6,8]];
>>arr[1][0]
4

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

• 对象

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

  1.对象赋值

var 【对象名】 = {
    【属性名】：【属性值】
    【属性名】：【属性值】
}

var neo {
    name:'neo',
    age:23,
    email:'xxxx@xxx',
    score:0
}

JS中对象，{…}表示一个对象，键值对描述属性xxx：xxx 多个属性之间使用逗号隔开，最后一个属性不加逗号

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

person.scode
undefined

3. 动态的删减属性

>>delete person.name
true
>>person
Object { age: 23, email: "xxxx@xxx", score: 0 }

4. 动态的添加,直接给新的属性添加值即可

>>person.name = "neo";
"neo"
>>person
Object { age: 23, email: "xxxx@xxx", score: 0, name: "neo" }

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

>>'age' in person
true

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

person.hasOwnProperty('score')
true
person.hasOwnProperty('face')
false

• 流程控制

1. if 判断

'use strict';
var age = 5;
if (age > 3) {  // 第一个判断
    alert("hahahahah");
    } 	else if(age < 5) {  // 第二个判断
        alert("wuwuwu");
    }	else{ // 否则
        alert("kuwa~")
    }

2. while循环，避免程序死循环

'use strict';
var age = 5;
while(age < 110){
    age = age + 1;
    console.log(age)
}

3. for循环

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

4. forEach循环

var age = [12,5,48,6151,99];
age.forEach(function(value){
    console.log(value)
})

5. for…in

var age = [12,5,48,6151,99];

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

• Map 和 Set

  Es6 的新特性

  1. Map：

var map = new Map([['tom',100],['jack',90],['leo',80]]);
var name = map.get('tom'); // 获得key得到value
map.set('admin',123456);  // 新增或修改
console.log
console.log(name);
map.delete（'tom'） // 删除

2. Set：无序不重复的集合

var set = new Set([3,8,9,6,9,9]); //set可以去除重复元素
set.add(2); // 添加 
set.delete(9); // 删除 
console.log(set.has(3)); //包含某个元素

• iterator

ES6新特性

1. 遍历数组

var scores = [100,90,80]
for (let x of scores) {
    console.log(x)
}

2. 遍历map

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

3. 遍历set

var set = new Set([100,90,80]);
for (let x of set) {
    console.log(x)
}

函数

• 定义函数.

绝对值函数

function abs(x){
    if(x>=0){return x+1;}
    else{return -x;}
}

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

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

• 定义方式二

var abs = function(x){
    if(x>=0){return x+1;}
    else{return -x;}
}

function(x){…} 这是一个匿名函数，但可以把结果赋值abs，通过abs就可以调用函数

• 调用函数

abs（10） // 10
abs（-10） // 10

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

var abs = function(x) {
    // 手动抛出异常来判断
    if(typeof x!== 'number'){ throw 'not a number';}
    if(x >= 0){return x;}
    else{return -x;}
}

arguments

arguments 是JS免费赠送的关键字

代表传递进来的所有的参数

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

argument 包含所有的参数，有时候想使用多余的参数进行附加操作时，则需要排除已有的参数

rest

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

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

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

变量的作用域

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

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

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

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

function qj(){
    var x = "A" ;
    x = x + 1;
}

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

function qj(){
    var x = 1;
    function qj2(){var y =x + 1;}  // 2
    var z = y + 2;}

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

function qj(){
    var x = 1;
    function qj2(){var x = 'A';
        console.log('inner' + x);
    ;}  // 2
        console.log('outer' + x);
    qj2()
    }
qj()

提升变量的作用域

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

结果：xundefined

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

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

这是在JS建立之初就存在的特性，所有的变量定义都放在函数头部。

全局函数

全局变量

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

全局变量window：

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

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

var x = 'xxx';
alert(x);
var old_alert = window.alert; // 重新定义alert()
window.alert = function(){};
window.alert(123);  // alert() 失效了
old_alert(123);
window.alert = old_alert // 恢复

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

规范

唯一全局变量

// 唯一全局变量
var neo = {};
// 定义全局变量
neo.name = 'neo'
neo.add = function(a,b){return a+b;}

把自己的代码全部放入自己定义的唯一空间中，降低冲突。

局部作用域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

在ES6引入常量关键字 const

const PI = '3.01';
console.log(PI);
PI  = '123'; // Uncaught TypeError: invalid assignment to const 'PI'

方法

• 定义方法

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

var neo = {
    name : 'neo',
    birth: 1999,
    // 方法
    age: function(){
        // getFullYear() 获得今年的日期
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}

// 属性
neo.name
// 方法,一定要带（）
neo.age()

this：拆开上面的代码

function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth;
}

var neo = {
    name : 'neo',
    birth: 1999,
    age: getAge
    }

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

apply

在JS中可以控制this指向

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var neo = {
    name : 'neo',
    birth: 1999,
    age: getAge
    }；


getAge.apply(neo,[]); // this 指向了 neo 参数为空

内部对象

标准对象

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

• Data日期对象

var now = new Date(); // 当前时间
now.getFullYear() // 年
now.getMonth()  // 月  0 ~ 11 月份
now.getDate()   // 日
now.getHours()  // 小时
now.getTime()  // 时间戳  全世界统一 1970 1.1 0：00：00

JSON

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

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

格式：

1. 对象都用{}
2. 数组都用[]
3. 所有的键值对都是用key：value

JSON 和 JS 对象的转换

var user = {
    name:"neo",
    age:3,
    sex:'man'
}

// 对象转化为JSON字符串  {"name":"neo","age":3,"sex":"man"}
var jsonUser = JSON.stringify(user)

// json 字符串转化为对象  { name: "neo", age: 3, sex: "man" }
var obj = JSON.parse(jsonUser)

Ajax

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

面向对象编程

• 类：模板

• 对象：具体的实例

var student = {
    name:"neo",
    age:3,
    run: function () {
        console.log(this.name + " run.....");
    }
};
var xiaoMing = {
    name:"xaoMing"
};

xiaoMing.__proto__ = student;  // 指向原型

Class继承

class关键字，是在ES6引入

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

class Student {
    constructor(name) {this.name = name;}
    hello() { alert('Hello, ' + this.name + '!'); }
}

var neo = new Student("neo")

class Student {
    constructor(name) {this.name = name;}
    hello() { alert('Hello, ' + this.name + '!'); }
}
class pupil extends Student{  // 指向原型
    constructor(name,grade){
    super(name);
    this.grade = grade;
    }
    myGrade(){ alert('我是一个小学生') }
}

var neo = new Student("neo");
var leo = new pupil("leo",1);

操作BOM对象

• BOM：浏览器对象模型

  • IE
  • Chrome
  • Safari
  • Firefox

• window（重要）

  • window代表浏览器窗口

>>window.innerHeight
932
>>window.innerWidth
873

• Navigator

Navigator,封装了浏览器的信息

>>navigator.appName
'Netscape'
>>navigator.appCodeName
'Mozilla'
>>navigator.appVersion
'5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36'
>>navigator.userAgent
'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36'

一般不会使用Navigator对象，因为会被人为修改

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

• screen
  代表屏幕的尺寸

>>screen.width
1706 px
>>screen.height
1066 px

• location（重要）

location 代表当前页面的URl信息

host:主机
href:当前指向的位置
prtocol:协议
reload：方法，重新加载 刷新网页
// 设置新的地址
location.assign('【URL】')

• document

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

>>document.title
'Grade 是一个 JavaScript 库，作用是从图像中提取前2个主要颜色产生互补的渐变-面试哥'
>>document.title='我的地带'
'我的地带'

获取具体的文档树节点

<dl id="app">
    <dt>JAVA</dt>
    <dd>PYTHON</dd>
    <dd>JAVASCRIPT</dd>
</dl>

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

获取cookie

>>document.cookie
'Hm_lvt_2879feddad3bc0f9c4f0e0de58961945=1648963937; Hm_lpvt_2879feddad3bc0f9c4f0e0de58961945=1648966438'

• history

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

操作DOM对象（重点）

• 核心

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

​ 1.更新：更新DOM节点

​ 2.遍历DOM节点：得到DOM节点

​ 3.删除：删除一个DOM节点

​ 4.添加：添加一个新的节点

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

获得DOM节点

    // 对应 css 选择器
    var h1 = document.getElementsByName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2')
    var children = father.children; // 获取父节点下的所有子节点

这是原生代码，尽量使用jQuery()

更新节点

id1.innerText=‘456’;  // 修改文本的值
id1.innerHTML='<strong>123</strong>'; //可以解析HTML文本
id1.style.color='yellow';  // 修改颜色 CSS操作
id1.style.fontSize='20px';  // 修改字体大小, 转驼峰命令
id1.style.padding='2em'; //修改填充

JS直接操作

>>document.getElementById('su')
<input id="su" class="bg s_btn" type="submit" value="百度一下">
>>var ss = document.getElementById('su')
undefined
>>ss.style.padding = '10px'  
"10px"

删除节点

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

// 创建一个父节点的ID
<div id="father">
<h1>标签1</h1>
<p id="p1">标签2</p>
<p class="p2">标签3</p>
</div>

// 定义父节点
<script>
var father = document.getElementById('father');

//var self = document.getElementById('father');  // 获取父节点
//var father = p1.parentElement;  // 通过子节点获取父节点
</script>

// 执行删除
>>father.removeChild(p1)  // 将父节点下的p1标签删除
<p id="p1">

• 动态删除

>>father.removeChild(father.children[0])
<h1>
>>father.removeChild(father.children[1])
<p class="p2">

注意： 在删除的过程中，children是在时刻变换的，删除节点的时候需要注意！！

插入节点

• 在获取了某个DOM节点后，如果DOM节点是空的，便可以通过innerHTML增加一个元素，但如果这个DOM节点已经存在元素就无法添加，会产生覆盖！

追加

<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>
    var js = document.getElementById('js'); // 已经存在的节点
    var list = document.getElementById('list');
	document.

</script>

//执行，追加到后面
>>list.appendChild(js)

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

<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>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    var newp = document.createElement('p')  // 创建新的标签
    newp.id = "newP";  // 添加ID属性
    newp.innerText = "hello,neo"  // 添加文本
    list.appendChild(newp);   // 添加进入标签
</script>



// 传入JS代码 （重点）
<script>
// 创建一个标签节点
    var myScript = document.createElement('script')  // 创建一个script标签
    myScript.setAttribute('type','text/javascript') // 定义type文件
    list.appendChild(myScript);  // 添加进标签
</script>


// 传入CSS文件
var myStyle = document.createElement('style');  // 创建一个style标签
myStyle.setAttribute('type','text/css');        // 定义CSS文件 
myStyle.innerHTML = 'body{background: #4ebbfda1;}';  // 写入CSS代码
document.getElementsByTagName('head')[0].appendChild(myStyle) //指向head标签

insert

  var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);  // 插入新节点到老节点前面（新节点，老节点）

操作表单（验证）

• 表单是什么 form DOM树
  • 文本框 text
  • 下拉框
  • 单选框 radio
  • 多选框 CheckBox
  • 隐藏框 hidden
  • 密码框 password
  • …

表单的目的：提交信息

<form action="#">
    <p>
    <span>用户名：</span> <input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的 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>
    // 得到输入框的值
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    // 修改输入框的值
    input_text.value = '123'

// 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    girl_radio.checked； // 查看返回的结果，是否为True，如果为True，则为选中
    boy_radio.checked = true;   // 赋值 

MD5加密

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

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

</head>
<body>

<form action="#" method="post">
    <p>
    <span>用户名：</span> <input type="text" id="username" required>
    </p>
    <p>
        <span>密码：</span> <input type="password" id="password">

    </p>
    <!--绑定事件 onclick 被点击    -->
    <button type="submit" onclick="aaa()">提交</button>
</form>
    
    <script>
        function aaa() {
            var uname = document.getElementById('username');
            var pwd = document.getElementById('password');
            console.log(uname.value)
            // MD5 算法
            pwd.value = md5(pwd.value);
            console.log(pwd.value)
             }

    </script>

</body>
</html>  

通过指定ID获取账号密码。但可以通过MD5算法加密

• 提交表单，MD5加密密码并隐藏密码

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

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

</head>
<body>
<!-- onSubmit 必须事件触发后指定执行的 JavaScript 代码
true/false 将结果返回表单，用onSubmit接收
。-->
<form action="http://www.baidu.com/" method="post" οnsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username" >
    </p>
    <!--多选框的值，就是定义好的 value值    -->
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件 onclick 被点击    -->
    <button type="submit">提交</button>
</form>

<script>
    function aaa() {
        alert('稍等...');
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        // 通过MD5算法加密原密码，在传入隐藏密码中
        md5pwd.value = md5(pwd.value);
        // 可以效验判断表单内容，true就是通过提交，false阻止提交
        return true;

    }

</script>

</body>
</html>

jQuery

jQuery库，里面存在大量的JavaScript函数

• 获取jQuery

    <!--jQuery CDN引入 在线引入   -->
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

	<!--jQuery 导入下载文件包    -->
<script src="/home/neo/IdeaProjects/Javasript/test_01/qj.js"></script>

• 公式：

$(selector).action()
// 选择器就是css选择器
$('#test-jquery').click(function(){
alert('hello jQuery');
})

jQuery选择器

// jQuery css中的选择器全部都可以使用
$('p').click(); // 标签选择器
$('#id').click(); // id选择器
$('.class').click(); // class选择器

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

jQuery事件

鼠标事件 键盘事件 其他事件

例子：

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

    <!--外部引入  -->
<!--    <script src="js/qj.js"></script>-->
    <!--jQuery CDN引入    -->
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script>

<!-- 使用css创建一个固定边框-->
    <style>
        #divMove{
        width:500px;
        height:500px;
        border:5px solid blue;
        }
    </style>

</head>
<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>
</html>

jQuery操作DOM

• 节点文本操作

>>$('#test-ul li[name=python]').text();   // 获得文本值
>>$('#test-ul li[name=python]').text(‘设置值’);	
>>$("#test-ul").html();  // 获得HTML格式值
>>$("#test-ul").html('<strong></strong>');  //设置值

• css操作

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

• 元素的显示和隐藏

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

本质：display：none

• 其他测试

>>$(window).width()  //  显示宽度
>>$(window).height()  // 显示高度