jquery的总结

jQuery基本概念

JQuery基本概念使用javascript开发过程中，有许多的缺点：

 

    1. 查找元素的方法太少，麻烦。

    2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。

    3. 有兼容性问题。

    4. 想要实现简单的动画效果，也很麻烦

5. 代码冗余。

 

什么是jQuery?

 

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。

jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

 

 

 

jquery对象和js对象：

       jquery对象：通过$()获取的元素

       js对象：通过document的方式获取的元素

       两者之间的区别与联系：

           区别：jquery对象只能调用jquery对象的方法和属性，js同理，不能调用jquery的属性和方法

           联系：jquery对象可以看作是由js对象组成的集合，可以遍历jquery对象得到js对象

                   jquery对象----> js对象   jquery对象[索引]   jquery对象.get(索引)

                   js对象---->jquery对象    $(js对象)

入口函数：

      window.onload=function(){}

      $(document).ready(function(){})

      $(function(){})

    

$ 的实质 ：函数

       参数：①函数：入口函数  ②js对象：jquery对象  ③字符串： 获取的元素

     

  选择器：

      基本选择器：id选择器---获取指定ID的元素 

类选择器---获取同一类class的元素

标签选择器---获取同一类标签的所有元素

并集选择器---使用逗号分隔，只要符合条件之一就可。

交集选择器---获取class为redClass的div元素

      层级选择器：后代选择器---使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

子代选择器---使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素

      过滤选择器：  :even---选择索引为偶数的元素

:odd---选择索引号为奇数的元素

:eq(索引)---选择索引号为2的元素，索引号index从0开始

:first

      筛选选择器(方法)： children(选择器)---相当于$(“ul>li”)，子类选择器

parent()---查找父亲

siblings(选择器)---查找兄弟节点，不包括自己本身

next()---找下一个兄弟

prev()---找上一个兄弟

find(选择器)---相当于$(“ul li”),后代选择器

eq(索引)---相当于$(“li:eq(2)”),index从0开始

     动画函数：

        show()  显示

hide()  隐藏

fadeIn()  淡入   

fadeOut()  淡出  

slideUp()   用于向上滑动隐藏元素

slideDown()  用于向下滑动隐藏元素

SlideToggle() 如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们

第一个参数：动画执行的时间，固定的字符串，毫秒数字

        第二个参数：回调函数，

        第三个参数：动画执行的方式：swing linear

    

     自定义动画函数： animate()

       1:{属性键值对}

       2：动画持续的时间

       3：动画执行的方式： swing（摇摆） linear（匀速）

       4：回调

    

       动画队列：要执行动画，先排队，前面的动画执行完成后，在执行后面动画

       停止动画：stop()

 

 

css操作：修改样式

           css("样式属性","样式属性值")

           css({"属性1"："属性值1","属性2"："属性值2"})

           获取属性： css("属性名")

      class操作：操作类

           添加类名： addClass("类名")

  删除类：removeClass("类名")

            判断类是否存在：hasClass("类名")

            移除类：removeClass(“类名”)

            切换类：toggleClass("类名")

    

      attr():操作普通的属性，用法和css()的用法一样

          attr("属性","属性值");

          attr({"属性1"："属性值1","属性2"："属性值2"});

          attr("属性")

    

     prop():操作属性值为bool类型的属性

    

     

 

    节点的操作：

          创建节点：$("标签和内容")

          将节点添加到页面中

    嵌套关系：

          向后追加：父元素.append(子元素)  子元素.appendTo(父元素)

          往前面添加： 父元素.prepend(子元素)  子元素.prependTo(父元素)

          并列关系： 兄弟.after(元素)  兄弟.before(元素)

    清空节点： 节点.empty()

         删除节点：节点.remove()

         克隆节点：节点.clone(true)

    

    获取元素的文本内容：

    表单元素的文本内容：

         获取： 对象.val()  设置： 对象.val("设置的文本内容")

    非表单的元素

        获取： 对象.text()  对象.html()

    封装的特殊的属性获取

        获取元素的宽度和高度：  width()  height()

                                innerHeight(): height+padding

                                outerHeight(): height +padding + border

                                outerHeight(true): height +padding +border +margin

        卷曲出去的值： scrollTop()  scrollLeft()

        获取位置：offset()  position()

   

   事件机制

       简单的事件----》bind----》delegate事件 ----》on    

       绑定：对象.on("事件的类型","谁执行"，数据,function(e){});

       解绑：对象.off();//不写参数，将所有的事件都解绑，带有参数，解绑这个事件类型的所有事件

       第三个参数：在回调函数中  e.data

    

       阻止浏览器的默认事件： e.preventDefault()

       阻止事件冒泡：e.stopPropagation()

                     return false;

 

       ajax：asyns javascript and  xml

       ajax的原理：通过XMLHTTPRequest对象，向服务器发送请求，服务响应数据，把响应的结果通过JavaScript渲染到页面中

      ajax的优点：异步加载，局部刷新

      ajax的使用：

         var xhr= new XMLHTTPRequest()

         xhr.open('请求方式'，'url地址','是否异步')

         xhr.send('');

      响应---事件机制的方式 onreadystatechange  readyState 0,1,2,3,4 status

               dVObj.innerHTML=this.responseText;

    

      异步：一次执行一堆，后面的内容不等前面的执行完。

      响应内容：responseText----是一个字符串

               序列化：将字符串格式转换为json格式  JSON.parse()

               反序列化：将json格式的数据转换为string格式  JSON.stringfiy()

    

    jquery封装ajax的方法

    load(): $(对象).load('接口地址',{传递的参数：参数值},function(){})

    

jquery中get方法和post方法

           $.get('url',传入的参数，成功的回调函数（response,status）)

           $.post('url','传入的参数',成功的回调函数,返回的数据类型)

    jquery中的ajax()

        $.ajax({

        url:'请求地址',

        type:'get/post',

        data:'传入的参数',

        dataType:'响应的数据类型',

        success:function(response){},

        error:function(){},

        complete:function(){}

        });

    

      jsonp 的使用方法：ajax()

      $.ajax({

           url:'',

           jsonp:'',

           dataType:'jsonp',

    

           success:function(){}

       })

    瀑布流

          wrap盒子没有宽度，相框的宽度* 多少列相框

         当滚动条滚到到最底部的时候，添加相框---ajax