什么是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

转载于:https://www.cnblogs.com/wolf-sun/p/3205619.html

jquery基础总结相关推荐

  1. 【Java Web开发指南】JQuery基础笔记

    文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...

  2. Jquery基础之DOM操作

    Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...

  3. Ajax、jQuery基础入门视频教程

    关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...

  4. jQuery小测试系列之jQuery基础知识

    日期:2012-4-17  来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识

  5. JQuery-学习笔记04【基础——JQuery基础案例】

    Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...

  6. JQuery-学习笔记01【基础——JQuery基础】

    Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...

  7. 06 Jquery 基础

    06 Jquery 基础 前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script>//基本选择器/ ...

  8. java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...

    第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...

  9. java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)

    今日内容 1.JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...

  10. 《jQuery基础》总结

    目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...

最新文章

  1. python大佬养成计划----flask_sqlalchemy操作数据库
  2. WeX5 -- xcode7+iphone免费帐号打包详解
  3. linux bash shell for 循环使用简介
  4. vue的指令绑定、事件、冒泡
  5. reverseinverse
  6. ansible自动化部署(一)
  7. asp.net发布网站的详细步骤
  8. ipad导入pdf_Ipad笔记法①日常笔记篇
  9. HTML5---2.语义化标签的兼容性问题以及解决方案
  10. 计算机软件系统包括选择题,青书学堂: (单选题) 计算机软件系统包括 ( )(本题2.0分)...
  11. 学习笔记-大数据之路-数据模型篇-建模综述
  12. 2021-07-02
  13. html字幕精灵图标,视频加字幕精灵
  14. Java爬取喜马拉雅非付费音频【优化】
  15. 异步时间扭曲(Asynchronous Timewarp简称ATW)一种生成中间帧技术
  16. 鹏业BIM三维安装算量软件一次购买还是收年费
  17. idea复制项目导致sources root复用了另一个项目
  18. 计算机中汉字的顺序有什么排列,汉字演变过程的时间排序是什么?
  19. 高等数学 宋浩 笔记一
  20. matlab死亡时间推测实验,尸检——关于死亡时间推测的基本手法及操作方式

热门文章

  1. 使用wrk进行性能测试
  2. 洛谷P2835 刻录光盘
  3. python升级或者其他原因把yum搞坏了
  4. 怎样将python的文件转化为windows的可执行程序
  5. lower_bound和upper_bound算法
  6. cross-compile/交叉编译 适用于ARM的ko文件
  7. 熬了一个通宵,终于解决了所有的事情,下线,睡觉
  8. 70% 产品经理都在考虑跳槽?还有哪些你不知道的行业真相
  9. PMCAFF | 聊聊阅读类app的交互
  10. 【干货】产品需求确定后,不要着急设计原型