JavaScript+Jquery
JavaScript基础
引言
javaScriput是一种脚本语言，是一种命令，这些命令逐条被执行。
- 跨平台
- 支持面向对象
- javaScript有三部分组成
- ECMAScript：基本语法
- DOM：文档对象模型
- BOM：浏览器对象模型
三种书写方式
-
行内式
<body> <input onclikc="alert('行内式')"/> </body> -
内嵌式
<head> <script> alert(内嵌式); </script> </head> -
外链式
<head> <script sec="test.js"></script> </head>
二种注释方式
- 单行注释
//单行注释 - 多行注释
/* 多行注释 */
输入语句&输出语句
| 语句 | 说明 |
|---|---|
| alert('d') | 浏览器弹出警示框 |
| console.log('c') | 浏览器控制台输出信息 |
| prompt(' d') | 浏览器用户输入内容 |
变量声明
var = age;
数据类型
javaScript是弱类型语言
数据类型有：基本数据类型、Boolean、String、Number、Null、Undefined（未定义型）复杂数据类型、Object
- 字符型
ver age = 18; & var age=3.14; - 字符串型
var age='18'; & var age="18" & var age="'18'" & var age='"18"' - 布尔型
true & false - undefined
该变量没有赋值，null表示null值,空对象指针 - typeof数据类型检测
typoef a==b;-------fales
数据类型转换（略）
运算符（略）
分支结构：if、if-else、if-else if、switch(){case a: ...case b: ... default: ...}
循环结构&数组
循环结构
for(初始化变量;条件表达式;操作表达式){
......
}
循环嵌套
for(初始化变量;条件表达式;操作表达式){
for(初始化变量;条件表达式;操作表达式){
......
}
}
while
while(条件表达式){
...循环体
}
do...while
do{
...循环体
}while(条件表达式)
关键字
- continue：跳出本次循环
- break：跳出该循环
数组
创建数组的两种方式
//new
var arr1 = new Array();
var arr1 = new Array('1',''2','3');
//通过字面量创建
var arr1 =[];
var arr1 =['1','2','3'];
反转数组元素：遍历该数组将该数组从反转赋值到一个新的数组
基本排序方式：冒泡、插入
二维数组的创建
var info= new Array(){
new Array('1','2','3'),
new Array('a','b','c'),
}
二维数组的转置
var arr=[['1','2','3'],['a','b','c'],['one','two','three']];
var res=[];
for(var i =0; i<arr[0].lenght; i++){
res[i] = [];
for(var j = 0;j<arr.lenght;j++){
res[i][j] = arr[j][i]; //为二维数组赋值
}
}
函数
创建并调用函数
function funName(a1,b,a2,b2,c,d....){//javascript允许形参与实参不同，多余的参数不赋值
//函数体
return var; //可终止函数，或返回数据
}
funName(); //调用
回调函数：函数A作为参数传递给一个函数B，在B的函数体内调用函数A
递归调用：函数体内调用自身的过程叫做递归调用。
变量的三种作用域：
- 全局变量：不在任何函数内声明或在函数内省略var声明的变量。在同一个页面的脚本中都可以使用
- 局部变量：在函数体内使用var关键字定义的变量。仅在该函数内有效
- 块级变量：仅在"{中有效}"
对象
创建对象的三种方式
-
字面量创建对象
var aoj = {}; //创建空对象 var stu = { naem:'1', //属性 age:'2'. sex:'3' hellpScript(){ //方法 console.log('Hello'); } };对象的调用
//访问对象属性的两种语法 stu.name stu['age'] //调用对象方法两种语法 stu.helloScript(); stu['helloScript'] -
new Obiect创建对象
var obj = new Object(); //创建空对象 obj.name = '1'; //添加成员变量 obj.age = '2'; obj.sex = '3'; obj.helloScript = function(){ //添加成员方法 concole.log('Hello'); } -
构造函数创建对象
//创建一个模板（构造函数） function 构造函数(){ this.属性 = 属性; this.方法 = function（）{ .... } } //使用构造函数创建对象 var obi = new 构造函数名(); -
遍历对象的属性和方法
//创建对象 var obj = {name:'sun',age:18,sex'男'} //遍历对象 for(var k in obj){ //使用k来获取成员的名称 console.log(k); //naem、age、sex console.log(obj[k]);//sun、18、男 }
常用的内置对象
JavaScript内置对象：Math、Date、Array、String等
Math：数学对象（略）
Date：日期对象（略）
Array：数组对象（略）
String：字符串对象（略）
Dom模型
引言
DOM & BOM是浏览器提供的一套操作浏览器功能和页面元素的接口。DOM、BOM简称Web API。
DOM（Domcument Object Model Dom），文档对象模型。
DOM种将HTML文档视为树结构，把文档映射为树结构通过节点对象对其处理
- document（文档）：一个页面
- element（元素）：页面中所有标签都是元素
- node（节点）：网页种所有内容，在文档树种都是节点（比如元素节点、属性节点、文本节点、注释节点等）DOM会把所有节点看作对象，这些对象都拥有自己的属性。
获取元素 & 基础事件 & 操作元素
获取元素
获取元素的七种方法
document.getElementById()根据id获取元素- 根据标签获取元素
document.getElementByTagName('标签名')从整个文档中查找该元素element.getElementsByTagName('标签名')可以查找该元素的子元素或者后代元素
document.getElementByName()根name获取元素（一般用于获取表单元素）document.getElementByClassName()根据类名获取元素querySelector('.class')返回指定选择器的第一个对象querySelectotAll('.class2')返回指定选择器的所有元素对象集合
获取（document）文档对象中的元素
| 属性 | 说明 |
|---|---|
| document.body | 返回文档的boby元素 |
| document.title | 返回文档的title元素 |
| document.documentElement | 返回文档的html元素 |
| document.forms | 返回对文档中所有Form对象的引用 |
| document.images | 返回对文档中所有Image对象的引用 |
基础事件
在获取元素后需要为元素添加交互行为，要用到事件来处理。
事件的三元素
- 事件源：触发事件的元素
- 事件类型：比如单击事件、焦点事件
- 事件处理机制：事件触发后要执行的代码
常用事件类型：
- onclick--------------------点击事件
- onfocus-------------------获取焦点事件
- onblur---------------------失去焦点事件
- onmouseover------------鼠标经过事件
- onmouseout-------------鼠标离开事件
例如：按钮单击事件（onclick）
<body>
<button id="btu">单击事件</button>
<script>
var btu = document.getElementById('btu');//获取事件源
btu.onclick = function(){
alert('单机了该元素');
}
</script>
</body>
操作元素
要操作元素内容，首先要获取该元素。
| 属性 | 说明 |
|---|---|
| element.innerHTML | 设置或返回元素开始和结束标签之间的HTML，包括HTML标签，同时保留空格和换行 |
| element.innerText | 设置或者返回元素的文本内容，返回时去除HTML标签和多余的空格、换行，在设置时会进行特殊字符转义 |
| element.textContent | 设置或者返回指定节点的文本内容，同时保留空格和换行 |
-
操作img元素
案例：
<body> <button id="one">篮球</button> <button id="two">嘴炮</button> <img src="./img/还有梦想.jpg" alt="" title="篮球"/> </body> <script> var one = document.getElementById('one'); var two = document.getElementById('two'); var img=document.querySelector('img'); one.onclick = function(){ img.scr ='./img/还有梦想.jpg'; img.title = '篮球'; }; two.onclick = function(){ img.src='./img/康纳.jpg'; img.title = '嘴炮'; }; </script> -
操作表单input元素
案例：
<body> <button>隐藏</button> <input type="text" value=""/> </body> <script> var but=document.querySelector('button'); var input=document.querySelector('input'); var f=0; but.onclick=function(){ input.type = "password"; this.disabled = true; } </script> <!-- document.getElememtById() --> <!-- document.getElementByName() --> <!-- document.getElementByClass() --> <!-- document.getElementTagName() --> <!-- element.getElementTagName() --> <!-- document.querySelector() --> <!-- document.querySelectAll() --> -
隐藏密码名文
操作元素样式
元素的样式可以通过（元素对象名.style.样式属性名）的方式操作
如果是元素对象的CSS样式：如font-size，fontSize。
-
操作style属性
案例：
<style> .eye{ border: #D2691E; background-color: #D2691E; width: 130px; height: 70px; } </style> </head> <body> <div class="eye"> <p>让那指针慢慢走</p> <p>停在花开的时候</p> </div> <button>蓝色</button> </body> <script> var div=document.querySelector('div'); var but= document.querySelector('button'); but.onclick=function(){ div.style.width='150px'; div.style.height='100px'; div.style.backgroundColor='#0000ff'; } </script> -
操作class选择器（操作className属性）
案例：
<style> .eye2{ width: 135px; height: 60px; background-color: burlywood; padding-top: 30px; padding-left: 20px; } .eye3{ width: 135px; height: 60px; background-color: cadetblue; padding-top: 30px; padding-left: 20px; } </style> </head> <body> <div class="eye2">夜空中最亮的星</div> <button>变色</button> </body> <script> var div=document.querySelector('div'); var but=document.querySelector('button'); but.onclick = function(){ div.className='eye3'; } </script> -
焦点事件
案例：
<body> <input type="text" value="请输入密码" /> </body> <script> var input=document.querySelector('input'); //获取焦点事件 input.onfocus = function(){ if(this.value=='请输入密码'){ this.value = ''; } } //失去焦点事件 input.onblur = function(){ if(this.value==''){ this.value='请输入密码'; } } </script>
排他操作
简单理解就是排除其他的，再设置自己的
实现步骤：所有元素清除，设置当前元素
案例：
<style>
.ww{
background-color: #D2691E;
color: #000000;
}
</style>
</head>
<body>
<button class="ww">按钮1</button>
<button class="ww">按钮2</button>
<button class="ww">按钮3</button>
<button class="ww">按钮4</button>
</body>
<script>
//获取所有button元素
var buttons=document.getElementsByTagName('button');
//buttons得到的是类数组对象，使用buttons[i]访问数组里的每一个元素
for(var i=0;i<buttons.length;i++){
buttons[i].onclick = function(){
//所有按钮的颜色去掉
for(var i=0;i<buttons.length;i++){
buttons[i].style.backgroundColor='';
}
//设置当前元素的颜色
this.style.backgroundColor='#5F9EA0';
}
}
</script>
鼠标经过时背景变色
<style>
.eye4{
background-color: #D2691E ;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>0035**</td>
<td>三个月定期开放证券</td>
<td>1.075</td>
<td>1.097</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr >
<td>0035**</td>
<td>三个月定期开放证券</td>
<td>1.075</td>
<td>1.097</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>0035**</td>
<td>三个月定期开放证券</td>
<td>1.075</td>
<td>1.097</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>0035**</td>
<td>三个月定期开放证券</td>
<td>1.075</td>
<td>1.097</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
</body>
<script>
//获取要排他的元素
var trs = document.querySelector('tbody').querySelectorAll('tr');
//利用for循环绑定注册事件
for(var i =0;i<trs.length;i++){
//鼠标经过事件
trs[i].onmouseover = function(){
this.className = 'eye4';
}
//鼠标离开事件
trs[i].onmouseout = function(){
this.className = '';
}
}
</script>
属性操作
在HTML中，元素有一些自带的属性，比如div元素的属性有id、class、title、style，开发者可以为这些元素添加自定义属性。
-
获取属性值
获取属性值的两种方式
element . 属性：获取内置的属性值，但不能获取元素自定义的值（开发中推荐使用）简洁。
element . getAttribute('属性')：获取内置的属性值，并且能获取元素自定义的值
<body> <div id="admin" index="1" class="eye"></div> </body> <script> //拿到div属性 var div = document.querySelector('div'); //通过getAttribute拿到div属性的自带的属性 console.log(div.id); console.log(div.getAttribute('id')); console.log(div.index); console.log(div.getAttribute('index')); </script> -
设置属性值
设置属性值的两种方式
element . 属性='值';
element . setAttribute('属性' , '值');
<body> <div></div> </body> <script> //拿到div属性 var div = document.querySelector('div'); //设置属性 div.id = 'text'; div.className = 'eye'; div.setAttribute('index',2); </script> -
移除属性
element . removeAttribute('属性');
<body> <div id="text" index="2" class="eye"></div> </body> <script> //拿到div属性 var div = document.querySelector('div'); //删除属性 div.removeAttribute('text'); div.removeAttribute('eye'); div.removeAttribute('index'); </script> -
Tag栏切换案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> li{ color: aquamarine; list-style: none; float:left; border:1px solid #DEB887; padding: 0px; padding-top: 1px; padding-left: 10px; width: 76px; height: 27px; } .tab_list{ border: #5F9EA0; background-color: #D2691E; height: 30px; width: 530px; } .current{ background-color: cornflowerblue; } .tab_con{ background-color: antiquewhite; border:1px solid #DEB887; width: 528px; height: 200px; } .it{ color:#5F9EA0; display:none; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li>商品介绍</li> <li>规格包装</li> <li>售后保障</li> <li>商品评价</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="it">商品介绍模块</div> <div class="it">规格与包装模块内容</div> <div class="it">售后保障模块内容</div> <div class="it">商品评价（5000）模块内容</div> <div class="it">手机社区模块内容</div> </div> </div> </body> <script> /* 拿到元素 */ var tab_list = document.querySelector('.tab_list');//通过class="tab_list"获取div元素 var lis = tab_list.querySelectorAll('li'); //通过div元素获取所有子元素li var its = document.querySelectorAll('.it'); //通过class="it"获取对应的div元素 for(var i=0;i<lis.length;i++){ //for循环，为每个li绑定点击事件 /* li点击事件 */ lis[i].setAttribute('index',i); //为每一个li元素添加index属性来标记每一个li元素，与模块关联 lis[i].onclick = function(){ //为li元素注册点击事件 //排除思想 for(var i=0;i<lis.length;i++){ lis[i].className =''; } //设置自己 this.className='current'; /* 显示模块内容 */ var index = this.getAttribute('index'); //通过index属性与模块关联 //排他思想 for(var i=0;i<its.length;i++){ its[i].style.display='none'; } //设置自己 its[index].style.display = 'block'; }; } </script> </html>
自定义属性
通常情况下自定义属性可以通过getAttribute('属性')方法来获取，但是有些自定义属性很容易引起歧义，不容易判断是元素的自带属性还是自定义属性，因此HTML5定义了新增属性的规范。data-属性名。
data-*有两种方式
<div data-index="2"></div> //行内式
//javaScript中
<body>
<div></div>
<script>
var div=document.querySelector('div');
//在JavaScript中方式一
div.dataset.index='2';
//在JavaScript中方式二
div.setAttribute('data-name','andy');
</script>
</body>
<!--
结果
<div date-index="2" data-name="andy"></div>
-->
获取属性值的两种方式：
- getAttribute('属性')可以获得内置属性和自定义属性
- element.dataset.属性可以获得内置属性
节点操作
-
引言
HTML文档可以看作是一个节点树，网页中的所有内容都是节点其中包括元素、属性、文本、注释。
HTMLDOM树中的所有节点均可以通过JavaScript进行访问，所有可以利用操作节点的方式操作HTML中的元素
一个节点至少用nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性
各个元素节点之间可以划分为根节点<html>、父节点<html>---<body>、子节点<body>---<hyml>、兄的节点<body>---<head>。
-
获取父节点
parentNode属性获取离当前元素最近的一个父节点，如果找不到null。语法为obj.parendNode
<body> <div> <div> <span class="child">span元素</span> </div> </div> </body> <script> var child=document.querySelector('.child'); console.log(child.parentNode); </script> -
获取子节点
两种方式，childNodes、children
<body> <ul> <li>我是梅西</li> <li>c罗是我</li> <li>(⊙o⊙)？</li> </ul> </body> <script> var ul = document.querySelector('li'); console.log(ul.childNodes); console.log(ul.childNodes[0].nodeType); </script><body> <ol> <li>yes</li> <li>yes</li> <li>yes</li> </ol> <script> var ol = document.querySelector('ol'); var lis = ol.querySelectorAll('li'); console.log(ol.children); </script> </body>chidNodes属性与children属性的区别：前者返回值是NodeList，后者返回的是HTMLCollection对象集合
获取子节点的其他方法，firstChild属性（返回第一个）和lastChild属性（返回最后一个）
-
获取兄弟节点
nextSibling属性获取下一个兄弟节点、previousSibling属性获取上一个兄弟节点。
-
下拉菜单案例
<head> <meta charset="utf-8"> <title>下拉菜单</title> <style> li{ list-style: none; margin-top: 15px; border-bottom: 1px solid #8a5efa; margin-left: 0px; } .li{ float:left; border: 1px solid #FAEBD7; margin-right: 20px; width: 65px; } .ul{ padding-left: 15px; background-color: #FAEBD7; display: none; } a{ padding-left: 15px; background-color: azure; } </style> </head> <body> <ul class="nav"> <li class="li"> <a href="index11.html">微博</a> <ul class="ul"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li class="li"> <a href="index11.html">留言板</a> <ul class="ul"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li class="li"> <a href="index11.html">电话</a> <ul class="ul"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li class="li"> <a href="index11.html">邮箱</a> <ul class="ul"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> </ul> <script> var nav=document.querySelector('.nav'); //获取元素 var lis=nav.children; //获取ul元素的子节点 //注册鼠标经过事件和鼠标离开事件 for(var i=0;i<lis.length;i++){ lis[i].onmouseover = function(){ //注册鼠标经过 this.children[0].style.backgroundColor='brown';//li的下标0的子元素<a> this.children[1].style.display='block';//li的下标1的子元素<ul> } lis[i].onmouseout = function(){ //鼠标离开 this.children[0].style.backgroundColor=''; this.children[1].style.display='none'; } } </script> </body> -
创建节点
document.createElement('tagName')：创建多个元素时效率稍低，但结构清晰。
document.write()：将内容写入某个DOM节点，不会导致页面重绘制。
document.innerHTML()：如果页面文档流加载完毕，在调用会导致页面重绘
-
添加 & 删除节点
node.appendChild()添加节点：将一个节点添加到指定父节点的子节点的末尾。
node.insertBefore()添加节点：将一个节点添加到父节点的指定子节点的前面。
node.removerChild(child)删除节点：从DOM中删除一个节点，返回删除节点。
-
留言板案例
<head> <meta charset="utf-8"> <title></title> <style> textarea{ width: 200px; height: 800xp; background-color: #5F9EA0; color: coral; } li{ width: 150px; background-color: #FF7F50; margin-bottom: 10px; } </style> </head> <body> <textarea name="" id=""></textarea> <button>发表</button> <ul></ul> </body> <script> var button = document.querySelector('button'); //获取button元素 var text = document.querySelector('textarea'); //获取textarea元素 var ul = document.querySelector('ul'); //获取ul元素 button.onclick = function(){ if(text.value == ''){ alert('您没有输入内容！'); return false; }else{ var li = document.createElement('li'); //创建节点 li.innerHTML = text.value; //将内容写到某个节点 ul.insertBefore(li,ul.children[0]) //将节点插入到ul子节点下标为0的位置 text.value = ''; //清空属性值 } } //删除节点 var as = document.querySelectorAll('a'); //拿到所有节点中的a标签 var lis = document.querySelectorAll('li'); for(var i=0;i<as.length;i++){ as[i].onclick = function(){ ul.removeChild(this.parendNode); } } </script> -
复制节点
node.cloneNode()复制节点该方法返回一个一个节点的副本。需要被复制的节点.cloneChild(true/false)，true深拷贝：拷贝内容和节点。false浅拷贝：只拷贝节点。
事件进阶
传统方式：同一个元素同一件事情只能设置一个处理函数，最后注册的处理函数会将前面注册的处理函数覆盖
标准浏览器语法格式：对同一个事件监听添加多个事件处理
DOM对象.addEvenListtener(type,callback,[capture]);
<!--
type:DOM对象绑定的类型
callback:表示处理程序
capture:默认false表示在冒泡阶段完成事务处理，true表示在捕获阶段完成事件处理
-->
DOM对象.removeEvrntListener(type,callback); //删除事件
事件对象
鼠标事件
-
常见的鼠标事件
事件名称 事件触发时机 onclick 单击鼠标左键时触发 onfocus 获得鼠标指针焦点触发 onblur 失去鼠标指针焦点触发 onmouseover 鼠标指针经过时触发 onmouseout 鼠标指针离开时触发 onmousedown 当按下任意鼠标按键时触发 onmouseup 当释放任意鼠标按键时触发 onmousemove 在元素内当鼠标指针移动时持续触发 -
contextmenu禁止鼠标点击事件
document.addEventListener('contextmenu',function(e){ e.preventDefault(); }); -
selectstart禁止鼠标选中
document.addEventListener('selectstart',function(e){ e.preventDefault(); }); -
鼠标事件对象：用于获取当前鼠标指针的位置信息
位置属性（只读） 描述 clientX 鼠标位于页面窗口可视区的水平坐标（X轴坐标） clientY 鼠标位于页面窗口可视区的垂直坐标（Y轴坐标） pageX 鼠标位于文档的水平坐标（X轴坐标），IE~IE8不兼容 pageY 鼠标位于文档的垂直坐标（Y轴坐标），IE~IE8不兼容 screenX 鼠标指针位于屏幕的水平坐标（X轴坐标） screenY 鼠标指针位于屏幕的垂直坐标（Y轴坐标） -
图片跟随鼠标指针移动
<style> img{ position: absolute; top: 2px; } </style> </head> <body> <img src="../img/梅西.png"/> </body> <script> var pic = document.querySelector('img'); document.addEventListener('mousemove',function(e){ var x = e.pageX; var Y = e.pageY; pic.style.left = X-50+'px'; pic.style.top = Y-40+'px'; }); </script>
键盘事件
Bom模型
引言
浏览器对象模型（Brower Object Model）独立于内容而与浏览器窗口交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
DOM是文档对象模型：把文档当作一个对象来看，他的顶级对象是document，DOM是W3C标准规范。
BOM浏览器对象模型：把浏览器当作一个对象来看，他的顶级对象是window，BOM是由浏览器厂商自定义的规范。
BOM的构成
window对象的常见事件
-
窗口加载事件：window.onload
当内容、图片等完全加载完成会触发的事件，调用该事件对应的处理函数
-
调整窗口大小事件：window.onresize事件
定时器
JavaScript执行机制
- 单线程：同一时间只能做一件事情。
- 同步：前一个任务执行完成，才能执行下一个任务
- 异步：执行一个任务的同时可以去执行下一个任务
location对象
navigator对象 & history对象
jQuery（*）
引言
jQuery是一款优秀的JavaScript库，它通过JavaScript的函数封装，简化了HTML与JavaScript之间的操作，使得DOM对象，事件处理，动画效果等操作的实现语法更加简洁，同时提高了程序的开发效率，消除了跨浏览器的兼容问题。
特点：
- jQuery是一个轻量级的脚本语言，代码非常小巧
- 语法简洁易懂，学习快速，文档丰富
- 支持CSS1—CSS3定义的属性和选择器
- 跨浏览器
- 实现类JavaScript脚本和HTML代码分离，便于后期维护
- 插件丰富，可以通过插件扩展跟多功能
使用：
-
下载jQuery文件https://jquery.com/download/
-
在HTML中通过script标签引入jquery-3.6.0.min.js文件
//javascript代码 var div = document.querySelector('div'); div.style.display = 'none'; //jQuery代码 var div = $('div') div.hide(); //可以简写为 $('div').hide();
jQuery对象
-
将jquery引入后，在全局作用域下会新增$、jQuery两个全局变量，这两个全局变量引用的是同一个对象，称为jQuery顶级对象。在代码中可以使用jQuery代替 $ 但通常情况下使用 $ 。
$(function(){ //$方式 $("div").hide(); }) jquery(function(){ //jquery方式 jquery("div").hide(); }) -
jquery顶级对象类似于一个构造函数，用来创建实例对象但不需要new实例化，内部会自动实例化。
-
在实际开发中经常需要在jQuery对象和DOM对象之间进行转换。DOM是原生的JavaScript的操作DOM对象，jQuery是通过自己的方式获取对象，这两种对象的使用方式不同，不能混用，但是可以互相转换。
-
jQuery对象实际上是对DOM对象进行了包装，也就是将DOM对象保存在了jQuery对象中因此jQuery可以获取DOM对象
//从jQuery对象中取出DOM对象的两种方式 $("div")[0]; //方式一 $("div").get(0); //方式二 //取出DOM对象后可以用DOM方式操作元素 $("div")[0].style.display = "none"; -
DOM对象转换成jQuery对象：将DOM对象作为$()函数的参数传入，该函数就会返回jQuery对象。
var myDiv = document.querySelector('div'); //获取DOM对象 var div = $(myDiv); //转换成jQuery对象 div.hide(); //调用jQuery对象的方法
jQuery选择器
在DOM中可以通过document.getElementClassName('.class');来获取元素，但在jQuery中是通过选择器来获取文档对象模型中的元素的，语法为 $("选择器")
-
基本选择器
名称 用法 描述 id选择器 $("#id") 获取指定id元素 全选选择器 $("*") 匹配所有元素 类选择器 $(".class") 获取同一类class元素 标签选择器 $("div") 获取相同标签名的所有元素 并集选择器 $("div,p,li") 选取多个元素 交集选择器 $("li.current") 交集元素 类选择器、标签选择器等可以获得多个元素，id选择器只能获取一个元素。
-
层级选择器：可以完成多层级之间的获取
名称 用法 描述 子代选择器 $("ul>li") 获取子级元素 后代选择器 $("ul li") 获取后代元素 隐式迭代：在使用jQuery选择器获取元素时，如果不考虑获取到的元素数量，直接对元素进行操作，则在操作时会发生隐式迭代，指的是对jQuery获取的所有元素进行操作
<div>a</div> <div>b</div> <script> $("div").css("background","pink"); //对获取到的所有div进行相同的操作 </script> -
筛选选择器：用来筛选元素，通常和别的选择器搭配使用
名称 用法 描述 :first $("li:first") 获取第一个li元素 :last $("li:last") 获取最后一个li元素 :eq(index) $("li:eq(2)") 获取li元素，选择索引为2的元素 :odd $("li:odd") 获取li元素，选择索引为奇数的元素 :even $("li:even") 获取li元素，选择索引为偶数的元素 -
筛选方法：对使用选择器取到的集合进行筛选
方法 用法 说明 parent() $("li").parent() 查找父级元素 children(selector) $("ul").children("li") 查找子集元素 find(selector) $("ul").find("li") 查找后代 siblings(selector) $(".first").siblings("li") 查找兄弟节点 nextAll([expr]) $(".first").nextAll() 查找当前元素之后的所有同辈元素 prevAll([expr]) $(".last").prevAll() 查找当前元素之前的所有同辈元素 hasClass(class) $("div").hasClass("protected") 检查当前的元素是否含有特定的类，返回true、false eq(index) $("li").eq(2) 相当于$("li:eq(2)") -
其他选择器：获取同级元素、筛选元素、属性选择器、子元素选择器、表单选择器。
-
jQuery下拉菜单【案例】
//CSS <script src="../js/jquery-3.6.0.min.js"></script> <style> *{ list-style: none; } li{ margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #DEB887; } .li{ float: left; margin-right: 20px; width: 50px; border-top:none; } a{ margin-left: 9px; background-color: #F0FFFF; text-decoration:none; } .ul{ display: none; padding-left: 0px; background-color: lightcyan; } </style> <body> <ul class="nav2"> <li class="li"> <a href="#">微博</a> <ul class="ul"> <li> 私信</li> <li> 评论</li> <li> @我</li> </ul> </li> <li class="li"> <a href="#">QQ</a> <ul class="ul"> <li> 私信</li> <li> 评论</li> <li> @我</li> </ul> </li> <li class="li"> <a href="#">bibi</a> <ul class="ul"> <li> 私信</li> <li> 评论</li> <li> @我</li> </ul> </li> </ul> </body> //js <script> //鼠标经过事件 $(".nav2 > li").mouseover(function(){ $(this).children("ul").show(); //鼠标经过该元素时该元素的子节点ul中的所有元素show显示 $(this).children("a").css("backgroundColor","lightcoral");//并且变色 }); //鼠标离开事件 $(".nav2>li").mouseout(function(){ $(this).children("ul").hide(); //鼠标离开该元素时该元素的子节点ul中的所有元素hide隐藏 $(this).children("a").css("backgroundColor","#F0FFFF");//并且变色 }); </script> -
jQuery排他思想【案例】
<head> <script src="../js/jquery-3.6.0.min.js"></script> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> </body> <script> $("button").click(function(){ //点击事件 $(this).css("background","pink"); //该按钮的CSS样式设置 $(this).siblings("button").css("background",""); //siblings("button")该对象的兄弟节点button,CSS样式改变 }); </script>
jQuery样式操作
-
修改样式
jQuery可以使用CSS()方法来修改简单元素样式
//获取样式 <style> div{width:200px;height:200px;background-color:"pink";} </style> <div>...</div> <script> $("div").css("width"); </script>//设置样式 <script> $("div").css("width","250px"); </script>//通过对象设置多个样式 <script> $("div").css({ width:200, height:200, backgroundColor:"red" }); </script> -
class类操作
创建页面
<script src="../js/jquery-3.6.0.min.js"></script> <style> .current{ background-color: red; margin-bottom: 10px;width: 70px; }addClass()添加类：
$(selector).addClass(className)可以添加多个类名//添加类名 $("div").click(function(){ $(this).addClass("current"); });removeClass()移除类：
$(selector).removeClass(className)可以删除多个类名//移除类名 $("div").click(function(){ $(this).removeClass("current"); });toggleClass()切换类：
$(selector).toggleClass(className,switch)switch参数表示只删除或者只添加 true为添加、false为删除，如果不添加switch参数则表示如果有className则删除，否则添加。//切换类名 $("div").click(function(){ $(this).toggleClass("current"); }); -
jQuery实现Tab栏案例
<script src="../js/jquery-3.6.0.min.js"></script> <style> li{ color: aquamarine; list-style: none; float:left; border:1px solid #DEB887; padding: 0px; padding-top: 1px; padding-left: 10px; width: 76px; height: 27px; } .tab_list{ border: #5F9EA0; background-color: #D2691E; height: 30px; width: 530px; } .current{ background-color: cornflowerblue; } .tab_con{ background-color: antiquewhite; border:1px solid #DEB887; width: 528px; height: 200px; } .it{ color:#5F9EA0; display:none; } </style> <div class="tab"> <div class="tab_list"> <ul> <li>商品介绍</li> <li>规格包装</li> <li>售后保障</li> <li>商品评价</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="it">商品介绍模块</div> <div class="it">规格与包装模块内容</div> <div class="it">售后保障模块内容</div> <div class="it">商品评价（5000）模块内容</div> <div class="it">手机社区模块内容</div> </div> </div> <script> //通过后代选择器获取所有后代元素li，并未li元素全部注册点击事件 $(".tab_list li").click(function(){ //所有li属性添加.current类选择器并且被点击的li的所有兄弟节点删除.current类选择器 $(this).addClass("current").siblings().removeClass("current"); //获取被点击li的index属性 var index=$(this).index(); //在控制台输出 console.log(index); //通过后代选择器获取所有div.选择下标为index的div元素.的所有兄弟元素.全部隐藏 $(".tab_con .it").eq(index).show().siblings().hide(); }); </script>
jQuery动画
-
显示与隐藏效果：用于控制元素显示和隐藏的方法
方法 说明 show([speed],[easing],[fn]) 显示被隐藏的匹配元素 hide([speed],[easing],[fn]) 隐藏已显示的匹配元素 toggle([speed],[easing],[fn]) 元素显示与隐藏切换 speed表示动画速度，可以设置动画时长为毫秒值或者预定的三种速度（slow、fast、normal）；
easing表示切换效果，默认为swing；
fn表示执行函数
<script src="../js/jquery-3.6.0.min.js"></script> <style> div{ width: 150px; height: 300px; background-color: #5F9EA0; } </style> <body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> </body> <script> //显示 //在所有button中获取索引为0的元素注册点击事件 $("button").eq(0).click(function(){ $("div").show("slow") //可添加函数参数 }); //隐藏 $("button").eq(1).click(function(){ $("div").hide(1000,function(){ alert("以隐藏"); }); }); //切换 $("button").eq(2).click(function(){ $("div").toggle(1000); }); </script> -
滑动效果：控制元素上划或者下滑的效果
方法 说明 slideDown([speed],[easing],[fn]) 垂直滑动显示匹配元素（向下增大） sildeUp([speed],[easing],[fn]) 垂直滑动显示匹配元素（向上减小） sildeToggle([speed],[easing],[fn]) 在slideDown、sildeUp两种效果间求切换 [speed],[easing],[fn]：与上面一样
<body> <ul class="nav2"> <li class="li"> <a href="#">微博</a> <ul class="ul"> <li> 私信</li> <li> 评论</li> <li> @我</li> </ul> </li> <li class="li"> <a href="#">QQ</a> <ul class="ul"> <li> 私信</li> <li> 评论</li> <li> @我</li> </ul> </li> <li class="li"> <a href="#">bibi</a> <ul class="ul"> <li> 私信</li> <li> 评论</li> <li> @我</li> </ul> </li> </ul> </body> <script> $(".nav2 > li").mouseover(function(){ $(this).children("ul").slideDown(200); }); $(".nav2 > li").mouseout(function(){ $(this).children("ul").slideUp(200); }); </script>hover()方法
$().hover(fn(over),fu(out)):over表示鼠标经过时触发的函数、out表示鼠标离开时触发的函数。$(".nav > li").hover(function(){ $(this).children("ul").slideDown(200); },function(){ $(this).children("ul").slideUp(200); });结合滑动效果可简化为
$(".nav > li").hover(function(){ $(this).children("ul").slideToggle(200); }); -
停止动画
$(selector).stop(stopAll,goToEnd);动画队列中所有动画都是按照顺序执行的，默认只有只有当，当前动画执行完毕后才会执行后面的动画。jQuery提供了stop()方法用于停止动画效果，通过此方法可以让动画队列后面的动画提前执行。
stopAll：用于规定是否清除动画队列，默认false。
goToEnd：用于规定是否立即完成当前动画，默认false。
$("div").stop(); //停止当前动画，继续下一动画 $("div").stop(true); //清除div元素动画队列中的所有动画 $("div").stop(true,true); //停止当前动画，清除动画队列中的所有动画 $("div").stop(false,true); //停止当前动画，继续执行下一动画 -
淡入淡出：控制元素淡入淡出
方法 说明 fadeIn([speed],[easing],[fn]) 淡入显示匹配元素（鼠标经过时透明度） fadeInOut([speed],[easing],[fn]) 淡出显示匹配元素（鼠标离开时后透明度） fadeInTo([speed],opacity,[easing],[fn]) 以淡入淡出的方式将匹配元素调整到指定的透明的 fadeInle([speed],[easing],[fn]) 在fadeIn()、fadeInOut()两种效果间切换 opacity：表示透明度数值，scope[0-1]之间，0代表完全透明、0.5代表50%透明、1表示不透明。
<style> div{width: 100px;height: 100px;float: left;margin-left: 5px;} .box{width: 425px;height: 105px;padding-top: 5px;border: 1px solid #ccc;} .red{background-color: red;} .green{background-color: green;} .yellow{background-color: yellow;} .orange{background-color: orange;} </style> <body> <dvi class="box"> <div class="red"></div><div class="green"></div> <div class="yellow"></div><div class="orange"></div> </dvi> </body><script> //将.box下所有div元素调整指定的透明度0.2 $(".box div").fadeTo(2000,0.2); //鼠标经过时透明的增加为1 //鼠标离开时透明的下降到0.2 $(".box div").hover(function(){ $(this).fadeTo(1,1); },function(){ $(this).fadeTo(1,0.2); }); </script> -
自定义动画
$(selector).animate(params[,speed][,easing][,fn])jQuery中提供了annimate()方法让用户自定义动画。params表示想要改变的样式，以对象形式传递，样式名可以不带引号，其他参数上面解释过了
<style> div{ width: 50px;height: 50px; background-color: pink; position: absolute; } </style> <body> <button>动起来</button> <div></div> </body> <script> $("button").click(function(){ $("div").animate({left:500,top:300,opacity:.4,width:500},500);//设置div的样式 }); </script> -
手风琴【案例】
//HTML部分 <style> *{margin: 0;padding: 0;} .king{width:825px;margin:100px auto;background-color:#DEB887;overflow: hidden;padding:10px;} .king ul{list-style: none;} .king li{position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;} .king li.current{width: 224px;} .king li.current .big{display: block;} .king li.current .small{display: none;} .big{width: 224px;height: 69px;display: none;border-radius: 5px;} .small{position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius:5px;} .red1{background: #ff3333;} .red2{background: #cc0000;} .red3{background: #058333;} .red4{background: #5F9EA0;} .red5{background: #6495ED;} .red6{background: #7FFFD4;} .red7{background: #8A5EFA;} .red8{background: #CCCCCC;} .red9{background: #D2691E;} .red10{background: #FFFF00;} .red11{background: #FFA500;} .red12{background: #5F9EA0;} .red13{background: #FFC0CB;} .red14{background: #8A5EFA;} </style>//CSS部分 <div class="king"> <ul> <li class="current"> <div class="small red1"></div> <div class="big red2"></div> </li> <li > <div class="small red3"></div> <div class="big red4"></div> </li> <li> <div class="small red5"></div> <div class="big red6"></div> </li> <li> <div class="small red7"></div> <div class="big red8"></div> </li> <li> <div class="small red9"></div> <div class="big red10"></div> </li> <li> <div class="small red11"></div> <div class="big red12"></div> </li> <li> <div class="small red13"></div> <div class="big red14"></div> </li> </ul> </div>//js部分 <script> $(".king li").mouseenter(function(){ $(this).stop().animate({ width:224 }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); $(this).siblings("li").stop().animate({ width:69 }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut(); }); </script>
jQuery属性操作
-
prop()方法：用来获取或者设置元素本身自带属性。
$(selector).porp("属性名") //获取属性值 $(selector).porp("属性","属性值") //设置属性值 //用法 <a href="http//localhost" title="主页"></a> <script> console.log($("a").prop("href")); //输出http//localhost $("a").porp("title","注册") //设置title的值为"注册" </script> -
attr()方法：用来获取或者设置元素自定义的属性
$("select").attr("属性名") //获取属性值 $("select").attr("属性","属性值") //设置属性值 //用法 <div index="1" data-index="2">梅西</div> <script> $("div").data("index"); $("div").data("data-index",4); </script> -
data()方法：用在指定元素上存取数据，元素保存在内存中，并不会修改DOM元素结构；一但页面刷新，之前存放的数据都会被移除。
$("select").date("属性名") //获取属性值 $("select").data("属性","属性值") //设置属性值 <div>c罗</div> <script> $("div").data("uname","andy"); //设置数组 console.log($("div").data("uname")); //获取数组 </script> -
购物车【案例】
<style> .car-header { padding: 20px 0;} .car-logo img {vertical-align: middle;} .car-logo b {font-size: 20px;margin-top: 20px;margin-left: 10px;} .cart-filter-bar {font-size: 16px;color: #E2231A;font-weight: 700;} .cart-filter-bar em { padding: 5px;border-bottom: 1px solid #E2231A;} .cart-thead {height: 32px;line-height: 32px;margin: 5px 0 10px;padding: 5px 0 border: 1px solid #e9e9e9; border-top: 0;position: relative;} .cart-thead>div, .cart-item>div {float: left;} .t-checkbox, .p-checkbox {height:18px;line-height: 18px;padding-top: 7px;width: 122px;padding-left: 11px;} .t-goods {width: 400px;} .t-price {width: 120px;padding-right: 40px;text-align: right;} .t-num {width: 150px;text-align: center;} .t-sum {width: 100px;text-align: right;} .t-action {width: 130px;text-align: right;} .cart-item {height: 160px;border-style: solid;border-width: 2px 1px 1px;background: #fff; border-color: #aaa #f1f1f1 #f1f1f1;padding-top: 14px;margin: 15px 0;} .check-cart-item {background: #fff4e8;} .p-checkbox {width: 50px;} .p-img {float: left;border: 1px solid #ccc;padding: 5px;} .p-msg {float: left; width: 210px;margin: 0 10px;} .p-price { width: 110px;} .quantity-form {width: 80px;height: 22px;} .p-num {width: 170px;} .decrement, .increment {float:left;border:1px solid #cacbcb;height:18px;line-height:18px;color:#666; padding:1px 0;width:16px;text-align:center;margin:0;background: #fff; margin-left: -1px;} .itxt {float: left;border: 1px solid #cacbcb;width: 42px;height: 18px;line-height: 18px; text-align: center;padding: 1px;margin: 0;margin-left: -1px; font-size: 12px; font-family: verdana;color: #333; -webkit-appearance: none;} .p-sum {font-weight: 700;width: 145px;} /* 结算模块 */ .cart-floatbar {height: 50px;border: 1px solid #f0f0f0;background: #fff;position: relative; margin-bottom: 50px;line-height: 50px;} .select-all {float:left;height:18px;line-height:18px; padding:16px 0 16px 9px; white-space: nowrap;} .select-all input {vertical-align: middle; display: inline-block;margin-right: 5px;} .operation {float: left;width: 200px;margin-left: 40px;} .clear-all {font-weight: 700; margin: 0 20px;} .toolbar-right {float: right;} .amount-sum {float: left;} .amount-sum em {font-weight: 700;color: #E2231A;padding: 0 3px;} .price-sum {float: left; margin: 0 15px;} .price-sum em {font-size: 16px;color: #E2231A;font-weight: 700;} .btn-area {font-weight: 700;width: 94px;height: 52px;line-height: 52px;color: #fff; text-align: center;font-size: 18px;font-family: "Microsoft YaHei"; background: #e54346;overflow: hidden;} </style><div class="cart-warp"> <!-- 头部 --> <div class="cart-thead"> <div> <input type="checkbox" name="" id="" class="checkall"/>全选 </div> <div class="t-poods">商品</div> <div class="t-price">单价</div> <div class="t-num">数量</div> <div class="t-sum">小计</div> <div class="t-action">操作</div> </div> <!-- 商品列表模块 --> <div class="cart-item-list"> <div class="cart-item"> <div class="p-checkbox"> <input type="checkbox" class="j-checkbox"/> </div> <div class="goods"> <div class="p-msg"> <img src="../img/梅西.png" /> </div> <div class="p-msg">商品名称</div> </div> <div class="p-price">￥12.6</div> <div> <div class="p-sum"> <a href="" class="decrement">-</a> <input type="text" class="itxt" value="1"/> <a href="" class="increment">+</a> </div> </div> <div class="p-sum">￥12.6</div> <div class="p-action"><a href="">删除</a></div> </div> </div> ................ <!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="" class="checkall"/>全选 </div> <div> <a href="" class="remove-batch">删除选中商品</a> <a href="" class="clear-all">清理购物车</a> </div> <div class="toolber-right"> <div class="amount-sum">已选择<em>1</em>件商品</div> <div class="price-sum">总价:<em>￥12.6</em></div> <div class="btn-area">去结算</div> </div> </div> </div><script> /* 当购物车的全选选中时所有所有商品的复选框都要选中 */ //通过className拿到全选（input）为其注册表单点击事件 $(".checkall").change(function(){ //当全选表单点击后，通过并集选择器拿到所有商品（input）为其设置与全选复选框相同的属性值 $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked")); }); /* 当所有商品选中时复选框的全选同时要选中 */ //通过className拿复选框的商品（input）为其注册表单点击事件 $(".j-checkbox").change(function(){ //当表单被点击后通过并集选择器获取所有input复选框数量===于被点击的复选框数量 //时则执行if(){中的代码}else{否则} if($(".j-checkbox:checked").length === $(".j-checkbox").length){ //将全选框的属性设置为true即选中状态 $(".checkall").prop("checked",true); }else{ //否则为不选中状态 $(".checkall").prop("checked",false); } }); </script>
jQuery内容操作
| 说法 | 说明 |
|---|---|
| html() | 获取第一个匹配元素的HTML内容 |
| html(content) | 设置第一个匹配元素的HTML内容 |
| text() | 获取所有匹配元素包含的文本内容组合起来的文本 |
| text(content) | 设置所有匹配元素的文本内容 |
| val() | 获取表单元素的value值 （可以操作select、radio、checkbox的选中情况） |
| val(content) | 设置表单元素的value值 （可以操作select、radio、checkbox的选中情况） |
<div>
<span>我是内容</span>
</div>
<input type="text" value="梅西"/>
<script>
//获取数组元素内容html()
$("div").html() //<span>我是内容</span>
$("div").html("<span>hello</span>") //<span>hello</span>（HTML代码会被解析）
//获取数组元素文本内容text()
$("div").text() //hello
$("div").text("<span>jQuery</span>")//<span>jQuery</span>（HTML代码不会被解析）
//获取设置表单值val()
$("input").val() //梅西
$("input").val("javaScript") //修改后value="javaScript"
</script>
总结：html()对匹配元素标签中的元素和内容都可以操作，text()对元素包含的内容进行操作，val()对元素中的属性操作。
scope：html() > text() > val()
购物车【案例】添加增减商品数量
/* 当用户啊点击 +、- 时内容改变*/
//点击+
$(".increment").click(function(){
//获取该对象的兄弟文本框的值
var n=$(this).siblings(".itxt").val();
n++;
//将自增后的值赋给兄弟节点
$(this).siblings(".itxt").val(n);
});
//点击-
$(".decrement").click(function(){
//获得兄弟文本框的值
var n=$(this).siblings(".itxt").val();
if(n == 1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
});
jQuery元素操作
jQuery具有隐士迭代效果，当一个jQuery对象中包含多个元素时，jQuery会对这些元素进行相同的操作。jQuery中可以使用each()方法进行遍历这些元素。
-
遍历元素：
$().each(function(index,domEle){});-
index为每个元素的索引号，domEle是每个DOM元素的对象而不是jQuery对象
<div>1</div> <div>2</div> <div>3</div> <script> var arr = ["red","green","blue"]; $("div").each(function(index,domEle){ $(this).css("color",arr[index]); //遍历div将div元素分别设置不同背景颜色 }); </script> -
$.each(Object,function(index,domEle){});<script> //遍历数组 var arr = ["red","green","blue"]; $.each(arr,function(index,element){ console.log(index); //数组中每个元素的索引 console.log(element); //数组中每个元素的值 }); //遍历对象 var obj = {name:"andy",age:18}; $.each(obj,function(index,element){ console.log(index); //对象中每个成员的名字 console.log(element); //对象中每个成员的值 }); </script>
-
-
创建元素：
$()直接在函数中传入一个HTML字符串即可var li = $("<li>梅有结束，还有西望</li>"); -
添加元素
-
内部添加：
append()、prepend()分别放在内部最前面添加、或者最后面var li = $("<li>我是内部添加的li</li>"); $("ul").append(li); //内部添加并放在内部的最后面 $("ul").prepend(li); //内部添加并放在内部的最前面 -
外部添加：
after()、before()把元素放到目标元素的后面或者前面var div = $("<div>我是内部添加的li</div>"); $("ul").append(div); //div放入到目标元素的后面 $("ul").prepend(div); //div放入到目标元素的前面面
-
-
删除元素
-
empty()：清空元素内容但删除元素本身$("ul").remove(); -
remove([expr])：清空元素内容，并删除元素本身$("ul").empty();
-
jQuery尺寸和位置
-
尺寸方法
在jQuery中，尺寸方法用来获取或者设置元素的宽度和高度
方法 说明 width() 获取或者设置元素宽度 height() 获取或者设置元素高度 outerWidth(true) 获取或者元素宽度（包含padding、border、margin） outerHeight(true) 获取或者元素高度（包含padding、border、margin） outerWidth() 获取元素宽度（包含padding、border） outerHeight() 获取元素高度（包含padding、border） innerWidth() 获取元素宽度（包含padding） innerHeight() 获取元素高度（包含padding） -
位置方法
-
offset()
包含两个属性left、top。offset()方法是相对于文档的偏移坐标，和父级元素没关系
$("selector").offset().top; //获取元素距离文档顶部的距离 $("selector").offset().left; //获取元素距离文档左则的距离 $("selector").offset({top:20,left:200}); //设置元素的偏移 -
position()
用于获取元素距离父元素的位置，如果父元素没有设置定位，则获取的结果是距离文档的位置。
$(".sun").position().top; //获取距离顶部的位置 $(".sun").position().left; //获取距离左则的位置 -
scrollTop()
用于获取或设置元素被卷去的头部距离
$(".sun").scrollTop(100); //设置元素距离页面顶部的距离 -
scrollLeft()
用于获取或设置元素被卷去的左侧距离
$(".sun").scrollLeft(); //获取元素距离页面左侧的距离 -
返回顶部【案例】
-
电梯导航栏【案例】
-
jQuery事件
jQuery常用的事件方法
表单事件
| 方法 | 说明 |
|---|---|
| blur( [ [data],function ] ) | 当元素失去焦点时触发 |
| focus( [ [data],function ] ) | 当元素获得焦点时触发 |
| change( [ [data],function ] ) | 当元素的值发生改变时触发 |
| focusin( [ [data],function ] ) | 在父元素上检测子元素获取焦点的情况 |
| focusout( [ [data],function ] ) | 在父元素上检测子元素失去焦点的情况 |
| select( [ [data],function ] ) | 当文本框（包括<input>、<textarea>）中的文本被选中时触发 |
| submint( [ [data],function ] ) | 当表单提交时触发 |
键盘事件
| 方法 | 说明 |
|---|---|
| keydown( [ [data],function ] ) | 键盘按键按下时触发 |
| keypress( [ [data],function ] ) | 键盘按键（Shift、Fn、CapsLock等非字符键除外）按下时触发 |
| keyup( [ [data],function ] ) | 键盘按键弹起时触发 |
鼠标事件
| 方法 | 说明 |
|---|---|
| mouseover( [ [data],function ] ) | 当鼠标指针移入对象时触发 |
| mouseout( [ [data],function ] ) | 当鼠标指针从元素上离开时触发 |
| click( [ [data],function ] ) | 当单击元素时触发 |
| dblclick( [ [data],function ] ) | 当双击元素时触发 |
| mousedown( [ [data],function ] ) | 当鼠标移动到元素上方，并按下鼠标按键时触发 |
| mouseup( [ [data],function ] ) | 当在元素上放开鼠标按钮时，会被触发 |
浏览器事件
| 方法 | 说明 |
|---|---|
| scroll( [ [data],function ] ) | 当滚动条发生变化时触发 |
| resize( [ [data],function ] ) | 当调整浏览器窗口的大小时会被触发 |
-
事件绑定
-
通过事件方法绑定事件
$("div").click(function(){}); -
通过on()方法绑定事件
$("div").on("click",function(){}); //一次绑定一个事件 $("div").on("click":function(){},"mouseenter":function(){}););//一次绑定多个事件 $("div").on("click mouseenter":function(){}); //同一个元素绑定多个事件
-
-
事件委派
事件委派是指把原本要给子元素绑定的事件绑定到父元素上，这就表示把子元素的事件委派给父元素。
<ul> <li>林丹</li> <li>马龙</li> </ul> <script> //li:first-child表示ul中第一个li $("ul").on("click","li:first-child",function(){alert("单击了li")}); //click事件绑定在父元素ul上，当子元素li触发事件后就会通过事件冒泡执行父元素ul的事件处理程序 //在事件委派情况下，事件处理函数中的this表示触发事件的元素即第一个li元素并不是ul元素 //委派事件的优势在于，可以为未来动态创建的元素绑定事件，在父类中动态创建的子元素也会拥有该事件 </script> -
事件解绑
off()方法可以移除通过on()方法添加的事件处理程序，在该方法中一个参数表示解绑该参数事件，两个参数表示解绑事件委托
$('p').off(); //解除p元素上的所有事件 $('p').off('click'); //解除p元素上的单击事件 $('p').off('click','li'); //解除事件委派 -
一次性事件
one()方法可以让元素只执行一次
$("p").one("click",function(){}); -
触发事件
-
事件方法触发事件
$("div").click(function(){}); //绑定事件(如果传参数表示绑定事件，不传参数表示触发事件) $("div").click(); //触发事件 -
trigger()方法触发事件
$("div").trigger("click"); //触发事件 -
triggerHandler()方法触发事件
$("input").triggerHandler("focus");//触发事件 /* trigger与triggerHandler区别 trigger方法会执行元素的默认行为 triggerHandler不会执行元素的默认行为 */
-
-
事件对象
当事件被触发时，就会有事件对象产生，在事件处理函数中可以使用参数来接受事件对象
通过事件对象可以获得事件相关的信息，如clientX、clientY、currentTarget等
<a href="index">点点点</a> <script> $("a").on("click",function(event){ event.preventDefault(); //阻止事件默认行为 event.stopPropagation(); //阻止事件冒泡 }); </script>
jQuery其他方法
jQuery中提供了$.extend()、$.ajax()方法实现对象成员的扩展和Ajax请求
-
$.extend()：用来实现对象的扩展
$.extend([deep],target,object1,[objectN])deep：true深拷贝，false浅拷贝。target：目标对象。object1：待拷贝对象。objectN：待拷贝N个对象。
-
浅拷贝
当对象中包含复杂数据类型时，浅拷贝会把这个成员的引用地址拷贝给目标对象，如果目标对象的成员名与对象相同时目标对象的成员会被覆盖
<script> var targetObj = { id:0, msg:{sex:'男'} }; var obj = { id:1, name:"andy", msg:{age:18} }; $.extend(targetObj,obj); //浅拷贝 </script> -
深拷贝
深拷贝把obj对象的成员完全复制一份，添加到目标对象成员不会被覆盖
$.extend(true,targetObj,obj); //深拷贝
-
-
$.ajax()
Ajax常用方法
方法 说明 $.get(url,[,data] [,fn] [,type]) 通过远程HTTP GET请求载入信息 $.post(url,[,data] [,fn] [,type]) 通过远程HTTP POST请求载入信息 $.getJSON(url,[,data] [,fn] ) 通过HTTP GET请求载入JSON数据 $.getScript(url,[,fn]) 通过HTTP GET请求载入并执行一个JavaScript文件 对象.load(url,[,data] [,fn] ) 载入远程HTML文件代码并插入至DOM中 $.ajax(url,[,options]) 通过HTTP请求加载远程数据 $.ajaxSetup(options) 设置全局Ajax默认选项 Ajax选项
选项名称 说明 url 处理Ajax请求的服务器地址 data 发送Ajax请求时传递的参数，字符串类型 success Ajax请求成功时所触发的回调函数 type 发送HTTP请求方式，如get、post datatype 期待的返回值类型，如xml、json、script、html数据类型 async 是否异步，true表示异步，false表示同步，默认值为true cache 是否缓存，true表示缓存，false表示不缓存默认值为true contentType 内容类型请求头，默认值为appliaction/x-www-form-urlencoded;charset=UTF-8 complete 当服务器URL接收完Ajax请求传送的数据后触发的回调函数 jsonp 在一个jsonp请求中重写回调函数的名称 异步请求服务器，获取服务器的响应结果。
<script> $.ajax({ type:'GET', //请求方式 url:'server.html', //请求地址 data:{id:2,name:'Hello'}, //发送数据 success:function(msg){ //请求成功后执行的函数 console.log(msg); } }); </script>
归纳
DOM获取元素
-
1、
document.getElementById()2、document.getElementByname3、document.getElementByClassName -
4、
querySelector()5、querySelectorAll()6、document.getElementByTagName() -
7、
element.getElementByTagName()
常用事件
-
onclick---左击事件onmouseover---鼠标指针经过时触发onmouseout---鼠标指针离开时触发 -
onfocus---获得鼠标指针焦点触发onblur失去鼠标指针焦点触发 -
onmousedown---当按下任意鼠标按键时触发onmouseup---当释放任意鼠标按键时触发 -
onmousemove---在元素内当鼠标指针移动时持续触发
jQuery常用选择器
-
id选择器 ---
$("#id")全选选择器 ---$("*")类选择器 ---$(".class") -
标签选择器 ---
$("div")并集选择器 ---$("div,p,li")交集选择器 ---$("li.current") -
添加类
$(selector).addClass(className) -
删除类
$(selector).removeClass(className)
jQuery常用事件
mouseover( [ [data],function ] )--- 当鼠标指针移入对象时触发mouseout( [ [data],function ] )---当鼠标指针从元素上离开时触发click( [ [data],function ] )---当单击元素时触发dblclick( [ [data],function ] )---当双击元素时触发mousedown( [ [data],function ] )---当鼠标移动到元素上方，并按下鼠标按键时触发mouseup( [ [data],function ] )---当在元素上放开鼠标按钮时，会被触发
动画：
show()---显示被隐藏的元素hide()---隐藏被显示的元素toggle()---两种模式切换
滑动：
slideDown()---向下增大slideUp()---向上减小slideToggle()---切换
清除动画：
stop()
淡入淡出：
fadeIn()---淡入匹配元素fadeOut()---淡出匹配元素fadeTo()---淡入淡出匹配元素的透明度fadeToggle()---切换
自定义：
animate();
属性操作 ：
prop()---设置或者获取元素自定义的值attr()---设置或者获取自定义属性的值data()---获取元素的数据
内容操作：
html()---获取第一个匹配元素的HTML内容，（如果没有子元素就返回该标签的内容）html(content)---设置第一个匹配元素的HTML内容text()---获取所有匹配元素包含的文本内容组合起来的文本text(content)---设置所有匹配元素的文本内容val()---获取表单元素的value值（可以操作select、radio、checkbox的选中情况）val(content)---设置表单元素的value值（可以操作select、radio、checkbox的选中情况）
遍历元素：
$(selector).each(function(){});
创建元素：
$("\<li>\</li>")
添加元素：
$("selector").append、$("selector").prepend---外部$("selector").after、$("selector").before---内部
删除元素：
empty()---清空元素内容，但不删除元素本身remove([expr])---清空元素内容，并删除元素本身（可选expr参数用于筛选元素）
还历史以真诚，还生命以过程。 ——余秋雨
浙公网安备 33010602011771号