Java web：JQuery

JQuery

• JavaScript框架，简化js开发（本质上是一些js文件，封装了js原生代码）
• jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。
• 快速入门
  • 下载JQuery
    • 目前JQuery有三个大版本：
      • 1.x:兼容ie678,使用最为广泛的，官方只做BUG维护，
      • 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
      • 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，目前该版本是官方主要更新维护的版本
    • jquery-xxx.js 与 jquery-xxx.min.js区别：min没有缩进，体积小，加载速度快
  • 导入JQuery的js文件：导入min.js文件
  • 使用：
• JQuery对象和js对象的区别和转换
  • JQuery对象在操作时，更加方便。
  • JQuery对象和js对象方法不通用的.
  • 互相转换
    • JQuery - >JS：JQuery对象[索引] 或者 JQuery对象.get(索引)
    • JS - > JQuery：$(JS对象)
• 选择器：筛选具有相似特征的元素(标签)
  • 基本操作：
    • 事件绑定：
      • $("#b1).click(function(){...})
    • 入口函数：类似于onload
      • $(function(){...})
        • window.onload：只能定义一次，如果定义多次，后面会覆盖前面的
        • $(function)：可以定义多次
    • 样式控制：
      • $("#div1").css("backgroundColor","pink"); $("#div1").css("background-color","pink");
  • 分类：
    • 基本选择器：
      • 标签选择器：（元素选择器）
        • $("html标签名") 获得所有匹配标签名称的元素
      • id选择器：
        • $("#id的属性值") 获得与指定i属性值匹配的元素
      • 类选择器：
        • $(".class属性值") 获得与指定class属性值匹配的元素
      • 并集选择器：
        • $("选择器1,选择器2,....")获取多个选择器选中的所有元素
    • 层级选择器：
      • 后代选择器：
        • $("A B") 选择A元素内部的所有B元素
      • 子选择器：
        • $("A > B") 选择A元素内部的所有B子元素
    • 属性选择器：
      • 属性名称选择器 ：
        • $("A[属性名]") 包含指定元素的选择器
      • 属性选择器：
        • $("A[属性值 = '值']") 包含指定属性等于指定值的选择器
      • 复合属性选择器：
        • $("A[属性值 = '值'][]...") 含多个属性条件的选择器
    • 过滤选择器：
      • 首，尾元素选择器 ：
        • :first 获得选择的元素中的第一个元素
        • :last获得选择的元素中的最后一个元素
      • 非元素选择器：
        • :not[selector] 不包括指定内容的元素
      • 偶，奇数选择器：
        • :odd 奇数，从 0 开始计数
        • :even 偶数，从 0 开始计数
      • 等于，大于，小于索引选择器：
        • :eq[index] 指定索引元素
        • :gt(index) 大于指定索引元素
        • :lt(index) 小于索引元素
      • 标题选择器：
        • :header 获得标题（h1~h6）元素，固定写法
    • 表单过滤选择器
      • 可用，不可用元素选择器
        • :enabled 获得可用元素
        • disabled 获得不可用元素
      • 选中选择器：
        • :checked 获得单选/复选框选中的元素
        • :selected 获得下拉框中的元素
• DOM操作
  • 内容操作：
    • html()：获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
    • text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
    • val()： 获取/设置元素的value属性值
  • 属性操作：
    • 通用属性操作：
      • attr()：获取/设置元素的属性（自定义属性）
      • removeAttr()：删除属性
      • prop()：获取/设置元素的属性（固有属性）
      • removeProp()：删除属性
    • 对class属性操作：
      • addClass()：添加class属性值
      • removeClass():删除class属性值
      • toggleClass():切换class属性(有变没有，没有变有)
      • css()：
  • CRUD操作：
    • append()父元素将子元素追加到末尾 appendTo()参照物调换
      • 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
    • prepend():父元素将子元素追加到开头 prependTo()参照物调换
      • 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
    • after():添加元素到元素后边 insertAfter()调换
      • 对象1.after(对象2)： 将对象2添加到对象1后边。(同级关系)
    • before():添加元素到元素前边 insertBefore()调换
      • 对象1.before(对象2)： 将对象2添加到对象1前边。(同级关系)
    • remove()移除元素
      • 对象.remove():将对象删除掉
    • empty():清空元素的所有后代元素。
      • 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
• 动画
  • 三种方式显示和隐藏元素
    • 默认显示和隐藏
      • show([speed],[easing],[fn])
        • speed:代表动画的速度，有三个预定义的值（“slow”，“normal”，“fast”）,还可以自定义输入毫秒值
        • easing:动画效果，默认“swing”，还有参数“linear”
          • swing:动画执行的效果是先慢后快再慢
          • linear：动画执行速度均匀
        • fn：在动画执行完成之后时执行的函数，每个元素执行一次
      • hide([speed,[easing],[fn]])
      • toggle([speed],[easing],[fn])
    • 滑动显示和隐藏方式
      • slideDown([speed],[easing],[fn])
      • slideUp([speed,[easing],[fn]])
      • slideToggle([speed],[easing],[fn])
    • 淡入淡出显示和隐藏方式
      • fadeIn([speed],[easing],[fn])
      • fadeOut([speed],[easing],[fn])
      • fadeToggle([speed,[easing],[fn]])
  • 遍历：
    • js的遍历方式：for(初始化值，循环结束条件，步长)
    • jq的遍历方式：
      • jq对象.each(callback)
        • jq对象.each(function(index,element){});
          • index：就是元素在集合中的索引
          • element：代表集合中每一个元素对象
          • this：代表集合中每一个元素对象，同上
        • 回调函数返回值：
          • true：如果当前function返回为true，则结束本次循环，继续下次循环（continue）
          • false：如果当前function返回为false，则结束循环（break）
      • $.each(object，[callback])
        • object：要遍历的对象
        • callback：每次循环执行的方法
      • for...of：jQuery3.0版本之后提供的方式
        • for(临时遍历 of 要遍历的容器){}
  • 事件绑定：
    • jQuery标准的绑定事件方式
      • jq对象.事件方法(回调函数) 如$("#div").click(function(){})
        • 如果调用事件方法，不传递回调函数，则会除法浏览器默认行为
          • 如：表单对象.submit();//让表单提交
    • on绑定事件/off解除绑定
      • jq对象.on("事件名称",回调函数) 如$("#btn").on("click",function () {})
      • jq对象.off("事件名称") 如$("#btn").off("click");
        • 如果off方法不传递任何参数，则将组件上的所有事件全部解除绑定
    • 事件切换：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>
  • 插件：增强JQuery的功能（类似定义方法）
    • 实现方式：
      • $.fn.extend(方法名1:function(){},方法名2:function(){}...)：增强通过JQuery获取的对象的功能（给JQ对象增加新方法） 如：$("#div").方法名
      • $.extends(方法名1:function(){},方法名2:function(){}...)：增强JQuery对象自身的功能（给JQ本身增加新方法） 如：$/JQuery.方法名