1、jquery与js的区别
（1）javascript的缺点
书写繁琐，代码量大
代码复杂
动画效果，很难实现。使用定时器 各种操作和处理(2) JavaScript和jquery的定义
- Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
- jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
- jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法
（3）区别
# 1 DOM文档加载的步骤 1.解析HTML结构。 2.加载外部脚本和样式表文件。 3.解析并执行脚本代码。 4.DOM树构建完成。 $(document).ready(function(){}) / $(function(){}) 5.加载图片等外部文件。 6.页面加载完毕。 window.onload() #2 执行时间不同 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 #3 编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行 #4 简化写法不同 window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){});
（4）juqery的引入与使用
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
$(function () {
})
</script>
2、jquery选择器
1.基本选择器
//1.标签选择器 $($('h1')[0]).click(function () { $(this).css('background-color','red'); $(this).css('font-size','22px'); $(this).css('line-height','22px'); }); //2.id选择器 $('#old').click(function () { $(this).css('color','green'); }); //3.class选择器 $('.box1').click(function () { $(this).css('font-size','30px'); }); //4.通配符选择器 * 使用不是很频繁 //$('*').html(''); 清空整个页面的dom元素
2.层级选择器
//1.后代选择器 $('ul p').click(function () { $(this).css('color','red') }); //2.子代选择器 $('ul>li').click(function () { $(this).css('font-size','22px') }); //3.毗邻选择器 匹配该元素紧邻的下一个兄弟元素 $('ul+h2').click(function () { $(this).css('background-color','red') }); //4.兄弟选择器， 匹配的元素后面的所有兄弟元素 $('ul~h3').click(function () { $(this).css('color','blue'); });
3.基本过滤选择器
//1.获取first last元素 $('li:first').css('font-size','43px'); $('li:last').css('font-size','43px'); //2.eq gt lt 选中索引值为1的元素 * ，大于，小于 $('li:eq(1)').css('font-size','43px'); $('li:gt(1)').css('font-size','13px'); $('li:lt(1)').css('font-size','23px'); //3.奇数偶数 $('li:odd').css('background-color','pink'); $('li:even').css('background-color','orange');
4.属性选择器
//1. 标签名[属性名] 查找所有含有id属性的该标签签名的元素 $('li[id]').css('color','red'); //2. 匹配给定的属性值是active的元素 $('li[class=active]').css('color','red'); //3. $('li[class^=a]').css('color','red'); //4. $('li[class$=e]').css(); //5. 匹配给定的属性是以包含某些值的元素 $('li[class*=btn]').css()
解释：
标签名[属性名]，查找所有含有id属性的该标签名的元素
匹配给定的属性 是what值 [attr=value] 匹配给定的属性是某个特定值的元素
没有class 也会发生变化，[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
匹配给定的属性是以某些值开始的元素 ^
匹配给定的属性是以某些值结尾的元素 $
匹配给定的属性是以包含某些值的元素 *
5.筛选选择器/筛选方法
（1）each遍历方法
1.each 遍历 $('ul').children().each(function (index,ele) { // console.log(index,ele); var isDanger = $(this).hasClass('danger'); if(isDanger){ $(this).css('color','red'); }else{ $(this).css('font-size','28px'); } });
（2）父兄子
$($('h1')[2]).click(function () {
//1.获取父级节点
$(this).parent(); //一个父亲节点
$(this).parents(); //所有父辈节点
//2.获取兄弟节点
$(this).siblings(); //所有的兄弟节点
$(this).prev(); //前一个兄弟节点
$(this).prevAll(); //all 前一个兄弟节点
$(this).next(); //下一个兄弟节点
$(this).nextAll(); //all 下一个兄弟节点
//3.获取儿子，后代节点
$(this).parent().children('h1').css('font-size','22px'); //所有的儿子节点
$(this).parent().find('h1').css('color','red'); //后代节点
//4.指定eq last first
$(this).parent().children().eq(2);
$(this).parent().children().first();
$(this).parent().children().last();
//5.指定标签 h1
$(this).parent().children('h1');
$(this).parents('body').children('h1');
})
解释：
获取第n个元素 数值从0开始 .eq()
获取第一个元素 .first()
获取最后一个元素 .last()
获取父亲元素 .parent()
选择所有的兄弟元素 .siblings()
查找所有的后代元素 .find()
3、jquery对象和Dom对象转换
#Dom对象--> jquery对象 var box = document.getElementById('box'); console.log($(box)); #jquery对象--> DOM对象 $('button')[0] $('button').get(0) #注： Dom对象 box.onclick = function(){} jquery对象 $(box).click(function(){})
4、效果
1. 隐藏显示 hide show toggle
show: 显示隐藏的匹配元素 语法：show(speed,callback) 参数：
1.speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
2.callback:在动画完成时执行的函数，每个元素执行一次
hide: hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。
可以通过show（）和hide（）方法，来动态控制元素的显示隐藏
toggle: 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$('#box').css('display','block');
$('#box').show('slow',function(){}) // slow normal fast
$('#box').hide(2000,function(){})
$('#box').toggle(3000,function(){})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box1 { border: 1px solid red; width: 70px; height: 70px; } </style> </head> <body> <div id="box1"></div> <input type="button" id="btn" value="隐藏"> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> //隐藏显示 hide show toggle $(function () { $('#btn').click(function () { // $(this).prev().toggle(); }); var flag = 1 $('#btn').click(function () { if (flag) { $(this).prev().hide(3000) $(this).val('显示'); flag = 0 }else{ $(this).prev().show(2000) $(this).val('隐藏') flag = 1 } }) }) </script> </html>
2. 盒子变高变低 slideUp slideDown slideToggle
slideDown: 通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数.
用法和参数跟上面类似.
slideUp: 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
用法和参数跟上面类似.
slideToggle: 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数.
跟toggle用法类似.
$('#box').slideDown(2000);
$('#box').slideUp(3000);
$('#box').slideToggle('slow');
3.淡入淡出 fadeIn fadeOut fadeTo fadeToggle
fadeIn: 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut: 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo: 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeToggle：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
实现淡入淡出的效果就是使用此方法。
$("p").fadeIn("900"); //用900毫秒时间将段落淡入
$("p").fadeOut("900"); //用900毫秒时间将段落淡出
$("p").fadeToggle("900"); //用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒时间将段落的透明度调整到0.6
4、动画 animate delay stop
animate：用于创建自定义动画的函数。
animate(params,[speed],[fn])。
params:一组包含作为动画属性和终值的样式属性和及其值的集合。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
stop: 停止所有在指定元素上正在运行的动画。
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true，则清空队列。可以立即结束动画。默认是false
设置成false，让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
delay: 用来做延迟的操作。
delay(1000)，一秒之后做后面的操作。
// jquery 链式调用 <script type="text/javascript"> $(function () { //动画 animate delay stop $('#btn').click(function () { $(this).prev().animate({'width':'200px','height':'200px'},3000) $(this).prev().animate({'margin-left':'20px'}).delay(200).animate({'margin-top':'30px'}) }); $('#btn1').click(function () { $(this).prevAll('div').stop() }) }) </script>
5、jquery的属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作。
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val():用于表单控件中获取值，比如input textarea select等等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单个标签 修改css属性</title> <style type="text/css"> .active { background-color: pink; } .box1 { color: orange; } .font1 { font-size: 22px; } </style> </head> <body> <h1 id="Luffycity" class="box1">路飞学城</h1> <input type="button" id="btn" value="点击"> <h2 id="oldBoy">老男孩</h2> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { $("#Luffycity").click(function () { //1. html属性操作 attr() //1.1 获取标签的 各种属性值 ： attr() 如果有1个参数，表示获取值 $(this).attr('id'); $(this).attr('class'); $(this).attr('title'); //1.2 设置标签的属性值class id name： attr() 如果有2个参数，表示设置值 $(this).attr('class', 'active'); $(this).attr({'id': 'box2', 'name': 'name11'}); //如果设置多个类名，不能使用attr //1.3 删除1个或多个属性 $(this).removeAttr('id'); $(this).removeAttr('name title'); // 2、DOM属性操作 prop 可以设置没有的属性 //attr 只能操作标签自带的属性， //2.1 获取该元素的class值 $(this).prop('class'); //2.2 设置值 $(this).prop({'title': 'img1', 'title22': 'active'}); //2.3 删除dom对象的title属性 $(this).removeProp('title', 'title2'); // 3、类样式操作 addClass() removeClass() toggleClass（）添加类，删除类 //3.1 添加一个或多个 class $(this).addClass('box1'); $(this).addClass('box1 font1'); //添加多个 //3.2 删除一个或多个class $(this).removeClass('font1'); $(this).removeClass(); //移除所有的 //3.3.反复添加删除class属性值 $(this).toggleClass('active'); ///4、值操作 // 4.1 获取值 $(this).text(); //获取标签的text 路飞学城 $(this).html(); //获取标签的里面的html 路飞学城 $("#btn").val(); //获取input标签的 val 点击 //4.2 设置值 $(this).html('路飞学城2'); $(this).text('路飞学城22'); $(this).html("<span>我是一个span</span>"); $("#btn").val('设置了value'); //表单控件使用的一个方法 }); }) </script> </html>
6、from表单中的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { margin: 20px; } </style> </head> <body> <div> <input type="radio" value="1" name="sex">男 <input type="radio" value="2" name="sex" checked>女 <input type="radio" value="3" name="sex">other </div> <div> <input type="checkbox" name="hobby" value="11" checked>game <input type="checkbox" name="hobby" value="12" checked>sing <input type="checkbox" name="hobby" value="13">book </div> <div> username:<input type="text" name="username" placeholder="请输入用户名"><br> password:<input type="password" name="password" placeholder="请输入密码"> </div> <div> <button type="reset">重置</button> <button type="submit">提交</button> <button type="button">登录</button> </div> <div> <select name="city" id="city" multiple> <option value="21">shanghai</option> <option value="22" selected>guangzhou</option> <option value="23" selected>beijing</option> <option value="24">xian</option> </select> </div> <div> <textarea name="desc" id="desc" cols="30" rows="10"></textarea> <textarea name="desc" id="desc1" cols="30" rows="10"></textarea> <textarea name="desc" id="desc2" cols="30" rows="10"></textarea> </div> <script src="./jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { //1.单选框 type=radio 设置,获取 value $("input[type=radio]").val(['0']); console.log($('input[type=radio]:checked').val()); $('input[type=radio]').get(1).checked = true //radio第二个框设定为checked //2.复选框 type=checkbox 仅仅获取第一个checked $('input[type=checkbox]').val(['12', '13']); console.log($("input[type=checkbox]:checked").val()); $.each($('input[type="checkbox"]:checked'), function () { // $.each循环下 console.log($(this).val()) }) $('input[type=checkbox]').get(1).checked = true //3.下拉列表select option $('select').val(['23']); //设置 必须用select $('select').val(['21', '22', '23', '24']) $('select[name=city]').val(['21']) console.log($('#city option:selected').val()); //获取值 console.log($('select[id=city]:selected').text()) console.log($(':selected').text()) console.log($('select>option:selected').eq(1).text()) //4. 文本type=text $('input[type=text]').val('试试就是说') console.log($('input[type=text]').val()) //5.button按钮 $('button[type=reset]').html('我要重置了') //6.文本框，禁用输入字段 $("textarea[id='desc']").attr('disabled', true) $("textarea[id='desc1']").attr('readonly', true) }) </script> </html>
7、jquery的文档操作
插入操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点的增删改查</title> </head> <body> <h1>路飞学城0</h1> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { $($('h1')[0]).click(function () { //1.创建新的标签 var oH2 = document.createElement('h2'); var btn = document.createElement('input'); //2.给新标签inner 新的html text值 $(oH2).html('路飞学城2'); $(oH2).text('路飞学城22'); $(oH2).html("<span>我是一个span</span>"); $(btn).val('设置了value'); //3.给新标签添加属性值 id title class name $(oH2).attr('id','Luffycity2'); $(oH2).attr({'title':'luff','class':'active','name':'luff'}); $(oH2).addClass('active2'); //插入操作 //4.父子add的各种方式 append prepend $(this).parent().append(oH2); //追加到子元素的后面 $(oH2).appendTo($(this).parent()); $(this).parent().prepend(oH2); //添加到子元素的最前面 $(oH2).prependTo($(this).parent()); //5.同级兄弟 add元素 before after $(this).after(oH2); $(oH2).insertAfter($(this)); $(this).before(oH2); $(oH2).insertBefore($(this)); }) }) </script> </html>
复制clone(true),替换，删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 id="Luffycity1">路飞学城1</h1> <input type="button" id="btn" value="复制"><br> <input type="button" id="btn2" value="替换"> <input type="text" id="username" value="文本框"><br> <input type="button" id="btn3" value="empty"> <input type="button" id="btn4" value="remove"> <input type="button" id="btn5" value="detach"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script src="jquery-3.2.1.min.js"></script> </body> <script type="text/javascript"> $(function () { // 复制操作： $('#btn').click(function () { $('#Luffycity1').after($('#Luffycity1').clone(true)); // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) $('#Luffycity1').after($('#Luffycity1').clone()); // 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。 }); // 替换操作 $('#btn2').click(function () { $('#username').replaceWith('<span>我是新的文本</span>') // 替换成指定的HTML或DOM元素。 $('<br/><hr/><button>按钮</button>').replaceAll('h4') // 替换掉所有 selector匹配到的元素 }); //删除操作 //1. empty() 只是清空了被选的内容 $('#btn3').click(function () { $('ul').empty(); }); //2.remove() 被选元素也被删掉了，事件就没有了，什么都没有了 $('#btn4').click(function () { $('ul').remove(); }); //3.detach() 移除匹配的节点元素 删除节点后，事件会保留 $('#btn5').click(function () { var btn5 = $(this).detach(); console.log($(btn5)); $('ul').append($(btn5)); }); }) </script> </html>
8、jquery的位置属性
1.position 获取匹配元素,相对父元素得偏移
console.log($('p').position());
console.log($('p').position().top);
console.log($('p').position().left);
2.scrollTop scrollLeft 获取匹配元素,相对滚动条卷起得位置信息
console.log($(document).scrollTop());
console.log($(document).scrollLeft());
//监听文档滚动
$(document).scroll(function () {
console.log($(document).scrollTop());
console.log($(document).scrollLeft());
});
3.offset 获取匹配元素，在当前位置相对于浏览器的偏移
console.log($('#btn').offset());
console.log($('#btn').offset().top);
console.log($('#btn').offset().left);
4.width height 获取元素得宽高
console.log($('#box').width());
console.log($('#box').height());
// 设置宽高
$('#box').width(400);
$('#box').height(400);
5.innerWidth innerHeight
innerWidth = width + 2*padding 不包括边框，获取匹配元素得内部宽度
innerHeight = height + 2*padding 不包括边框，获取匹配元素得内部高度
console.log($('#box').innerWidth());
console.log($('#box').innerHeight());
6.outerWidth outerHeight
outerWidth = width + 2*padding + 2*border 获取匹配元素得外部宽度
outerHeight = height + 2*padding + 2*border 获取匹配元素得外部高度
console.log($('#box').outerWidth());
console.log($('#box').outerHeight());
//监听文档滚动条滚动 $(document).scroll(function () { $(document).scrollTop() > 100 ? $('#gotop').show() : $('#gotop').hide() }) $('#gotop').click(function () { $('html,body').animate({scrollTop: '0'}, 2000) })
9、jquery案例
24-[jQuery]-案例
10、事件概念
1.事件的概念： HTML中与javascript交互是通过事件驱动来实现的， 例如鼠标点击事件、页面的滚动事件onscroll等等。 2.什么是事件流？ 事件流描述的是从页面中接收事件的顺序 3.DOM事件流 ① 事件捕获阶段； ② 处于目标阶段； ③ 事件冒泡阶段；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
};
</script>
</head>
<body>
<a href="javascript:;" id="btn">按钮</a>
</body>
</html>
事件流
1、addEventListener addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 2、document、documentElement和document.body三者之间的关系： document代表的是整个html页面； document.documentElement代表的是<html>标签； document.body代表的是<body>标签；
在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:
11.jquery的常用事件
（1）载入dom
当页面载入成功后再运行的函数事件
$(document).ready(function(){ do something... }); //简写 $(function($) { do something... });
（2）查看事件
$('.p1').click(function (ev) {
console.log(ev.type); // 获取事件的类型
console.log(ev.target); // 获取事件发生的DOM对象
console.log(ev.pageX); // 获取到光标相对于页面的x的坐标和y的坐标
console.log(ev.pageY);
console.log(ev.which) // 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键.
})
（3）事件阻止
//常用的事件方法：1.阻止事件冒泡 2.阻止默认事件 3.return false $(function () { //1.阻止事件冒泡 $('div').click(function (ev) { alert('当前按钮的事件被触发了') }); $('div button').click(function (ev) { ev.stopPropagation() }); $('div #a1').click(function (ev) { ev.stopPropagation() }); //2.阻止默认事件 a标签跳转 $('div #a1').click(function (ev) { ev.preventDefault() }) //3.全部阻止 return false $('div #a2').click(function () { return false }) })
（4）事件绑定 bind
// 1.事件bind //方式a $('button').bind('click mouseenter',function () { alert('事件被绑定了') }); //方式b： $('a').bind({ 'click':add1, 'mouseenter':add2 }); function add1() { alert('点击事件被绑定了') } function add2() { alert('事件被绑定了') } //2.事件移除unbind $('button').unbind() $('a').unbind('mouseenter') setTimeout(function () { $('button').unbind('click',function () { alert(1111) }) },3000) //3.绑定自定义事件 $('button').bind('myClick',function (ev,a,b) { alert("两个数之和是" + a+b) }); $('button').trigger('myClick',[1,2]) //触发 })
$("p").one( "click", fun...) //one 绑定一个一次性的事件处理函数 注： 添加的事件不能发生在未来 --》 动态生成的元素不能直接添加对象 里面的事件也不能发生了-->想让发生，事件代理！！
bind()方法还有一种简写方式，上面的代码还可以换成：
代码如下:
$("div p").click(function () {
alert($(this).text());
})
bind的两个问题
第一个问题，这里用了隐式迭代的方法，如果匹配到的元素特别多的时候，比如如果我在div里放了50个p元素，就得执行绑定50次。对于大量元素来说，影响到了性能。
但是如果是id选择器，因为id唯一，用bind()方法就很快捷了。
第二个问题，对于尚未存在的元素，无法绑定。点击页面上的按钮，将动态添加一个p元素，点击这个p元素，会发现没有动作响应。
（6）事件委派 delegate
// 与bind 不同的是当时间发生时才去临时绑定。 $("p").delegate("click",function(){ do something... }); $("p").undelegate(); //p元素删除由 delegate() 方法添加的所有事件 $("p").undelegate("click") //从p元素删除由 delegate() 方法添加的所有click事件
（5）事件代理on
on()其实是将以前的绑定事件方法作了统一，可以发现无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同罢了。
事件代理: 自己完成不了当前的点击事件，交给父级元素做这件事件
父级.on('事件名字','点击当前的标签元素选择器',fn)
//bind 只能绑定已经存在的标签,对于后面添加的标签不起作用 //on事件代理 动态监听 可以对后添加的标签起作用 $('ul').on('click', function (ev) { alert($(ev.target).html()) var newLi = document.createElement('li') $(newLi).html('10') $(this).append(newLi) $(ev.target).css('color', 'red') }) // on 事件委托，以后统一用on $(document).on('click', 'ul', function (ev) { alert($(ev.target).html()) var newLi = document.createElement('li') $(newLi).html('10') $(this).append(newLi) $(ev.target).css('color', 'red') }) //on 实现bind的效果 $(document).on('click mouseenter', 'ol', function (ev) { alert($(ev.target).html()) var newLi = document.createElement('li') $(newLi).html('10') $(this).append(newLi) $(ev.target).css('color', 'red') })
（6）jQuery事件绑定on()、bind()与delegate() 方法详解
https://www.cnblogs.com/czaiz/p/5519421.html
总结 1.选择器匹配到的元素比较多时，不要用bind()迭代绑定 2.用id选择器时，可以用bind() 3.需要给动态添加的元素绑定时，用delegate()或者on() 4.用delegate()和on()方法，dom树不要太深 5.尽量使用on()
（7）事件移除
//对应于bind()、delegate()和on()绑定方法，其移除事件的方法分别为： $( "div p" ).unbind( "click", handler ); $( "div" ).undelegate( "p", "click", handler ); $( "div" ).off( "click", "p", handler );
12、鼠标事件
1. .click 单击 2. .dblclick 双击 3. .mousedown 鼠标按下不松开 4. .mouseup 鼠标松开 5. .mouseover 移入，被选元素和子元素被选中时会触发 6. .mouseout 移出，被选元素和子元素被选中时会触发 7. .mouseenter 移入，只有被选中元素移入时 8. .mouseleave 移出，只有被选中元素移入时 9. .mousemove 移动 10. .hover === mouseenter mouseleave $('#box').hover(function(){},function(){}) 11. .focus 获取焦点 12. .blur 失去焦点 13. .change input发生变化时 14. .keydown 键盘按下 15. .keyup 键盘弹起
13、表单事件
1. .change // 此事件仅限于 input元素 textarea select, 表单元素发生改变时触发事件.
2. .select // 仅限于用在 input中 type=text textarea, 文本元素发生改变时触发事件.
3. .submit // 适应于表单提交, 表单元素发生改变时触发事件.
//表单事件 $(function () { //1.change() 仅限用于 input元素 textarea select $('select').change(function () { alert($('select option:selected').text()) }) //2.select() 仅限用于 input type=text textarea $('#other2').select(function () { alert($(this).val()) }) //3.form表单提交时 submit() $('form').submit(function (ev) { alert('1111') ev.preventDefault() }) })
14、jquery的Ajax
AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON -
同时您能够把这些外部数据直接载入网页的被选元素中。5种方法
1.jQuery的load()方法 2. jquery的getJSON方法 3.jquery的$.get()方法 4.jquery的post()方法 5. jquery的$.ajax()方法
#1.jQuery的load()方法 jQuery load()方法是简单但强大的AJAX方法。 load()方法从服务器加载数据，并把返回的数据放入被选元素中。 语法： $("selector").load(url,data,callback); 必须的url参数规定记载的url地址 可选的data参数规定与请求一同发送的查询字符串键/值对的集合 可选的callback参数是load()方法完成后所执行的函数名称 1. $('#btn').click(function(){ //只传一个url，表示在id为#new-projects的元素里加载index.html $('#new-projects').load('./index.html'); }) 2. $('#btn').click(function(){ //只传一个url，导入的index.html文件含有多个传递参数，类似于：index/html?name='张三' $('#new-projects').load('./index.html',{"name":'张三',"age":12}); }) 3. $('#btn').click(function(){ //加载文件之后，会有个回调函数，表示加载成功的函数 $('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){}); }) 注意：load函数最好在服务器网页中应用，也就是说要在服务器上运行，本地调试需要搭建后端本地环境。 #2. jquery的getJSON方法 jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中 语法: $.getJSON(url,[data],[callback]) url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后执行的函数 $.getJSON("./data/getJSON.json", function (data) { var str = "";//初始化保存内容变量 $.each(data, function(index,ele) { $('ul').append("<li>"+ele.name+"</li>") }); }) #3.jquery的$.get()方法 $.get() 方法通过 HTTP GET 请求从服务器上请求数据 语法:$.get(URL,callback); url参数规定你请求的路径，是必需参数，callback参数为数据请求成功后执行的函数 $.get('./data/getJSON.json',function(data,status){ console.log(status); //success 200状态码 ok的意思 }) #4.jquery的post()方法 与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面 语法：$.post(URL,data,callback); url参数规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据。可选的callback参数为数据请求成功后执行的函数 $.post('/index',{name:'张三'},function(data,status){ console.log(status); })
15. 重点：$.ajax()方法
jquery的$.ajax()方法 是做ajax技术经常使用的一个方法。参数如下： 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 4.async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 5.cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。 6.data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 7.dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。 8.beforeSend： 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } 9.complete： 要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 } 10.success： 要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 } 11.error: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 } 12.contentType： 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。 13.dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; } 14.dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; } 15.global： 要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。 16.ifModified： 要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。 17.jsonp： 要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 18.username： 要求为String类型的参数，用于响应HTTP访问认证请求的用户名。 19.password： 要求为String类型的参数，用于响应HTTP访问认证请求的密码。 20.processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。 21.scriptCharset： 要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用
（1）$.ajax() 的get请求方法
$.ajax({ url:'./data.json', type:'get', // 默认是 get dataType:'json', // 如果不指定 默认自动识别文件类型 success:function (data) { console.log(data); }, error:function () { } });
（2）$.ajax() 的post请求方法
$.ajax({ url:"/course", type:'post', data:{ username:'zhangsan', password:'123' }, sunccess:function (data) { if(data.state === 'ok' && data.status === '200'){ //登录成功 } }, error:function (err) { console.log(err); } });
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
