2.快速入门
2.1引入JavaSciprt
1.内部标签
<scrit></scrit>
2.外部引用
<script src="js/hj.js"></script>
<scrit></scrit>
alert('hello world')
3.测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--在script中写js代码-->
<script src="js/hj.js"></script>
<scrit></scrit>
</head>
<body>
</body>
</html>
2.2基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写-->
<script>
//1.定义变量 变量类型 变量名 = 变量值
var num=1;
//条件控制
if(true){
alert('你是傻逼')
}
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52WP4YII-1628573990733)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20210528203145643.png)]
2.3数据类型
数值,文本,图形,音频,视频。。。。
number
js不区分小数和正数,number
123//正数
12.1//浮点数
1.23e3//科学计数法
NaN // not a number
Infinity //表示无限大
字符串
‘asd’
布尔值
true false
逻辑运算
&&
||
!
比较运算符
=
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,结果true)
坚持不要使用==比较
须知:
- NaN===NaN,这个与所有的值比较都为不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是不是NaN
浮点数问题:
console.log(1/3)===(1-2/3)
尽量避免使用浮点数进行运算,存在精度问题
null和undefined
- null 空
- undefined 未定义
数组
js数组中的元素不需要为同种类型
//保证代码可读性,尽量使用[]
var arr=[1,23,3,4,5,6,'hello']
new Array(1,2,3,4)
数组下标如果越界,就会
undefined
对象
对象是大括号,数组是中括号
每一个属性使用逗号隔开,最后一个不需要添加
<script>
var person={
name:'小胡',
age:3,
}
</script>
2.4严格检查模式
’use strict’;严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JS的第一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--前提是IDEA需要设置支持ES6语法
'use strict';严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JS的第一行
-->
<script>
'use strict'
let i=1;
</script>
</head>
<body>
</body>
</html>
3.数据类型
3.1字符串
1.正常的字符串我们使用 单引号 或者双引号包裹
2.注意转义字符
\'
\n
\t
\u4e2d
3.多行字符串编码
var a =
`ha
as
asdas`
4.模板字符串
'use strict'
//``在tab键的上面
let name = "小胡";
let age = 3;
let msg = `真棒,${name}`;
console.log(msg)
5.字符串的长度
.length
6.字符串的是不可变的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRkDTRmr-1628573990735)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20210529101450651.png)]
7.大小写转换时通过方法转换
//注意,这里是方法,不是属性
console.log(student.toLocaleUpperCase())
8.student.indexOf(t) 位置下标索引
9.student.substring(1,3)
[)
含头不含尾
student.substring(1)1到最后
3.2数组
Array可以包含任意的数据类型
var arr =[1,2,3,4,5,6]
1.长度
arr.length
注意:加入给arr.length赋值,数组大小就会放生变化,如果赋值过小,元素就会丢失
2.indexOf 通过元素获得下标索引
arr.indexOf(2)
1
字符串的1和数字的1时不同的
3.slice()截取Array的一部分,返回一个新的数组,类似于String中的substring
4.push()pop()
push:压入到尾部
pop:弹出尾部的一个元素
5.unshift(),shift()
unshift()压入到头部
shift()弹出头部一个元素
6.排序sort()
arr
(6) [3, 4, 5, 6, "1", "2"]
arr.sort()
(6) ["1", "2", 3, 4, 5, 6]
7.元素反转reverse
arr
(6) ["1", "2", 3, 4, 5, 6]
arr.reverse()
(6) [6, 5, 4, 3, "2", "1"]
8.concat()拼接数组
返回一个新的数组
arr.concat(1235,555)
(8) [6, 5, 4, 3, "2", "1", 1235, 555]
9.连接符join
arr.join("-")
"6-5-4-3-2-1"
10.二维数组
arr = [[1,2],[3,4]]
(2) [Array(2), Array(2)]
数组:存取数组(如何存,如何取,基本所有方法可以自我实现)
3.3对象
若干个键值对
var 对象名{
属性名:属性值,
属性名:属性值,
属性名:属性值,
}
let person={
name : "小胡",
age: 3,
email: "529780274@qq.com",
score:0,
}
JS中的对象,{……}表示一个对象,键值对描述属性 XXXX :XXXX,多个属性之间使用逗号隔开
最后一个属性不加逗号
JavaScript中所有的键都是字符串
1.对象赋值
person.name
"小胡"
person.name="小健"
"小健"
person.name
"小健"
2.使用一个不存在的对象属性不会报错
person.haha
undefined
3.动态的删除属性
person
{name: "小健", age: 3, email: "529780274@qq.com", score: 0}age: 3name: "小健"score: 0__proto__: Object
delete person.email
true
person
{name: "小健", age: 3, score: 0}
4.动态的添加
person.haha="haha"
"haha"
person
{name: "小健", age: 3, score: 0, haha: "haha"}
5.判断属性值是否存在对象中
'age' in person
true
6.判断一个属性是否是这个对象自身拥有
person.hasOwnProperty('tostring')
false
person.hasOwnProperty('age')
true
3.4流程控制
if语句
let a = 5;
if (a>3){
alert("xixi")
}else {
alert("kuwa")
}
循环
let a = 5;
while (a<100){
a=a+1;
console.log(a)
}
for循环
for (let i = 0; i < 5; i++) {
alert('弹弹弹')
}
forEach循环
let arr=[1,123,132,1,5,1,313,2]
arr.forEach(function (value){
console.log(value)
})
for…in和for…of
//var获取的时数组的索引
//for(var index in object)
for (let num in arr) {
console.log(arr[num])
}
//可以直接打印出来具体的值
var set = new Set([213,51,6,51,65,15,1,1,1,1])
console.log(set.has(213))
for (var x of set) {
console.log(x)
}
3.5 map 和 set
Map:
var map = new Map([['xiaohu',100],['xiaojian',90]]);
let int = map.get('xiaohu');//通过key获取value
console.log(int)
map.set('admin',1000);//添加
map.delete('admin')//删除
Set:无序 不重复的集合
var set = new Set([213,51,6,51,65,15,1,1,1,1])
set.add(2)//添加
set.delete(51)//删除
console.log(set.has(213))//是否存在
3.6iterator迭代器
遍历Map (for…of)
var map = new Map([['xiaohu',100],['xiaojian',90]]);
for (let m of map) {
console.log(m)
}
遍历Set
var set = new Set([12,31,321,5,1,61,65,16,5]);
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可以传任意参数,也可以不传递参数
参数进来是否存在问题?假设不存在参数
手动抛出异常
let abs = function(x){
//手动抛出异常
if(typeof x !=='number'){
throw 'not a number'
}
if(x>=0){
return x;
}else
return -x
}
arguments
arguments
是一个JS免费赠送的关键字
代表传递进来的所有参数,是一个数组
let abs = function(x){
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
//手动抛出异常
if(typeof x !=='number'){
throw 'not a number'
}
if(x>=0){
return x;
}else
return -x
}
问题:arguments包含所有的参数,怎么解决多个参数的问题
rest
获取除了已经定义的参数之外的所有参数…rest
function a (a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log("rest=>"+rest);
}
rest参数必须写在最后面,必须用…标识
4.2变量作用域
在JavaScript中, var定义变量实际是由作用域的。
假设在函数体中声明,则在函数体外不可以使用(非要想实现的话可以取了解闭包
)
function hj(){
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
如果两个函数使用了相同用的变量名,只要在函数内部,就不冲突
function hj(){
var x=1;
x=x+1;
}
function hj1(){
var x= 1;
x=x+1;
}
//内部函数可以访问外部函数的成员,反之则不行
function hj(){
var x=1;
x=x+1;
//内部函数可以访问外部函数的成员,反之则不行
function hj1(){
var y= x+1;y is not defined
}
var z=y+1;
}
假设,内部函数变量和外部函数的变量相同,重名
function hj(){
var x=1;
//内部函数可以访问外部函数的成员,反之则不行
function hj1(){
var x= 'A';
console.log("inner"+x)
}
console.log("outer"+x)
hj1();
}
hj();
假设在JavaScript中函数查找变量从自身函数开始,由内
而为
,假设外部才能在这个同名的的函数变量,则内部函数会屏蔽外部函数的变量
提升作用域
function hj(){
var x='x'+y;
console.log(x)
var y='y';
}
hj();
结果:xundefined
说明 :JS执行引擎,自动提升了y声明,但是并没有把y的值带过来。等同于
function hj(){
var y
var x='x'+y;
console.log(x)
y='y';
}
hj();
这个是在JavaScript建立之初就有了,养成规范:所有变量定义都放在函数的头部,不要乱放,便于代码的维护!!!!
全局函数
//全局变量
var x =1;
function hj(){
console.log(x)
}
hj()
console.log(x)
全局对象 window
var x =1;
alert(x)
alert(window.x)//默认所有的全局变量都绑定在window下
alert()本身也是一个window的变量
var x =1;
alert(x)
alert(window.x)//默认所有的全局变量都绑定在window下
var x = window.alert;
window.alert=function (){};
alert(123);
window.alert=x;
alert(456);
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错 refrence
规范
由于所有的全局变量都会绑定到window上。如果不同的js文件使用了相同的全局变量。
冲突—>如何能够减少冲突?
//唯一全局变量
var hujian = {};
hujian.name='胡健';
hujian.add = function (a,b){
return a+b;
}
console.log(hujian.add(5,7));
将自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
局部作用域 let
function hj() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//问题?i出了作用域还能继续使用
}
hj();
function hj() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
hj();
const 常量
//唯一全局变量
const PI='3.14';
console.log(PI);
PI='3.33';
//尝试赋值给常量或只读变量
4.3方法
定义方法
方法就是把函数放在对象的里面,对象只有两个对象:属性和方法
var hujian ={
name:'小胡',
birth: 1999,
//方法
age:function (){
var now =new Date().getFullYear();
return now-this.birth
}
}
//属性
hujian.name
//方法,一定要带()
hujian.age()
this.代表什么?拆开上面的代码看看
function getAge() {
var now = new Date().getFullYear();
return now-this.birth;
}
var hujian = {
name:'小胡',
birth: 1999,
//方法
age:getAge
}
//hujian.age()成功
//getAge.age() NaN
this.是无法指向的。是默认指向调用它的它的对象
apply
在JS中是可以控制this的指向!!!!
function getAge() {
var now = new Date().getFullYear();
return now-this.birth;
}
var hujian = {
name:'小胡',
birth: 1999,
//方法
age:getAge
}
getAge.apply(hujian,[]);
//hujian.age()成功
//getAge.age() NaN
//getAge.apply(hujian)
//22
5.内部对象
标准对象
typeof 123
"number"
typeof''
"string"
typeof[]
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1Date
基本使用
var now = new Date();//Sun May 30 2021 09:06:56 GMT+0800 (中国标准时间)
now.getFullYear();//年份
now.getMonth();//月 0~11
now.getDate();//日
now.getDay();//星期几 返回值是 0(周日) 到 6(周六) 之间的一个整数。
now.getHours();//时
now.getMilliseconds();//秒 返回 Date 对象的毫秒(0 ~ 999)。
转化:
now.getTime(); //时间戳 全世界统一
now.toLocaleString() //"2021/5/30上午9:09:33" 本地时间
now.toGMTString()//"Sun, 30 May 2021 01:09:33 GMT"
//注意调用的是方法而不是属性!!
5.2JSON
json是什么
早期,所有的数据传输习惯使用XML文件!
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript 一切皆为对象,任何JS支持的类型都可以用JSON来表示
格式:
- 对象都用{}
- 数组[]
- 所有的键值对 都用key:value
JSON字符串和JS对象的转化
var user = {
name:'小胡',
age:3,
sex:'男'
}
//对象转化为json字符串
var jsonUser = JSON.stringify(user)
//JSON字符串转化为对象
var obj = JSON.parse('{name: "小胡", age: 3, sex: "男"}')
JSON和JS对象的区别
var obj = {a:'hello',b:'world'}
var json = '{"a":"hallo","b":"world"}'
6.面向对象编程
6.1什么是面向对象
JavaScript,Java,c#。。。面向对象:JavaScript有些区别!
-
类:模板 原型对象
-
对象:具体实例
在JavaScript这个需要大家转化思想
原型:
var user = {
name:'小胡',
age:3,
sex:'男',
run:function (){
console.log(this.name+'run....')
}
}
var hujian={
name:'hujian'
}
//原型对象
hujian.__proto__ = user;
function Student(name){
this.name = name;
}
//给student新增一个方法
Student.prototype.hallo = function (){
alert('hello')
}
class继承
1.定义一个类,属性,方法
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello');
}
}
继承
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 s = new xiaoStudent('小明',5);
var a = new Student('小明')
原型链
javascript——原型与原型链 - 雅昕 - 博客园 (cnblogs.com)
7.操作Bom(重点)
浏览器介绍
JavaScript和浏览器的关系?
JavaScript诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型
- IE6~11
- chrome
- safari
- Firefox
三方
- qq浏览器
- 360浏览器
window
window 代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
262
window.innerWidth
1536
window.outerHeight
824
window.outerWidth
1536
window.innerHeight
226
window.innerWidth
970
//内外部高度,调整窗口 相应的值也会变化
Navigator
Navigator,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 Edg/91.0.864.37"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36 Edg/91.0.864.37"
navigator.platform
"Win32"
大多是时候我们不会使用navigator
对象,因为会被人为修改
不建议使用这些属性来判断和编写代码
screen
代表屏幕的尺寸
screen.width
1536
screen.height
864
location(重要)
location代表当面页面的URL信息
host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //当前位置
protocol: "https:" //协议
reload: ƒ reload() //重新加载 刷新页面
//设置新的地址
location.assign(URL) //跳转新地址
document
document 代表当前页面,HTML DOM文档树
document.title='面向监狱编程'
"面向监狱编程"
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var dd = document.getElementById('app');
</script>
获取cookie
document.cookie
""
劫持cookie原理
www.taobao.com
<script src='aa.js'> </script>
//恶意人员:获取你的cookie上传到他的服务器
history(不建议使用)
history.back() //后退
undefined
history.forward() //前进
undefined
8.操作DOM
核心
浏览器网页就是一个DOM属性结构!
- 更新:更新DOM节点
- 遍历dom节点:得到DOM节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个DOM节点,接必须要先获取这个Dom节点
获取节点
var p1 = document.getElementById('p1');
var h = document.getElementsByTagName('h1');
var p2 = document.getElementsByClassName('p2');
var f = document.getElementById('father');
var chind = f.children;//获取父节点下的所有子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应CSS的选择器
var p1 = document.getElementById('p1');
var h = document.getElementsByTagName('h1');
var p2 = document.getElementsByClassName('p2');
var f = document.getElementById('father');
var chind = f.children;//获取父节点下的所有子节点
</script>
</body>
</html>
这是原生代码:之后我们获取节点尽量使用JQ
<div id="div1">
</div>
<script>
var d = document.getElementById('div1')
</script>
更新节点
- d.innerText=‘123’ 修改文本的值
- d.innerHTML=‘123’ 更新HTML标签
操作JS
d.style.color='blue' // 属性使用字符串包裹
"blue"
d.style.fontSize='20px'//驼峰命名
"20px"
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1 = document.getElementById('p1');
var f = p1.parentElement;
f.removeChild(p1)
也可以自己删除自己 但是在代码中并没有很多的id唯一标识使用父节点来删除可以提高效率
//删除是一个动态的过程
//如果要删除一个父类下的所有子节点最好冲最后一个开始删除
f.removeChild(f.children[2])
f.removeChild(f.children[1])
f.removeChild(f.children[0])
插入节点
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerTest就可以增加一个元素了,但是这个Dom节点已经存在元素了,我们就不能这么干了,会产生覆盖
追加
<p id="js">JavaScript</p>
<div id="list">
<p id="se">javese</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js = document.getElementById('js');
list = document.getElementById('list');
//通过这个方法插入!!!!
list.appendChild(js)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e31WX3kX-1628573990739)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20210530170233208.png)]
创建一个新的标签,实现插入
//通过JS创建一个新的节点
var newP = document.createElement('p');//创建一个P标签
newP.id='newp';
newP.innerText='小胡真帅';
list.append(newP);
</script>
//创建一个JS标签
var myScript = document.createElement('Script');
myScript.setAttribute('type','text/javascript');
list.append(myScript);
myScript.setAttribute(‘type’,‘text/javascript’);
标准写法
使用JS将body的背景颜色改成红色:
一步一步去实现:
1.先确定需要什么
2.需要往什么地方插入
3.该怎么插入
//创建一个Style标签
var mystyle = document.createElement('style');//创建标签
mystyle.setAttribute('type','text/css');//设置标签属性
mystyle.innerText='body{background:red}';//添加标签内的实现代码
document.getElementsByTagName('head')[0].append(mystyle);//添加到什么地方
insert
<p id="js">JavaScript</p>
<div id="list">
<p id="se">javese</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js = document.getElementById('js');
list = document.getElementById('list');
ee = document.getElementById('ee')
//父节点.(新节点,插在谁之前)
list.insertBefore(js,ee);
# 9.操作表单
> 表单是什么 form DOM树
- 文本框 text
- 下拉框 <select>
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
表单目的: 提交信息
> 获得要提交的信息
```html
//获取输入框的值
var u = document.getElementById('username');
操作表单
var boy = document.getElementById('man');
var gril = document.getElementById('woman');
//获取输入框的值
u.value;
//修改输入框的值
u.value = '123';
//对于单选框,多选框,等等固定的值,只能取到当前的值
boy.checked;//查看返回结果
boy.checked = true; //赋值
提交表单,MD5加密密码 表单优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/md5.js" type="text/jscript"></script>
</head>
<body>
<!--表单提交事件
onsubmit = 绑定一个提交检测的函数,true才能通过
-->
<form action="#" method="post" onsubmit="return aaa()" >
<div>
<span>用户名:</span>
<input type="text" placeholder="请输入账号" id="username" name="username">
</div>
<div>
<span>密码:</span>
<input type="password" placeholder="请输入密码" id="password">
</div>
<div>
<input type="hidden" placeholder="请输入密码" id="md5" name="password">
</div>
<div>
<!-- 绑定事件 onclick 被点击-->
<button type="submit">提交</button>
</div>
</form>
<script>
function aaa(){
var user = document.getElementById('username');
pwd = document.getElementById('password');
md5pwd = document.getElementById('md5')
//md5算法加密
pwd.value=hex_md5(pwd.value)
md5pwd.value=pwd.value;
//可以校验 true则通过 false则阻止
return true;
}
</script>
</body>
</html>
10.JQuery
$(selector).action
JavaScript
- JQuery库 ,里面存在大量的JavaScript的函数
获取JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lin/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test">点我</a>
<script>
$('#text').click(function ()){
alert('hello JQ')
}
</script>
</body>
</html>
JQ基本选择器
<script>
//原生JS
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//JQ CSS中所有的选择器都能使用
$('p').click();//标签选择器
$('#id').click();//ID选择器
$('.class').click();//类选择器
</script>
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
事件
鼠标事件,键盘事件,其他事件
鼠标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hhng1CVb-1628573990740)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20210531094043053.png)]
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lin/jquery-3.6.0.js"></script>
<style>
#div1{
width: 500px;
height: 500px;
border: 1px solid deepskyblue;
}
</style>
</head>
<body>
<!--要求 获取鼠标当前的一个坐标-->
mouse:<span id="s"></span>
<div id="div1">
???
</div>
<script>
$(function () {
$('#div1').mousemove(function (e) {
$('#s').text('x:' + e.pageX + 'y:' + e.pageY)
})
});
</script>
</body>
</html>
hex_md5(pwd.value)
md5pwd.value=pwd.value;
//可以校验 true则通过 false则阻止
return true;
}
10.JQuery
$(selector).action
JavaScript
- JQuery库 ,里面存在大量的JavaScript的函数
获取JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lin/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test">点我</a>
<script>
$('#text').click(function ()){
alert('hello JQ')
}
</script>
</body>
</html>
JQ基本选择器
<script>
//原生JS
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//JQ CSS中所有的选择器都能使用
$('p').click();//标签选择器
$('#id').click();//ID选择器
$('.class').click();//类选择器
</script>
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
事件
鼠标事件,键盘事件,其他事件
鼠标
[外链图片转存中…(img-Hhng1CVb-1628573990740)]
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lin/jquery-3.6.0.js"></script>
<style>
#div1{
width: 500px;
height: 500px;
border: 1px solid deepskyblue;
}
</style>
</head>
<body>
<!--要求 获取鼠标当前的一个坐标-->
mouse:<span id="s"></span>
<div id="div1">
???
</div>
<script>
$(function () {
$('#div1').mousemove(function (e) {
$('#s').text('x:' + e.pageX + 'y:' + e.pageY)
})
});
</script>
</body>
</html>