开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

相关文章
强烈推荐:240多个jQuery插件
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
955 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1016 0
推荐12款非常有用的流行 jQuery 插件
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
867 0
40款非常棒的 jQuery 插件和制作教程(系列二)
jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
1086 0
40款非常棒的 jQuery 插件和制作教程(系列一)
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
818 0
10款新鲜出炉的 jQuery 插件
 这篇文章与大家分享的是10款新鲜出炉的基于 jQuery 开发的 Ajax 插件,有幻灯片、图片画廊、菜单等很多有用的插件。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。 1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2.
833 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
939 0
第78天:jQuery事件总结(一)
jQuery事件总结(一)      现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。
1168 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载