首页 JavaWeb

# JQuery 基础

  1. 概念： 一个 JavaScript 框架。简化 JS 开发

  • jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨 是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优 化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

  • JavaScript 框架：本质上就是一些 js 文件，封装了 js 的原生代码而已

  1. 快速入门

  2. 步骤：
    1. 下载 JQuery

    • 目前 jQuery 有三个大版本：
      1.x：兼容 ie678, 使用最为广泛的，官方只做 BUG 维护，
      功能不再新增。因此一般项目来说，使用 1.x 版本就可以了，
      最终版本：1.12.4 (2016 年 5 月 20 日)
      2.x：不兼容 ie678，很少有人使用，官方只做 BUG 维护，
      功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x，
      最终版本：2.2.4 (2016 年 5 月 20 日)
      3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，
      一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。
      目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017 年 3 月 20 日）
    • jquery-xxx.js 与 jquery-xxx.min.js 区别：
      1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
      2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

导入 JQuery 的 js 文件：导入 min.js 文件

使用

  var div1 = $("#div1");
  alert(div1.html());

JQuery 对象和 JS 对象区别与转换

JQuery 对象在操作时，更加方便。

JQuery 对象和 js 对象方法不通用的.

两者相互转换

  • jq -- > js : jq 对象 [索引] 或者 jq 对象.get (索引)
  • js -- > jq : $(js 对象)

选择器：筛选具有相似特征的元素 (标签)

  1. 事件绑定
    //1. 获取 b1 按钮
    $("#b1").click (function (){
alert("abc");
 });
  1. 入口函数
$(function () {
    
 });
window.onload 和 $(function) 区别
 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
    $(function)可以定义多次的。

  1. 样式控制：css 方法
// $("#div1").css("background-color","red");
  	$("#div1").css("backgroundColor","pink");
​
# 选择器分类
# 基本选择器
  1. 标签选择器（元素选择器）
    • 语法： $("html 标签名") 获得所有匹配标签名称的元素语法： $("html 标签名") 获得所有匹配标签名称的元素
  2. id 选择器
    • 语法： $("#id 的属性值") 获得与指定 id 属性值匹配的元素
  3. 类选择器
    • 语法： $(".class 的属性值") 获得与指定的 class 属性值匹配的元素
  4. 并集选择器：
    • 语法： $("选择器 1, 选择器 2....") 获取多个选择器选中的所有元素
# 层级选择器
  1. 后代选择器
    • 语法： $("A B") 选择 A 元素内部的所有 B 元素
  2. 子选择器
    • 语法： $("A> B") 选择 A 元素内部的所有 B 子元素
# 属性选择器
  1. 属性名称选择器
    • 语法： $("A [属性名]") 包含指定属性的选择器
  2. 属性选择器
    • 语法： $("A [属性名 =' 值 ']") 包含指定属性等于指定值的选择器
  3. 复合属性选择器
    • 语法： $("A [属性名 =' 值 '][]...") 包含多个属性条件的选择器
# 过滤选择器
  1. 首元素选择器
    • 语法： :first 获得选择的元素中的第一个元素
  2. 尾元素选择器
    • 语法： :last 获得选择的元素中的最后一个元素
  3. 非元素选择器
    • 语法： :not (selector) 不包括指定内容的元素
  4. 偶数选择器
    • 语法： :even 偶数，从 0 开始计数
  5. 奇数选择器
    • 语法： :odd 奇数，从 0 开始计数
  6. 等于索引选择器
    • 语法： :eq (index) 指定索引元素
  7. 大于索引选择器
    • 语法： :gt (index) 大于指定索引元素
  8. 小于索引选择器
    • 语法： :lt (index) 小于指定索引元素
  9. 标题选择器
    • 语法： :header 获得标题（h1~h6）元素，固定写法
# 表单过滤选择器
  1. 可用元素选择器
    • 语法： :enabled 获得可用元素
  2. 不可用元素选择器
    • 语法： :disabled 获得不可用元素
  3. 选中选择器
    • 语法： :checked 获得单选 / 复选框选中的元素
  4. 选中选择器
    • 语法： :selected 获得下拉框选中的元素
# DOM 操作
# 内容操作
  1. html (): 获取 / 设置元素的标签体内容 <a><font > 内容 </font></a> --> <font > 内容 </font>
  2. text (): 获取 / 设置元素的标签体纯文本内容 <a><font > 内容 </font></a> --> 内容
  3. val ()： 获取 / 设置元素的 value 属性值
# 属性操作
  1. 通用属性操作
    1. attr (): 获取 / 设置元素的属性
    2. removeAttr (): 删除属性
    3. prop (): 获取 / 设置元素的属性
    4. removeProp (): 删除属性
    • attr 和 prop 区别？
      1. 如果操作的是元素的固有属性，则建议使用 prop
      2. 如果操作的是元素自定义的属性，则建议使用 attr
  2. 对 class 属性操作
    1. addClass (): 添加 class 属性值
    2. removeClass (): 删除 class 属性值
    3. toggleClass (): 切换 class 属性
  • toggleClass("one"):
    • 判断如果元素对象上存在 class="one"，则将属性值 one 删除掉。 如果元素对象上不存在 class="one"，则添加
# CRUD 操作
  1. append (): 父元素将子元素追加到末尾
    • 对象 1.append (对象 2): 将对象 2 添加到对象 1 元素内部，并且在末尾
  2. prepend (): 父元素将子元素追加到开头
    • 对象 1.prepend (对象 2): 将对象 2 添加到对象 1 元素内部，并且在开头
  3. appendTo():
    • 对象 1.appendTo (对象 2): 将对象 1 添加到对象 2 内部，并且在末尾
  4. prependTo()：
    • 对象 1.prependTo (对象 2): 将对象 1 添加到对象 2 内部，并且在开头
  5. after (): 添加元素到元素后边
    • 对象 1.after (对象 2)： 将对象 2 添加到对象 1 后边。对象 1 和对象 2 是兄弟关系
  6. before (): 添加元素到元素前边
    • 对象 1.before (对象 2)： 将对象 2 添加到对象 1 前边。对象 1 和对象 2 是兄弟关系
  7. insertAfter()
    • 对象 1.insertAfter (对象 2)：将对象 2 添加到对象 1 后边。对象 1 和对象 2 是兄弟关系
  8. insertBefore()
    • 对象 1.insertBefore (对象 2)： 将对象 2 添加到对象 1 前边。对象 1 和对象 2 是兄弟关系
  9. remove (): 移除元素
    • 对象.remove (): 将对象删除掉
  10. empty (): 清空元素的所有后代元素。
    • 对象.empty (): 将对象的后代元素全部清空，但是保留当前对象以及其属性节点
      注意： $("#b").clone (); 克隆所有 b 元素；
# JQuery 高级
# 动画
  1. 三种方式显示和隐藏元素
    1. 默认显示和隐藏方式
      1. show([speed,[easing],[fn]])
        1. speed：动画的速度。三个预定义的值 ("slow","normal", "fast") 或表示动画时长的毫秒数值 (如：1000)
        2. easing：用来指定切换效果，默认是 "swing"，可用参数 "linear"
          • swing：动画执行时效果是 先慢，中间快，最后又慢
          • linear：动画执行时速度是匀速的
        3. fn：在动画完成时执行的函数，每个元素执行一次。
      2. hide([speed,[easing],[fn]])
      3. toggle([speed],[easing],[fn])
    2. 滑动显示和隐藏方式
      1. slideDown([speed],[easing],[fn])
      2. slideUp([speed,[easing],[fn]])
      3. slideToggle([speed],[easing],[fn])
    3. 淡入淡出显示和隐藏方式
      1. fadeIn([speed],[easing],[fn])
      2. fadeOut([speed],[easing],[fn])
      3. fadeToggle([speed,[easing],[fn]])
# 遍历
  1. js 的遍历方式
    • for (初始化值；循环结束条件；步长)
  2. jq 的遍历方式
    1. jq 对象.each (callback)
      1. 语法：
        jquery 对象.each (function (index,element){});
        * index: 就是元素在集合中的索引
        * element：就是集合中的每一个元素对象
        ​ * this：集合中的每一个元素对象
      2. 回调函数返回值：
        • true: 如果当前 function 返回为 false，则结束循环 (break)。
        • false: 如果当前 function 返回为 true，则结束本次循环，继续下次循环 (continue)
    2. $.each(object, [callback])
    3. for..of: jquery 3.0 版本之后提供的方式
      for (元素对象 of 容器对象)
# 事件绑定
  1. jquery 标准的绑定方式
    • jq 对象。事件方法 (回调函数)；
    • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
    • 表单对象.submit ();// 让表单提交
  2. on 绑定事件 /off 解除绑定
    • jq 对象.on ("事件名称", 回调函数)
    • jq 对象.off ("事件名称")
    • 如果 off 方法不传递任何参数，则将组件上的所有事件全部解绑
  3. 事件切换：toggle
    • jq 对象.toggle (fn1,fn2...)
    • 当单击 jq 对象对应的组件后，会执行 fn1. 第二次点击会执行 fn2.....
    • 注意：1.9 版本 .toggle () 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。
      <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
# 案例
见代码
 更新于