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)。通常在本地和远程的内容编码不同时使用

$.ajax()方法的参数

　　　（1）$.ajax() 的get请求方法

    $.ajax({url:'./data.json',type:'get',       // 默认是 getdataType:'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);}});

转载于:https://www.cnblogs.com/venicid/p/9220067.html

前端- jquery- 总结相关推荐

Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
Web前端JQuery入门实战案例
前端jquery入门到实战为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
华清远见-重庆中心-JAVA前端JQuery阶段技术总结
jQuery jQuery是一个轻量级的javascript函数库,封装了很多javascript中的内容.jQuery的本质依然是javacript(一个.js文件). 作用 jQuery的宗旨:& ...
前端jquery日期插件
分享一个前端jquery日期插件,方便自己后面需要时查找使用. 效果: 1.html demo. <!DOCTYPE html> <html lang="en"& ...
php div图片局部刷新,前端jquery 后端 thinkphp 实现局部刷新
本例用jquery 实现通过把一个标签的变量传递给后台处理后,然后返回给前台另外一个变量大致流程是这样的:前端编写html代码 ,加入要局部刷新的 jquery代码并指定要响应的url, 首先 ...
前端 -- jQuery
引入 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax ...
Web前端——jQuery库
Web前端笔记第七部分:jQuery 1. jQuery介绍 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库 ...
零基础学前端.jQuery入门与实践教程
学习目标: 掌握编程jQuery的基本使用掌握jQuery插件的使用能够开发jQuery插件选择器.属性操作.样式操作.节点操作.动画.事件.插件 typora-copy-images-to: ...
前端jquery、vue、react之性能优化
一.jquery 选择器性能优化建议总是从#id选择器来继承这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. $( '#content' ).hide( ...
8.31前端 jQuery
2018-8-31 19:52:09 周末吧这几天课看完结束前端!然后进行Django!!! 越努力,越幸运! day56 2018-03-161. 内容回顾1. 样式操作1. 操作class2. ...

前端- jquery- 总结