jQuery

jQuery作为JavaScript封装的类库,目的就是为了简化开发者使用JavaScript变得更加方便,最好处就是简化了DOM操作,处理了兼容性

优势:

1.让开发者像css那样访问和操作dom

2.修改css

3.简化JavaScript代码操作

4.事件处理变得简单

5.各种动画效果使用方便

6.让Ajax技术使用方便

7.基于jQuery大量插件

8.自行扩展功能插件

 

jQuery最大的优势就是方便,比如让开发者像css操作dom一样,比原生的js方便太多,提高效率非常明显,他还解决了浏览器兼容性问题,让开发者不需要考虑浏览器兼容性问题了

其他主流JavaScript库

1.YUI 雅虎公司开发的

2.Prototype最早成形的库之一

3.Dojo 提供一些其他库没有的方法比如离线存储、图标组件

 

2013发布的jQuery2.0宣布不再支持IE678

目前大部分主流大型网站都不支持IE6,部分功能受限不支持

一个项目为了兼容上的考虑:

1.成本控制

    一个项目本来1个月就可以上线,但为了兼容花了一年半载这样是不现实的,这就会导致项目胎死腹中

2.用户选择

    3D游戏的高质量用户和低质量用户

    新闻站他要考虑到所有用户

3.项目侧重点

    新闻、企业站交互比较少所以还是要照顾到低版本浏览器的

4.用户体验

    有大量的交互和Ajax操作的项目,如果兼容低版本用户那么高版本的用户体验就会差

5.数据支撑

    做一个项目的时候肯定是要去做数据分析的,分析自己项目的用户是高质量还是低质量,进行有效的取舍

6.教育用户

    对于低质量的用户就不需要去迎合他了,应该牢牢的粘住中高质量的用户,提示安装高版本浏览器,或者直接不让他访问,或者让他访问但是提示部分功能受限

 

是否兼容那就需要从以上考虑,到达平衡

 

Ajax:全称异步JavaScript和xml,是一种创建网站交互的技术,用于创建快速动态网页,在无需加载整个网页的前提下更新部分网页,通过在后台与服务器进行少量的数据交换,使网页实现异步更新,

这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

*/


 

        // 1.代码风格 $===jQuery $是一个jQuery对象,其整体也是一个jQuery对象

        //  alert($);//返回值是一个内部方法

        //  alert($());//返回值是一个jQuery对象

        //  alert($('#id'));//返回值是一个jQuery对象

        //  alert($('#id').css('color','red'));//返回值是一个jQuery对象

        //  alert($('#id').css('color','red').css('font-size','200px').css('font-weight','bold'));//返回值是一个jQuery对象,css连缀功能

        // $(function(){})//执行一个立即执行函数

        // $('#id')//id元素选择,选中id是id的元素

        // $('#id').css('color','red');//css是一个功能函数,添加一个行间样式属性color值是red

                

        // 2.加载模式 js代码如果放在head里面正常都是先下载js执行完毕后再执行后面的代码

        // 原生js提供的方法window.onload = function(){}方法会在页面全部加载完成后执行,而且只能执行一次,重复功能会被覆盖

        // jQuery提供的方法$(document).ready(function(){})方法会在dom树构建完成后执行,可以执行多次,不会被覆盖

        // $(document).ready(function(){})简写就是$(function(){})


 

        // 3.对象互换

        // //   alert($('#id'));//返回值是一个jQuery对象

        // alert(document.getElementById('id'));//返回原生js的dom对象      

        // alert($('#id').get(0));//也可以返回原生js的dom对象,get()里面的参数是index索引

        // alert($(document.getElementById('id'));//jQuery对象和DOM对象的互换

 

        // 4.多个库之间的冲突

        // 当一个项目引入多个第三方的库时,由于没有命名空间的约束,就会产生冲突,比如Prototype库也是

        // 使用$作为起始符,那么到底这个$谁呢,那就会产生冲突,但是不相同的方法还是可以同时使用的,规定是这样的,后面的引用覆盖前面的

        // 如果想要两个共容的解决办法

        // 方法1:

        //  <script src="js/jquery-1.10.1.js"></script>

    //  <script src="js/prototype.js"></script>

        //  var $$ = jQuery;

        //  $(function(){

        //      alert($('#id').get(0));//目前$归prototype所有,这样执行就会报错,解决办法就是使用$$或者jQuery代替$

        //      alert($('#id').ge(0));

        //  });

 

        // 方法2:当jQuery库在后面时,此时$归jQuery所有,如果想把$给prototype库,

        // jQuery提供了一个自行了断$的方法jQuery.noConflict();运行此方法后$就不是jQuery的了,属于prototype的,

        // 此时也还可以指定一个符号给jQuery例如var $$ = jQuery;            

        //  <script src="js/prototype.js"></script>

        //  <script src="js/jquery-1.10.1.js"></script>

        //  $(function(){

        //      alert($('#id').ge(0));//此时运行会报错,目前$是jQuery的

        //      alert($('#id').get(0));//正常运行

        //  });

 

        

    </script>

        

    

    常规选择器包括简单选择器、进阶选择器、高级选择器

 

        1.jQuery最核心的组成部分就是选择器引擎,他继承了css的语法,可应对dom元素属性标签状态进行选择

        还不需要考虑兼容性的问题jQuery实现了css-css3的大部分规则,也有一些自定义的选择器用于特殊状态的选择

 

        2.简单选择器

            #id选择器 只能一个元素 页面中只允许一个id,如果有多个id,css会全部执行样式,但是jQuery只会执行第一个

            

            标签选择器 可以多个元素

            

            class选择器 可以多个元素,一次选中多个$('.class').size()方法返回个数,$('.class').eq(1).css('color',red);选中class里面的第二个,从0开始

 

        3.jQuery提供了一个size方法用于返回页面中class相同的个数,标签选择器个数,id只返回一个

 

        4.jQuery提供了一个length属性用于返回页面中class相同的个数,标签选择器个数,id只返回一个

 

        5.jQuery的css设置叫做添加一个行为,找个行为添加了一个行间样式

 

        6.css里面的子选择器 #box > p 标准的子节点选择器,不包括孙子节点#box p 包括孙子节点和子节点 IE6里面没有这两个选择器,

            但jQuery里面兼容了这个方法$('#box > p')在IE依然好使

 

        7.jQuery存在一个容错的功能,比如页面中不存在你选中的id他不会报错,而在原生js里面如果选中的id元素不存在就会报错

 

        8.$('.demo')jQuery的选择器返回值应该是一个类数组,他有get(索引)方法用于返回原生js的DOM对象,所以get()也可以换成[]

 

        9.进阶选择器 群组选择器、后代选择器、通配选择器

            1.css的群组选择器 多个元素一起选

                div,p,span,.box,#box{

                    color:red;

                }

                jQuery的群组选择器类似,$('div,p,span,.box,#box').css('color','red')

            

            2.css后代选择器<div><p><span></span></p></div>

                div p span{

                    color : red;

                }

                jQuery的后代选择器类似,$('div p span').css('color','red')

            

            3.css通配符选择器* 选择的是页面中所有标签,在全局使用它会大量消耗资源

                *{

                    padding: 0;

                    margin: 0;

                }

                jQuery的通配符选择器类似,$('*').css('color','red') $('ul li *')选出ul下面所有li元素

            

            4.*一般少使用,会浪费资源,因为他会选出很多无效的元素

 

            5.标签的限定选择器 css里面 <div class="demo"></div> 用于选择div标签带demo的class标签

                div.demo{}

 

            6.多class选择器 <div class="demo1 demo2"></div>

                .demo1.demo2{}

                jQuery的类似$('.demo1.demo2')

 

            7.选择器选择应该遵循短,准选择,选择器过长选择慢,id选择器最快

 

        10.高级选择器 早期的IE6浏览器不支持css高级选择器 但是在jQuery都支持 从IE7后部分高级选择器开始支持

            1.层次选择器

                1.后代选择器$('div p').css('color',red);支持IE6

                

                2.jQuery还有一个后代选择find()方法例$('div').find('p').css('color',red);跟$('div p').css('color',red);是等价的

 

                3.子选择器和后代选择器是有区别的$('div > p').css('color',red);选不到孙子,只能选到子元素

 

                4.jQuery也提供了一个子选择器方法children如$('div').children('p').css('color',red);

 

                5.next选择器+ 只获取后一个节点而且是同级DOM对象 div+p{} $('div+p') 此方法只能是div后面立马跟了一个p不然是无效的

 

                6.jQuery也提供了一个next选择器方法next() $('div').next('p')

 

                7.nextAll选择器~ 获取后面所有的指定的DOM对象 div~p{} $('div~p') 可以获取后面所有的同级的指定元素

 

                6.jQuery也提供了一个nextAll选择器方法nextAll() $('div').nextAll('p')

 

                7.next和nextAll选择器必须是选中元素的后一个或者后N个,

 

                8.find() children() next() nextAll() 这几个方法如果不传参那么默认是*

 

                9.jQuery还提供了几个更加丰富的方法来选择元素

                    1.prev()方法用于选择同级的上一个元素

                    2.prevAll()方法用于选择同级的上N个元素

                    3.sibling()方法用于兄弟节点所有指定的元素,包括前后,是nextUntil和prevUntil的结合

                    4.nextUntil()方法用于选择同级 后 非指定元素,遇到指定元素就停止选择

                    5.prevUntil()方法用于选择同级 前 非指定元素,遇到指定元素就停止选择

            

            2.属性选择器 a标签用的多 标签的属性为条件进行选择

                1.$('a[title]').css()//选择属性是title的a标签

                2.$('a[title=num1]').css()//选择属性是title=num1的a标签

                3.$('a[title^=num]').css()//选择属性是title=num...的以num开头的值的a标签

                4.$('a[title$=num]').css()//选择属性是title=...num的以num结尾的值的a标签

                5.$('a[title!=num1]').css()//选择属性是title不等于num1的a标签,jQuery独有

                6.$('a[title|=num]').css()//选择属性是title等于num-..的a标签

                7.$('a[title~=num]').css()//选择属性是title等于num aaa bbb满足列表的的a标签

                8.$('a[title*=num1]').css()//选择属性是title包含num字符的a标签

                9.多属性选择器$('a[][]').css

                

                

        11.各选择器方法取舍速度性能优势讨论

                1.理论上jQuery提供的find() children() next() nextAll()方法都是快于高级选择器的,因为他没有高级选择器的复杂

                2.选择器快慢分析 最快是find()方法,最慢是高级选择器

                    1.$('#demo').find('p');//这条最快,他会调用原生的js方法是最快的,getElementById、ByTagName、ByClassName

                    2.$('p','#demo')等同于$('#demo').find('p')只是速度慢一点而已,慢百分之五

                    3.$('#demo').children('p');快于$('#demo > p');高级选择器在jQuery里面都会使用Sizzle引擎,一个元素一个元素进行遍历完

                    4.$('#demo p');也比较慢,推荐使用$('#demo').find('p');

    

    

        1.css3里面的伪类选择器

                a:link 未访问的链接

                a:visited 已经访问的链接

                a:hover 鼠标移上去

                a:active 被选中的

                a:focus 向拥有键盘输入焦点的元素添加样式。

 

        2.伪元素 属于行级元素

                :after

                :before

    

    过滤选择器 类似css3里面的伪类选择器,但jQuery可以让不支持css3的浏览器也能使用 过滤器都以:开头

        1.基本过滤器

            $('li:first').css('background','red');选取第一个li元素             

            $('li:first').css('background','red');选取第一个li元素             

            $('ul:first li:last').css('background','red');选取第一个ul里面的最后一个li元素    

            $('li:not(.class)').css('background','red');选取所有类名不是class的li元素

            :even选中偶数项,从0开始

            :odd选中奇数项   

            :eq(第几项)    从0开始,可以是负数,那就是倒着来,选中该项进行操作  

            :gt(第几项) 从0开始,选中该项之后所有项进行操作

            :lt(第几项) 从0开始,选中该项之前所有项进行操作

            h1:header h1-h6标题选择器

            :focus一般用于表单焦点 但表单需要初始化一下,默认加上焦点,一出来就有焦点

                示例:

                $('input').get(0).focus();

                $(':focus').css('background','red');

        2.内容过滤器

            div:contains(text);标签div的内容包含text文本的标签,jQuery里面单引号里面用双引号,双引号里面用单引号

            div:empty;标签div无内容的,没有子元素,没有内容,完完整整的空

            ul:has(.red)选取的是ul,限定条件是ul里面的子元素是否含有class=“red”

            div:parent;有内容的,跟empty相反

 

            jQuery还提供一个方法has示例$('div').has('.demo').css();

            

 

            jQuery提供的parent()方法,选择当前元素的父元素

            jQuery提供的parents()方法,选择当前元素的父元素及祖先元素

            jQuery提供的parentsUntil('html')方法,选择当前元素的父元素及祖先元素,遇到HTML标签就停止,

 

        3.可见性过滤器

            li:hidden选取所有不可见的li元素

            li:visible选取所有可见的li元素

            hidden选择器一般包括input里面的hidden和display的none

 

        4.子元素过滤器

            $('li:first-child');先返回li元素的父元素,然后给父元素的第一个元素li进行操作。第一个元素必须是li,如果是有其他元素就无效

            $('li:last-child');先返回li元素的父元素,然后给父元素的最后一个元素li进行操作。最后一个元素必须是li元素,如果是有其他元素就无效

            $('li:only-child');只有一个子元素li的

            $('li:nth-child(even)');选中li元素的父元素下面的li的偶数项,项数从1开始

            $('li:nth-child(odd)');选中li元素的父元素下面的li的奇数项,项数从1开始

            $('li:nth-child(2)');参数还可以是索引,选中li元素的父元素下面的第2个li元素,从1开始

            $('li:nth-child(2n+1)');参数还可以是索引2n+1,选中li元素的父元素下面的第2n+1个li元素,从1开始,n是1.2.3..

        

        5.其他方法

            1.is()方法,参数可以是选择器,DOM,jQuery对象,返回值是布尔值

                示例$('.red').is('li');检查class名是red的元素是不是li

                    $('.red').is($('li').eq(2));检查class名是red的元素是不是li,$('li').eq(2)也是jQuery对象

                    $('.red').is($('li'));检查class名是red的元素是不是li,$('li')是jQuery对象

                    $('.red').is($('li').get(2));检查class名是red的元素是不是li,而且限制li是第三个DOM元素

                    $('.red').is(function(){

                        return $(this).attr('title')=='列表3'

                    })

                    $('li').eq(2).hasClass('red')

                    $('li').slice(1,3);从第一位开始选到第三位,不包括第三位,位数从0开始

                    $('li').slice(2);从第二位开始选择后面的所有

                    $('li').slice(2,-2);从第二位开始选择 到 倒数第二位

                    $('#demo').next().end().css();end()方法的作用是找到前一个状态

                    contents()方法是获取到标签元素和文本节点

                    filter()方法,可以允许多个过滤器写到一起示例$('li').filter('.red,:first,:last')

                    filter()方法还可以写一个function

                    示例:$('li').filter(function(){

                        return $(this).

                    })


 

    基础DOM和css操作

        1.DOM是一种文档对象模型,方便开发者对HTML元素进行展示和修改,在元素js里面DOM操作比较复杂,而且对各浏览器的兼容性

        也存在着很多问题,但在jQuery里面把我们常用的DOM操作进行了有效的封装,让我们不用考虑浏览器的兼容性问题

                D就是页面文档Document

                O对象,一切标签都是对象

                M model页面元素节点和文本节点

 

        2.设置元素及内容操作

            前面学习的选择器,过滤器就是对元素进行精确地选择

            各方法介绍 如果各方法写入了参数,那么他就会返回一个对象

                html() 获取元素中的HTML内容

 

                text() 获取元素中的文本内容,html代码会自动清理

 

                html('内容参数,可以是html代码') 会替换掉里面的HTML标签内容,html代码正常解析           

 

                保留之前的内容追加新内容$('div').html($('div').html()+'新内容')

                

                还可以传函数进去达到实现保留之前的内容追加新内容

                $('div').html(function(index,value){

                    return return value + '新内容'

                })

 

                text('内容参数') 会替换掉里面的文本,内容参数不支持html代码,如果有HTML代码会被当做文本展示

 

                val() 获取value值,如果有参数就是修改value值

 

                val()方法还有一个特殊功能,如果参数传一个数组进去,数组内容是某元素的value值,一般是多选或者单选,就会被设置为选中状态checked

 

        3.元素属性操作 attr()方法 元素的class不建议使用attr设置

                $('#demo').attr('id')获取id

 

                $('#demo').attr('title','什么鬼')给元素设置一个属性title,值是什么鬼

 

                attr({}) 还可以用对象为参数,用于多个属性设置

 

                attr() 还可以是函数 index参数是索引,value是原来的title的值 return返回的是修改后title的值

                $('div').attr(title,function(index,value){

                    return

                })

 

                删除属性的方法removeAttr('属性名')此方法不能传函数作为参数

 

                一般也可以使用attr创建id但不建议使用,容易混乱

 

        4.元素样式操作 获取的时候如果元素无该属性那么返回元素的默认属性值

            $('div').css('属性');一个参数就是获取该属性,color属性IE浏览器获取的原文本,其他浏览器获取的是rgb

                

            $('div').css('属性','属性值');两个参数就是设置元素属性

 

            获取多个属性,就需要使用对象数组,也就是类数组$('div').css(['color','width',height]);返回值是个对象,需要看里面的内容需要使用for-in

 

            for-in是js原生方法用于遍历对象的

 

            jQuery提供的方法是each()遍历对象

            示例:

                var temp = $('div').css(['color','width',height]);

                $.each(temp,function(attr,value){

                    alert(value);

                })

 

            each()方法还可以遍历获取元素时得到的多个元素对象

            示例:

            $(function(){

                $('div').each(function(index,element){

                    alert(index+':'+element);

                });

            })

 

            还可以传递一个对象,用于设置多个css样式

            css({

                'color':'red',

                'background':'yellow'

            });

 

            还可以传一个函数

            css('width',function(index,value){

 

            })

 

        5.元素className设置

            $('div').addClass('');

            $('div').addClass('多个class');

            $('div').removeClass('class');

            $('div').removeClass('多个class');

 

        6.toggle样式切换,有无切换,样式可以多个,还有第二个参数可以通过运算规则来设置频率,用的少

            $('div').toggle('bg color')

        

        7.实现多个颜色之间的来回切换

            方法1参考:多个颜色之前来回切换.html

            方法2直接使用toggle()传函数参数进去实现

            示例

            $('div').click(function(){

                $(this).toggle(function(){

                    if($(this).hasClass('red')){

                        $(this).removeClass('red');

                        return 'green';

                    }else{

                        $(this).removeClass('green');

                        return 'red';

                    }

                });

            });


 

        8.jQuery自己封装的一些css方法

            

            width()方法获取元素宽度$('div').width()比$('div').css('height');方便

            

            $('div').css('height');返回值是一个string类型

            

            $('div').width();返回值是一个number类型

 

            width(1000);传参数设置1000px,内部直接会转化成1000px字符串,很智能

 

            width();参数还可以是function

                width(function(index,width){

                    return width+100;

                })

 

            height的用法跟width一样

 

            width()和height()方法获取的元素宽度不包括padding

 

            innerWidth();包含padding

            outerWidth();包含边框

            outerWidth(true);包含边框和外边距

 

        9.获取元素偏移方法

            1.元素

                offset()有两个配套属性left和top,相对于视口是距离,只是用于获取不能设置

                position()有两个配套属性left和top,相对于相对点的距离,只是用于获取不能设置

            

            2.滚动条的方法,滚动条属于window

                $(window).scrollTop();滚动条垂直方向滚动距离,如果传参进去就是设置移动距离

                $(window).scrollleft();滚动条水平方向滚动距离,如果传参进去就是设置移动距离

 

    

    

    DOM节点操作

        1.创建节点 动态创建,源代码里面看不到

            var temp = $('<div>123</div>');创建节点,存在于内存里面

            $('body').append(temp);

        

        2.元素插入研究

            $('body').append(temp);append插入规则是插入到body内部,如果body内部本身有元素,追加到原有元素的后面

            

            $('div').append(function(index,html){

                return '<div>123</div>'+index;

            });有多个div的时候参数index就变得很有用了,用于计算,参数html是获取原本div里面的内容

 

            appendTo();剪切操作,将已存在的元素剪切到某个元素后面

 

            prepend();插入到内部的前面,跟append相反

 

            $('div').after('<div>123</div>');插入到同级元素的后面

            after(function(index,html){

 

            })方法也可以传函数,index参数是索引,html是原内容

 

            $('div').before('<div>123</div>');插入到同级元素的前面

 

            insertAfter();方法,剪切到同级后面

            insertBefore();方法,剪切到同级前面

 

        3.包裹节点操作

            1.wrap() 被包裹 <div>就会被strong包裹在里面,还可以是多个包裹wrap('<strong><em></em></strong>')

                示例$('div').wrap('<strong></strong>');

                    第二种写法,单标签会被自动转换成双标签$('div').wrap('<strong />');

 

            2.wrap()参数还可以是js原生DOM对象

                $('div').wrap($('strong').get(0));获取到页面中的strong然后用strong去包裹div

 

                js原生方法创建元素$('div').wrap(document.createElement('strong'));然后用strong包裹div

 

            3.warp()参数还可以是function

                wrap(function(){

                    return '<strong></strong>'

                });

 

            4.unwrap() 移除外层标签,直接就是一个方法,直接使用

                $('div').unwrap();移除一个外层标签,执行几次就移除几次

 

            5.wrapAll('strong')把所有选中的元素作为一个个体,然后用strong去包裹这个整体,而wrap()是把选中的元素作为一个单独个体,一个一个进行操作

 

            6.wrapAll(document.createElement('strong')) 第二种写法,功能一样

 

            7.$('div').wrapInner('<strong></strong>');给div元素内部的内容进行包裹,参数也可以是function

 

        4.jQuery还提供了一些常规的节点操作:复制,替换,删除节点

            1.clone()方法 复制

                $('div').clone();克隆复制一份到了内存

                $('div').clone().appendTo('body');插入到页面中

                clone()还有一个参数,true或者false 如果是true那么复制的时候会把元素的事件也复制一份,

                false就不复制元素事件,默认是false

            

            2.remove()方法 删除节点 这个删除是剪切操作,剪切到了内存中,但事件行为已经永远不存在了

            $('div').remove();remove的参数还可以包含精确选择,$('div').remove('.demo');删除div并且该div的class名是demo

 

            3.detach()方法也是删除节点,这个删除也是剪切操作,但会保留事件行为

 

            4.empty();作用是清空节点里面的内容,原标签会保留,里面内容包括其他标签都会删除

 

            5.$('div').replaceWith(<strong>666</strong>)方法替换节点 div里面的内容和标签都会被替换,事件也会移除

            

            6.$('<strong>666</strong>').replaceAll('div')跟上面的替换方法效果一样

 

    

    表单选择器 常规的选择器可以选择表单,jQuery还提供了一些方法专门选择表单的选择器

        <form>

        <input type="text" name="username" value="jack">

        <input type="password" name="password" value="666">

        </form>

        常规选择器选择方法$('input[name=username]').val();

            

        表单选择器 跳过伪类的方式实现

            :input 选择所有input元素如input textarea select button

            

            用表单选择器选择$(':input[name=username]')

            

            还可以使用$(':text') 选择type是text的input元素

 

            还可以使用$(':password') 选择type是password的input元素

 

            推荐还是加个form作为限制条件$('form :input[name=username]')


 

    表单过滤器

        :enable 选择所有可用元素 元素有个disabled和enabled属性,设置后元素变成可用或者不可用状态,默认都是enabled元素

 

        :checked 判断是否处于选定状态,适用于radio和checkbox,可用选中已经处于checked的元素

 

        :selected 判断是否有下拉菜单元素且下拉菜单的option已被选中,第一个option默认被选中




 

    

    基础事件

        js中常用事件:click dblclick mousedown mouseup mousemove mouseover=mouseenter mouseout=mouseleave

                    change select submit keydown keyup keypress blur focus load scroll error

 

        jQuery通过一个bind('type',function)方法来绑定事件,function可以是匿名函数,也可以是函数名

 

        bind()可以允许绑定多个事件,

        bind('click mouseover',function(){

 

        })

 

        参数还可以是{}对象,用于多个不同事件

        bind({

            click : function(){},

            mousedown : function(){}

        })

        

        删除事件unbind()

            $('div').unbind();没有参数就是删除所有事件

            $('div').unbind('click');只删除click事件

            div绑定了2个click事件,$('div').unbind('click',fn1);只删除绑定了fn1处理函数的click事件


 

        简写事件讨论

            click事件直接简写 $('div').click(function(){});

            dblclick事件直接简写 $('div').dblclick(function(){});

            $('div').mousedown(function(){});鼠标左键点下

            $('div').mouseup(function(){});鼠标左键抬起

 

            unload()事件一般用于清理工作,属于window,也有很多用于广告弹窗,新版浏览器一般拒绝这种操作

 

            resize()事件是浏览器窗口大小发生改变时触发

 

            scroll()事件是滚动条移动了触发

 

            select() input文本框里面的内容文本被选中后触发

 

            change() input 文本框里面的内容发生了改变就会触发

 

            submit() 表单提交时触发事件,基于form $('form').submit(function(){})

 

        

        mouseenter和mouseover区别

        <div><p></p></div>

        mouseover会触发子节点,比如给div绑定一个事件,移入到p的时候还会执行一次,会把子节点当做不是自己儿子

        mouseenter不会触发子节点,一般都使用e nter

 

        mouseout会触发子节点,跟over是一对

        mouseleave不会触发子节点,跟enter一对


 

        keydown可以监测键盘的所有按键,keycode和which值是键盘排序

        keypress只能监测字符类按键,charCode值是该字符的ascll码值

        keyup键盘弹起


 

        表单光标的丢失和激活 blur focus

        <div><input type="text"> </div>

        $('input').blur(function(){})

        $('input').focus(function(){})

 

        功能类似的focusin 和 focusout 但这两个支持父元素激活

        $('div').focusin(function(){})

        $('div').focusout(function(){})

 

    复合事件

        ready(function(){});当DOM构建完成后触发事件

        

        hover(function(){});鼠标移上去触发事件

        

        hover(function(){},function(){});鼠标移上去触发第一个function事件,移开触发第二个function()

        

        hover结合的是mouseenter和mouseleave


 

事件对象 e event

    属性type 存的是事件类型 是个字符串

    属性target 存的是触发事件的DOM元素

    属性currentTarget 绑定事件的元素,等于this

    属性relatedTarget 获取移入移出最近那个元素


 

    date的使用,date可以是数组,字符串,数字,对象等 传入自定义数据

    $('input').bind('click',date,function(e){

        alert(e.date);

    });


 

    都是e里面的属性

    pageX pageY相对于原点的距离

    clientX clientY相对于浏览器视口的距离

    screenX screenY相对于显示屏

    timeStamp 获取事件的时间戳

    which 获取鼠标的左中右键分别是123 或者键盘的排序跟keydown里面的keyCode一样

    ctrlKey shiftKey altKey 监测是否按下了ctrl shift alt键


 

事件冒泡

 

    存在父子结构的元素绑定了同一事件,由子元素冒泡向父元素

 

    取消冒泡,jQuery已经做好了各浏览器的兼容 ,本来IE的方法是e.cancelBubble = true直接使用就可以了,e.stopPagation();

 

    阻止默认事件

        右键菜单

 

        a链接跳转

            $('a').click(function(e){

                e.stopPropagation();//阻止冒泡

                e.preventDefault();//阻止跳转

                alert(1);

            });

 

        表单提交也会跳转 取消跳转

            $('input').click(function(e){

                e.preventDefault();//阻止跳转

            });

 

            $('form').submit(function(e){

                e.preventDefault();//阻止跳转

            });

 

            e.stopPropagation();//阻止冒泡

            e.preventDefault();//阻止跳转

            阻止冒泡和阻止默认事件合并就是

            $('a').click(function(){

                return false;//等于阻止冒泡和阻止默认事件的合体

            });


 

            isDefaultPrevented();判断是否阻止了默认事件

            isPropagationStopped();判断是否阻止了冒泡事件

 

            stopImmediatePropagation() 取消事件冒泡并且取消该事件的后续处理函数,绑定了两个click,取消冒泡,只执行第一个click,第二个不执行

            isImmediatePropagationStopped(); 判断是否调用了stopImmediatePropagation()



 

    高级事件

        模拟操作:比如一个按钮,让浏览器模拟用户去点击它一下,就是模拟操作,区别于用户操作

 

        模拟用户点击操作

            $('input').click(function(e){

                alert('点击');

            });

            $('input').trigger('click');//设置让浏览器点击一下按钮,这个就是模拟操作,只模拟一次,事件依然存在

 

            简写:$('input').click(function(e){

                alert('点击');

            }).trigger('click');

 

            trigger('click',[data1,data2]);还可以传多个数据但传多个数据的时候必须使用[]不然无法识别

            示例:

            $('input').click(function(e,data1,data2){

                alert('点击');

            });

            $('input').trigger('click',[date1,date2,[1,2,3],{}]);中括号里面可以是对象,数组,字符串,数字

 

            bind('click',date);方法也可以传数据,可以是数组,对象,字符串,调用数据的时候就是e.date.

 

        自定义事件

            $('input').bind('myEvent',function(){

 

            }).trigger('myEvent');

 

        trigger()方法简写 空的click()就可以了,但必须是系统事件,自定义事件不能,大部分系统事件都是提供了简写

 

            $('form').trigger('submit');//浏览器模拟提交表单并且跳转到form指定界面

 

            $('form').triggerHander('submit');//浏览器模拟提交表单但是默认事件跳转被阻止了,不进行跳转

 

            表单提交简写方式

                $('form').submit(function(){

                    e.preventDefault();

                });

 

            如果页面有多个元素绑定了相同事件 如果有多个submit,使用trigger()会依次执行

            $('input').click(function(e){

                alert('点击');

            }).trigger('click');

            但使用triggerHander('click');只会执行第一个

 

            trigger()返回值是一个jQuery对象,可以使用连缀功能

            $('input').click(function(e){

                alert('点击');

            }).trigger('click').css('background','red');

 

            triggerHander('click')返回值是return值或者undefined 无法进行连缀功能

            $('input').click(function(e){

                alert('点击');

                return 123;

            }).triggerHander('click');

 

            trigger()有冒泡功能,triggerHander()无冒泡功能


 

        命名空间 绑定了多个相同事件,想移除某一个事件就需要用到命名空间

            $('input').bind('click',function(){

                alert('abc');

            })

            $('input').bind('click',function(){

                alert('xyz');

            })

            同时绑定了两个事件$('input').unbind('click');把两个事件都移除了

 

            使用命名空间就可以有针对的进行移除$('input').unbind('click.abc');只移除了click.abc,不会移除mouseover.abc

            $('input').bind('click.abc',function(){

                alert('abc');

            })

            $('input').bind('click.xyz',function(){

                alert('xyz');

            })

 

            $('input').bind('mouseover.abc',function(){

                alert('xyz');

            })

            如果想移除带有命名空间abc使用方法$('input').unbind('.abc');

 

            trigger('click.abc');模拟执行的时候也可以使用命名空间

 

    事件委托live() 请人帮忙 比如学校有10000人同时收到快递委托门卫签收 事件冒泡由子元素冒泡向父元素

        <div>

            <input type="button" name="" id="" class="button">

            <input type="button" name="" id="" class="button">

            <input type="button" name="" id="" class="button">

        </div>

 

        使用bind()绑定事件 有3个按钮绑定了3个事件,button越多,绑定越多

        $('.button').bind('click',function(){

            alert('未使用事件委托');

        })

 

        事件委托每次会验证event.type 和 event.target才会触发,因为事件委托是借助事件冒泡来实现的

 

        bind()不支持动态绑定事件,比如AJAX新更新的页面,如果使用的clone()虽然达到了目的,但是绑定次数确越来越多了,还是没有事件委托方便简洁

 

        live()支持动态绑定事件,live()方法不支持连缀调用,解除委托事宜die('click')

 

        因为live()存在很多缺陷,不支持连缀,冒泡层次多,语义不清晰,在1.4.3版本就被废弃了,代替的新方法是

        delegate('.button','click',function(){})和undelegate('.button','click')

 

    注意:bind() live() delegate()都是事件绑定,live() delegate()是事件委托,数量多就使用事件委托,有动态更新需要绑定事件也建议使用事件委托


 

    事件绑定 事件委托的合体 on off one

        

        1.普通绑定 bind() unbind()

 

        2.事件委托 live() die() 已抛弃

 

        3.事件委托 delegate() undelegate()

 

    新方法的绑定 on() off()

 

        1.替代bind()

            $('.button').on('click',function(){});

 

        2.bind()还可以传额外数据 可以是普通字符串 数字 对象 数组

            $('.button').on('click',,function(){});

 

        3.绑定多个事件

        $('.button').on('click mouseenter',function(){});

 

        4.绑定多个事件以对象的形式

        $('.button').on({

            click : function(){

                alert('click');

            }

            mousedown : function(){

                alert('down');

            }

        }});

 

        5.阻止表单提交默认跳转行为 return false;既阻止了默认事件也阻止了冒泡

        $('form').on('submit',function(e){

            e.preventDefault();或者return false;

        })

 

        5.阻止表单提交默认跳转行为

        $('form').on('submit',false);既阻止了默认事件也阻止了冒泡

 

        6.取消冒泡

        $('form').on('submit',function(e){

            e.stopPropagation();

        })  

    

        

    新方法移除事件off 取代unbind

        1.$('#button').off('click');

 

        2.$('#button').off('click',fn);移除命名函数

 

        2.$('#button').off('click.abc');移除带命名空间的事件

 

    新方法替代事件委托live delegate 事件委托委托父元素进行事件操作

        <div><p></p></div>

        $('div').on('click','p',function(){});第一个参数是事件类型,第二个是事件源对象,第三个是事件处理函数

 

    新方法移除事件委托off

        $('div').off('click','p');  第一个参数是事件类型,第二个是事件源对象


 

    特殊新方法one() 只触发一次事件,触发后自动销毁事件,不能多次执行

        $('div').one('click',function(){}) 事件绑定,只有一次触发后就会销毁

 

        $('div').one('click','p',function(){})事件委托,只有一次触发后就会销毁

        



 

动画效果

    以前网页特效都是通过flash实现的,目前大部分已经被JavaScript取代了,网页特效,比如渐变菜单 渐进显示 图片轮播

    

    显示、隐藏 通过操作元素的display:none/block/inline-block/inline;

 

    $(function(){

$('#show').click(function(){

$('div').show(1000)

});

 

$('#hide').click(function(){

$('div').hide('fast')

});

    })

    

        1.显示方法是show() 可以传2个参数,不传参就是直接显示,第一个参数是速度包含了匀速变大以及透明度的变换

 

        2.隐藏方法是hide() 可以传2个参数,不传参就是直接隐藏,第一个参数是速度包含了匀速变小以及透明度的变换

 

        3.jQuery提供的3个预设速度参数slow---600毫秒 normal---400毫秒 fast--200毫秒  

 

        4.默认是normal--400毫秒

 

        5.第二个参数就是一个回调函数 显示或者隐藏完成后触发

        $(function(){

            $('#show').click(function(){

                $('div').show(1000,function(){

                    alert(1);

                })

            });

    

            $('#hide').click(function(){

                $('div').hide('fast',function(){

                    alert(2);

                })

            });

        })

 

        6.同步动画 一起出来

            $(function(){

                $('#show').click(function(){

                    $('.test').show(1000,function(){

                        

                    })

                });

        

                $('#hide').click(function(){

                    $('.test').hide(1000,function(){

                        

                    })

                });

            })

        

        7.列队动画 一个一个嵌套 但嵌套太多肯定不好,或者有新元素加入怎么办

        $(function(){

            $('#show').click(function(){

                $('.test').eq(0).show(1000,function(){

                    $('.test').eq(1).show(1000,function(){

                        $('.test').eq(2).show(1000,function(){

                            $('.test').eq(3).show(1000,function(){

                    

                });

                });

                });

                });

            });

    

            $('#hide').click(function(){

                $('.test').hide(1000,function(){

                    

                })

            });

        })

 

        8.解决办法,使用递归自调用

        $(function(){

            $('#show').click(function(){

                        $('.test').eq(0).show(1000,function testShow(){

                            $(this).next().show(1000,testShow)

                        });

                    });

        

             $('#hide').click(function(){

                        $('.test').last().hide(1000,function testHide(){

                            $(this).prev().hide(1000,testHide)

                        });

                    });

        })

 

        9.toggle 切换 包含show 和 hide 内部会进行判断

 

        10.slideUp卷上 slideDown滑下 slidetoggle 跟show 和 hide一样具有相同的参数

            $(function(){

                $('#toggle').click(function(){

                    $('div').slideToggle(1000);

                });

            })

 

        11.淡入淡出 fadeIn fadeOut fadeToggle fadeTo透明度到某个值范围是0-1

            $(function(){

                $('#toggle').click(function(){

                    $('div').fadeToggle(1000);

                });

            })

 

            fadeTo透明度

                $(function(){

                    $('#to').click(function(){

                        $('div').fadeTo(1000,0.3);

                    });

                })


 

    自定义动画 animate() 有3个参数 第一个是对象里面写css样式 第二个参数是速度 ,第三个是回调函数,前面执行完毕才执行回调函数里面内容

            $('div').animate()

                

            第二个参数还可以进行运算

                $(function(){

                    $('#button').click(function(){

                        $('div').animate({

                            background : 'red',

                            height : '300px',

                            width : '300px',

                            opacity : 0.3,

                            left : '+=300px'

                        });

                    });

                })

 

            刚才的效果都是同时出现的,想要一个一个出现列队动画 可以使用在回调函数里面不停地嵌套,因为回调函数就是等待前面的执行完毕后才执行

                    $(function(){

                        $('#button').click(function(){

                            $('div').animate({

                                left : '200px'

                            },2000,function(){

                                $('div').animate({

                                    height : '200px'

                                },2000,function(){

                                    $('div').animate({

                                        width : '200px'

                                    },2000);

                                });

                            });

                        });

                    })

 

            还可以使用连缀animate()实现,他也是执行完一个在执行下一个 同一个元素

                $('div').animate({left : '100px'}).animate({width : '300px'}).animate({height : '300px'})

        

            还可以顺序排列执行 同一个元素

            $('div').animate({left : '100px'});

            $('div').animate({height : '300px'});

            $('div').animate({width : '300px'});

            $('div').animate({opacity : 0.3});

        

            如果需要不同元素的动画列队执行 那么可以使用回调函数进行一个一个嵌套,但是回调函数可读性差,写起来麻烦

 

            $('div').slideUp(1000).slideDown(1000).css('background','red');

            分析:css操作不是动画操作,他会跟第一个动画操作同时进行,需要slideUp--slideDown--css依次执行那么可以使用回调函数,但回调函数缺陷多

            $('div').slideUp(1000).slideDown(1000,function(){

                $(this).css('background','red');

            });

 

            jQuery为解决回调函数麻烦,提供了一个方法queue(function(){})但他有个特性就是执行queue方法后无法进行连缀了,如果需要连缀就需要修改queue方法的参数next

            $('div').slideUp(1000).slideDown(1000).queue(function(next){

                $(this).css('background','red');

                next();

            })


 

        清理动画的方法$(this).clearQueue();之后的动画都会被清理,在回调函数流氓使用

 

        jQuery还提供了计算后面还有多少个动画长度 count返回的就是后面包括自己还有多少个动画,在回调函数里面执行这个就可以了

        function count(){

            return $('div').queue('fx').length;

        }

 

        动画相关方法

        

        stop() 有两个参数

            1.无参数的stop();直接停止动画

 

            2.如果有列队动画,那么只会停止第一个动画,后面的会继续执行,需要清理后面的列队动画那就需要加一个参数true,不加默认是false,第一个参数决定是否clearQueue,会执行第一个动画

 

            3.如果有列队动画,第二个参数决定是否跳转到动画最后的位置,仅仅是位置,不会执行之后的动画,默认值是false

 

        delay() 延迟执行某个动画

            $('div').animate({left : '100px'}).delay(1000);

            $('div').animate({height : '300px'}).delay(1000);

            $('div').animate({width : '300px'}).delay(1000);

            $('div').animate({opacity : 0.3}).delay(1000);

 

        过滤器':animated' 查找目前正在运动的动画

            $(':animated').css('background','blue')

 

            $(function(){

                $('div').slideToggle(1000,function(){

                    $(this).slideToggle(1000,arguments.callee)

                });

                $('#button').click(function(){

                    $(':animated').css('background','blue')

                });

                

            })

 

    动画全局属性

        运行帧数$.fx.interval = 13;默认是13,越小越好,但对浏览器性能要求高

 

        $.fx.off = true; 关闭动画,默认是false,不关闭动画

 

    补充:自定义动画animate()在速度后面还有一个参数,默认是swing 先快后慢 还有一个值是linear线性匀速运动

            $('div').animate({left : '100px'},1000,'linear',function(){})

 

    

    

    Ajax 异步JavaScript和xml 无刷新状态更新页面,并且实现异步提交

            

    1.他是多个技术组合

        JavaScript 捕获交互行为

        XMLHTTPRequest对象

        服务器上的文件

        由JavaScript解析数据

 

    2.Ajax优势特性

        不需要插件支持,只要支持JavaScript就可以

        用户体验极佳 不需要刷新达到更新部分页面

        提升Web程序性能 按需要更新部分页面

        减轻服务器负担 将一些服务器操作转移到了客户端

 

    3.Ajax不足

        低版本浏览器如IE5对 对象XMLHttpRequest支持不足

        前进后退功能被破坏

        搜索引擎支持度不够 因为搜索引擎爬虫还不能理解js动态变化的数据内容

        开发测试工具缺乏

 

    方法探究 静态HTML默认使用get方式提交 load()方法是局部方法

 

        load()方法,加载html文件,参数是一个服务器上的url地址 在文件url后面还可以对服务器返回回来的数据进行筛选

        $(function(){

            $('#button').click(function(){

                $('div').load('Ajaxtest.html');

            });

        })

 

        在文件url后面还可以对服务器返回回来的数据进行筛选 比如请求文件里面有两个span的class不一样,可以要求特定的class显示,其他的进行隐藏

        $('div').load('Ajaxtest.html .url');

 

        如果需要加载服务器端的文件如php 一般需要载入数据还要想服务器提交数据,那么load()的第二个参数就要使用了

 

        以get方式提交数据 把数据写在页面后面加?然后写要传的数据

        $(function(){

            $('#button').click(function(){

                $('div').load('Ajaxtest.php?url=aaa');

            });

        })


 

        以post提交数据 就需要使用load()第二个参数 使用对象,把数据以对象的形式存在里面

        $(function(){

            $('#button').click(function(){

                $('div').load('Ajaxtest.php',{url : 'aaa'});

            });

        })

 

        load()第三参数 回调函数,回调函数有3个参数,response status xhr

        $(function(){

            $('#button').click(function(){

                $('div').load('Ajaxtest.php',{url : 'aaa'});

            },function(){

 

            });

        })

 

        xhr 全称是XMLHttpRequest,他是个对象,是Ajax技术的api 他也有几个属性

            responseText属性,返回的文本

            status 状态码 200表示"OK" 404表示页面不存在 500服务器遇到意外错误,无法完成请求

            statusText 状态码的文本表示

            readyState xhr的请求状态0-4 4表示请求完成且响应已就绪 0表示未初始化

 

     Ajax的局部方法load()是局部方法,他需要一个jQuery对象作为前缀来调用的,他适合静态页面的处理,比如加载静态HTML

    

     Ajax的全局方法$.post()和$.get()是全局方法,无需指定某个元素

 

     $.get()方法和load方法类似,但$.get()方法有4个参数,比load('url',data,callback)多一个type,type用来规定返回的内容

        

        $.get()方法使用?传参示例    

            $(function(){

                $('#button').click(function(){

                    $.get('Ajaxtest.php?url=aaa',function(response,status,xhr){

                        $('div').html(response);

                    });

                });

            })

 

        $.get()使用数据位参数date传参 以字符串形式 如果有多个参数,使用&进行连接 实际都是?传参,后期会自动转换

            $(function(){

                $('#button').click(function(){

                    $.get('Ajaxtest.php','url=aaa',function(response,status,xhr){

                        $('div').html(response);

                    });

                });

            })

 

        $.get()使用数据位参数date传参传入对象的形式 实际都是?传参,后期会自动转换

            $(function(){

                $('#button').click(function(){

                    $.get('Ajaxtest.php',{url : 'aaa'},function(response,status,xhr){

                        $('div').html(response);

                    });

                });

            })

 

        

        $.post()方法不支持?传参

 

        $.post()方法支持以字符串形式传参 但不会转换成? 没有尾巴 会转换成HTTP消息实体传参

            $(function(){

                $('#button').click(function(){

                    $.post('Ajaxtest.php','url=aaa',function(response,status,xhr){

                        $('div').html(response);

                    });

                });

            })

 

        $.post()方法支持以对象形式传参

            $(function(){

                $('#button').click(function(){

                    $.post('Ajaxtest.php',{url : 'aaa'},function(response,status,xhr){

                        $('div').html(response);

                    });

                });

            })

 

        $.post()和$.get()方法第四个参数type 服务器返回内容的格式

            

            php html text 都是纯文本所以type类型为html或者text都可以正常获取数据,如果强行将type设置为xml或者json,那么就无法正常获取数据

 

            第四个参数默认不写都是会自动识别的

 

            如果本身是xml或者json文件,强行将type设置为HTML或者text,那么会把里面的数据当做纯文本拿出,连标签也会当做文本

 

            如果使用xml或者json传参,获取里面数据的方法如下

            

            如果是xml

            $(function(){

                $('#button').click(function(){

                    $.post('Ajaxtest.xml',function(response,status,xhr){

                        alert($(response).find('root').find('url').text());

                    });

                });

            })

 

            如果是json 虽然json是以对象形式存储数据,但一般都会使用[{}]

            $(function(){

                $('#button').click(function(){

                    $.post('Ajaxtest.json',function(response,status,xhr){

                        alert($(response)[0].url);

                    });

                });

            })


 

            post()和$.get()方法使用基本是一样的,只是各自后背后的机制不同

                区别如下

                    1.GET 请求是通过url提交的而POST是通过HTTP消息实体提交

                    2.GET 请求有大小限制为2KB而POST无限制

                    3.GET 方式会被缓存下来,存在安全隐患,而POST没有

                    4.GET 方式通过$_GET[]获取,POST 方式通过$_POST[]接收


 

            第三层专用方法$.getJSON和$.getScript

            $.getJSON是JSON专用的方法,只有3个参数,没有第四个type用法和get、post一样,安全性提高了

 

            $.getScript异步加载js文件,有需求的时候加载,没有需求永远不加载

                $(function(){

                    $('#button').click(function(){

                        $.getScript('Ajaxtest.js',function(response,status,xhr){

                        

                        });

                    });

                })



 

            $.ajax()是所有ajax方法最底层的方法 可以替代所有的二层和三层方法 使用对象的形式传

                $(function(){

                    $('#button').click(function(){

                        $.ajax({

                        url : 'Ajaxtest.php',

                        type : 'POST',

                        data : {

                            url : 'aaa'

                        },

                        success : function(response,status,xhr){

                            alert(0);

                        }

                    });

                    });

                })


 

        表单提交 Ajax处理

            $(function(){

                $('#button').click(function(){

                    $.ajax({

                        type : 'POST',

                        url : 'Ajaxtest.php',

                        data : {

                            user : $('form input[name=user]').val(),

                            email : $('form input[name=email]').val(),

                        },

                        success : function(response,status,xhr){

                            $('div').html(response);

                        }

                    });

                });

            })

 

        问题讨论

            如果表单比较多,写起来就麻烦,

 

            复制提交的js内容时,data属性需要修改的非常多

 

        为了解决以上问题 就提供了解决办法 表单系列化 直接一个$('form').serialize()解决

        $(function(){

            $('#button').click(function(){

                $.ajax({

                    type : 'POST',

                    url : 'Ajaxtest.php',

                    data : $('form').serialize(),

                    success : function(response,status,xhr){

                        $('div').html(response);

                    }

                });

            });

        })

 

        $('form').serialize()此方法已经把表单里面的内容变成了键值对形式的字符串,并且还进行了编码

 

        serialize()还可以使用在单选和多选按钮上

        $('form input[name=sex]').click(function(){

            $('div').html(decodeURIComponent($(this).serialize()));

        });

 

        serializeArray()可以把数据变成JSON对象返回

        var json = $(this).serializeArray();

 

        初始化有多个Ajax的时候有共同的属性 使用方法$.ajaxSetup

        $(function(){

            $('#button').click(function(){

                $.ajaxSetup({

                    type : 'POST',

                    url : 'Ajaxtest.php',

                    data : $('form').serialize()

                });

                $.ajax({

                    

                    success : function(response,status,xhr){

                        $('div').html(response);

                    }

                });

            });

        })

 

        当数据以对象形式传递时,可能传递的数据比较多且复杂,程序对于复杂的系列化解析能力有限,所以传递对象形式要谨慎

        那么就可以使用$.param()将对象形式的键值对转为URL地址的字符串键值对

            $(function(){

                $('#button').click(function(){

                    $.ajax({

                        type : 'POST',

                        url : 'Ajaxtest.php',

                        data : $.param({

                            user : $('form input[name=user]').val(),

                            email : $('form input[name=email]').val(),

                        }),

                        success : function(response,status,xhr){

                            $('div').html(response);

                        }

                    });

                });

            })

 

        $.param({})方法就是为了把对象转换成URL地址的字符串键值对形式,将其进行系列化

 

    Ajax进阶

        1.加载请求

            在Ajax异步发送请求时,遇到网速慢的情况,就会出现请求较长时间的问题,超过一定的时间用户就可能会关闭页面,但如果

            可以给用户一些提示,比如正在加载中,这样用户体验就会好一些

 

            解决问题的两个方法ajaxStart()事件刚触发 ajaxStop()事件完成后触发

            $(document).ajaxStart(function(){

                $('.loading').show();

            }).ajaxStop(function(){

                $('.loading').hide();

            });

 

            当然还可以设置一个超时限制,如果超过多少秒没有回应就停止

            $(function(){

                $('#button').click(function(){

                    $.ajax({

                        type : 'POST',

                        url : 'Ajaxtest.php',

                        data : $.param({

                            user : $('form input[name=user]').val(),

                            email : $('form input[name=email]').val(),

                        }),

                        success : function(response,status,xhr){

                            $('div').html(response);

                        },

                        timeout : 500,//500毫秒没有回应就停止加载,直接宣布加载结束

                        global : false//取消ajax事件,立马结束不执行

                    });

                });

            })

        2.错误处理 Ajax异步提交时,不可能所有情况都是成功完成的,也有因为代码异步文件错误,网络错误导致提交失败,这个时候我们应该提醒用户重新提交

            Ajax自带error属性

            $(function(){

                $('#button').click(function(){

                    $.ajax({

                        type : 'POST',

                        url : 'Ajaxtest.php',

                        data : $.param({

                            user : $('form input[name=user]').val(),

                            email : $('form input[name=email]').val(),

                        }),

                        success : function(response,status,xhr){

                            $('div').html(response);

                        },

                        timeout : 500,//500毫秒没有回应就停止加载,直接宣布加载结束

                        global : false,//取消ajax事件,立马结束不执行

                        error : function(xhr,errorText,errorType){

                            alert(xgr.status+":"+xhr.statusText);

                        }

                    });

                });

            })

 

            如果使用的$.post()或者$.get()方法时可以使用局部的连缀方法error()

            $.post('url',data,function(){}).error(function(xhr,errorText,errorType){})

 

            还有一个全局方法ajaxError()这个方法是在document上使用的 它一共有4个参数,第一个是event事件源对象e,setting是本次请求的url type 等info是错误信息

            $(document).ajaxError(function(event,xhr,setting,info){});

            

 

        3.请求全局事件 参数都是event,xhr,setting,info

            ajaxSuccess() 对应局部方法success(),请求成功完成时执行

 

            ajaxComplete() 对应局部方法complete(),请求完成后执行,不管成功与否

 

            ajaxSend() 请求发送之前执行,无对应局部方法,只有一个ajax属性


 

    Ajax操作json文件

    $(function(){

$('#button').click(function(){

$.ajax({

type : 'POST',

url : 'Ajaxtest.json',

success : function(response,status,xhr){

$('div').html(response[0].url);

}

});

});

    })

    

    php生成json文件 通过$.ajax()获取 php默认是html()处理

        <?php

        //通过php创建一个json文件

        $_arr = array('a'=>1,'b'=>2,'c'=>3);

        $_result = json_encode($_arr);

        echo $_result;

        ?>

        $(function(){

            $('#button').click(function(){

                $.ajax({

                    type : 'POST',

                    url : 'Ajaxtest.php',

                    dataType : 'json',

                    success : function(response,status,xhr){

                        

                        $('div').html(response.a);

                    }

                });

            });

        })



 

        跨域获取json文件,如果json文件不在同一个主机,那么就需要跨域获取json文件

        跨域获取原理就是在请求的文件里面做一个契约也可以说是验证,就是你发过来的数据符合我的要求我才给你返回去数据

        原理就是加一个参数作为验证

            <?php

            header("Access-Control-Allow-Origin: *");W3c要求加个头部才不会报错

            //通过php创建一个json文件

            $_arr = array('a'=>1,'b'=>2,'c'=>3);

            $_result = json_encode($_arr);

            $_callback = $_GET['callback'];

            echo $_callback."($_result)";

            

            ?>

        

        使用getJSON获取远端主机数据

            $(function(){

                $('#button').click(function(){

                    $.getJSON('http://39.108.188.31/Ajaxtest.php?callback=?',function(response){

                        alert(response.a);

                    });

                });

            })

 

        使用$.ajax获取远端主机数据    

            $(function(){

                $('#button').click(function(){

                    $.ajax({

                        url : 'http://39.108.188.31/Ajaxtest.php?callback=?',

                        type : "GET",

                        dataType : 'json',

                        success : function(response){

                            alert(response.a);

                        }

                    });

                });

            })

            dataType设置为jsonp也可以获取

            $(function(){

                $('#button').click(function(){

                    $.ajax({

                        url : 'http://39.108.188.31/Ajaxtest.php',

                        type : "GET",

                        dataType : 'jsonp',

                        success : function(response){

                            alert(response.a);

                        }

                    });

                });

            })

 

    xhr是XMLHttpRequest对象,是JavaScript原生的 jQuery扩展了一个jqXHR对象 他是整个$.ajax的返回,支持进行连缀

            var jqXHR = $.ajax({

                            url : 'http://39.108.188.31/Ajaxtest.php',

                            type : "GET",

                            dataType : 'jsonp',

                            success : function(response){

                                alert(response.a);

                            }

                        });

 

            jqXHR.success(function(){})

 

            success() complete() error()会被done() always() fail()取代,如果使用jqXHR建议使用这3个新方法,

            使用jqXHR和这3个新方法的好处

                    1.可以进行连缀操作,可读性大大提高

                    2.可以多次执行同一个回调函数,在$.ajax里面如果有相同的回调函数,后面的会把前面的覆盖

                    3.同时处理多个ajax

                        var jqXHR = $.ajax('t1.php');

                        var jqXHR2 = $.ajax('t2.php');

                        正常处理方法是

                        jqXHR.done(function(response){

                            alert(response);

                        });

 

                        jqXHR2.done(function(response){

                            alert(response);

                        });

                        同时处理使用全局方法$.when

                        $.when(jqXHR,jqXHR2).done(function(r1,r2){

                            alert(r1[0]);

                            alert(r2[0]);

                        });

 

    工具函数

        1.jQuery只提供了一个字符串操作函数$.trim(),清除左右两边的空格

 

        2.数组和对象的操作方法

            1.each()遍历数组和对象

                遍历数组

                var arr = ['张三','李四','马六'];

                $.each(arr,function(index,value){

 

                });

 

                遍历对象 属性名和值

                $.each(obj,function(name,function){

 

                });

 

            2.$.grep()数据帅选整体返回值是一个数组 处理函数有两个参数value和index index是索引,value是得到的值

                var arr = [1,2,5,12,55,65,12];

                var temp = $.grep(arr,function(value,index){

                    return index<3 && value<2;//系统就会在索引小于3也就是012里面的数据小于2的也就是返回1

                })

 

            3.$.map() 数据修改,返回值是个数组

            var arr = [1,2,5,12,55,65,12];

            var temp = $.map(arr,function(value,index){

                if(index<5&&elemnet<6){

                    return value+1;

                }

            });

 

            4.$.inArray(要查找的值,arr);查找某个值的下标也就是index

 

            5.$.merge(arr1,arr2)合并两个数组

 

            6.$.unique($(divs)) 删除重复的DOM元素

                var divs = $('div').get();

                divs = divs.concat($('.box').get());

                $.unique($(divs))

 

            7..toArray()把页面中的相同DOM元素变成数组

                var arr = li.toArray();把页面中的所有li元素弄到一个数组里面

 

            

            8.测试操作 主要是针对一些数据类型进行判断然后做出相应的操作

                1.$.isArray();判断是不是数据,返回值布尔值

 

                2.$.isFunction();判断是不是函数,返回布尔值

 

                3.$.isEmptyObject();判断一个对象是不是空对象

 

                4.$.contains($('box').get(0),$('pox').get(0))判断一个DOM元素是否包含在另一个DOM元素里面,必须是原生DOM对象,判断box里面有pox

 

                5.$.type()判断数据类型 返回值是数据类型

 

                6.$.isNumeric();判断是否是数值 返回值是布尔值

 

                7.$.isWindow();判断数据是否是window对象

 

            9.URL操作 $.param(obj)将对象转换成字符串的键值对,多个值用&连接

 

            10.浏览器监测$.browser.mozilla 目前已经放弃

 

            11.$.proxy()调整this指向

                $(function(){

        

                    var obj = {

                        name : 'GG',

                        test : function(){

                            alert(this.name);

                        }

                    }

                $('#button').click($.proxy(obj,'test'));

                })

 

    插件plugin 插件是以jQuery的核心代码为基础 插件也是jQuery代码 通过js文件引入

 

    插件种类 UI类 表单及验证类 输入类 特效类 ajax类 滑动类 图像图形类 导航类 动画类

 

    引入插件的步骤

        1.必须先引入jQuery文件而且是在所有插件之前引入

        2.引入插件

        3.引入插件周边如皮肤、中文包

 

    验证插件使用

        1.引入jQuery

        2.引入validate.js

        3.加载validate $('form').validate();

 

        通过属性设置得到相应的效果

            1.必填项 设置class="required"

            2.不得小于2位 设置minlength = "2"

            3.电子邮件 设置class = 'email'

            4.网址 设置class = "url"

 

    自动补全插件

 

    自定义插件 自己使用方便 别人的不适合 封装给自己使用的

 

    自定义插件分类

        1.封装对象方法的插件 也就是基于DOM元素的jQuery对象进行局部调用的 用的多

 

        2.封装全局函数的插件 全局使用 用的多

 

        3.选择器插件 类似find()函数选择后代元素的 封装的太少

 

    自定义插件的约定

        1.插件名 一般按照jquery.插件名.js

        2.避免插件内部使用$,如果要使用,必须传递jQuery进去

        3.所有方法或者插件,必须以;结尾,避免出现错误

        4.要封装全局性的方法就需要使用

            $.extend({

                'nav' : function(){

                    $('.nav').css({

                        'list-style' : 'none',

                        'margin' : 0,

                        'padding' : 0,

                        'display' : 'none'

                    });

                    $('.nav').parent().hover(function(){

                        $(this).find('.nav').slideDown('normal');

                    },function(){

                        $(this).find('.nav').stop().slideUp('normal');

                    });

                }

            });

 

        5.局部性的方法 如果直接将全局$.extend改成$.fn.extend 如果页面中存有多个list那么就会产生局部问题

            $.fn.extend({

                'nav' : function(){

                    $('.nav').css({

                        'list-style' : 'none',

                        'margin' : 0,

                        'padding' : 0,

                        'display' : 'none'

                    });

                    $('.nav').parent().hover(function(){

                        $(this).find('.nav').slideDown('normal');

                    },function(){

                        $(this).find('.nav').stop().slideUp('normal');

                    });

                }

            });

 

        6.如果页面中存有多个list那么就会产生局部问题,用这个$('.list').eq(0).nav();那么全部都会执行

            $.fn.extend({

                'nav' : function(){

                    this.find('.nav').css({

                        'list-style' : 'none',

                        'margin' : 0,

                        'padding' : 0,

                        'display' : 'none'

                    });

                    this.find('.nav').parent().hover(function(){

                        $(this).find('.nav').slideDown('normal');

                    },function(){

                        $(this).find('.nav').stop().slideUp('normal');

                    });

                }

            });

 

        7.'nav' : function(){} 还可以传递参数

            $.fn.extend({

                'nav' : function(color){

                    $(this).find('.nav').css({

                        'list-style' : 'none',

                        'margin' : 0,

                        'padding' : 0,

                        'display' : 'none'

                    });

                    $(this).find('.nav').parent().hover(function(){

                        $(this).find('.nav').slideDown('normal');

                    },function(){

                        $(this).find('.nav').stop().slideUp('normal');

                    });

                }

            });

 

        8.想要使用连缀功能 加个return this;

            $.fn.extend({

                'nav' : function(color){

                    $(this).find('.nav').css({

                        'list-style' : 'none',

                        'margin' : 0,

                        'padding' : 0,

                        'display' : 'none'

                    });

                    $(this).find('.nav').parent().hover(function(){

                        $(this).find('.nav').slideDown('normal');

                    },function(){

                        $(this).find('.nav').stop().slideUp('normal');

                    });

                    return this;

                }

            });


 

    jQuery UI插件

    使用了jQuery UI里面的样式不喜欢或者不合适可以在css里面冲突掉

            

        1.$('#button').button()方法,让按钮拥有jQuery UI的button样式

        2. dialog()的属性

            $('#reg').dialog({

                title : '知问注册',

                buttons : {

                    '提交' : function(){

                        alert('Ajax提交中...');

                    },

                    '取消' : function(){

                        $(this).dialog('close');

                    }

                },

                position : 'left top' 出现位置

                height : 500, dialog的高度

                width : 400, 宽度 单位默认是px

                minWidth : 300, 最小宽度,不能小于300

                minHeight : 300, 最小高度

                maxHeight : 700, 最大不能超过700px

                maxWidth : 700,

                show : true/false, 默认false,如果是true那么会有淡入的效果

                hide : true/false,默认false,如果是true那么会有淡出的效果

                show : 'bind'

                hide : 'bind'

                autoOpen : false 默认true 决定是否显示dialog

                draggable :false 默认true 决定能否拖动dialog

                resizeable : false 默认true 决定能否调整dialog大小

                modal : false 默认是false可以操作 决定对话框能否操作

                closeText : '关闭' 修改关闭按钮 鼠标放上去的提示信息

            });

 

            show和hide其他属性

            bind 对话框从顶部显示或者消失

            bounce 对话框断断续续地显示或者消失,垂直运动

            clip 对话框从中心垂直显示或者消失

            slide从左边显示或者消失

            drop从左边显示或者消失 有透明度变化

            fold从左上角显示或者消失

            highlight对话框显示或者消失伴随透明度和背景色的变化

            puff对话框从中心开始缩放,显示时收缩,消失时生长

            scale对话框从中心开始缩放,显示时生长,消失时收缩

            pulsate以闪烁形式显示或者消失

 

        先创建dialog 后期需要再调用$('#reg').dialog('open'); dialog一创建意味着就显示,autoOpen属性设置为false就会隐藏

            $('#reg').dialog({

                title : '知问注册',

                buttons : {

                    '提交' : function(){

                        alert('Ajax提交中...');

                    },

                    '取消' : function(){

                        $(this).dialog('close');

                    }

                },

                position : 'left top' 出现位置

                height : 500, dialog的高度

                width : 400, 宽度 单位默认是px

                minWidth : 300, 最小宽度,不能小于300

                minHeight : 300, 最小高度

                maxHeight : 700, 最大不能超过700px

                maxWidth : 700,

                show : true/false, 默认false,如果是true那么会有淡入的效果

                hide : true/false,默认false,如果是true那么会有淡出的效果

                show : 'bind'

                hide : 'bind'

                autoOpen : false

            });

 

        $('#reg').dialog();创建dialog 如果传参进去就是进行某种操作

 

        $('#reg').dialog('close'); 关闭dialog

 

        $('#reg').dialog('open'); 打开dialog

 

        dialog()里面的方法

        dialog({

            focus : function(event){

                dialog获得焦点的时候执行

            },

            create : function(e,ui){

                dialog创建的时候执行

            },

            open : function(event,ui){

                dialog显示的时候执行

            },

            close : function(event,ui){

                关闭的时候执行

            },

            beforeClose : function(){

                将要关闭时执行,如果return false那么dialog将不会关闭,适用于做一些确认工作

            },

            drag : function(){

                每次移动的时候就会执行

            },

            dragStart : function(event,ui){

                拖动开始执行,ui里面有个position.top属性

            },

            dragStop : function(){

                拖动结束执行,ui里面有个position.top属性

            },

            resizeStart : function(event,ui){

                dialog大小变化的时候会执行,ui的四个属性,size子属性width和hight

                position得到对话框的坐标子属性top和left,originSize原始对话框的大小,子属性width和height

                originPosition原始对话框的坐标子属性top和left

            }

            resizeStop : function(event,ui){

                dialog大小变化的时候会执行,ui的四个属性,size子属性width和hight

                position得到对话框的坐标子属性top和left,originSize原始对话框的大小,子属性width和height

                originPosition原始对话框的坐标子属性top和left

            }

 

        })

 

        dialog() 传一个参数和传2个参数

 

        $('#reg').dialog('close');

        $('#reg').dialog('moveToTop');有多个dialog的时候指定谁在前面

        $('#reg').dialog('open');

        $('#reg').dialog('destroy');销毁dialog

        $('#reg').dialog('isOpen');判断对话框是否处于打开状态 返回值是布尔

        $('#reg').dialog() 返回的对象是#reg这个div的对象 之前的事件都是div的对象

        $('#reg').dialog('widget') 返回的对象是整个dialog的对象

        $('#reg').dialog('option','要获取的dialog的属性'); 返回值是dialog属性的值

        $('#reg').dialog('option','要获取的dialog的属性','要设置的值'); 修改属性的值

        

        dialog中的事件

        $('#reg').on(dialogfocus,function(){

            获得焦点事件

        });

 

        dialogopen 打开时的事件

 

        dialogclose 关闭后的事件

 

        dialogbeforeclose 关闭前的事件

 

        dialogdragstart

 

        dialogdragstop

 

        dialogresizestart

        

        dialogresizestop

 

    button()方法和属性

        button({

            disabled : true,按钮能否点击

            lable : '搜索',修改按钮的value

            icons : {

                //按钮前后插入一个小图片,图片可以在文档里面查http://api.jqueryui.com/theming/icons/

                primary : '',

                secondary : ''

                //正常button建议不要使用input

            },

            text : false,隐藏button的文字value

        });

 

        传一个参数

        button('disable') 禁用按钮

        button('enable') 启用按钮

        button('destroy') 销毁按钮

        button('widget') 获取按钮的jQuery对象,

        button('option',要获取的属性名) 获取属性的值

        button('option',要设置的属性名,value) 设置修改属性的值


 

        需要操作dialog里面的按钮 然后进行其他操作

        方法1 $('#reg').parent().find('button').eq(1)

        方法2 $('#reg').dialog('widget').find('button').eq(1)

 

        单选框和复选框使用UI 标签必须是双标签

 

        单选

        <input type="radio" name="sex" value="male" id="male"><label for="male">男</label></input>

        <input type="radio" name="sex" value="female" id="female"><label for="female">女</label></input>

        设置方法1 $('#reg input[type=radio]').button();

            方法2 $('#reg').buttonset();

            

        多选

        <input type="checkbox" name="color" value="red" id="red"><label for="red">红</label></input>

        <input type="checkbox" name="color" value="yellow" id="yellow"><label for="yellow">黄</label></input>

        <input type="checkbox" name="color" value="blue" id=blue"><label for=blue">蓝</label></input>

        <input type="checkbox" name="color" value="green" id="green"><label for="green">绿</label></input>

        设置方法1 $('#reg input[type=checkbox]').button();

            方法2 $('#reg').buttonset();

        

 

        tooltip() 提示UI 深入的扩展了HTML中的title属性 提示更加丰富还可以进行控制,提升用户体验

 

        1.先在标签里面设置好title

 

        2.执行tooltip()方法 $('#reg input[title]').tooltip({});

 

        3.设置tooltip的样式

        .ui-tooltip{

            color:#666;

        }

 

        3.tooltip的功能设置

        $('#reg input[title]').tooltip({

            disabled : true 禁用title,不显示title

            content : '改变title的提示文本' 修改title显示的文本

            items : '' 过滤某个title

            tooltipClass : 'a' 引入css样式

            position : {

                my : 'left+5 left' 以目标左下角为中心,还可以进行运算

                at : 'right+5 left' 依据my为中心 还可以进行运算

            },

            show : false, 显示时的样式,默认淡入

            hide : false 消失时的样式,默认淡出

            track : true title可以跟随鼠标走动

            open : function(){

                显示时运行触发

            },

            close : function(){

                关闭时触发

            }

        });

 

        4.tooltip() 传参进行某种操作

        传一个参数

        tooltip('open') 使某个工具提示一开始就处于打开显示状态

        tooltip('close') 使某个工具提示一开始就处于打开关闭状态

        tooltip('disable') 禁用工具提示

        tooltip('enable') 启用工具提示

        tooltip('destroy') 销毁按钮

        tooltip('widget') 获取按钮的jQuery对象,

        tooltip('option',要获取的属性名) 获取属性的值

        tooltip('option',要设置的属性名,value) 设置修改属性的值

 

        2.两个事件tooltipopen打开时触发 tooltipclose关闭时触发

        $('#reg').on('tooltipopen',function(){});


 

    自动补全UI autocomplete 必须要要一个参数

        $('#email').autocomplete({

            source : ['aa','bb','aaa','aaaa','aaaaaa'] 必要有数据源

            disabled : true, 禁用自动补全

            minLength : 2,最小字符长度才会自动补全,如果是0直接全部显示

            delay : 0,延迟出来的时间,默认延迟300毫秒

            autoFocus : true,默认第一个被选中

            position : {

                调整位置

                my : 'left center',

                at : 'right center'

            },

            create : function(){}创建的事件

            open : function(){}打开时的事件

            close : function(){} 关闭后的事件

            focus : function(e,ui){

                获取焦点事件

                alert(ui.item.lable);获取文本框输入的内容lable跟value是一样,但value可以进行控制变成

                ui.item.value='123'

            },

            select : function(){}选中了自动补全的内容是触发

            change : function(){}失去焦点且内容发生改变触发,文本框内容初始是空

            search : function(){} 搜索匹配内容完毕会触发

            response : function(e,ui){

                alert(ui.content[1].lable);

            }搜索完毕会触但多有一个属性ui,content是一个数组,lable和value是一样,value可以进行修改

        });

 

        2.传一个参数和传2个参数

        autocomplete('close')

        open disable enable destroy widget

        autocomplete('search',设定要默认输入的字符,代替我们输入然后自动会去匹配)

        autocomplete('option',要获取的属性名) 设后去属性值

 

        3.使用on触发事件

            $('#email').on('autocompleteopen',function(){})

            autocompleteclose

            autocompletesearch

            autocompletefocus

            autocompleteselect

            autocompletechange

            autocompleteresponse

        

 

        4.修改自动补全UI的样式 主要是提示菜单里面背景和字体颜色字体等设置

        .ui-menu-item a.ui-state-focus{

 

        }

 

        自动补全深入研究 数据源的探讨使用 数据源可以是数组 函数

        $('#email').autocomplete({

            source : function(request,response){

                alert(request.term);获取用户输入的内容

                response(['a','aaaa','bb']);绑定数据源,要呈现的内容,不会根据你输入内容去匹配,只会全部显示,只能自己写功能

                var host = ['qq.com','163.com','263.com','gmail.com','hotmail.com'];

            }

        });


 

    日历UI控件的调试和配置 $('#date').datepicker();

    UI标题背景设置

    .ui-widget-header{

        之前dialog的标题已经设置过了是同一个

    }

    当天的日期特殊显示

    .ui-datepicker-today .ui-state-highlight{

 

    }

 

    日期国际化设置

    d 1-31

    dd 01-31

    o 1-366

    oo 001-366

    D 星期的英文缩写

    DD 星期的英文全拼

    m 1-12

    mm 01-12

    M 月份的缩写

    MM 月份全拼

    y 两位数字的年份

    yy四位数字年份

    $('#date').datepicker({

        dateFormat : 'yy-mm-dd'

    });

 

    

$('#date').datepicker({})属性设置

 

    $('#date').datepicker({

dateFormat : 'yy-mm-dd',

// dayNameMin : ['日','一','二',,,'六'],//设置日历的星期显示,默认是英文缩写

//monthNames : ['一月','二月','三月',,,,,,'十二月'],//设置标题上月份显示,默认是英文缩写

//altField : '#abc',//给另一个input文本框里面载入选定的日期,该input的id是abc

//altFormat : 'y-mm-dd',//指定载入的那个文本框的日期显示格式

//appendText : '日历',//在日历控件文本框外面插入文本跟在文本框后

//showWeek : true,//添加一列显示第几周,是个布尔值默认是false

//weekHeader : '添加一列的周的标题'

        firstDay : 1,//指定星期从几开始,外国人是从星期天开始,是0,我们习惯从星期一开始,改成1就好了

        disabled : true 禁用日历,无法选

        numberOfMonths : 3,显示多个日历,多个月一起显示

        numberOfMonths :[3,2] 3行2列显示

        showOtherMonths : true ,显示其他月份的日期,但是不可选

        selectOtherMonths :true,显示其他月份的日期,可选

        changeMonth : true,显示下拉菜单所有月份

        changeYear : true ,显示年份下拉菜单

        autoSize : true,自动适应日期选择后文本框长度

        showOn : 'button/both' 添加一个按钮通过点击按钮触发可以选择日历,如果选both那么按钮和文本框都可以触发选择

        buttonText : '设置按钮的文本'

        buttonImage : "图片的url"

        buttonImageOnly "配合图片url使用,只显示图片"

        showButtonPanel : true, 显示today和关闭按钮

        closeText : '关闭',修改关闭按钮的文本

        currentText : '今天',修改今天按钮的文本,本来是英文的

        nextText : '下一个月的按钮的提示alt文本'

        prevText : '上一个月的按钮的提示alt文本'

        maxDate : 0,当前日期的后面的第几天

 

    });

    

 

    验证插件设置 可以在行间加class但只有会污染html,一般建议以js的形式

    user对应name属性

 

    设置默认行为

    $.validator.setDefault({

        debug : true 开启调试模式,表单将无法提交,适用于测试阶段

    });

    $('#reg').validate({

        submitHandler : function(){

            //当验证成功后执行,而且阻止了默认提交

            //一般用于ajax提交使用

        }

        ignore : '#demo' 忽略某个字段的验证

 

        /*群组麻烦方法

        groups : {

            myerror : 'user pass' //群组user 和 pass两个错误提示,合并

        }

        errorPlacement : function(error,element){

            $.each(error,function(index,value){

                //在html页面新加一个p标签class是myerror

                $('.myerror').html($('.myerror').html()+$(value).html());

            });

        }

        */

 

        /*

        简单方法 群组

        groups : {

            error_user : 'user',

            error_pass : 'pass'

        },

        errorPlacement : function(error,element){

            error.appendTo('.myerror');

        }

        */

 

        /*

        群组最简单的方法

        errorPlacement : function(error,element){

            error.appendTo('.myerror');

        }

        */


 

        rules : {

            user : {

                required : true,

                minLength : 2

            },

            email : {

                required : true,

                email : true

            },

            url : {

                url : true

            },

            date : {

                date : true//验证日期,很严格2018-05-16

            },

            number : {

                number : true必须是数字

            },

            digits : {

                digits : true,必须是正整数

            },

            notpass : {

                equalTo : '#pass'密码确认,必须要和#pass这个文本框的值一样

            },

            min : {

                min : 5输入值不小于5

            }

            max : {

                max : 10 输入不能大于10的数

            }

            range : {

                range : [5,10]

            }

            rangeLength : {

                rangeLength : [5,10] 长度是5-10位,汉子算一位

            }

            

            messages : {

                user : {

                    required : '账号不得为空',

                    minLength : '账号不得小于2位'

                }

            }

        }

    });

 

    $('#reg').validate({

        rules : {

            user : {

                required : true,

                minLength : 2,

                rangeLength : [5,10]

            },

            messages : {

                user : {

                    required : '账号不得为空',

                    minLength : '账号不得小于{0}位' {0}会自动取得minLength的值

                    rangeLength : '账号长度要在{0}-{1}之间'

                }

            }

        }

    });


 

        






 

</body>

 

</html>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值