JQuery

JQuery

一个JS框架,简化JS的开发

1. 使用步骤:
   1. 下载JQuery
   2. 导入JQuery的JS文件
   3. 开始使用
2. JQuery对象和JS对象区别转换
   1. JQ -> JS : JQ对象[索引] 或者 JQ对象.get(索引)
   2. JS -> JQ : $(JS 对象)
3. 基本语法学习:
   1. 事件绑定:JQ对象.click( function(){...} );
   2. 入口函数:$(function() {...});
   3. 样式控制: JQ对象.css("key", "value");
4. 选择器: 筛选具有相似特征的元素(标签)
   1. 基本选择器
      1. 标签选择器: $("标签名")
      2. id选择器: $("# id值")
      3. 类选择器: $(. 类值)
      4. 并集选择器: $("选择器1, 选择器2, ...")
   2. 层级选择器
      1. 后代选择器: $("A B") -> 选择A元素内部的所有B元素
      2. 子选择器: $("A > B") -> 选择A元素内部的所有B子元素
   3. 属性选择器
      1. 属性名称选择器: $( "A[属性名]") -> 包含指定属性的选择器
      2. 属性选择器: $("A[属性名='值']") -> 包含指定属性等于指定值的选择器
      3. 复合属性选择器: $("A[属性名='值'][ ]...") -> 包含对各属性条件的选择器
   4. 过滤选择器
      1. 首元素选择器: :first
      2. 为元素选择器: :last
      3. 非元素选择器: :not(selecter)
      4. 偶数选择器: :even 偶数, 从 0 开始计数
      5. 奇数选择器: :odd 奇数, 从 0 开始计数
      6. 等于索引选择器: :eq(index) 指定索引元素
      7. 大于索引选择器: :gt(index) 大于指定索引元素
      8. 小于索引选择器: :lt(index) 小于指定索引元素
      9. 标题选择器: :header 获得标题元素, 固定写法
   5. 表单过滤选择器
      1. 可用元素选择器: :enabled 获得可用元素
      2. 不可用元素选择器: :disable 获得不可用元素
      3. 选中选择器: :checked 获得单选 / 复选框 选中的元素
      4. 选中选择器: :selected 获得下拉列表选中的元素

DOM操作

1. 内容操作
   1. html() -> 获取/设置元素的标签体内容
   2. text() -> 获取/设置标签体的纯文本内容
   3. val() -> 获取/设置元素的value属性值
2. 属性操作
   1. 通用属性操作
      1. attr() -> 获取/设置元素属性
      2. removeAttr() -> 删除属性
      3. prop() -> 获取/设置元素属性
      4. removeProp() -> 删除属性
      • 操作元素的固有属性使用prop()
   2. 对Class属性操作
      1. addClass() -> 添加class属性值
      2. removeClass() -> 删除class属性值
      3. toggleClass() -> 切换class属性 (存在则删除)
3. CRUD操作
   1. append() -> 父元素将子元素追加到末尾
   2. prepend() -> 父元素将子元素追加到开头
   3. appendTo() -> 将对象添加到内部末尾
   4. prependTo() -> 将对象添加到内部开头
   5. after() -> 添加元素到元素后边
   6. before() -> 添加元素到元素之前
   7. insertAfter() -> 对象和after相反
   8. insertBefore() -> 对象和berfore相反
   9. remove() -> 移除元素
   10. empty() -> 清空元素的所有后代元素

JQuery高级

1. 动画
   • 三种方式显示和隐藏元素
     • speed: 动画速度(毫秒值) -> 三个预定义值(slow, normal, fast)
     • easing: 切换效果,默认swing, 可用参数:linear
     • fn: 在动画完成时执行的函数,每个元素执行一次
     1. 默认显示和隐藏方式
        • show([speed, [easing], [fn] ])
        • hide([speed, [easing], [fn] ])
        • toggle([speed, [easing], [fn] ])
     2. 滑动显示和隐藏方式
        • slideDown([speed, [easing], [fn] ])
        • slideUp([speed, [easing], [fn] ])
        • slideToggle([speed, [easing], [fn] ])
     3. 淡入淡出显示和隐藏
        • fadeIn([speed, [easing], [fn] ])
        • fadeOut([speed, [easing], [fn] ])
        • fadeToggle([speed, [easing], [fn] ])
2. 遍历方式(3种)
   1. jq对象.each(callback)
   2. $.each(Object, [callback])
   3. for..of:
3. 事件绑定
   1. 标准方式: jq对象.事件方法(回调函数);
   2. on绑定/off解除: jq对象.on/off("事件名称", 回调函数);
   3. 事件切换:jq对象.toggle(fn1, fn2, ...)