jquery基础总结

什么是jQuery？
        就是一个JavaScript函数库，开源的。
jQuery能做什么
        JavaScript是做什么的，jQuery就是做什么的，Jquery是对javascript的封装。
JQuery的特点
          1、     写少做多——Write Less,Do More
          2、     很好的解决了不同浏览器的兼容问题(css还是有问题的)
          3、     对于不同控件具有统一的操作方式
          4、     体积小，使用简单方便
          5、     链式编程、隐式迭代、插件丰富、开源、免费
          6、     让编写JavaScript程序更简单，更强大)
         优点：
          1、     轻量级
          2、     强大的选择器
          3、     出色的DOM操作的封装
          4、     可靠的事件处理机制
          5、     完善的Ajax
          6、     不污染顶级变量
          7、     出色的浏览器兼容性
          8、     链式操作方式
          9、     隐式迭代
          10、   行为层与结构层的分离
          11、   丰富的插件支持
          12、   完善的文档
          13、   开源
jQuery中的顶级对象$
       $是jQuery的简写，可以用jQuery代替$

       window.onload(fn)和$(document).ready(fn)的区别：

      使用jQuery实现window.onload的效果:$(window).load(fn);
jQuery中提供的两个循环函数

1 $.map(array,callback(element,index));对于数组array中的每个元素，调用回调函数，返回一个新的数组，原数组不变
2                element:当前循环的数组元素
3                Index:当前下标
4 $.each(array,fn)
5               遍历数组，return false退出循环
6               使用this表示当前元素的值7

$.trim(字符串)  去掉两端的空格
 jQuery对象和Dom对象的转换
          Dom对象转换为jQuery对象：$(Dom对象)
          jQuery对象转换为Dom对象：$(Dom对象).get(0);$(Dom对象)[0];
 jQuery选择器
          Id选择器：$('#id');
          标签选择器：$('input');          $('*')获取页面上的所有元素
          属性过滤选择器：$('input[name=gender]')
          类样式选择器：$('.cls');
          标签+类选择器：$('div.cls');
          多条件选择器：$('p,div,span.menuitem')//同时选择p标签、div标签和拥有menuitem样式的span标签元素
          层次选择器：$('div li')//div下的所有li元素(所有)
                             $('div>li')//div下直接li子元素
                             $('.menuitem+div')//样式为menuitem之后的相邻的第一个div元素    =   $('.menuitem').next('div')
                             $('.menuitem~div')//样式为menuitem之后的所有的兄弟div元素       =   $('.menuitem').nextAll('div')
          基本过滤选择器：:first选取第一个元素     $('div:first')
                                    :last选取最后一个元素     $('div:last')
                                    :not选取不满足选择器条件的元素     $('input:not(.cls)')
                                    :even选取索引是偶数
                                    :odd选取索引是奇数
                                    $(':header')选取所有的h1——h6元素
                                    $('div:animated')选取正在执行动画的<div>元素
          属性过滤选择器：$('div[id]')//选取有id属性的div
                                    $('div[title=test]')//title属性等于test
                                    $('div[title!=test]')//title属性不等于test或没有title属性
                                    $('input[name^=n]')//name属性以n开头
                                    $('input[name$=n]')//name属性以n结尾
                                    $('input[name*=n]')//name属性包括n
          表单对象属性过滤器：$('#form1:enabled')//选取id为form1的表单内所有启用的元素
                                          $("#form1 :disabled")//选取id为form1的表单内所有禁用的元素
                                          $("input:checked”)//选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.
                                         $("select :selected")选取所有选中的选项元素
          表单选择器：$(':input')//选取所有的input、textarea、select、button
                             $(':text')//与$('input[type=text]')差不多，但有一定的区别
                            $('textarea')//错误
          可见性过滤器：:hidden
          内容过滤器：:contains(text)//包含指定文本的元素
                             :empty//不包含元素或者文本的元素
                             :has(input)//包含指定元素的元素
                             :parent//作为父元素的元素
          子元素过滤器：     $('ul li:first');//只返回一个li元素
                                     $('ul li:first-child’);//为每个父元素ul都返回一个li
                                     :only-child,匹配当前父元素中只有一个子元素的元素
                                     :nth-child(3n),选取3的倍数的元素
                                     :nth-child(3n+1),满足3的倍数+1的元素
                                     .children()方法，只考虑子元素，不考虑后代元素
链式编程
          注意：$('div').html('值').val('值')可以
                    $('div').html().val('值')不可以
                    括号中没有值的时候是获取值，获取值返回的是获取的字符串而不是对象，所以不能链式编程
          end()方法可以恢复链被破坏前的情况
          toggleClass('cls')切换样式的显示
          hasClass('cls')判断是否应用了某样式
          $('p:eq(0)')代表的是第一个元素
          $('p:lt(2)')前两个,索引为2之前的
          $('p:gt(2)')表示的是后两个
获得兄弟元素的几个方法
          next();//当前元素之后的紧邻着的第一个兄弟元素
          nextAll();//当前元素之后的所有兄弟元素
          prev();//当前元素之前的紧邻着的兄弟元素
          prevAll();//当前元素之前的所有兄弟元素
          siblings();//当前元素的所有兄弟元素
jQuery的迭代(包装集)
          if($('#btn').length<=0)
          {
               alert("id为btn的元素不存在！");
          }
jQuery的Dom操作
          $('a:first').html('hello');
          $('a:first').text('hello');
          $('a:first').attr('href','http://www.baidu.com');
          $('a:first').removeAttr('class');删除属性
          $('a:first').attr('class','');属性还有
动态创建Dom节点
          $("<a href='http://www.baidu.com'>百度</a>").appendTo('body');
          $('body').append("<a href='http://www.baidu.com'>百度</a>");
          prepend，在元素的开始添加元素（第一个子节点）。增加元素开始(儿子)
          after:在元素之后添加元素（添加兄弟）增加元素后面(兄弟)
          before:在元素之前添加元素（添加兄弟）增加元素前面(兄弟)
          (*)A.insertBefore(B);将A加到到B的前面，等同于B.before(A);
          (*)X.insertAfter(Y);将X加到到Y的后面，等同于Y.after(X);
          empty()清空某元素下的所有子节点
          remove()删除当前元素，返回值为被删除的元素
          clone()克隆节点
          $('br').replaceWith('<hr/>');用<hr/>替换br
          $('<br/>').replaceAll('hr');用<br/>元素替换所有的hr