JQuery学习总结

JQuery

概述

JQuery是继Prototype(js库)一个对javascript进行全方位包装的一个JS库，内部提供了一系列用于操作文档元素，样式属性操作，事件监听，以及ajax请求的便捷功能库，另外JQuery提供了不同浏览器的兼容性解决方案；JQuery核心理念:Write Less,Do More。

JQuery主要内容

• 丰富的选择器
• 属性样式处理
• 文档操作(DOM)
• 事件处理
• 特效
• ajax
• 工具函数
• …

jquery各版本介绍

• 1.X：主要用于PC端（兼容性较好）
  • 1.4
  • 1.6
  • 1.8.X（最后一个兼容IE6的版本）
  • 1.9.X
  • 1.11.XX
• 2.X：过渡版本(不推荐)
• 3.X：更加适合移动端开发（或者新型互联网项目）

jquery文件类型

JQuery官方提供了两种文件类型

• jquery.js（未经压缩的原始js文件，内部保留js文件编写的一些空格，换行等格式，一般适用于开发环境）
• jquery.min.js（经过压缩之后的js文件，内部会去除多余的空格换行，文件较小，一般适用于生产环境）

使用方式

• 本地引用

• 使用在线的CDN地址

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  

js与jquery对象转换

1. jquery转js

   // let a = $('#app')[0];
   let a = $('#app').get(0);
   

2. js转jquery

   var box = document.getElementById("box");
   //包装原始js对象为Jquery对象
   $(box)
   

$与jquery

在jquery中操作元素的基本句柄一般使用$,也可以使用jQuery,比如以下代码，两者含义是一致的

取到元素

$('选择器')

选择器

• id选择器：#box
• class选择器：.box
• 标签选择器：box
• 层级选择器：box box1
• 子类选择器：box>box1
• 筛选器：box:last-chlid
• 可见性选择：box:visible
• 属性选择：[key=value]
• 表单选择：:input、:password、:text
• 表单对象属性选择：box:disable、box:checked、box:selected、box:enabled
• …

attr与prop

• attr：取到或者赋予标签不存在的属性(第一个参数为属性名，第二个参数为属性值)（只传一个参数为取值，传两个参数为赋值）
• prop：取到或者赋予标签拥有的属性(第一个参数为属性名，第二个参数为属性值)（只传一个参数为取值，传两个参数为赋值）

事件监听

1. 直接调用事件

   $('box').事件名(function(){
       
   })
   

2. 添加事件

   $('box').on('事件名',function(){
      
   })
   

文档处理

• append(x)：插入x
• appendTo(x)：插入到x
• after(x)：在后面插入x
• before(x)：在前面插入x
• insertAfter(x)：插入到x后面
• insertBefore(x)：插入到x前面
• replaceWith(x)：用x替换
• replaceAll(x)：替换x
• remove(x)：删除x

jquery-ajax

• $.ajax()：发送ajax请求
• $.get()：发送get请求
• $.post()：发送post请求
• $.getJSON()：getJSON默认使用get请求，向服务端发送请求后，自动将服务端响应回来的数据转换为JSON对象（getJSON还可以用于加载.json文件）
• load()：load函数可以异步加载指定的页面到目标区域
• serialize()
• serializeArray()