JavaScript基础语法和JQuery简单应用
什么是JavaScript
世界上最流行的脚本语言。
一个合格的后端人员必须精通JavaScript。
最新版本已经到ES6版本,但是大部分浏览器只停留在支持ES5代码!
引入JavaScript
1、行内写法:一般写在标签的内部或者标签的底部。
<script>
alert("hello,world");
....js代码....
</script>
2、外部引入:单独建立js文件,再在html页面中进行引用。
注意:script标签不能使用自闭合。
js文件:
alert("hello,world");
再使用引用
<script src="js/hello.js"></script>
入门案例
// 1.变量
var num =1;
"hello word"
// alert(num);
// 2.条件控制
var score = 70;
if(score>=60 && score<70){
alert("60-70");
}else if(score>=70 && score<80) {
alert("70-80");
}else{
alert("other")//弹窗
}
//console.log(score) 控制台
数据类型
number
js不区分小数和整数,Number
123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NAN // not a number
Infinity // 无穷大
字符串
"abc"
'bac'
布尔值
true
false
与或非
&& 两个都为真结果为真
|| 一个为真,结果为真
! 真即假,假即真
比较运算符(重要)
=
== 等于 (类型不一样,值一样,结果也为true)
=== 绝对等于 (类型一样,值一样,结果才为true)
这是一个js的缺陷,坚持不要使用 == 比较
NaN===NaN
false
须知:NaN与所有的数值都不相等,包括自己
//判断是否是NaN
isNaN(NaN)
true
(1/3)===(1-2/3)
false //会存在精度的损失,尽量避免使用浮点数进行运算
//可以这样比较
Math.abs(1/3-(1-2/3))<0.000000001
true
空指针
null //空
undefined //未定义
数组
Java中的数组是一系列相同类型的数,JS中没有这一要求
var arr = [1,2,3,4,'hello',null,true]
//定义数组
new Array(1,2,3,4,5);
//取数组下标如果越界,就会显示undefined
//定义对象,每个属性之间使用,隔开
var person = {
name:"nick",
age:3,
tags:['js','java','web']
}
//取对象的值
person.name
"nick"
person.age
3
person.tags
(3) ["js", "java", "web"]
严格检查模式
<script>
//全局变量
i = 1;
//ES6中建议使用let定义局部变量,加上'use strict':严格检查模式,预防js的随意性导致的问题
//'use strict'必须写在script的第一行
'use strict';
let i = 1;
</script>
字符串
-
正常字符串我们使用单引号,或者双引号包裹
-
注意转义字符:
\' \t \n \u4e2d \u#### Unicode字符 \x41 ASCII
<script>
'user strict'
console.log('a\'');
console.log("a");
</script>
//长字符串拼接
//TAB上面的飘键包裹
var msg = `hello
world`
//模板字符串
let name = "nick";
let age = 3;
let msg2 = `你好啊,${name}`;
console.log(msg2);
你好啊,nick
//字符串函数
//求长度
var student ="student";
console.log(student.length);
7
//下标索引
console.log(student[0]);
s
//不能更改索引对应的值
student[0]=1;
1
student
"student"
//大小写转换(方法,非属性)
student.toUpperCase();
"STUDENT"
student.toLowerCase();
"student"
//获取下标
student.indexOf('t');
1
//截取
[1,) 包含前面不包含后面
student.substring(1);
"tudent"
[1,3)
student.substring(1,3);
"tu"
数组
Array可以包含任意的数据类型
此处在浏览器控制台进行测试。
1、长度
arr.length
2、indexOf(),通过元素获得下标索引
arr.indexOf(2) //找到元素为2的下标
3、slice(),截取数组的一部分,返回一个新数组,类似于String中的substring
4、push()、pop() 在尾部操作元素
push(): 压入元素到尾部
pop(): 弹出尾部的一个元素
5、unshift(),shift() 在头部操作
unshift: 压入元素到头部
shift: 弹出头部的一个元素
6、sort() 排序
7、reverse() 元素反转
8、concat() 拼接元素
arr = ['a','b','c']
arr.concat([1,2,3]) //拼接新数组
打印arr.concat([1,2,4])为['a','b','c',1,2,3]
但是打印原数组arr则跟之前一样:['a','b','c']
注意:concat并没有修改数组,只是会返回新数组
9、join 连接符 打印拼接数组,使用特定的字符串连接
arr = ['a','b','c']
arr.join("-")
->"a-b-c"
10、多维数组:和c语言中一样。
数组:存储数据(存和取,其他的都可以自己实现)
对象
1、对象定义:若干个键值对
var person = {
name:"zhang",
age:3,
属性名:属性值
//最后一个属性不要加逗号
}
2、添加和删除属性值
person.tianjia = "tianjia";
delete person.name;
3、 判断属性值是否在这个对象 ‘xxx’ in xxx
'age' in person //true
4、判断属性是否是自身拥有的
person.hasOwnProperty('age');
true
person.hasOwnProperty('toString');
false
流程控制
1、if判断:和java一致
2、while循环、do…while和for循环:和java一致
3、forEach循环
var age = [12,43,64,7,8]
//函数
age.forEach(function (value){
console.log(value)
})//打印数组
4、forin循环
var age = [12,43,64,7,8]
//index是索引
for (var index in arr){
if (age.hasownProperty(index)) {
console.log("存在");
console.log(age[index]);//当前索引的值
}
}
Map和Set (ES6的新特性)
1、Map
var map = new Map([['tom',10],['jack',20],['haha',30]]);
var name = map.get('tom'); // 通过key获得value
map.set('admin',12); // 新增或修改
map.delete('tom'); // 删除元素
2、Set 无序不重复的集合:可以去重
var set = new Set([3,1,1,1,1]);
set.add(2); //添加
set.delete('tom') // 删除
console.log(set.has(3));// 是否包含某个元素
遍历与迭代器遍历
1、数组遍历:
//通过forof遍历数组内容,用forin遍历数组下标
var arr = [3,4,5]
for(var x of arr){
console.log(x)
}
12345
2、map集合遍历
var map = new map(['jack',20],['haha',10],['tom',10])
for(let x of map){
console.log(x)
}
1234
3、set集合遍历
var set = new set([5,6,7]) //集合记得用[]包围
for(let x of set){
console.log(x)
}
1234
函数
定义函数
定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束,返回结果,r如果没有执行return,函数执行完也会返回结果,结果就是undefined。
定义方法二
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){}是一个匿名函数,可以把结果赋值给abs,通过abs就可以调用函数。
注:方法一和方法二等价
调用函数:
abs(10)
abs(-10)
**参数问题:**javascript可以传任何个参数,也可以不传参数
参数进来是否存在的问题?假设不存在参数,如何抛出异常?
var abs = function(x){
//手动抛出异常来判断
if (typeof x !== 'number') {
throw 'not a number';
}
if (x>=o) {
return x;
}else{
return -x;
}
}
arguments对象:
arguments是一个JS免费赠送的关键字
加入函数的实参没有写多个,但使用时传入了多个参数,使用arguments对象可以把这多个参数用数组返回,argument对象其实就是传入的所有参数的数组。
特性:
1.arguments对象和Function是分不开的。
2.因为arguments这个对象不能显式创建。
3.arguments对象只有函数开始时才可用。
使用方法:
虽然arguments对象并不是一个数组,但是访问单个参数的方式与访问数组元素的方式相同
例如:
arguments[0],arguments[1],。。。arguments[n];
在js中 不需要明确指出参数名,就能访问它们,例如:
function test() {
var s = "";
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
s += arguments[i] + ",";
}
return s;
}
test("name", "age");
//结果为name,age
rest参数-ES6新特性
获取除了已经定义的参数之外的所有参数~ … ,rest参数只能写在最后面。
例如:函数定义了两个参数,但是传入了第三个参数,要怎么取出第三个参数呢?
function test(a,b){
console.log('a->'+a);
console.log('b->'+b);
//以前的方法取第三个元素:
if (arguments.length>2) {
for(var i = 2; i<arguments.length;i++){
console.log(arguments[i])
}
}
}
//现在的方法(rest参数):在函数中定义rest参数
function test1(a,b,...rest){
console.log('a->'+a);
console.log('b->'+b);
console.log(rest);
}
变量的作用域
变量的作用域
在javascript中,var定义变量实际是有作用域的。
function f() {
var x = 1;
return x+1;
}
x = x +2;//报错
假设在函数体中声明,则在函数体外不可以使用,(非要实现的话,后面可以研究一下闭包)
如果两个函数使用了相同的变量名,则在对应的函数内部并不冲突。
function f1() {
var x = 1;
return x+1;
}
function f2() {
var x = 'a';
return x;
}
内部函数可以访问外部函数的成员,相反则不可以。
function f1() {
var x = 1;
function f2() {
var y = x + 1;
return x;
}
var z = y + 1;//报错:y未定义
}
在JS中函数查找变量从自身函数开始,由“内”向“外”查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数变量。
JS执行引擎会自动提升变量的声明,但不会提升变量的赋值。这是JS建立之初的一个规范,所有变量放在代码头部,便于维护。
变量的一般使用
一般都先定义在代码头部,后调用
function zhang(){
var x,y,z;
//之后再赋值调用
}
全局对象window
alert本身也是一个window变量。
js实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内占到,就会向外查找,如果在全局范围内都没有找到,则会报错:引用异常(RefrenceError)。
var x ='xxx';
window. alert(x);
var o1d_ _alert = window. alert;
//o1d_ alert(x);
window.alert = function () {};
//发现alertO 失效了
window. alert(123);
//恢复
window.alert = o1d_ _alert;
window. alert(456);
规范:由于所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,则会产生冲突。
解决办法:把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
//唯一全局变量
var GaoApp = {};
//定义全局变量
GaoApp.name = 'gaozheng';
GaoApp.add = function(a,b){
return a + b;
}
局部作用域let
ES6let关键字,解决局部作用域冲突问题,现建议大家都用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); //Uncaught ReferenceError: i is not defined
}
建议使用let定义局部变量
常量const
在ES6之前,定义常量使用全部大写字母命名的变量就是常量,建议不要修改这样的值。
var PI = '3.14' ;
console.' 1og(PI);
PI = '213'; //可以改变这个值
console.1og(PI);
在ES6之后,用const定义常量
const PI = '3.14';
console.log(PI);
PI = '123'; //报错,常量不允许修改
方法
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
var person = {
name: 'gao';
brith: 1998;
//方法
age: function(){
//获取当前年份
var now = new Date().getFullYear();
return now - this.brith; //this是默认指向调用它的那个对象,这里值person
}
}
//属性调用
person.name;
//方法调用,方法一定要带()
person.age();
apply方法
apply方法是可以控制this指向的,该方法有两个参数,第一个是getArg要使用的是那个对象,第二个是数组
function getAge(){
var now = new Date().getFullYear();
return now - this.brith;
}
var person = {
name: 'gao';
brith: 1998;
age: getAge
}
getAge.apply(person,[]); //this指向了person,参数为空
内部对象
标准对象
typeof 123
“number”
typeof ‘123’
‘string’
typeof true
“boolean”
typeof NaN
“number”
typeof []
"object’
typeof {}
“object”
typeof Math. abs
“function”
typeof undefined
“undefined”
Date
基本使用
var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getFu11YearO); //年
now. getMonth(); //月 0~11 代表月
now. getDate(); //日
now. getDay(); //星期几
now. getHours(); //时
now. getMinutes(); //分
now. getseconds(); //秒
now. getTime(); //时间戳 全世界统一 从1970 1.1 0:00:00开始到现在的毫秒数
console. log(new Date(1578106175991)) //时间戳转为时间
转换
now = new Date (1578106175991)
sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now.toLocalestring //注意,调用是一个方式,不是一一个属性!
< f toLocalestring() { [native code] }
now.toLocalestring()
< "2020/1/4上午10:49:35"
now. toGMTString()
< 'Sat, 04 Jan 2020 02:49:35 GMT"
json对象
早期,所有数据传输习惯使用XML文件!
-
JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
-
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
-
在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…
格式:
-
对象都用{}
-
数组都用[]
-
所有的键值对 都是用 key:value
json字符串和js对象的转换
var user = {
name :
"gaozheng",
age: 3,
sex: '男'
}
//对象转化为json字符串(json字符串每个键都用""或'包围)
var jsonuser = JSON. stringify(user);
//输出为{"name" : "gaozheng","age":3,"sex" :"男"}
//json字符串转化为对象参数为json 字符串
var obj = JSON. parse(' {"name":"gaozheng" , "age" :3,"sex":"男"}');
//输出为{name:"gaozheng",age:3,sex:"男"}
json和js对象的区别:
var obj = {a: 'he11o' ,b: 'he11ob'};
var json = '{"a": "he11o" , "b":"he1lob"}'
面向对象编程
什么是面向对象
JavaScript、Java、C#…面向对象;
JavaScript有些区别!
类:模板
对象:具体的实例
在JavaScript中,需要换一下思路!
原型:模板
面向对象原型继承
1、原型对象-----相当于父类
当创建一个新函数时,系统会根据一组特定的规则为函数创建一个prototype属性,该属性会指向一个名为原型对象的对象,在默认情况下,该对象会自动生成一个构造函数(constructor),该构造函数是一个指向函数的指针。而在原型对象中,除了有这个构造函数,我们还可以添加其他的属性和方法。
通俗来讲就是,当我们新建一个函数A时,函数A内部会有一个属性,该属性指向一个对象(名字叫原型对象),而这个对象里面默认有一个构造函数,这个构造函数指向我们最初新建的函数A。然后,我们还可以在原型对象中添加属性和方法
//①默认情况下,构造函数是空的
//之前定义一个类
function Person(){//构造函数首字母大写
}
//②添加属性和方法
Person.prototype.name="dp";
Person.prototype.doSomething=function(){
alert(this.name);
};
//③定义好构造函数和其他属性方法之后,就可以创建实例了
var person1=new Person();
var person2=new Person();
面向对象class继承
class关键字是在ES6引入的
添加方法
//给student添加一个方法
//1、先定义一个类、属性、方法
class student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
//使用方法
var person = new student('小明');
person.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 xiaoStudent = new xiaoStudent("xiaohong",1);
原型链
操作BOM对象(重点)
浏览器介绍
JavaScript和浏览器关系?
JavaScript 诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型
- IE6~11
- chrome
- Safari
- Firefox
- opera
三方浏览器:
- QQ浏览器
- 360浏览器
window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight //内部高度
258
window.innerwidth //外部高度
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗口试试
Navigator
Navigator,封装了浏览器的信息(不建议使用)
navigator.appName //当前应用名
"Netscape"
navigator.appVersion //当前浏览器版本
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML, like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator.userAgent //当前用户的一些信息
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML, like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"
navigator.platform //获得系统的版本
"Win32"
大对数我们不会使用 navigator 对象,因为会被人为修改。不建议使用这些属性来判断和编写代码
screen
screen代表屏幕尺寸
screen.width
1920
screen.Height
1080
lacation
lacation代表当前页面的URL信息
location属性:
-
主机:host
-
当前指向的位置:href
-
协议: protocol
-
重新加载的方法:
location.reload()刷新网页 //设置新的地址:location.assign('想要跳转的地址')
document
document代表当前的页面,HTML DOM文档树
//获取具体的文档树节点:
<d1 id="app">
<dt> Java</dt>
<dd> JavaSE</dd>
<dd> JavaEE</dd>
</d1>
<script>
var dl = document. getElementById(' app ');
</script>
//获取cookie
document.cookie
//劫持cookie原理:把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie'></script>
<!-- 恶意人员:获取你的cookie上传到他的服务器 -->
//服务器端可以设置cookie为httpOnly
history
history代表浏览器的历史记录(不建议使用)
history.back() //网页后退
history.forward() //网页前进
操作DOM对象(重点)
DOM:文档对象模型
浏览器网页就是一个Dom树形结构(与div包围的标签差不多)
- 更新dom节点
- 遍历dom节点:得到Dom节点
- 删除dom节点
- 添加dom节点
注:要操作一个dom节点,就必须先获得这个dom节点
获得dom节点
<div id="father">
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
//对应css选择器
//标签选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
//id选择器
var p1 = document.getElementByID('p1');
//类选择器
var p2 = document.getElementByclassName('p1');
var father = document.getElementByID('father');
var childrens = father.children; // 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
</script>
**注意:**这是原生代码,之后都用jQuery
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementByID('id1');
</script>
id1.innerText = '123' //innerText方法修改文本内容
id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式
id1.style.color = 'red' //style.XX:style方法修改css样式。即可以在js里操作修改样式
id1.style.fontSize = '200px' //注意使用驼峰命名,下划线转驼峰命名
id1.style.padding = '2em' //属性使用字符串包裹
删除节点
删除节点的步骤: 先获取父节点,通过父节点删除自己
<div>
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
var self = document.getElementByID('p1'); //获取自己
var father = p1.parentElement; //找到p1的父节点
father.removechild(self) //通过父节点使用removechild删掉自己(只有标记为id选择器的节点才可以删除)
</script>
注意:删除多个节点时,children是时刻动态变化的,不能直接father.removechild(father.children[0])这样从第一个索引开始删
插入节点
我们获得了某个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); //在list节点下追加子节点
</script>
在js中创建一个新的节点追加
<script>
//第一个方法:通过js创建一个新节点
var newP = document.creatElement('p'); //创建一个p标签
newP.id = 'newP';
newP.innerText = 'hello'; //在这个标签上输入文本
list.appendchild(newP); //在父节点下加进去
//用第二种方法创建一个有自己属性的标签节点
var myScript = document.creatElement('script'); //创建一个script标签节点
myScript.setAttribute('type','text/javascript');
/*setAttribute方法加入属性和属性值。第一个参数为属性名,第二个参数为属性值。生成效果为<script type='text/javascript'></sript>*/
//可以创建一个style标签
var myStyle= document.createElement('style'); //创建了一个空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容
document.getElementsByTagName('head')[0]. appendChild(myStyle) //在父节点追加这个style标签
</script>
在前面插入节点:insertBefore
var ee = document. getElementById('ee');
var js = document . getElementById('js');
var list = document . getElementById( 'list');
//格式:要包含的节点. insertBefore(newNode, targetNode)
list. insertBefore(js,ee); //在list节点中(list是父节点),在ee节点前加入目标节点js
操作表单(验证问题)
表单 是什么 form DOM树
-
文本框 text
-
下拉框
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
-
…
表单目的:提交用户信息。
获取表单信息
<body>
<form action='#' method="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>
</body>
<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')
//对于单选框、多选框等固定的value,boy_radio.value只能取到当前变量的值
//则只能这样判断:
boy_radio.checked; //查看返回的结果,是否为true,如果为true则被选中
boy_radio.checked=true; //对其赋值
</script>
提交表单,MD5加密
文本框的密码在控制台上加密,即后台的密码是如何加密的?
<head>
<!-- 首先要导入MD5这个工具包 -->
<script src="https://cdn . bootcss . com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- action属性是提交完表单后调整的网页 -->
<form action="#" method="post">
<p>
<span>用户名: </span> <input type="text" id="username" name="username">
</p>
<P>
<span>密码: </span> <input type="password" id="password" name="password">
</p>
<!--绑定事件onclick被点击。按钮提交事件aaa()--> .
<button type="submit" onclick="aaa()">提交</button>
</form>
</body>
<script>
function aaa() {
var uname = document.getElementById( 'username ');
var pwd = document.getElementById('password');
console.1og(uname.value);
//MD5算法把pwd变成乱码,用这个方法会在前端把密码加长,用户体验感不好
pwd.value = md5(pwd.value);
console.1og(pwd.value);
}
</script>
表单提交,md5加密优化版:
<!-- 使用form提交事件aaa()
οnsubmit=绑定一个检测的函数,返回true或false
将这个结果返回给表单,使用onsubmit接收
οnsubmit="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" >
</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;
}
</script>
jQuery
使用时导入包或者jQuery的 cdn网址,相当于一个库,里面存在大量的JavaScript函数。
引入:
jq使用的公式:$(selector).action() //这个selector选择器就是css的选择器.action是事件
选择器
原生的js选择器的种类有:
- 标签选择器:document.getElementByTagName()
- id选择器: document.getElementByID()
- 类选择器: document.getElementByClassName()
jq选择器有(css中的选择器他全部都能用):
- 标签选择器:$(‘p’).click();
- id选择器:$(’#id名’).click();
- class选择器:$(’.class名’).click();
- …查看文档看更多:https://jquery.cuishifeng.cn/
<a href="" id="test_jquery">点我</a>
<script>
<!-- 在这个a标签中添加一个单击事件 -->
// 使用js语法
var id = document.getElementById('test_jquery')
id.click(function(){
alert('jQuery');
})
// 使用jq语法:选择器就是css的选择器
$('#test_jquery').click(function(){
alert('hello,jQuery');
})
</script>
事件
有鼠标事件、键盘事件、其他事件
例子:
<!-- 要求:获取鼠标当前的一个坐标 -->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
// 当前网页元素加载完毕之后,响应事件
// $(document).ready(function(){ //document默认是文档,ready默认是加载完
// })
// 上面这行的简写
$(function(){
$('#divMove').mousemove(function(e){ //获取了divMove的鼠标移动的坐标
$('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY) //在mouseMove这个span里显示鼠标移动的坐标
})
});
</script>
操作DOM事件
1、节点文本操作
<ul id="test_ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//拿到这个标签的文本,
$('#test_ul li[name=python]').text();
//修改这个标签的文本
$('#test_ul li[name=python]').text('123');
//修改样式
$('#test_ul').html();
</script>
12345678910111213
2、css的操作
<script>
$('#test_ul').css("color","red"); //使用键值对来表示属性和属性值
</script>
123
3、元素的显示和消失:本质是display:none
$('#test_ul').show(); //显示
$('#test_ul').hide(); //消失
$(window).width();
$(window).height();