使用javascript的一些疼处
书写繁琐，代码量大
代码复杂
动画效果，很难实现。使用定时器 各种操作和处理
----------------------------------------
HTML
<button id="btn">按钮</button>
<div></div>
<div></div>
<div></div>
CSS
<style type="text/css">
div{
width: 100%;
height: 100px;
background-color: pink;
margin-top: 30px;
display: none;
}
</style>
javascript
window.onload = function(){
document.getElementById('btn').onclick = function(){
var divs = document.getElementsByTagName('div');
for(var i = 0;i<divs.length;i++){
divs[i].style.display = 'block';
divs[i].innerHTML = '我出来了！！'
}
}
}
--------------------------------------------------------------------------------------------
//如果使用jQuery操作上面的案例，很简单，三句代码搞定
$('#btn').click(function(){
$('div').css('display','block');
$('div').html('我出来了')
})JavaScript和jquery的区别
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
------------------------------------------------------------------------
DOM文档加载的步骤
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。
- 加载图片等外部文件。
- 页面加载完毕。
------------------------------
执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
-----------------------------
编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
----------------------------
简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
jquery文件的引入
1 <!--引用包--> <script type="text/javascript" src="jquery-3.3.1.js"></script>
2<!--jquery是全局的一个函数 当调用$() 内部 会帮咱们new jQuery() 创建出对象之后 对象：属性和方法-->
----------------------------------------
jQuery特点、入口函数、js对象和jquery对象的区别
#### jQuery的两大特点 - 链式编程：比如`.show()`和`.html()`可以连写成`.show().html()`。 - 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。 #### 入口函数和window.onload()对比 原生 js 的入口函数指的是：`window.onload = function() {};` 如下： ```javascript //原生 js 的入口函数。页面上所有内容加载完毕，才执行。 //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。 window.onload = function () { alert(1); } ``` 而 jQuery的入口函数，有以下几种写法： ```javascript 写法一： //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(document).ready(function () { alert(1); }) 写法二：（写法一的简洁版） //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(function () { alert(1); }); 写法三： //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 $(window).ready(function () { alert(1); }) ``` #### **jQuery入口函数与js入口函数的区别**： 区别一：书写个数不同： - Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。 - jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。 区别二：执行时机不同： - Js的入口函数是在**所有的文件资源加载**完成后，才执行。这些**文件资源**包括：页面文档、外部的js文件、外部的css文件、图片等。
- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的**外部资源**都加载完成。 **文档加载的顺序：从上往下，边解析边执行。**
------------------------------------------------------
#### js中的DOM对象 和 jQuery对象 比较（重点，难点）
##### 二者的区别
通过 jQuery 获取的元素是一个**伪数组**，数组中包含着原生JS中的DOM对象。举例：
针对下面这样一个div结构：
通过原生 js 获取这些元素节点的方式是：
```
var myBox = document.getElementById("app"); //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
```
通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）
```
//获取的是伪数组，里面包含着原生 JS 中的DOM对象。
```
```javascript
console.log($('#app'));
console.log($('.box'));
console.log($('div'));
```
-----------------------------------------------
js对象和jquery对象的区别
// jquery入口函数
$(function () {
// 获取jquery对象
console.log($('#box2'));
// 获取js对象
var oDiv2=document.getElementById('box2')
console.log(oDiv2);
// jquery===>js对象
//
console.log($('#box2')[0]);
console.log($('#box2').get(0));
// js===>jquery
console.log($(oDiv2))
// 如果是js对象 更加希望转换成jquery才操作简便的dom
// 因为js是包含jquery，jquery只是封装 DOM 事件 ajax 动画， 就要将jquery对象转化成js对象
// 总结： 如果是jquery对象一定要调用jquery的属性和方法
// 如果是js对象一定要调用的是js的属性和方法
// 千万不要将 这两个对象混淆
// 在jquery 大部分的都是api（方法） length 和索引 是它 的属性
})
jQuery如何操作DOM
DOM对象转换成jquery对象 var box = document.getElementById('box'); console.log($(box)); -------------------------------------------------- jquery对象转化成DOM对象 第一种方式： $('button')[0] 第二种方式： $('button').get(0)
--------------------------------------------------
// 事件三步走： 事件源 事件 事件驱动程序
$(function () {
// 获取时间源
// jquery的标签选择器
console.log($('div'))
//js对象
//$('div')[0].onclick
// jquery内部自己遍历
$('div').click(function () {
// this 指的是js对象
console.log(this.innerHTML);
// 表达方法和上面相同
console.log($(this).text());
});
// 2.类选择器
console.log($('.box'))
// 3.id选择器
console.log($('#box'))
});
jquery获取DOM的方式--选择器
我们以前在CSS中学习的选择器有：
----------------------------------------------------------
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。
jquery的基本选择器
-----------------------------------------------------------------------------------------------------------------------------------------
层级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq层级选择器</title> </head> <body> <ul class="lists"> <li class="item">女友<ol>alex</ol></li> <li>alex2</li> <li>alex3</li> <li>alex4</li> <li>alex5</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> // 入口函数 $(function () { // 后代选择器 $('.lists li').css('color','red'); //子代选择器--亲儿子 // 设置多个css用字典的形式表达 $('.lists li>ol').css({'color':'green','font-weight':'bold'}); // + 紧邻 只选中挨着最近的兄弟 $('.item+li').css({'color':'yellow','font-weight':'bold'}); // ~ 兄弟选择器 $('.item~li').css('color','purple'); }); </script> </body> </html>
基本过滤选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //jquery函数入口 $(function () { // 去掉 li 标签的 点 $('li').css('list-style','none'); // 1.:eq(index) 选择序号为index的元素 // 选择索引为0的元素 $('ul li:eq(0)').css('color','red'); // 选择索引大于2的元素 $('ul li:gt(2)').css('color','green'); // 小于index的元素 $('ul li:lt(2)').css('color','blue'); // 选取索引位奇数 $('ul li:odd').css('color','blue'); // 选取索引位为偶数 $('ul li:even').css('color','blue'); // 选取第一个元素 $('ul li:first').css('color','blue'); // 选取最后一个元素 $('ul li:last').css('color','blue'); }); </script> </body> </html>
属性选择器--双引号
------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <input class="text" type="text"> <input class="number" type="number"> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> // jquery函数入口 $(function () { $('form input[class=text]').css({'height':'100px','weight':'100px'}); $('form input[type=number]').css({'height':'50px','weight':'50px'}); }) </script> </body> </html>
----------------------------------------------------
筛选选择器的方法--important
-------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="box"> <p> <span class="child">alex</span> </p> <P> <span class="active">alex2</span> </P> <p class="item3">alex3</p> <p>alex4</p> <p>alex5</p> <p class="child">python is o n the way</p> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // find(selector) 查找后代包括子子孙孙 $('.box').find('p').css('color','red'); console.log($('.box').find('p')); $('.box').find('.item3').css('color','green'); // 在jquery中 叫链式编程 就因为有这个链式编程 所有我们书写的就少 $('.box').find('p>.active').css('color','yellow').click(function () { alert(this.innerHTML) }) // 子代children(selector) 获取的是亲儿子 $('.box').children('.child').css('color','purple'); // parent 不说了 获取的是亲爹 // eq(index) index是从0 开始的 $('.box').children('p').eq(1).css('font-size',30); }) </script> </body> </html>
siblings()查找所有兄弟元素（不包括自己）
$('button').click(function (event) {
$(this).css('background','red').siblings('button').css('background','transparent');
-------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="btn">按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //查找所有兄弟元素---不包括自己 // 函数入口 $(function () { $('button').css({'weight':'100px','height':'50px'}); $('button').click(function (event) { $(this).css('background','red').siblings('button').css('background','transparent'); }); }) </script> </body> </html>
-------------------------------------------------------
选项卡模式：
--------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ width: 400px; height: 100px; overflow: hidden; margin-left: 20px; } ul li a{ padding: 20px; color: red; } li{ list-style: none; float: left; width: 80px; height: 100px; line-height: 100px; text-align: center; background-color: #2aabd2; margin-right: 10px; } p{ display: none; margin-left: 20px; } p.active{ display: block; } </style> </head> <body> <ul> <!--而void(0)表示一个空的方法，也就是不执行js函数。点击也不会回到网页顶部--> <li><a href="javascript:void(0)">alex</a></li> <li><a href="javascript:void(0)">alex2</a></li> <li><a href="javascript:void(0)">alex3</a></li> <li><a href="javascript:void(0)">alex4</a></li> </ul> <p>alex1</p> <p>alex2</p> <p>alex3</p> <p>alex4</p> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { $('a').click(function () { $(this).css('background','blue').parent('li').siblings('li').children('a').css('background','transparent'); // 得获取到点击的 dom的索引 通过 index()方法获取 注意 这个要找的是有兄弟元素的索引 var i = $(this).parent('li').index(); // addClass() removeClass() $('p').eq(i).addClass('active').siblings('p').removeClass('active'); }); }) </script> </body> </html>
基本动画
1、显示 隐藏 开关式显示隐藏
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
#### 显示动画 方式一： ``` $("div").show(); ``` 解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过`display: block;`实现的。 方式二： ``` $('div').show(3000); ``` 解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。 方式三： ``` $("div").show("slow"); ``` 参数可以是： - slow 慢：600ms - normal 正常：400ms - fast 快：200ms 解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。 方式四： ``` //show(毫秒值，回调函数; $("div").show(5000,function () { alert("动画执行完毕！"); }); ``` 解释：动画执行完后，立即执行回调函数。 **总结：** 上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
-----------------------------------------------------------------------------------
# 隐藏动画
方式参照上面的show()方法的方式。如下：
```
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
```
**开关式显示隐藏动画**
```
$('#box').toggle(3000,function(){});
```
显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 100px; height: 100px; background-color: #c7254e; display: none; float: bottom; } </style> </head> <body> <button class="show">显示</button> <button class="hide">隐藏</button> <button id="toggle">开关式动画</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> // 入口函数 $(function () { //显示动画 // show(动画的时间，fn) // 默认是normal 400ms slow 600ms fast 200ms $('.show').click(function () { $('.box').show(3000); }); // 动画结束后执行调用 $('.show').click(function () { $('.box').show('slow',function () { // 动画结束后执行回调函数 $(this).text('python'); }); }); // 隐藏动画 $('.hide').click(function () { $('.box').hide() }); //开关式动画 $('#toggle').click(function () { $('.box').toggle() }); }) </script> </body> </html>
2、滑入、滑出
#### 滑入和滑出 **1、滑入动画效果**：（类似于生活中的卷帘门） ``` $(selector).slideDown(speed, 回调函数); ``` speed下拉上拉的速度，以毫秒为单位
解释：下拉动画，显示元素。 注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp） **2、滑出动画效果：** ``` $(selector).slideUp(speed, 回调函数); ``` 解释：上拉动画，隐藏元素。 **3、滑入滑出切换动画效果：** ``` $(selector).slideToggle(speed, 回调函数);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; display: none; } </style> </head> <body> <button id="slideDown">卷帘门下拉</button> <button id="slideUp">卷帘门上拉</button> <button id="toggleSlide">开关式动画</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //入口函数 $(function () { // 下拉 $('#slideDown').click(function () { $('.box').slideDown() }); // 上拉 $('#slideUp').click(function () { $('.box').slideUp() }); // 开关式动画 $('#toggleSlide').click(function () { $('.box').stop().slideToggle() }) }) </script> </body> </html>
3、淡入淡出动画
1、淡入动画效果： ``` $(selector).fadeIn(speed, callback); ``` 作用：让元素以淡淡的进入视线的方式展示出来。 2、淡出动画效果： ``` $(selector).fadeOut(1000); ``` 作用：让元素以渐渐消失的方式隐藏起来 3、淡入淡出切换动画效果： ``` $(selector).fadeToggle('fast', callback); ``` 作用：通过改变透明度，切换匹配元素的显示或隐藏状态。 参数的含义同show()方法。
------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; display: none; } </style> </head> <body> <button id="fadeIn">淡入动画</button> <button id="fadeOut">淡出动画</button> <button id="fadeToggle">开关式动画</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //入口函数 $(function () { //淡入动画 $('#fadeIn').click(function () { $('.box').fadeIn(1000) }); //淡出动画 $('#fadeOut').click(function () { $('.box').fadeOut(1000) }); //开关式动画 $('#fadeToggle').click(function () { $('.box').fadeToggle(1000,function () { $(this).text('执行回调函数') }) }) }) </script> </body> </html>
4、自定义动画
语法：
```
$(selector).animate({params}, speed, callback);
```
作用：执行一组CSS属性的自定义动画。
- 第一个参数表示：要执行动画的CSS属性（必选）
- 第二个参数表示：执行动画时长（可选）
- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
-------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <div></div> <button>动画吧</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // animate({队列属性} 时间 回调函数fn) $('button').click(function () { var json={ width:'500px', height:'500px' }; var json2 = { width: 0, height: 0, top: 10, left: 1000 }; $('div').stop().animate(json,2000,function(){ $('div').stop().animate(json2,1000,function(){ alert('已添加购物车') }) }); }) }) </script> </body> </html>
5、下拉菜单
效果图：
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--去掉li 的 点--> <style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; } /*这里要注意 万不可影响到最后一级的li*/ div>ul>li{ float: left; padding-left: 25px; } div{ width: 330px; height: 30px; margin: 0 auto; background-color: pink; } div ul li ul{ display: none; background-color: red; } a{ width: 100px; height: 30px; background-color: #4cae4c; text-align: center; /*设置行高使字体居中*/ line-height: 30px; text-decoration: none; } </style> </head> <body> <div> <ul> <li> <a href="javascript:void(0);">一级菜单1</a> <ul> <li>一级菜单2</li> <li>一级菜单3</li> <li>一级菜单4</li> <li>一级菜单5</li> </ul> </li> <li> <a href="javascript:void(0);">二级菜单1</a> <ul> <li>二级菜单2</li> <li>二级菜单3</li> <li>二级菜单4</li> <li>二级菜单5</li> </ul> </li> <li> <a href="javascript:void(0);">三级菜单1</a> <ul> <li>三级菜单2</li> <li>三级菜单3</li> <li>三级菜单4</li> <li>三级菜单5</li> </ul> </li> </ul> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> //入口函数 $(function () { //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。 var jqli = $("div ul>li"); //绑定事件 mouseenter 鼠标进入 mouseleave 鼠标离开吧 // js onmouseover onmouseout jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000); }); }); </script> </body> </html>
jQuery的属性操作
query对象有它自己的属性和方法，我们先研究一下jquery的属性操作。
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
-------------------------------------------------------------------------------------------------
/*1.样式属性操作 css('color') 获取值
css('color','red') 设置单个值
css({
key1:value1,
key2:value2
});
key 既可以是驼峰 又可以是margin-left 要给margin-left 加引号
2. 标签的属性操作
attr(key) 获取属性值
attr(key,value) 设置单个值
attr({key1:value1,key2:value2});设置多个值
3.DOM对象属性操作
4.类样式属性操作
addClass() removeClass() toggleClass()
5.对值的操作
text() html() val()
innerText
innerHTML
value
6.对DOM的操作 CRUD
*/
1、对html属性操作
#### 对html属性操作 ##### attr() 设置属性值或者 返回被选元素的属性值 ```javascript //获取值：attr()设置一个属性值的时候 只是获取值 var id = $('div').attr('id') console.log(id) var cla = $('div').attr('class') console.log(cla) //设置值 //1.设置一个值 设置div的class为box $('div').attr('class','box') //2.设置多个值，参数为对象，键值对存储 $('div').attr({name:'hahaha',class:'happy'}) ``` ##### removeAttr() 移除属性 ```javascript //删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //删除多个属性 $('#box').removeAttr('name class'); ``` ##### prop() prop() 方法设置或返回被选元素的属性和值。 当该方法用于**返回**属性值时，则返回第一个匹配元素的值。 当该方法用于**设置**属性值时，则为匹配元素集合设置一个或多个属性/值对。 语法： 返回属性的值： ```javascript $(selector).prop(property) ``` 设置属性和值： ```javascript $(selector).prop(property,value) ``` 设置多个属性和值： ```javascript $(selector).prop({property:value, property:value,...}) ```
---------------------------------------------------------------------------------------------
3、类样式操作：
#### 对标签class的操作 ##### addClass（添加多个类名） 为每个匹配的元素添加指定的类名。 ```javascript $('div').addClass("box");//追加一个类名到原有的类名 ``` 还可以为匹配的元素添加多个类名 ```javascript $('div').addClass("box box2");//追加多个类名 ``` ##### removeClass 从所有匹配的元素中删除全部或者指定的类。 移除指定的类（一个或多个） ```javascript $('div').removeClass('box')； ``` 移除全部的类 ```javascript $('div').removeClass(); ``` 可以通过添加删除类名，来实现元素的显示隐藏
-------------------------------------------------------
##### toggleClass
如果存在（不存在）就删除（添加）一个类。
语法：toggleClass('box')
```javascript
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
`
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red; } .hidden{ display: none; } </style> </head> <body> <button id="btn">隐藏</button> <div class="box"></div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { var isShow=true; $('#btn').click(function () { // 第一种方式 通过控制样式属性对盒子 显示、隐藏 // if(isShow){ // $('.box').css('display','none'); // isShow=false; // $(this).text('显示'); // }else{ // $('.box').css('display','block'); // isShow=true; // $(this).text('隐藏'); // } // }) // // 2.通过控制类名 addClass() removeClass() // 记住 如果是操作类名 一定要使用addClass 和removeClass 不要使用attr() // addClass（添加多个类名） if (isShow) { $('.box').addClass('hidden'); isShow=false; $(this).text('显示'); }else { $('.box').removeClass('hidden'); isShow=true; $(this).text('隐藏'); } }) }) </script> </body> </html>
-------------------------------------------------------------
4、对值的操作
#### 对值的操作 ##### html() 获取值： 语法; html() 是获取选中标签元素中所有的内容 ```javascript $('#box').html(); ``` 设置值：设置该元素的所有内容 会替换掉 标签中原来的内容 ```javascript $('#box').html('<a href="https://www.baidu.com">百度一下</a>'); ``` ##### text() 获取值： text() 获取匹配元素包含的文本内容 语法： ```javascript $('#box').text(); ``` 设置值： 设置该所有的文本内容 ```javascript $('#box').text('<a href="https://www.baidu.com">百度一下</a>'); ``` 注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中 ##### val() 获取值： val()用于表单控件中获取值，比如input textarea select等等 设置值： ```javascript $('input').val('设置了表单控件中的值')；
------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="box"> wusir </p> <div class="box"> 女盆友 <span>alex</span> </div> <input type="text" value="123"> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // 只获取文本的内容 // trim()清除前后的空格 console.log($('p').text().trim()); //设置文本内容 $('#box').text('<h2>武sir 女朋友</h2>'); // 获取标签和文本的内容 html() innerHTML // console.log($('.box').html().trim()); // 设置 // $('.box').html('<h2>我女pengyou 呢</h2>'); // val() value console.log($('input').val()); // 清空input输入框中的内容 $('input').val(''); $('input').val('哈哈哈哈'); }) </script> </body> </html>
4、对DOM文档的操作
4.1、插入操作
##### 一.插入操作 ###### 知识点1：父子之间 语法： ``` 父元素.append(子元素) ``` 解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素 代码如下： ``` var oli = document.createElement('li'); oli.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); $('ul').append(oli); $('ul').append($('#app')); ``` PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。 ###### 知识点2：父子之间 语法： ``` 子元素.appendTo(父元素) ``` 解释：追加到某元素 子元素添加到父元素 ```javascript $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active'); ``` PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素 ###### 知识点3：父子之间 语法： ```javascript 父元素.prepend(子元素)； ``` 解释：前置添加， 添加到父元素的第一个位置 ```javascript $('ul').prepend('<li>我是第一个</li>'); ``` ###### 知识点4：父子之间 语法： ```javascript 子元素.prependTo(父元素)； ``` 解释：前置添加， 添加到父元素的第一个位置 ```javascript $('<a href="#">路飞学诚</a>').prependTo('ul'); ``` ###### 知识点5：兄弟之间 语法： ```javascript 兄弟元素.after(要插入的兄弟元素)； 要插入的兄弟元素.inserAfter(兄弟元素)； ``` 解释：在匹配的元素之后插入内容 ```javascript $('ul').after('<h4>我是一个h3标题</h4>'); $('<h5>我是一个h2标题</h5>').insertAfter('ul'); ``` ###### 知识点6：兄弟之间 语法： ```javascript 兄弟元素.before(要插入的兄弟元素)； 要插入的兄弟元素.inserBefore(兄弟元素)； ``` 解释：在匹配的元素之前插入内容 ```javascript $('ul').before('<h3>我是一个h3标题</h3>'); $('<h2>我是一个h2标题</h2>').insertBefore('ul');
4.2、替换操作
###### 知识点1： 语法： ``` $(selector).replaceWith(content); ``` 将所有匹配的元素替换成指定的string、js对象、jquery对象。 ``` //将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>'); //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app')); ``` ###### 知识点2： 语法： ``` $('<p>哈哈哈</p>').replaceAll('h2'); ``` 解释：替换所有。将所有的h2标签替换成p标签。 ``` $('<br/><hr/><button>按钮</button>').replaceAll('h4'); ```
4.3、删除操作
###### 知识点1： 语法： ``` $(selector).remove(); ``` 解释：删除节点后，事件也会删除（简言之，删除了整个标签） ``` $('ul').remove(); ``` ###### 知识点2： 语法： ``` $(selector).detach(); ``` 解释：删除节点后，事件会保留 ``` var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn) ``` ###### 知识点3： 语法： ``` $(selector).empty(); ``` 解释：清空选中元素中的所有后代节点 ``` //清空掉ul中的子元素，保留ul $('ul').empty()
4.4、停止动画
``` $(selector).stop(true, false); ``` **里面的两个参数，有不同的含义。** 第一个参数： - true：后续动画不执行。 - false：后续动画会执行。 第二个参数： - true：立即执行完成当前动画。 - false：立即停止当前动画。 PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
----------------------------------------------------------------
用了stop函数，再执行动画前，先停掉之前的动画。
4.4、操作input的value属性-下拉列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <select> <option>alex</option> <option>wusir</option> <option selected="">黑girl</option> </select> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 原生js onchange // jquery change() // 设置值 加载页面时默认选中第一个 $('input[type=radio]').eq(0).attr('checked',true); $('input[type=radio]').change(function(){ alert(1); // 获取值 on console.log($(this).val()); console.log($('input[type=radio]:checked').val()) }); // 加载页面时 获取值 console.log($('select option:selected').text()); // 加载页面时 获取选中项的索引 console.dir($('select').get(0).selectedIndex); // 设置select 的值 // 加载页面时 设置第二个当做选中值 // $('select option').get(1).selected = true; // selectedIndex 是select 对象的属性 // $('select').get(0).selectedIndex = 0; // index() 只读的 不能使用这个方法 来设置值 console.log($('select option:selected').index()); $('select').change(function(){ // 1.获取选中项的值 console.log($('select option:selected').text()); // 2.获取选中项的值 console.log($('select').find('option:selected').text()); // 3.获取选中项的索引 $('select').get(0) 将jquery对象转化 js对象 console.log($('select').get(0).selectedIndex); console.log($('select option:selected').index()); }); }); </script> </body> </html>
4.5、jQuery的位置信息
#### 一、宽度和高度 ##### 获取宽度 ``` .width() ``` 描述：为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。`.css(width)` 和 `.width()`之间的区别是后者返回一个没有单位的数值（例如，`400`），
前者是返回带有完整单位的字符串（例如，`400px`）。当一个元素的宽度需要数学计算的时候推荐使用`.width()` 方法 。 ##### 设置宽度 ``` .width( value ) ``` 描述：给每个匹配的元素设置CSS宽度。 ##### 高度 ##### 获取高度 ``` .height() ``` 描述：获取匹配元素集合中的第一个元素的当前计算高度值。 - 这个方法不接受任何参数。 ##### 设置高度 #### 二、innerHeight()和innerWidth() ##### 获取内部宽 ``` .innerWidth() ``` 描述：为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。 ps:这个方法不适用于`window` 和 `document`对象，对于这些对象可以使用`.width()`代替。 ##### 设置内部宽 ``` .innerWidth(value); ``` 描述： 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px） ##### 获取内部高 ``` .innerHeight(); ``` 描述：为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。 ps:这个方法不适用于`window` 和 `document`对象，对于这些对象可以使用`.height()`代替。 ##### 设置内部宽 ``` .innerHeight(value); ``` 描述： 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px） #### 三、outerWidth和outerHeight() ##### 获取外部宽 ``` .outerWidth( [includeMargin ] ) ``` 描述：获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin） - includeMargin (默认: `false`) 类型： `Boolean` 一个布尔值，表明是否在计算时包含元素的margin值。 - 这个方法不适用于`window` 和 `document`对象，可以使用`.width()`代替 ##### 设置外部宽 ``` .outerWidth( value ) ``` 描述： 为匹配集合中的每个元素设置CSS外部宽度。 ##### 获取外部宽 ``` .outerHeight( [includeMargin ] ) ``` 描述：获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin） - includeMargin (默认: `false`) 类型： `Boolean` 一个布尔值，表明是否在计算时包含元素的margin值。 - 这个方法不适用于`window` 和 `document`对象，可以使用`.width()`代替 ##### 设置外部高 ``` .outerHeight( value ) ``` 描述： 为匹配集合中的每个元素设置CSS外部高度。 #### 四、偏移 ##### 获取 ``` .offset() ``` 返回值：[Object](http://www.shouce.ren/api/view/a/13081#articleHeader15) 。`.offset()`返回一个包含`top` 和 `left`属性的对象 。 描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。 注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 `visibility:hidden`，那么我们依然可以取得它的坐标 ##### 设置 ``` .offset( coordinates ) ``` 描述： 设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。 - coordinates 类型: [Object](http://www.shouce.ren/api/view/a/13081#articleHeader25) 一个包含`top` 和 `left`属性的对象，用整数指明元素的新顶部和左边坐标。 例子： ``` $("p").offset({ top: 10, left: 30 }); ``` #### 五、滚动距离 ##### 水平方向获取： ``` .scrollLeft() ``` 描述：获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度） ##### 水平方向设置： ``` .scrollLeft( value ) ``` 描述：设置每个匹配元素的水平方向滚动条位置。 ##### 垂直方向获取： ``` .scrollTop() ``` 描述：获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度） ##### 垂直方向获取： ``` .scrollLeft( value ) ``` 描述：设置每个匹配元素的垂直方向滚动条位置。
------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ position: relative; top: 10px; } .box{ width: 200px; height: 200px; padding: 10px; border: 1px solid red; position: absolute; top: 100px; left: 200px; } </style> </head> <body style="height: 2000px"> <div class="father"> <div class="box"></div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // width() heigth() // 获取宽 //console.log($('.box').width()); // 设置宽 //$('.box').width('300'); // 内部宽 和内部 innerWidth() innerHeight 包含内部宽+padding 不包含border //console.log($('.box').innerWidth());//220 // 改变的是内部的宽度 不去修改padding和border //$('.box').innerWidth('500'); //外部宽 outerWidth() outerHeight 包含内部宽 + padding + border //$('.box').outerWidth();//222 // 它的返回值 是一个对象 对象中包含了top和left属性 // 距离页面顶部的距离 与父相子绝定位没有任何关系 //console.log($('.box').offset().top); //console.log($('.box').offset().left); // 它的属性是只读 // $('.box').offset().top // 滚动的偏移的距离 ===》 页面卷起的高度 和宽度 $(document).scrollTop(110); // 监听文档的滚动事件 jquery的事件方法 $(document).scroll(function(){ console.log($(this).scrollTop()); var scrollTopHeight = $(this).scrollTop(); var boxOffsetTop = $('.box').offset().top; if (scrollTopHeight > boxOffsetTop ) { $('.box').stop().hide(1000); } }) }); </script> </body> </html>
------------------------------------------------------------------------------------------------------
JS的事件流（important）
事件的概念
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。
想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
### 什么是事件流 事件流描述的是从页面中接收事件的顺序 1、DOM事件流 “DOM2级事件”规定的事件流包括三个阶段： ① 事件捕获阶段； ② 处于目标阶段； ③ 事件冒泡阶段
---------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id='btn'>按钮</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> var oBtn = document.getElementById('btn') // oBtn.onclick = function(){ // alert(1); // }; // 如果是true 则表示有捕获 oBtn.addEventListener('click', function() { console.log('按钮处于捕获阶段'); alert(1); }, true); document.body.addEventListener('click', function() { console.log('body处于捕获阶段'); }, true); document.documentElement.addEventListener('click', function() { console.log('html处于捕获阶段'); }, true); document.addEventListener('click', function() { console.log('文档处于捕获阶段'); }, true); oBtn.addEventListener('click', function() { console.log('按钮处于冒泡阶段'); }, false); document.body.addEventListener('click', function() { console.log('body处于冒泡阶段'); }, false); document.documentElement.addEventListener('click', function() { console.log('html处于冒泡阶段'); }, false); document.addEventListener('click', function() { console.log('文档处于冒泡阶段'); }, false) </script> </body> </html>
当我们点击这个btn的时候，看看页面都输出了什么：点击后 先捕获再冒泡阶段
----------------------------------------------------------------------------------------
1、addEventListener addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 2、document、documentElement和document.body三者之间的关系： document代表的是整个html页面； document.documentElement代表的是<html>标签； document.body代表的是<body>标签； 接着我们就来聊聊上面的例子中输出的结果为什么是这样： 在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:
-------------------------------------
首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。
接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。
需要注意的点：由于老版本的浏览器不支持事件捕获，因此在实际开发中需要使用事件冒泡，在由特殊需要时再使用事件捕获
补充知识了解即可：
1、IE中的事件流只支持“事件冒泡”，但是版本到了IE9+以后，实现了“DOM2级事件”，也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。
2、在DOM事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被看成“冒泡阶段”的一部分。然后，“冒泡阶段”发生，事件又传播回文档。
jquery的常用事件（important）
jquery常用的事件，大家一定要熟记在心
----------------------------------------------------------------------------------------------------------------------------------------------
事件冒泡的处理
// 阻止事件冒泡 避免$('.father') 被执行 event.stopPropagation(); --------------------------------------------------------------- // 既阻止了默认事件 又阻止了冒泡 return false;
------------------------------------------------------------------------------
冒泡事件的处理
事件对象event
在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,
就可以通过event的属性target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻
止.以下是event对象的一些属性和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>按钮</button> <input type="text" name="user" value="123"> <p class="content"></p> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // jquery中没有监听输入框输入内容的方法 // $('input').change(function(e){ // console.log(e.target.value); // }) $('.content').text($('input').val()); // 原生oninput的事件 // 双向的数据绑定 单向数据绑定（data==>view） $('input')[0].oninput = function(e){ console.log(e.target.value); $('.content').text(e.target.value); }; $('button').click(function(e){ // currentTaget 当前事件的目标对象 console.log(e.currentTarget); // 事件的触发对象 js对象 console.log(e.target); console.dir(e.target.innerText); console.log($(e.target).text()); console.log($(this).text()); console.log(this===e.currentTarget); console.log(this===e.target); // 在用事件的时候 99%都需要 阻止冒泡 e.stopPropagation(); }); $('body').click(function(e){ // console.log(e.currentTarget); console.log(e.target); console.log(this===e.currentTarget); console.log(this===e.target); }); $('html').click(function(e){ // console.log(e.currentTarget); console.log(e.target); console.log(this===e.currentTarget); console.log(this===e.target); }); }); </script> </body> </html>
------------------------------------------------------------------------------------------------------------------------------------------------------------
jQuery单双击事件
// 两次 单击中间的时间差是300毫秒 ，如果小于300毫秒 表示双击
// 遇到的问题：是双击 调用了两次单击
-----------------------------------------------------
测试代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>按钮</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 两次 单击中间的时间差是300毫秒 ，如果小于300毫秒 表示双击 // 遇到的问题：是双击 调用了两次单击 var timer = null; var count = 0; // 解决这个单双击冲突问题 $('button').click(function(event) { // console.log(1); console.log(timer); // 取消第一次延时未执行的 方法 clearTimeout(timer); // 如果是双击事件 要阻止 两次单击事件的调用 // 定时器 timer = setTimeout(function(){ count++; // console.log(count); console.log('单击了'); },300) }); // 双击 $('button').dblclick(function(event) { // 取消的是第二次延时未执行方法 console.log(timer); clearTimeout(timer); console.log('双击了'); }); }); </script> </body> </html>
jQuery鼠标移入、移除事件
---------------------------------
// 鼠标穿过被选元素和被选元素的子元素 会触发此事件 $('.father').mouseover(function(event) { console.log('移入了'); }); $('.father').mouseout(function(event) { console.log('移出了');
从1到2 移入；从2到3 ，先移出2再移入3
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------
// 鼠标只穿过被选元素会触发此事件 $('.father').mouseenter(function(event) { console.log('进入了'); }); $('.father').mouseleave(function(event) { console.log('离开了'); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .father{ width: 200px; height: 200px; background-color:red; } .child{ width: 50px; height: 50px; background-color: green; } </style> </head> <body> <div class="father"> <p class="child"> alex </p> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 鼠标穿过被选元素和被选元素的子元素 会触发此事件 // $('.father').mouseover(function(event) { // console.log('移入了'); // }); // $('.father').mouseout(function(event) { // console.log('移出了'); // }); // 鼠标只穿过被选元素会触发此事件 $('.father').mouseenter(function(event) { console.log('进入了'); }); $('.father').mouseleave(function(event) { console.log('离开了'); }); }); </script> </body> </html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
小米购物车--类似下拉菜单
-------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } .shopCart { position: relative; width: 100px; height: 40px; background-color: red; line-height: 40px; } .content { position: absolute; top: 40px; width: 300px; height: 200px; background-color: green; } </style> </head> <body> <div class="shopCart"> <span>购物车</span> <div class="content" style="display: none;"></div> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { /* $('.shopCart').mouseover(function(){ $(this).children('.content').slideDown(500); }); $('.shopCart').mouseout(function(){ console.log(111); $(this).children('.content').slideUp(500); }) */ // mouseenter 和 mouseleave /* $('.shopCart').mouseenter(function() { $(this).children('.content').slideDown(500); }); $('.shopCart').mouseleave(function() { console.log(111); $(this).children('.content').slideUp(500); }) */ // 合成事件 mouseenter mouseleave //slideDown(speed) 方法通过使用滑动效果，显示隐藏的被选元素。 $('.shopCart').hover(function() { $(this).children('.content').slideDown(500); }, function() { /* Stuff to do when the mouse leaves the element */ $(this).children('.content').slideUp(500); }); }); </script> </body> </html>
鼠标聚焦、失去焦点--键盘按下、弹起
---------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------
鼠标的焦点、键盘按键事件
jQuery表单事件
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://www.baidu.com/s" method="get"> <input type="text" name="wd"> <input type="submit" value="?"> </form> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // 文本选中的时候会调用 $('input[type=text]').select(function(){ console.log('内容选中了'); }); // 原生js的onsubmit事件 $('form').submit(function(e){ e.preventDefault(); // 未来 自己去发请求 往百度发请求 ajax技术 console.log('form被submit了'); }); }); </script> </body> </html>
---------------------------------------------------------------------
事件委托
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，
这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；
二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）
。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就
是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。 **原理：** 利用冒泡的原理，把事件加到父级上，触发执行效果。 **作用：** 1.性能要好 2.针对新创建的元素，直接可以拥有事件 **事件源 :** 跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的 **使用情景：** •为DOM中的很多元素绑定相同事件； •为DOM中尚不存在的元素绑定事件；
-----------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>alex</li> <li class="item">wusir</li> </ul> <button>添加</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ /* $('ul>li').click(function(){ alert($(this).text()); }); */ // 事件委托 （看时机 如果是未来追加的元素 建议使用 事件委托来绑定事件） // 原理： 利用冒泡的原理，把事件加到父级上，触发执行效果。 // 点击 li $('ul').on('click','li',function(e){ alert($(this).text()); }); // 未来 动态的 往ul中追加了li标签 // 未来追加的li标签 自己完成不了click事件，那么这个时候考虑“事件委托(代理)” $('button').click(function(event) { $('ul').append('<li>黑gril</li>') }); }); </script> </body> </html>
---------------------------------------------------------------------------
BS端的那些事
BS即Browser/Server(浏览器/服务器)结构，就是只安装维护一个服务器，而客户端采用浏览器运行软件。
cs与bs区别
二、区别： 1、开发维护成本 cs开发维护成本高于bs。因为采用cs结构时，对于不同的客户端要开发不同的程序，而且软件安装调试和升级都需要在所有客户机上进行。 bs，只需要将服务器上的软件版本升级，然后从新登录就可以了。 2、客户端负载 cs客户端负载大。cs客户端不仅负责和用户的交互，收集用户信息，而且还需要通过网络向服务器发出请求。 bs把事务处理逻辑部分交给了服务器，客户端只是负责显示。 3、安全性 cs安全性高。cs适用于专人使用的系统，可以通过严格的管理派发软件。 bs使用人数多，不固定，安全性低。
--------------------------------------------------------------------------------
925
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
