一.数据类型
1. 快速入门
1. 1引入JavaScript
- 是一种弱类脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为
1.1.1内部标签
<script>
//......
</script>>
1.1.2外部引入
abs.js
//....
test.html
<script src="abc.js"></script>>
1.2基本语法
- javaScript严格分区大小写
- 定义变量格式:
var 变量名 = 变量值;- 条件控制语法和java一样
2.严格检查格式
- 在浏览器的控制台console打印变量:
console.log(变量名)、严格检查模式:‘use strict’
前提:编译器需要设置支持ES6语法
作用:避免不严谨的操作定义带来的问题
注意:
1)必须写在JavaScript的第一行
2)局部变量建议都使用 let 去定义
3.数据类型
3.1number
js不区分小数和整数,Number
3.1.1 “==”
- =
- == 等于(类型不一样,值一样,也会判断为true)
- === 绝对等于(类型一样,值一样,结果true)
- js的缺陷,坚持不要使用==比较
- NaN===NaN,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
3.1.2浮点数问题
console.log((1/3) === (1—2/3))
尽量避免使用浮点数进行计算,存在精度问题
3.1.3null和undefined
- null 空
- undefined 未定义
3.1.4数组
Java的数值必须是相同类型的对象,JS中不需要这样
//保证代码的可读性,尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true]
new Array(1,12,3,4,5,'hello')
3.1.5对象
对象是大括号,数组是中括号
每个属性之间逗号隔开
3.2字符串
- 正常字符串需要使用单引号或双引号括起来
- 转义字符
\n:换行
\t:制表
\b:空格
\r:回车
\:斜杠
\':单引号
\":双引号
3.2.1多行字符串编写
<script>
'use strict';
//使用反引号(即tab键上面的按键,需要大写)来多行字符串
let str = `你好
世界
hello
world`;
console.log(str);
</script>
3.2.2模板字符串
在反引号里面使用,使用el表达式,${变量名}
<script>
'use strict';
let name = 'Yu';
let age = 3;
let msg = `你好呀,${name},`;
console.log(msg);
</script>
3.2.3字符串的不可变性
- 字符串一旦被创建,就不能根据arr[下标]的方式改变字符串。如果想改变字符串的值,需要把字符串整体重新赋值。
3.2.4大小写转换
//注意,这里是方法,不是属性
student.toUpperCase()
student.toLowerCase()
3.2.5indexOf(‘a’)方法
- 通过indexOf(‘a’)方法,来获取字符a在字符串中的下标
3.2.6字符串的截取
<script>
'use strict';
let str = 'hello world';
//substring(i):从i下标截取到最后一个字符串
let sub1 = str.substring(4);
//substring(a,b):从a下标截取到b下标,包前不包后
let sub2 = str.substring(1,3);
console.log(sub1);
console.log(sub2);
</script>
4.数组
4.1长度
arr.length
- 注意:加入给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
4.2indexOf 通过元素获得下标索引
arr.indexof(2)
1
字符串的“1”和数字1不同
4.3slice()
- 截取Array的一部分,返回一个新数组,类似于String中的substring
4.4push(),pop()尾部
push :压入到尾部
pop:弹出尾部的一个元素
4.5unshift(),shift()头部
unshift:压入到头部
shift:弹出头部的一个元素
4.6排序sort()
["B","C","A"]
arr.sort()
["A","B","C"]
4.7元素反转reverse()
["A","B","C"]
arr.reverse
["C","B","A"]
4.8concat()
["C","B","A"]
arr.concat([1,2,3])
["C","B","A",1,2,3]
arr
["C","B","A"]
- 注意:concat()并没有修改数组,只是会返回一个新数组
4.9连接符join
打印拼接数组,使用特定的字符串连接
["C","B","A"]
arr.join('-')
"C-B-A"
4.10多维数组
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4
- 数组:存储数据(如何存。如何取)
5.对象
若干个键值对
var 对象名 = {
属性名: 属性值;
属性名: 属性值;
属性名: 属性值;
}
//定义了一个person对象,它有四个属性
var person = {
name:“kuangshen”
age:3
email:"11111@qq.com"
score:0
}
- js中对象,{…}表示一个对象,键值对描述属性 XXXX:XXXX,多个属性 之间使用逗号隔开,最后一个属性不加逗号!
- js中的所有的键都是字符串,值是任意对象
5.1对象赋值
person.name = "qinjiang"
"qinjiang"
person.name
"qinjiang"
5.2使用一个不存在的对象属性,不会报错!undefined
person.haha
undefined
5.3动态的删减属性,通过delete删除对象的属性
delete person.name
true
person
5.4动态的添加,直接给新的属性添加值即可
person.haha ="haha"
"haha"
person
5.5判断属性值是否在这个对象中! XXX in XXX!
'age' in person
true
//继承
'toString' in person
true
5.6判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
6.流程控制
if判断
var age = 3;
if (age>3){ //第一个判断
alert("haha")
}else if{age<5){ //第二个判断
alert("kuwa")
}else{ //否则
alert("kuwa")
}
循环
while循环,避免程序死循环
while(age<100){
age = age + 1;
console.log(age)
}
do{
age = age + 1;
console.log(age)
}while(age<100)
for循环
for(let i = 0;i < 100;i++){
console.log(i)
}
forEach循环
var age = [12,3,12,3,12,3,12,31,23,123]
//函数
age.forEach(function (value){
console.log(value)
})
for…in
//for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在")
console.log(age[num])
}
}
7.Map和Set
ES6的新特性
Map:
//学生的成绩,学生的名字
// var names = ["tom","jack","haha"];
//var scores = [100,90,80];
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value
map.set('admin',123456);//新增或修改
map.delete('tom');//删除
Set :无序不重复的集合
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
8.iterator
遍历数组
//通过for of / for in 下标
var arr = [3,4,5]
for(var x of arr){
console.log(x)
}
遍历map
var map = new Map([['tom',100],['jack',90],['haha',80]]);
for (let x of map){
console.log(x)
}
遍历set
var set = new Set([5,6,7]);
for (let x of map){
console.log(x)
}
二.函数及面向对象
1.定义函数
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二
var abs = function(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
代表,传递进来的所有的参数,是一个数组
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;
}
}
rest
ES6引入的新特性,获取除了已经定义的参数之外的所有参数
function aaa(a,b,....rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面,必须用…标识
2.变量的作用域
在js中,var定义变量实际是有作用域的。
假设在函数体中声明,则在函数体外不可以使用(闭包)
function qj(){
var x = 1;
x = x + 1;
}
x = x + 2;//Uncaught ReferenceError : x is not defined
如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function qj(){
var x = 1;
x = x + 1;
}
function qj2(){
var x = 'A';
x = x + 1;
}
内部函数可以访问外部函数的成员,反之则不行
function qj(){
var x = 1;
function qj2(){
var y = x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError : x is not defined
}
假设,内部函数变量和外部函数的变量,重名
function qj(){
var x = 1;
function qj2(){
var x = 'A';
console.log('inner'+x);//outer1
}
console.log('outer1'+x);//innerA
qj2()
}
qj()
假设在js中函数查处变量从自身函数开始,有“内”向“外”查找假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function qj(){
var x = "x" + y;
console.log(x);
var y = 'y';
}
结果:
xundefined
- 说明:js执行引擎,自动提升了y的声明,但是不会提升变量y的赋值
function qj2(){
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
这个是在js建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护
function qj2(){
var x = 1;
y = x + 1
z,i,a; //undefined
//之后随意用
}
全局函数
//全局变量
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;
window.alert = function(){
};
window.alert(123);
window.alert = old_alert;
window.alert(456);
alert(window.x);
js实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,冲突
//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = 'kuangshen';
KuangApp.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 出了作用域还可以使用
}
- let关键字解决局部作用域冲突的问题
function aaa() {
for (let i = 0;i < 100; i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError : x is not defined
}
常量 const
const PI = '3.14';// 只读变量
console.log(PI);
PI = '123'; //TypeError: Assignment to constant variable
console.log(PI);
方法
定义方法
方法:就是把函数放在对象的里面
对象只有两个东西:属性和方法
var Person = {
name:'qinjiang'
birth:2001,
//方法
age:function(){
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
kuangshen.name
// 方法一定要带()
kuangshen.age()
this
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen = {
birth:2001,
age:getAge,
}
this是无法指向的,是默认指向调用它的那个对象
apply
在js中可以控制this指向
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen = {
birth:2002,
age:getAge,
}
var Tony = {
birth:1997,
age:getAge,
}
getAge.apply(kuangshen ,[]);
getAge.apply(Tony,[]);
三.常用对象
1.Date
- getFullYear():获取当前日期对象的年份(四位数字年份)
- getMonth():获取当前日期对象的月份(0 ~ 11)
- getDate():获取当前日期对象的日数(1 ~ 31)
- getHours():获取当前日期对象的小时(0 ~ 23)
- getMinutes():获取当前日期对象的分钟(0 ~ 59)
- getSeconds():获取当前日期对象的秒钟(0 ~ 59)
- getMilliseconds():获取当前日期对象的毫秒(0 ~ 999)
- getTime():时间戳,获取当前时间距离1970年1月1日的毫秒数
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMilliseconds());
console.log(date.getTime());
时间格式的转换
var date = new Date(1578106075991);
console.log(date);
var localeDateString = date.toLocaleDateString();
console.log(localeDateString);
var toDateString = date.toDateString();
console.log(toDateString);
JSON
1.什么是JSON
JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
2.JSON格式
在JavaScript一切皆为对象,任何js支持的类型都可以用JSON来表示
格式
对象都用 { }
数组都用 [ ]
所有键值对都是用 key:value
3.JSON字符串与JS对象的转化
- 1.对象转换为json字符串:
JSON.stringify(对象名)
- json字符串转化为对象
JSON.parse(‘JSON字符串’)
let Person = {
name:'qinjiang',
age:3,
sex:'男'
}
let stringify = JSON.stringify(Person);
console.log(stringify);//{"name":"qinjiang","age":3,"sex":"男"}
var parse = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
console.log(parse);
四.面向对象编程
原型继承
let Person = {
name:'Tony',
age:22,
eat:function(){
console.log("人是铁饭是钢");
}
};
let Bird = {
fly:function(){
console.log("Bird can fly......");
}
}
let Jerry = {
name:'Jerry'
};
Jerry.__proto__ = Person;//语法格式
console.log(Jerry.eat());
Jerry.__proto__ = Bird;
console.log(Jerry.fly());
class继承
定义
class关键字,在ES6引入
class Person{
constructor(name){
this.name = name;
}
}
let Tony = new Person('Tony');
let Jerry = new Person('Jerry');
console.log(Tony);
console.log(Jerry);
继承
class Person{
constructor(name){
this.name = name;
}
}
class Student extends Person{
constructor(name,grade){
super(name);
this.grade = grade;
}
}
let Tony = new Person('Tony');
let Jerry = new Student('Jerry','一年级');
console.log(Tony);
console.log(Jerry);
五.操作Bom元素
BOM:浏览器对象模型,使我们可以通过JavaScript来操作浏览器。
常见的BOM对象:
1.Window:代表的是整个浏览器的窗口,同时window也是网页中的全局对象
2.Navigator:代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
3.Location:代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
4.History:代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效
5.Screen:代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
1.window对象
常用窗口属性
- 1、 浏览器窗口的内高度(以像素计)
window.innerHeight- 2、浏览器窗口的内宽度(以像素计)
window.innerWidth- 3、浏览器窗口的外高度(以像素计)
window.outerHeight- 4、浏览器窗口的外宽度(以像素计)
window.outerWidth
2.Navigator对象
.Navigator封装了浏览器的信息
Navigator代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器。一般我们只会使用userAgent来判断浏览器的信息,userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent
多数时候不会使用,因为会被别人修改
3.Screen对象
screen.width
1920px
screen.height
1080px
4.Location对象
location代表当前页面的URL信息
常用属性
1、输出location对象
console.log(location);
2、输出当前地址的全路径地址
console.log(location.href);
3、输出当前地址的来源
console.log(location.origin);
4、输出当前地址的协议
console.log(location.protocol);
5、输出当前地址的主机名
console.log(location.hostname);
6、输出当前地址的主机
console.log(location.host);
7、输出当前地址的端口号
console.log(location.port);
8、输出当前地址的路径部分
console.log(location.pathname);
9、输出当前地址的?后边的参数部分
console.log(location.search);
常用方法
1.assign()
location.assign("https://www.baidu.com");
2.reload()
location.reload(true);
3.replace()
location.replace("https://www.baidu.com");
5.document
document代表当前的页面,HTML DOM 文档树
document.title
"百度一下,你就知道"
document.title='狂神说'
"狂神说"
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementByID('app');
</script>
获取cookie
document.cooike
劫持cookie原理
< script src = "aa.js"></script>
服务器端可设置cookie :httpOnly
6.History对象
history代表浏览器的历史记录
history.back()//后退
history.forward()//前进
六.操作Dom元素
1.获得DOM节点
核心
浏览器网页就是一个Dom树形结构!
- 更新:更新Dom节点
- 遍历dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点,就必须要先获得这个Dom节点
1、 通过元素 id 来查找元素
document.getElementById(id)
2、通过标签名来查找元素
document.getElementsByTagName(name)
3、通过类名来查找元素
document.getElementsByClassName(name)
4、获取父节点下的所有子节点
父节点.children
<body>
<div id="father">
<h1>一级标题</h1>
<div id="div1">这是一个块</div>
<p class="p1">这是一个段落</p>
</div>
<script>
'use strict';
let tagName = document.getElementsByTagName('h3');
let byId = document.getElementById('div1');
let className = document.getElementsByClassName('p1');
let father = document.getElementById('father');
let childrens = father.children;//获取父节点下的所有节点
console.log(tagName);
console.log(byId);
console.log(className);
console.log(childrens)
</script>
</body>
2.更新节点
1、 获取 HTML 元素的 inner Text
元素节点.innerText
2、获取 HTML 元素的 inner HTML
元素节点 .innerHTML
3、获取 HTML 元素的属性值
元素节点.属性
4、获取 HTML 元素的行内样式值
元素节点.style.样式
<body>
<h1 id="content">这是一个一级标题</h1>
<script>
let byId = document.getElementById('content');
byId.innerText = '123';
byId.innerHTML = '<em>123</em>';
byId.style.padding = '2em';
byId.style.fontsize = '20px';
byId.style.color = 'red';
</script>
</body>
3.删除DOM节点
- 删除节点得步骤:先获取父节点,再通过父节点删除自己
方法
- 1、返回元素的父元素
元素节点.parentElement- 2、删除 HTML 元素
元素节点.removeChild(element)
<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>
'use strict';
let child = document.getElementById('p1');
let father = child.parentElement;
father.removeChild(child);
</script>
</body>
- 注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意
4.创建和插入DOM节点
- 1、创建 HTML 元素节点
document.createElement(element);- 2、改变HTML元素的属性值
元素节点.setAttribute(attribute, value)- 3、添加 HTML 元素
元素节点.appendChild(element);- 4、在指定的子节点前面插入新的子节点
元素节点.insertBefore(newNode, targetNode);
案例一:移动已经存在的标签元素
<body>
<p id="p1">p1</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let p1 = document.getElementById('p1');
let list = document.getElementById('list');
list.appendChild(p1);
</script>
</body>
结果:
案例二:给body加背景色
<body>
<script>
let newStyle = document.createElement('style');
newStyle.setAttribute('type','text/css');
newStyle.innerHTML = 'body{background-color:red}';
let head = document.getElementsByTagName('head')[0];
head.appendChild(newStyle);
</script>
</body>
案例三:insertBefore(newNode, targetNode)使用
<body>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
<p id="js">JavaScript</p>
</div>
<script>
let list = document.getElementById('list');
let ee = document.getElementById('ee');
let js = document.getElementById('js');
list.insertBefore(js,ee);
</script>
</body>
结果:
七.操作表单
获得和设置表单的值
<body>
<form action="post">
<p>
<span>用户名 : </span><input type="text" id="username">
</p>
<p>
<span>性别 : </span><input type="radio" name="sex" id="boy">男
<input type="radio" name="sex" id="girl" checked>女
</p>
</form>
<script>
let userName = document.getElementById('username');
let sex_boy = document.getElementById('boy');
let sex_girl = document.getElementById('girl');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value = '123'
//对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果,是否为true,如果为true,则被选中
girl_radio.checked = true;//赋值
</script>
</body>
表单提交验证及前端密码MD5加密
<!-- MD5加密工具类-->
<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return MD5_check()">
<p>
<span>用户名 : </span><input type="text" id="username" name="username">
</p>
<p>
<span>密码 : </span><input type="password" id="password" >
</p>
<input type="hidden" id="MD5_psd" name="psd">
<!--绑定事件 onclick 被点击-->
<button type="submit">提交</button>
</form>
<script>
function MD5_check(){
let username = document.getElementById('username');
let psd = document.getElementById('psd');
let MD5_psd = document.getElementById('MD5_psd');
MD5_psd.value = mad5(psd.value);
return true;
}
</script>
</body>
八.jQuery
jQuery公式
- $( selector ) .action( )
<script src="../lib/jquery-3.6.0.js"></script>
<style>
div{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div></div>
<script>
//1、格式一(推荐):$(function(){.......});
$(function(){
$('div').hide();
});
//2、格式二:$(document).ready(function(){......});
// $(document).ready(function(){
// $('div').hide();
// });
</script>
</body>
jQuery选择器
基本选择器
id选择器 $(‘#id’) 获取指定ID的元素
全选选择器 $(‘*’) 匹配所有元素
类选择器 $(‘.class’) 获取同一类class的元素
标签选择器 $(‘div’) 获取同一类标签的所有元素
并集选择器 $(‘div,p,li’) 获取多个元素
交集选择器 $(‘li.current’) 交集元素
层次选择器
子代选择器 $(‘ul > li’) 使用>号,获取亲儿子层级的元素;注意:并不会获取孙子层级的元素
后代选择器 $(‘ul li’) 使用空格,代表后代选择器,获取ul下的所有li元素与,包括孙子等
<body>
<div>我是div</div>
<div class="box">我是box div</div>
<p id="p">我是p</p>
<ol>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
<li>我是ol 的li</li>
</ol>
<ul>
<li>我是ul 的li</li>
<li>
<li>我是li的li</li>
<li>我是li</li>
<li>我是li</li>
</li>
<li>我是ul 的li</li>
<li>我是ul 的li</li>
</ul>
<script>
$(function(){
console.log($('.box'));
console.log($('#p'));
console.log($('ol > li'));
console.log($('ul li'));
});
</script>
</body>
隐式迭代
</head>
<body>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<div>惊喜不,意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
$('div').css('background','red');
$('li').css('color','blue');
</script>
</body>
筛选选择器
:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(‘li:eq(2)’) 获取到的li元素中,选择索引号为2的元素,索引号indexcong0开始
:odd $(‘li:odd’) 获取到的li元素中,选择索引号为奇数的元素
:even $(‘li:even’) 获取到的li元素中,选择索引号为偶数的元素
<body>
<ul>
<li>ul的第一个li</li>
<li>ul的第二个li</li>
<li>ul的第三个li</li>
<li>ul的第四个li</li>
<li>ul的第五个li</li>
<li>ul的第六个li</li>
</ul>
<ol>
<li>ol的第一个li</li>
<li>ol的第二个li</li>
<li>ol的第三个li</li>
<li>ol的第四个li</li>
<li>ol的第五个li</li>
<li>ol的第六个li</li>
</ol>
<script>
$(function(){
$('ul li:first').css('color','red');
$('ul li:last').css('color','blue');
$('ul li:eq(2)').css('color','pink');
$('ol li:odd').css('color','green');
$('ol li:even').css('color','gray');
})
</script>
筛选方法
parent() $(‘li’).parent(); 查找父级
children(selector) ( ′ u l ′ ) . c h i l d r e n ( ′ l i ′ ) 相当于 ('ul').children('li') 相当于 (′ul′).children(′li′)相当于(‘ul>li’),子类选择器
find(selector) ( ′ u l ′ ) . f i n d ( ′ l i ′ ) ; 相当于 ('ul').find('li'); 相当于 (′ul′).find(′li′);相当于(‘ul li’),后代选择器
siblings(selector) $(‘.first’).siblings(‘li’); 查找兄弟节点,不包括自己本身。
nextAll([expr]) $(‘.first’).nextAll() 查找当前元素之后的所有元素
prevAll([expr]) $(‘.last’).prevAll() 查找当前元素之前的所有元素
hasClass(class) $(‘div’).hasClass(‘protected’) 检查当前元素是否包含某个特定的类,如果有,则返回true
eq(index) ( “ l i ” ) . e q ( 2 ) ; 相当于 (“li”).eq(2); 相当于 (“li”).eq(2);相当于(“li:eq(2)”),index从0开始
<body>
<div id="grandFather">grandFather
<div id="father">father
<div id="son">
son
</div>
</div>
</div>
<ul>
<li>ul的第一个li</li>
<li>ul的第二个li</li>
<li>ul的第三个li</li>
<li>ul的第四个li</li>
<li>ul的第五个li</li>
<li>ul的第六个li</li>
</ul>
<ol>
<li>ol的第一个li</li>
<li>ol的第二个li</li>
<li class="item">ul的第三个li</li>
<li>ol的第四个li</li>
<li>ol的第五个li</li>
<li>ol的第六个li</li>
</ol>
<script>
$(function(){
console.log($('#son').parent());
$('ul').children('li').css('color','red');
$('body').find('div').css('background','green');
$('ol .item').siblings('li').css('color','blue');
$('ol li').eq(2).css('color','pink');
})
</script>
</body>
jQuery样式操作
操作CSS方法
1、参数只写属性名,则是返回属性值
2、参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可不加单位引号
3、参数可以使对象形式,属性名和属性值用冒号隔开,属性不用加引号,复合属性名用驼峰命名法
<style>
div{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div></div>
<script>
$(function(){
console.log($('div').css('width'));
$('div').css('width','300px');
$('div').css({
height:300,
backgroundColor:'blue'
});
})
</script>
</body>
设置类样式方法
添加类
$(this).addClass('current');
移除类
$(this).removeClass('current');
切换类,有这个类就移除,没有就添加
$(this).toggleClass('current');
jQuery效果
显示隐藏效果
<style>
div{
width:200px;
height:400px;
background:red;
}
</style>
</head>
<body>
<button>隐藏</button>
<button>显示</button>
<button>切换</button>
<div></div>
<script>
$(function(){
$('button').eq(0).click(function(){
$("div").hide(1000,'linear',function (){
alert(1);
})
})
$('button').eq(1).click(function(){
$("div").show('slow','swing',function (){
alert(1);
})
})
$('button').eq(2).click(function(){
$("div").toggle('normal','swing')
})
})
</script>
</body>
滑动效果
<style>
div{
width:200px;
height:400px;
background:red;
}
</style>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换滑入滑出</button>
<div></div>
<script>
$(function() {
$('button').eq(0).click(function () {
$('div').slideDown(2000,'swing',function(){
alert(1);
});
})
$('button').eq(1).click(function () {
$('div').slideUp('normal','linear')
})
$('button').eq(2).click(function () {
$('div').slideToggle('fast','linear')
})
});
</script>
</body>
事件切换
hover(function(){}, function(){})
淡入淡出动画
1、淡入动画
fadeIn([speed],[easing],[fn])
2、淡出动画
fadeOut([speed],[easing],[fn])
3、淡入淡出切换
fadeToggle([speed,[easing],[fn]])
4、透明度改变
fadeTo([[speed],opacity,[easing],[fn]])
自定义动画
<style>
div{
position:absolute;
width:200px;
height:300px;
background:red;
}
</style>
</head>
<body>
<button>自定义动画</button>
<div></div>
<script>
$(function() {
$('button').click(function () {
$('div').animate({
left:300,
top:300,
opacity:0.5
},2000)
});
});
</script>
</body>
jQuery属性操作
获取/设置元素固定值
元素固有属性就是元素本身自带的属性,比如< a >元素里面的href,比如< input > 元素里面的type
获取属性
prop('属性')
设置属性
prop('属性','属性值')
获取/设置元素自定义属性值
获取属性
attr('属性')
设置属性
attr('属性','属性值')
数据缓存
data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除
<body>
<a href="http://www.baidu.com" title="百度">百度一下</a>
<div index="1" data-index="10"></div>
<span></span>
<script>
$(function (){
//元素固有属性
console.log($('a').prop('href'));
$('a').prop('title','百度一下你就知道');
//元素自定义属性
console.log($('div').attr('index'));
$('div').attr('index',4);
console.log($('div').attr('index'));
//数据缓存data()
$('span').data('username','tony');
console.log($('span').data('username'));
console.log($('div').data('index'));
})
</script>
</body>
JQuery内容文本
普通元素内容 html() //相当于原生 innerHtml
获取元素的内容
html()
设置元素的内容
html('内容')
普通元素文本内容 text() //相当于原生innerText
获取文本内容
.text()
设置文本内容
text('内容')
获取表单值 .val()
val方法用于设置和获取表单元素的值,例如input、textarea的值
<body>
<div>
<span>span内容</span>
</div>
<input type="text" value="请输入内容">
<script>
//1、获取设置元素内容
console.log($('div').html());
$('div').html('123');
//2、获取设置元素文本内容
console.log($('div').text());
// $('div').text('123456')
//3、获取设置表单值
console.log($('input').val());
$('input').val('123');
</script>
</body>
JQuery元素操作
遍历元素
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function (){
var colors = ['red','green','blue'];
$('div').each(function(index, element){
console.log(index);
$(element).css('color',colors[index]);
console.log(element);
});
})
</script>
</body>
创建元素
$('<li></li>')
添加元素
内部添加
将内容放入匹配元素最后面
element.append('内容')
将内容放入匹配元素最前面
element.prepend('内容')
外部添加
将内容放入目标元素后面
element.after('内容')
将内容放入目标元素前面
element.before('内容')
删除元素
<body>
<ul>
<li id="former_li">我是原来的li</li>
</ul>
<div id="former_div">我是原来的div1</div>
<script>
$(function (){
//1、创建元素
var li = $('<li>我是新来的li</li>')
var div = $('<div>我是新创建的div</div>')
//2、添加元素
//内部添加
$('ul').prepend(li);
//外部添加
$('#former_div').before(div);
//3、删除元素
$('#former_li').remove();
// $('#former_div').empty();
// $('#former_div').html('');
})
</script>
JQuery位置大小操作
jQuery尺寸
jQuery位置
offset()设置或获取元素偏移
- offset()方法设置或返回被选元素相对于文档的偏移左边,跟父级没关系
- 该方法有2个属性left、top。top获取距离文档顶部的距离,left用于获取距离文档左侧的距离
- 可以设置元素的偏移:offset({top:10, left:30});
position()获取元素偏移
position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级没有定位,则以文档为准
scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop()方法设置或者返回被卷去的头部
- scrollLeft()方法设置或者返回被卷去的左侧