JavaScript(完结)
1. 什么是JavaScript?
JavaScript是一门世界上最流行的脚本语言,
Java,JavaScript
10天
== 一个合格的后端人员,必须要精通JavaScript ==
2、快速入门
2.1、引入JavaScript
内部标签
<script>//... </script>
外部引入
abc.js
<script src="abc.js"></script>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- script标签内,写JavaScript代码 --><!-- <script>--><!-- alert("hellow,world");--><!-- </script>--><!-- 外部引入 --><!-- 注意:script必须成对出现--><script src="../JS/qj.js"></script><!-- 不用显示定义类型,也默认是JavaScript --><script type="text/javascript"></script></head><body><!--这里也可以存放--></body></html>
2.2、基本语法入门
<script>//1.定义变量 变量类型 变量名 = 变量值var num = 1;var name = "hbx";alert(name);//2.条件控制if (2>1){alert(true);}</script>
</head> <body>
</body> </html>
//console.log(name) 在浏览器的控制台打印变量 System.out.printf();
2.3、数据类型
数值,文本,图形,音频,视频....
变量
var 王者荣耀 = "倔强青铜"
number
JS不区分小数和整数
123//整数123123.1//浮点数123.11.23e2//科学计数法-99//负数NaN//not a numberInfinity//表示无限大
字符串
‘abx’ “abc”
布尔值
true false
逻辑运算
&& --两个都为真 结果为真|| --一个为真,结果为真! --真即假 假即真
比较运算符 !!!!
=1 "1"== --等于(类型不一样,值一样,也会判断为true)=== --绝对等于(类型一样,值一样)
JS的缺陷 坚持不要使用==
须知:
NaN==NaN 这个与所有的值都不相等,包括自己
只能通过isNaN(NaN)来判断true or false
浮点数问题
console.log((1/3) === (1-2/3));
就尽量避免使用浮点数进行运算,存在精度问题!
Math.abs(1/3-(1-2/3))<0.00001
null 和 undefined
null 空
undefined 未定义
数组
Java的数组必须是一系列相同数据类型的对象~,JS中不需要这样。
var arr={123,2,5,3,1,'holle',bull,true};
取数组下标:如果越界了,就会
undefined
对象
对象是大括号,数组是中括号
每个属性之间使用逗号隔开,最后一个不需要添加
//Person person = new Person(1,2,3,4,5); var person= {name: "hbx",age: 3,tags: ["js", java","web","...."]}
取对象的值
person.name >"hanboxuan" person.age >3
2.4严格检查格式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 前提:IDEA需要支持ES6的语法 'use strict' 代表严格检查模式,预防JavaScript的随意性导致产生的一些问题 必须写在JavaScript第一行 局部变量建议都使用let去定义--><script>'use strict';//全局变量let i = 1;//ES6 let</script> </head> <body></body> </html>
3、数据类型
字符串
正常字符串我们使用单引号或者双引号包裹
注意转义字符 \
\' 点 \n 换行 \t tab \u4e2d \u#### unicode字符 \x41 Ascll字符
3.多行字符串编写
<script>'use strict';//tab 上面 Esc 下面 piao~var msg = `hellow wordldniahoa `</script>
模板字符串
<script>'use strict';//tab 上面 Esc 下面 piao~let name = "hbx";let age = 3;let msg = `你好呀,小赤佬${name}`console.log("msg" + msg);</script>
$$
$$
字符串长度
console.log(studnet.length)
字符串的可变性,不可变
大小写转换 注意这里是方法不是属性
console.log(studnet.toUpperCase()) //大写console.log(studnet.toLowerCase()) //小写
student.indexOf['t']
substring
console.log(studnet.substring(1,3))
[)console.log(studnet.substring(1)) //从第一个字符串截取到最后一个字符串console.log(studnet.substring(1,3)) //包头不包尾
3.2、数组
Array可以包含任意的数据类型
var arr = {1,2,3,4,5,6}//通过下标取值arr[0]arr[0] = 1
长度
arr.length
:6注意:假如给
arr.length
赋值,数组大小就会发生变化~如果赋值过小元素就会丢失indexOf,通过元素获得下标索引
arr.indexOf(2)
:1
字符串的“1”和数字 1 是不同的
slice()
截取Array的一部分,返回一个新的数组类似于String中的substringpush(),pop() 尾部
arr.push():压入到尾部
arr.pop():弹出尾部的一个元素
unshift(),shift()头部
arr.shift():压入到头部
arr.unshift():弹出头部的一个元素
排序 sort()
(3) ["B","C","A"]arr.sort()(3) ["A","B","C"]
元素反转 reverse()
(3) ["B","C","A"]arr.reverse()(3) ["C","B","A"]
concat()
(3) ["C","B","A"]arr.concat([1,2,3])(6) ["C","B","A",1,2,3]arr(3) ["C","B","A"]
注意:concat()并没有修改数组,只会返回一个新的数组
连接符join
打印拼接数组,使用特定的字符串连接、
(3) ["C","B","A"]arr.join('-')"C-B-A"
多维数组
arr = [[1,2][3,4]["5","6"]];arr[1][1]4
数组:存储数据(如何存,如何取,方法都可以自己实现!)
3.3、对象
若干个键值对
var 对象名 = {对象属性名:属性值,对象属性名:属性值,对象属性名:属性值}//定义了一个person对象,它有两个属性var person = {name:"hbx",age:22,email:"465230710@qq.com"}
JS中对象,{......}表示一个对象,键值对描述属性 xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
JavaScript中所有的键都是字符串,值是任意对象!
对象赋值问题
person.name="hanboxaun""hanboxaun"person.name"hanboxaun"
寻找一个不存在对象属性,不会报错! undefined
person.hahhs undefined
动态的删减属性,通过delete删除对象的属性
delete person.nametruepersonObject { age: 22, email: "465230710@qq.com" }
动态的添加,直接给新的属性添加值即可
person.haha="haha""haha"personObject { age: 22, email: "465230710@qq.com", haha: "haha" }
判断属性值是否在这个对象中!xxx in xxx!
person["age"]22'age' in persontrue//继承 'toString' in persontrue
判断一个属性是否是这个对象自身拥有的
hasOwnProperty()
person.hasOwnProperty('toString')false
3.4、流程控制
forEach循环
5.1引入
var age=[12,1,12,12,12,];//函数age.forEach(function (value){console.log(value)})
for...in
//函数/** for(Type str: el){}* *///for(var index in object){}for(var num in age){if(age.hasOwnProperty(num)){console.log("存在啊!!");console.log(age[num])}
3.4、Map 和 Set
--ES6 的新特性
Map:
'use script';//ES6 Map//学生的成绩 , 学生的名字// var names = ["tom","jack","hbx"];// var score = [100,20,30];var map = new Map([['tom',100],['jack',20], ['hbx',30]]);var name = map.get('tom');//通过key获得valuemap.set("admin",2252);//新增和修改map.delete('tom');//删除
Set:无需不重复的集合
// new Set();var set = new Set([1,2,1,1,1,23,5,2,1]); //可以去掉重复set.add(555);//添加set.delete(555);//删除//是否包含某个元素console.log(3 in set);console.log(set.has(5));
3.6、iterator
--ES6 新特性
遍历数组
//通过for in //打印数组下标var arr = [3,4,5];for (var arrKey in arr) {console.log(arrKey)}//通过for of //打印数组值for (var arrKey of arr) {console.log(arrKey)}
遍历Map
var map = new Map([["tom",100],["jack",66],["hbx",99]]);for (var mapElement of map) {console.log(mapElement);}
遍历Set
var set = new Set([12,5,3]);for (let setElement of set) {console.log(setElement);}
4、函数
4.1、定义函数
定义方式一
Java
public 返回值类型 方法名(){renturn 返回值; }
绝对值函数
function abs(x){if(x>=0){return x;}else{return -x;}}
一旦执行return代表函数结束,返回结果!
如果没有执行return,函数执行也会返回结果结果就是NaN
定义方式二
var abs = function(x){if(x>=0){return x;}else{return -x;}}
function(x){.....}这是一个匿名函数,但是可以把结果赋给abs,通过abs就可以调用函数!
方式一和方式二等价!
调用函数
abs(10) //10abs(-10)//10
参数问题:JavaScript可以传任意一个参数,也可以不传递参数!
参数进来是否存在的问题?假设不存在参数,如何规避
<script>function abs(x){//手动抛出异常来判断!if(typeof x !== 'number'){throw 'Not a Number'}if(x>=0){return x;}else{return -x;}} </script>
arguments
arguments
是一个JavaScript免费赠送的关键字;
代表传递进来的所有的参数,是一个数组
function abs(x){//手动抛出异常来判断!// if(typeof x !== 'number'){// throw 'Not a Number'// }console.log("x=>"+x);for (let 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变量的作用域
在Java script中,var定义变量是有作用域的。
假设在函数体中声明,则在函数体外不可以使用。(后面可以研究闭包)
function hbx(){var x = 1;x = x + 1; } x = x + 1;//Uncaught ReferenceError: x is not defined
内部函数可以访问外部函数的成员,反之不行。
假设内部函数与外部函数的变量重名,
function hbx(){var x = 1;function hbx1(){var x = 3;console.log('inner'+x);}console.log('outer'+x);hbx1(); }
在JavaScript中函数查找变量从自身函数开始~,由“内”向“外”查找
假设外部存在这个同名的变量,则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function hbx(){var x = "x" + y;console.log(x);var y = 'y';}
结果:xundefined
说明JavaScript执行引擎自动提升了y的声明,但是不会提升y的赋值;
这个是在Java script建立之初就存在的特性。养成规范。
function hbx1(){var y;var x = "x" + y;console.log(x);y = 'y'; }
全局函数
//全局变量var x = 1; function hxb(){console.log(x); } function hbx(){console.log(x); }
全局对象window
var x = 'xxxx'; alert(x); alert(window.x);//默认所有的全局变量都会自动绑定在window对象下;
alert()
这个函数本身也是一个window
变量
var x = 'xxxx'; window.alert(x); var old_alert = window.alert; //old_alert(x); window.alert = function (){}; //发现alert()失效了 window.alert(123); //恢复 window.alert = old_alert; alert(456);
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错refrenceError
规范
由于所有的全局变量绑定到我们的window上。如果不同的js文件,使用了相同的全局变量,冲突->如何减少冲突?
//唯一全局变量 var HBX = {}; //定义全局变量 HBX.name = 'hanboxuan'; HBX.add = function (a,b){return a+b; }
把自己的代码全部放入自己定义的唯一空间名字中,降低全局变量命名冲突的问题
JQuery
局部作用域
function f(){for (var i = 0; i < 100; i++) {console.log(i);}console.log(i+1); }
ES6关键字,解决局部作用域冲突的问题
let去定义局部作用域的变量
常量const
const pi = '3.14';//只读变量 console.log(pi); pi = 5;//error
4.3、方法
定义的方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
var hbx = {name : '韩博轩',brith : 2001,age : function (){//今年-出生年月var now = new Date().getFullYear();return now - this.brith;} } //属性 hbx.name //方法,一定要带括号 hbx.age()
function getAge(){//今年-出生年月var now = new Date().getFullYear();return now - this.brith; } var hbx = {name : '韩博轩',brith : 2001,age : getAge() }
this.代表什么?拆上面的代码看看
function getAge(){//今年-出生年月var now = new Date().getFullYear();return now - this.brith; } var hbx = {name : '韩博轩',brith : 2001,age : getAge() } //hbx.age() ok //getAge() NaN
this是无法指向的,是默认指向调用它的那个对象;
apply
在js中可以控制this指向。
function getAge(){//今年-出生年月var now = new Date().getFullYear();return now - this.brith; } var hbx = {name : '韩博轩',brith : 2001,age : getAge() }; //hbx.age() ok //getAge() NaN getAge().apply(hbx,[]);//空参 this指向了狂神这个对象参数为空
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.1、Date
基本使用
now.getFullYear()2022now.getMonth()2now.getDay();//星期几4now.getDate();//days24now.getHours();19now.getMinutes();47now.getSeconds();39now.getTime();1648122459414console.log(new Date(1648122459414))Date Thu Mar 24 2022 19:47:39 GMT+0800 (中国标准时间)
var now = new Date();//console.log(now) Date Thu Mar 24 2022 19:44:30 GMT+0800 (中国标准时间)now.getFullYear();//yearsnow.getMonth()//0-11 代表月now.getDay();//星期几now.getDate();//daysnow.getHours();now.getMinutes();now.getSeconds();now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
转换
now = new Date(1648122459414)Date Thu Mar 24 2022 19:47:39 GMT+0800 (中国标准时间)now.tolocaleString//注意调用是一个方式,不是一个属性!now.toGMTStringfunction toUTCString()now.toGMTString()"Thu, 24 Mar 2022 11:47:39 GMT"
5.2、JSON
json
是什么
早期,所有的数据传输习惯使用xml文件!
在JavaScript中一切皆为对象,任何js支持的类型都可以用JSON来表示;
格式:
对象都用{}
数组都用【】
所有的键值对都是用
key:value
JSON
字符串和JS
对象的转化
var user = {name:"hbx",age:22,sex:'男'}//对象转化成JSON字符串var JsonUser = JSON.stringify(user);//{"name":"hbx","age":22,"sex":"男"}//json 字符串转化成对象 参数为json字符串JSON.parse('{ name: "hbx", age: 22, sex: "男" }');
JSON
和JS
的区别
var obj = {a:'hello',b:'hellob'};var json = '{"a":'hello',"b":'hellob'}'
6、面向对象编程
原型对象
JavaScript 、Java、 C# 、、、面向对象:JavaScript有些区别!
类:模板
对象:具体的一个实例
var user = {name:"hbx",age:22,sex:'男',run:function (){console.log(this.name+"run......");}};var xiaoming ={name: "xiaoming"};//小明的原型是Studentxiaoming._proto_ = user;
class 继承
class关键字是在ES6引入的
定义一个类 属性方法
function student(name){this.name = name;}//给studnet新增一个方法student.prototype.hello = function (){alert('hello');}//ES6 新的//定义一个学生的类class student{constructor(name) {this.name = name;}hello(){alert('hello');}}
function student(name) {this.name = name; } //给studnet新增一个方法 student.prototype.hello = function (){alert('hello'); } //ES6 //定义一个学生的类 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 xiaoming = new xiaostudent("xiaoking",222);
本质:查看对象原型
原型链
-proto_;
7、操作BOM对象
浏览器介绍
JavaScript 和 浏览器
JavaScript 诞生就是为了让他在浏览器中进行!
BOM:浏览器对象模型
IE6~11
Chrome
Safari
FireFox
Opera
三方
qq浏览器
360浏览器
window
window 代表浏览器窗口window.alert(1) undefined window.innerHeight 292 window.innerWidth 1536 window.outerHeight 838 window.outerWidth 1550
Navigator(不建议使用)
Navigator ,封装了浏览器的信息
window.Navigator.appName undefined navigator.appName "Netscape" navigator.appVersion "5.0 (Windows)" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0" navigator.platform "Win32"
大多数时候我们不会使用navigator
对象,因为会被人为修改!
不见时使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width 1536 screen.height 864
location (⭐)
location 代表当前页面的URL信息
host: "www.baidu.com" hostname: "www.baidu.com" href: "https://www.baidu.com/index.php?tn=monline_3_dg" protocol: "https:" reload: function reload()//刷新网页 //设置新的地址 location.assign)('https://blog.csdn.net/hbx_Ambition?spm=1000.2115.3001.5343')
document
document 代表当前页面, HTML DOM文档树
document.title "百度一下,你就知道" document.title='韩博轩哈哈哈' "韩博轩哈哈哈"
获取具体的文档树节点
<dl id="hbx"><dt>java</dt><dd>javase</dd><dd>javaee</dd></dl><script>var dl = document.getElementById('hbx');</script>
获取cookie
document.cookie ''
劫持cookie原理
www.taobao.com
<script src = "aa.js"></script> <!-- 恶意人员:获取你的cookie上传到他的服务器-->
服务器端可以设置cookie: httpOnly
history(不建议使用)
history 代表浏览器的历史记录
history.back()//前进 history.forward()//后退
8、操作DOM对象(⭐)
核心
浏览器网页就是一个DOM树形结构!
更新:更新DOM节点
遍历dom节点:得到DOM节点
删除:删除一个DOM节点
添加:添加一个新的节点
要操作一个dom节点,就必须要先获得这个DOM节点
获得Dom节点
//对应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
这是原生代码之后都会使用jQuery();
更新节点
操作文本
id1.innerText='456'
修改文本的值id1.innerHTML = '<strong>韩博轩</strong>'
可以解析HTML文本标签
<div id="id1"></div> <script>var id1 = document.getElementById('id1'); </script>
操作css
id1.style.color = 'red';//属性使用 字符串 包裹 id1.style.fontSize = '10px';//- 转 驼峰命名问题 id1.style.padding='2em';
删除节点
删除节点的步骤:
先获取父节点,再通过父节点删除自己
<div id="father"><h1>标题一</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.lastChildvar self = document.getElementById('p1'); var father = p1.parentElement;father.removeChild(self) <p id="p1">father.removeChild(father.children[0])father.removeChild(father.children[1])father.removeChild(father.children[2])</script>
- 注意删除多个节点的时候,children是时刻变化的,删除节点的时候一定要注意!!!
插入节点
我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innnerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖。
father.innerText = '1' '1'
追加
<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="newP"> </p>--><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');//创建一个标签newP.id='newP';newP.innerText='hello,hbx';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{backgroud-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)ee.insertBefore(js,ee);
9、操作表单(验证)
表单是什么 form DOM树
文本框
text
下拉框
select
单选框
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="boy" id="boy"> 男<input type="radio" name="sex" value="women" id="girl"> 女</p></form><script>var name = documnet.getElementById('username');var boy_radio = documnet.getElementById('boy');var girl_radio = documnet.getElementById('girl');//得到输入框的值name.value//修改输入框的值name.value = '54545';//对于单选框多选框等等固定的值,boy_radio.value只能取到当前的值boy_radio.checked;//查看返回的结果是否为true,如果为true,则被选中boy_radio.checked = true;//赋值</script>
提交表单
MD5
加密密码,表单优化
username: 555password: 79b7cdcd14db14e9cb498f1793817d69
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- MD5工具类--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script></head><body><!--表单提交事件οnsubmit=绑定一个提交检测的函数,true false将这个结果给表单,使用onsubmit接收οnsubmit="return aa()--><form action="https://www.baidu.com/" method="post" οnsubmit="return aa()"><p><span>用户名:</span><input type="text" id="username" required name="username"></p><p><span>密码:</span><input type="password" id="input_password"></p><input type="hidden" id="md5password" name="password"><!-- 绑定一些事件 被点击--><button type="submit">提交</button></form><script>function aa(){alert(1);var uname = document.getElementById('username');var pwd = document.getElementById('input_password');var md5pwd = document.getElementById('md5password');md5pwd.value = md5(pwd.value);//可以校验表单内容 true就是通过提交 false就是阻止提交return true;}</script></body></html>
10、jQuery
JavaScript
jQuery
库:里面存在大量的JavaScript函数
获取
jQuery
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- CND 引入--><script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script></head><body></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script></head><body><!--公式:$(selector).action()--><a href="" id="test-jquery">点我</a><script>// var id = document.getElementById('test-jquery');// id.click();//选择器就是css选择器$('#test-jquery').click(function (){alert('helllo jquery');})</script></body></html>
选择器
//原生的js,选择器少,麻烦不好记//标签选择器document.getElementsByTagName('');//id选择器document.getElementById('');//类选择器document.getElementsByClassName('');//jQuery css 中的选择器他全部都能用$('p').click();//标签选择器$('#id').click();//id选择器$('.class').click();//类选择器
事件
鼠标事件、键盘事件、
⭐$(selector).action
⭐
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://lib.baomitu.com/jquery/3.6.0/jquery.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>//当网页元素加载完毕之后,响应事件$(document).ready(function (){})//代替上面那一个$(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 li[name=python]').html();//获得值$('#test-ul li[name=python]').html('设置值');$('#test-ul li[name=python]').html('<strong>123</strong>');
css的操作
$('#test-ul li[name=python]').css("color","red");
元素的显示和隐藏:本质 display :none;
$('#test-ul li[name=python]').show()$('#test-ul li[name=python]').hide()
娱乐测试:
$(document).width()906$(document).height()754$('#test-ul li[name=python]').toggleƒ ( speed, easing, callback ) {return speed == null || typeof speed === "boolean" ?cssFn.apply( this, arguments ) :this.animate( genFx( name, true ), speed, easing, callback );}$('#test-ul li[name=python]').toggleƒ ( speed, easing, callback ) {return speed == null || typeof speed === "boolean" ?cssFn.apply( this, arguments ) :this.animate( genFx( name, true ), speed, easing, callback );}
JavaScript(完结)相关推荐
- ppk on JavaScript第二章:背景(完结篇)
无障碍规则 尽管无法预见可能损害一个有脚本网站的可用性的所有情形,但我已经总结出一些可以帮助您在基础上不犯错的规则.不要把它们当作JavaScript和无障碍的终极规则,这只是能防止一些常见低级错误的 ...
- 零基础JavaScript学习【完结篇】
博主有话说:完结撒花,感谢大家对这个专栏的支持,非常感谢[✿✿ヽ(°▽°)ノ✿] 个人空间:GUIDM的个人空间 专栏内容:零基础JavaScript学习 基础还是关键. 欢迎大家的一键三连. 给大家 ...
- 汤姆大叔的深入理解JavaScript读后感四(完结篇)
今天要分享的内容是tom大叔的JavaScript系列的读书观后感完结篇 花了三天的时间,终于把大叔的博客,JavaScript系列看了一遍 收获颇丰啊,不愧是经典,一下子很多零散的东西就串联了起来 ...
- 深入理解javascript原型和闭包(16)——完结
之前一共用15篇文章,把javascript的原型和闭包. 首先,javascript本来就"不容易学".不是说它有多难,而是学习它的人,往往都是在学会了其他语言之后,又学java ...
- JavaScript零基础入门--笔记动力节点最新老杜(九-完结)全套笔记精髓
JSON 1.什么是JSON,有什么用? JavaScript Object Notation(JavaScript对象标记),简称JSON.( ...
- 狂神说HTML5 + CSS + JavaScript 笔记(已完结)
HTML HTML:Hyper Text Markup Language(超文本标记语言) HTML 5 + CSS 3 W3C:World Wide Web Consortium(万维网联盟) W3 ...
- JS完结:用JavaScript写个功能完善的电商轮播图
轮播图:自动轮播+点击对应点切换+下一张+菜单导航 先讲思路,再上代码: 先拿HTML整体布局,先轮播图,然后对应小圆点点击跳转,上一张和下一张. 然后左侧菜单栏的布局,鼠标移上去显示不同内容. CS ...
- JavaScript学习笔记(第四部分)总共四部分(完结)
JavaScript学习笔记(第四部分)总共四部分 9 事件 9.1 事件对象 当响应函数被调用时,浏览器每次都会将一个事件对象作为实参传递进响应函数中,这个事件对象中封装了当前事件的相关信息,比如: ...
- ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding(第二章完结)...
这几个例子是第二章除了入门之外比较简单的几个,就做个合集,把最核心的代码(第二参数)和 引用放上来即可,不作多解释. 2D地图添加指北针widget 2D地图一般修正方向为正北方就需要这个widget ...
最新文章
- KVM中virtio之vring(八)
- linux运行级别debian,Debian的运行级别
- 2. Add Two Numbers
- 面向对象方法及软件工程——团队答辩
- .Net core下的配置设置(一)——Configuration
- C# 使用NPlot绘图
- VSCode自定义代码片段7——CSS动画
- 阿里文娱再调整:李捷出任阿里影业总裁,戴玮任文娱COO
- React Navigation (v2)
- usb管控软件_外发SMT贴片加工质量管控要求
- Thymeleaf $/*/#/@语法
- 操蛋!新来的同事竟然不会在javaee项目中使用WebSocket~
- 双系统linux引导修复
- 基于虚拟仿真技术的数字化工厂管理系统
- SREng 使用指南(三)系统修复的详细解说
- Word设置封面无页码,摘要罗马数字页码,正文数字页码
- ipad能不能写python_如何在ipad上写python
- 小学数学研究性学习设计方案
- python3 logging输出到文件_python3:logging模块 输出日志到文件
- PHP画a梦,分享html打造动画哆啦A梦的示例代码
热门文章
- Android应用调试-BugReport
- TryHackMe-Carnage
- 只能干杂活?为啥网工总是被人看不起?
- 全球科技巨擘大战AI
- Mac 查询是否支持VT
- VMware EXSi5.x 6.x无法识别realtek8168期AR8151网卡的解决方法(封装驱动到EXSi镜像中)...
- 【牛客网题目】Java字符串专项
- 星璨鸿途网红财富领路人,像“丁真”一样实力变现!
- System.Runtime.InteropServices.COMException的解决方法
- 无限免杀D盾脚本之aspx ——yzddMr6