JavaScript学习之旅
一.什么是javascript
1.1.概述
javaScript是一门世界上最流行的脚本语言
java javascript
一个合格的后端人员必须精通javaScript
1.2.历史
ECMAScript 它可以理解是JavaScript的一个标准
最新版本技惊倒了es6版本
但是大部分浏览器还只停留在支持es5代码上
开发环境—线上环境，版本不一致
二.快速入门
2.1引入JavaScript
1.内部标签
2.外部引入
qj.js
alert('hello,world');
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个JavaScript</title><!-- 外部引入 --><!-- 注意：script标签必成对出现 --><script src="js/qj.js"></script><!-- 不用写也默认是 --><script type="text/javascript"> </script>
</head>
<body><!-- 这里也可以放JavaScript --></body>
</html>
2.2.基本语法入门
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个JavaScript</title><script type="text/javascript"> // 1.定义变量 变量类型 变量名 = 变量值；var num = 1;var name = "wangxin";alert(num);// 条件控制var score = 1;if (score > 60 && score<70){alert("60-70");}else if (score > 70 && score<80) {alert("70-80");}else{alert("OTHER");}// console.log(score) 在控制台打印变量</script></head>
<body><!-- 这里也可以放JavaScript --></body>
</html>
浏览器必备调试须知：
2.3.数据类型
数值，文本，图形，音频，视频
变量
var $1
Number
Js不区分小数和整数，统一都用number
整数 浮点数 科学计数法 负数 NaN不是一个数字 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))<1.000000001);
null和undefined
null空
Undefined未定义
数组
Java的数组必须是相同类型的对象，而js不需要
保证代码的可读性尽量使用[]
var arr = [1,2,3,4,5,"hello",null,true]
一系列相同类型的对象
取数组下标：如果越界了就会undefined
==对象
对象是大括号 数组是中括号–
每个属性都用逗号隔开，最后一个不需要添加
// Person person = new Person(1,2,3,4,5);
var person = {name: "wangxin",age: 3,tags: ['js','java','web','...']};
取对象的值
person.name
>"wangxin"
person.age
>3
2.4.严格检查格式
<!-- 'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题必须写在第一行局部变量建议都使用let去定义--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个JavaScript</title><!-- 'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题必须写在第一行局部变量建议都使用let去定义--><script type="text/javascript"> 'use strict';var i = 1;console.log(i);</script>
</head>
<body><!-- 这里也可以放JavaScript --></body>
</html>
三.数据类型
3.1.字符串
1.正常字符串我们使用单引号’ ’或者双引号包裹” ”
2.注意转义字符\
\’字符串
\n换行
\t TAB键
\u4e2d 中 \u##### Unicode字符
\x41 Ascll字符
3.多行字符串编写
var mag = `hello,worldnihao`
4.模板字符串
let name = "wangxin";let age = 3;var mag = `你好啊,${name}`console.log(mag);
5.字符串长度
str.length
6.字符串的可变性，不可变
7.大小写转换
//注意这里是方法不是属性
console.log(student.toUpperCase())
console.log(student.toLowerCase())
8.console.log(student.indexOf('u'))
9.
console.log(student.substring(1,3))
[ )
console.log(student.substring(1)) //从第一个字符串截取到最后一个字符串
console.log(student.substring(1,3)) //包含第一个不包含第三个
3.2.数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5]
arr[0]
arr[0] = 1
1.长度
arr.length
注意，假如给arr.length赋值，数组大小就会发生变化，如果赋值过小元素就会丢失
2.indexOf 通过元素获得下标索引
arr.indexOf(2)
>1
字符串的”1”和数字1是不同的
3.slice () 截取Array的一部分返回一个新的数组 类似String中的substring
4.push()，pop()
Push() // 压入尾部
Pop() // 弹出尾部的一个元素
unshift(),shift() //头部
Unshift() //压入到头部
Shift() // 弹出头部一个元素
6.排序 sort()
7.元素反转reverse()
8.Concat() 拼接数组 注意：并没有修改数组，只是会返回一个新的数组
9.连接符join 打印拼接数组，使用特定的字符串链接
arr.join('-')
"1-2-3-4-5-a"
10.多维数组
数组：储存数据（如何存，如何取，方法都可以自己实现）
3.3.对象
若干个键值对
var 对象名 = {
属性名 : 属性值 ,
属性名 : 属性值 ,
属性名 : 属性值
}
//定义了一个person对象 它有四个属性
var person = {name: "wangxin",age: 3,email: "232312312@qq.com",score: 0}
js中对象，{…}表示一个对象，键值对描述属性xxxx:xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
javascript中的所有的键都是字符串,值是任意对象！
1.对象赋值
person.name
"wangxin"
person.age=4
4
2.使用一个不存在的对象属性，不会报错！Undefined
3.动态的删减属性 通过delete删除对象属性
delete person.name
true
person.name
undefined
person
{age: 4, email: "232312312@qq.com", score: 0}
4.动态的添加 直接给新的属性添加值即可
person.name = "wangxin"
"wangxin"
person
{age: 4, email: "232312312@qq.com", score: 0, name: "wangxin"}
5.判断属性值是否在这个对象中 xxx in xxxx!
'age' in person
true
//继承
'toString' in person
true
6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
False
3.4.流程控制
If判断
var age = 3;if(age > 3){alert("haha");}else{alert("kuwa~");}
while循环,避免死循环
var age = 3;while(age<100){age = age + 1;console.log(age)}
for循环
for(let i = 0 ; i < 100 ; i++){console.log(i)}
forEach循环 5.1引入的
var arr = [1,2,3,4];arr.forEach(function (value){console.log(value)})
for…in循环
for(var num in arr)
var arr = [1,2,3,4];/**/for(var num in arr){console.log(num)}
3.5.Map 和 Set
ES6新特性
Map集合
var map = new Map([['tom',100],['jack',40],['haha',80]]);var name = map.get('tom');//通过key获得valuemap.set('admin',12234);console.log(name);
Set集合 无序不重复的集合
var set = new Set([1,2,3,444,1,,1,1]);//set可以去重set.add(100);//添加Set.delete(1); //删除Console.log(set.has(3)); //是否包含某个元素
3.6.iterator
ES6新特性
//通过for of 实现 for in 下标
遍历数组
var arr = [3,4,5];for(var x of arr){console.log(x);}
遍历map
var map = new Map([["TOM",122],["JACK",666],["HAHAH",009]]);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.1.函数定义
绝对值函数
定义方式一
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可以传任意个参数 也可以不传参数
参数进来是否存在的问题？
假设不存在参数如何规避？
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(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 wx() {var x = 1;x = x + 1; }x = x + 2; //index.html:18 Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名 只要在函数内部就不冲突
function wx() {var x = 1;x = x + 1; }function wx1 (){var x = 1;x = x + 1; }
内部函数可以访问外部函数的成员，反正不行
function wx() {var x = 1;//内部函数可以访问外部函数的成员，反正不行function wx1 (){var y = x + 1;}var z = y + 1;}假设内部函数变量和外部函数变量重名
function wx() {var x = 1;function wx1 (){var x = 'A'console.log('inner'+x);}console.log('outer'+x);wx1();}wx();
假设在JavaScript中函数查找变量从自身函数开始~由内向外查找。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量
提升变量的作用域
function wx() {var x = "x" + y;console.log(x);var y = 'y';}wx();
结果xundefined
说明；js执行引擎自动提升了y的声明 但是不会提升变量y的赋值
一般来说JavaScript变量的声明写在开头 把所有变量提到最前面统一定义。
这个是在JavaScript建立之初就存在的特性，养成规范所有的变量定义都放在函数的头部不要乱放便于代码的维护。
全局函数
//q全局变量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;//old_alert(x);window.alert = function () {};//发现alert失效了window.alert(123);window.alert = old_alert;window.alert(456);
JavaScript实际上只有一个全局作用域 任何变量(函数也可以视为变量) 假设没有在函数作用范围内找到 就会向外查找。如果在全局作用域都没有找到，报错 RefrenceErro
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件使用了相同的全局变量 冲突->如何能减少冲突？
// 唯一全局变量var WangXin = {};// 定义全局变量WangXin.name = "wang";WangXin.add = function (a,b) {return a + b;}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
jQuery
局部作用域
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); //Uncaught ReferenceError: i is not defined}
建议大家都使用Let去定义局部作用域的变量
常量 const
在ES6之前 怎么定义常量：只要用全部大写命名的变量就是常量：建议不要修改这样的值
var PI = "3.14";console.log(PI);PI = "213"; //可以改变这个值console.log(PI);
在ES6引入常量关键字const
const PI = "3.14"; //只读常量console.log(PI);PI = 233;console.log(PI); //Uncaught TypeError: Assignment to constant variable
4.3方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西 属性和方法
var wangxin = {name: '王欣',bitrh: 2020,//方法age: function () {// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh;}}
//属性 wangxin.name
//方法，一定要带() wangxin.agr()
this.代表什么？ 拆开上面的代码看
function getAge() {var now = new Date().getFullYear();return now-this.bitrh;}var wangxin = {name: 'was',bitrh: 2000,age: getAge}//wangxin.age() ok//getAge() NaN window
this 是无法指向的，是默认指向调用它的哪个方法
Apply
在js中可以控制this的指向
function getAge() {var now = new Date().getFullYear();return now-this.bitrh;}var wangxin = {name: 'was',bitrh: 2000,age: getAge};//wangxin.age() ok//getAge() NaN windowgetAge.apply(wangxin,[]); //this,指向了wangxin 参数为空
五.内部对象
标准对象
typeof 123
“number”
typeof ‘123’
“string”
typeof[]
“object”
5.1.Date
基本使用
var now = new Date();now.getFullYear(); //年now.getMonth(); //月now.getDate(); //日now.getDay(); //星期几now.getHours(); //时now.getMinutes();//分now.getSeconds();//秒now.getTime();// 时间戳 全世界统一 1970 1.1 0：00：00 毫秒数console.log(new Date(1611280834474)); //时间戳转时间
转换
console.log(new Date(1611280834474));
VM176:1 Fri Jan 22 2021 10:00:34 GMT+0800 (中国标准时间)
undefined
now = new Date(1611280834474);
Fri Jan 22 2021 10:00:34 GMT+0800 (中国标准时间)
now.toLocaleString()
“2021/1/22 上午10:00:34”
5.2.JsoN
json是什么
早期，所有数据传输习惯使用XML文件！
JSON(JavaScriptObject Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript 一切皆为对象 任何JS支持的类型都可以用JSON来表示
格式：
对象都用{}
数组都用[]
所有的键值对都是用key:value
JSON字符串和JS对象的转化
var user = {name:"wangxin",age: 4,sexx:'男'}// 对象转换为json字符串var jsonUser = JSON.stringify(user)// json 字符串转化为对象 参数为jsoN字符串var obj = JSON.parse('{"name":"wangxin","age":4,"sexx":"男"}')
很多人都搞不清楚JSON和JS对象的区别
Var obj = {a: ‘hello’, b: ‘hello’};
Var json = ‘{“a”: “hello”, “b”: “hello”}’;
5.3.Ajax
原生js写法 xhr异步请求
jQuey 封装好的方法 $(“#name”).ajax(“”)
axios请求
6.面向对象编程
原型对象
Java JavaScript c#… 面向对象 JavaScript有些区别
类 :模板 原型对象
对象 :具体的实例
在JavaScript这个需要大家换一下思维方式！
原型:
var student = {name:"wangxin",age: 4,sexx:'男',run: function() {console.log(this.name + "run...");}};var xiaoming = {name:"xiaoming"};// 原型对象xiaoming.__proto__ = student;var Bird = {fly: function () {console.log(this.name + "fly...");}}// 小明的原型是studentxiaoming.__proto__ = Bird;// 给student新增一个方法
student.prototype.hello = function () {alert('hello')
}
class继承
Class关键字是在ES6引入的
1.定义一个类，属性，方法
//ES6 之后//定义一个学生的类class student{constructor(name){this.name = name;}hello(){alert('hello')}}var xiaoming = new Student("xiaoming");var xiaohong = new Student("xiaoming");xiaoming.hello()
2.继承
class Student{constructor(name){this.name = name;}hello(){alert('hello')}}class XiaoStudent extends Student{constructor(name,grade){super(name);this.grade = grade;}myGrade(){alert('我是一个小学生')}}var xiaoming = new Student("xiaoming");var xiaohong = new XiaoStudent("xiaohong",1);
本质:查看对象原型
原型链
proto__:
七.操作BOM对象(重点)
浏览器介绍
JavaScript 和 浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行！
B:浏览器对象模型
IE6~11
Chrome
Safari
Firefox
第三方浏览器
QQ浏览器
360浏览器
Window
Window 代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
732
window.innerWidth
746
window.outerHeight
680
window.outerWidth
1280
//内部高度 和外部高度
Navigator (不建议使用)
Navigator ,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36 Edg/87.0.664.75"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36 Edg/87.0.664.75"
navigator.platform
"Win32"
大多数时候我们不会使用Navigator对象因为会被人为修改
不建议使用这些属性来判断和编写代码
Screen
代表屏幕的尺寸
screen.width
1280
screen.height
720
Location(重要)
Location 代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=90823477_hao_pg"
protocol: "https:"
reload: ƒ reload() //重新加载(刷新网页) 是一个方法
//设置新的地址
location.assign('https://microsoftnews.msn.cn/')Document(内容)
Document 代表当前的页面 HTML DOM文档树
document.title
"百度一下，你就知道"
获取具体文档树节点
<dl id="app"><dt>java</dt><dd>javase</dd><dd>javaee</dd></dl><script>var dl = document.getElementById('app');</script>
获取cookie
document.cookie
""
劫持cookie原理
www.taobao.com
<script src=”aa.js”><script>
恶意人员，获取你的cookie上传到他的服务器
服务器端可以设置cookie：httpOnly
History：代表浏览器的历史记录 (不建议使用)
histort.back()//后退
history.forward()//前进
八.操作DOM对象(难点)
DOM:文档对象模型
核心
浏览器网页就是一个Dom树形结构！
更新 ： 更新Dom节点
遍历dom节点： 得到Dom节点
删除 ： 删除一个Dom节点
添加 ： 添加一个新的节点
要操作一个Dom节点就必须要先获的这个Dom节点
获得DOM节点
<div id="father"><h1>标题1</h1><p id="p1">p1</p><p class="p2">p2</p></div><script>// 对应CSS选择器var h1 = document.getElementsByTagName('h1');var p1 = document.getElementById('p1');var p2 = document.getElementsByClassName('p2');var father = document.getElementById('father');var childrens = father.children; //获取父节点下所有子节点//father.firstChild//father.lastChild</script>
这是原生代码，之后我们尽量都是用jQuery();
更新节点
操作文本
id1.innerText='123'
"123"
id1.innerText='456' 修改文本的值
"456"
id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签
"<strong>123</strong>"
操作css
id1.style.color = 'red'; //属性使用字符串包裹
"red"
id1.style.fontSize='20px' //驼峰命名
"20px"
id1.style.padding = '2em'
"2em"
删除节点
删除节点的步骤:先获取父节点，再通过父节点删除自己
<div id="father"><h1>标题1</h1><p id="p1">p1</p><p class="p2">p2</p></div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(p1)//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意删除多个节点的时候 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');list.appendChild(js)</script>
创建一个新的标签，实现插入
<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');// 通过JS创建一个节点var newP = document.createElement('p');//创建一个P标签newP.setAttribute('id','newP');newP.id = 'newP';newP.innerText = 'hello,world';
//创建一个标签节点(通过这个属性，可以设置任意的值)list.appendChild(newP);var myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');</script>
InsertBefore
var ee = document.getElementById('ee');var js = document.getElementById('js');var list = document.getElementById('list');// 要包含的节点insertBefire(newNode,tarfetNode)list.insertBefore(js,ee);
九.操作表单(验证)
表单是什么 form DOM树
文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单的目的:提交信息
获取要提交的信息
<form action="post"><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');//得到用户框的值// input_text.value// 修改输入框的值// input_text.value = '123'var boy_radio = document.getElementById('boy');var girl_radio = document.getElementById('girl');// 对于单选框，多选框等等 固定的值 boy_radio.value只能取到当前的值/*boy_radio.checked girl_radio.checked 查看返回结果 是否为true 如果为true 则被选中boy_radio.checked = true 赋值*/</script>
提交表单 md5加密密码 表单优化
<!-- 表单绑定提交事件 onsubmit=" aaa()" 绑定一个提交检测的函数 true false得到这个结果返回给表单，使用onsubmit接收onsubmit="return aaa()"--><form action="https://www.baidu.com/" method="post" onsubmit="return aaa()"><p><span>用户名:</span><input type="text" id="username" name="username"></p><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(1);var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('md5-password');md5pwd.value = md5(pwd.value);//可以校验判断表单内容 true就是通过提交，false阻止提交return true;/*console.log(uname.value);console.log(pwd.value);// MD5算法pwd.value = md5(pwd.value);console.log(pwd.value);*/}</script>
十.jQuery
JavaScript
jQuery库 : 里面存在大量的javaScript函数
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-3.4.1/jquery-3.4.1.js"></script>
</head>
<body><a href="" id="test-jQuery">点我</a><script>//公式 $(selector).action()var id = document.getElementById('id');$('#test-jQuery').click(function () {alert('hello,world');})</script></body>
</html>
选择器
<script>// 原生js 选择器少麻烦不好记//标签document.getElementByTagName()//iddocument.getElementById()//类document.getElementByClassName()// jQuery$('p').click();//标签选择器$('#id1').click();//id选择器</script>
最好是查帮助文档 https://jquery.cuishifeng.cn/
事件
鼠标事件 mousedown() 鼠标按下 mousemove()鼠标移动
键盘事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="jquery-3.4.1/jquery-3.4.1.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').mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX + 'y'+e.pageY)})})</script></body>
</html>
操作DOM
$('test-ul li[name=python]').text(); //获得值
$('test-ul li[name=python]').text(‘设置值’); //设置值
$('test-ul').html(); //获得值
$('test-ul').html(‘<strong>123</strong>’);
元素的显示和隐藏 ：本质 display: none;
$('test-ul li[name=python]').show()
$('test-ul li[name=python]').hide()
JavaScript学习之旅相关推荐
- JavaScript学习之旅-导言篇
为什么会学习JavaScript 我的学习方法 目前我所使用的资料 学习所用时间 为什么会学习JavaScript? 首先,我认为学习任何东西都是为了解决问题.无关语言好坏.而web应用发展的趋势使J ...
- javascript学习路线图
史上最全的javascript学习路线图 JavaSctipt学习路线 完成整个课程大纲需要花上6~8周的时间,将学会完整的JavaScript语言(包括jQuery和一些HTML5).如果你没有时间 ...
- WCF学习之旅—实现支持REST客户端应用（二十四）
WCF学习之旅-实现REST服务(二十二) WCF学习之旅-实现支持REST服务端应用(二十三) 在上二篇文章中简单介绍了一下RestFul与WCF支持RestFul所提供的方法,及创建一个支持RES ...
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- Django 文档 -- 记录我的Django学习之旅
我的学习之旅 执行查询:https://docs.djangoproject.com/zh-hans/3.1/topics/db/queries/ 执行原生 SQL 查询:https://docs.d ...
- 猿创征文｜我的前端学习之旅【来自一名大四老学长的真情流露】
猿创征文 | 我的前端学习之旅 自我介绍 我浑噩的大一大二(是不是另一个你) 我的大三生活 大三上(学习过程.学习方法.推荐网站) 大三下(技术提升.荣誉证书.推荐比赛) 我与 CSDN 的机缘(从小 ...
- vue3学习之旅--邂逅vue3-了解认识Vue3(二)
续上文: vue3学习之旅–邂逅vue3-了解认识Vue3 计数器案例(体验Vue) <div id="app"></div><script src= ...
- 阿菜的Vue学习之旅（一）
阿菜的Vue学习之旅(一) 1.Vue的初步使用 2.关于MVVM架构的Vue设计 1.Vue的初步使用 刚刚开始接触Vue的时候,阿菜是这样写 html部分: <div id="me ...
- 小猪的Python学习之旅 —— 17.Python数据分析：我主良缘交友了解下
小猪的Python学习之旅 -- 17.Python数据分析:我主良缘交友了解下 标签:Python 一句话概括本文: 爬取我主良缘交友所有的妹子信息,利用Jupyter Notebook对五个方面: ...
最新文章
- python实现最小二乘法的线性回归_最小二乘法求线性回归的python实现
- Go语言开发环境配置
- LeetCode MySQL 1126. 查询活跃业务
- BZOJ3236[Ahoi2013]作业——莫队+树状数组/莫队+分块
- python面部颜色分析_Python图像处理之颜色的定义与使用分析
- .net Core 在 CentOS7下,报The type initializer for 'Gdip' threw an exception.异常
- php Immutable,Immutable.js详解
- python入门经典-Python入门经典书籍有哪些？有这三本就够了
- 信号与系统（一） 能量信号和功率信号
- selenium控制浏览器
- Thingsboard 3.1.0 - 源码编译
- 阿里云如何选择带宽计费模式和带宽值
- 在线支付功能的设计及其实现
- Latex——论文翻译
- 笔记本 win10设置wifi热点
- LayoutInflater.inflate()方法的深入理解
- ao能连接oracle吗,[转载]使用AO连接ORACLE数据库
- 算法的本质是什么？程序员如何学好算法？
- 高性能零售IT系统的建设03-监控体系化的重要不亚于开发的投入
- SpringBoot——什么是SpringBoot、SpringBoot入门、创建SpringBoot