jquery基础总结-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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)的区别:

 window.onload(fn) $(document).ready(fn)
页面完全加载完毕后才会触发   只要Dom元素加载完毕就触发,提高相应速度
每次注册新的事件都会将前面的覆盖掉    可以多次注册事件,最终都会执行

      使用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

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/3205619.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: