JQuery 概要

JQuery 工于节点选择器, 适合用来访问节点, 并获取节点的 JQuery 对象, 而后操作对象的属性和对象下属的 DOM 元素本身. 获取节点之后, 还可以绑定, 解绑事件, 生成动画等.

一 访问节点

  1. 选择器

    选择符合条件的 DOM 对象, 并包装成 JQuery 对象

    Class, ID 选择等等 详见如下:
    JQuery 选择器

  2. 过滤器

    在选择的多个 DOM 对象中过滤出需要的对象, 比选择器更加细腻

    1. 根据索引过滤

二 操作节点本身

操作节点, 就是操作 JQuery 对象, 同下文的 JQuery 对象,操作

  1. 新增节点
    • 内部添加

  1. 删除节点

  1. 修改节点
    这个一般改不了了, 总不能吧 div 改成 p 吧, 一般改改属性就不错了

  2. 获取节点
    上文的选择器和过滤器即可以获取节点

三 操作节点属性

同下文的 JQuery 对象, 操作节点, 就是操作 JQuery 对象

Attr 属性

属性只能置空, 不能删除!

  1. 访问属性

  1. 修改属性

Style Css 属性

  1. 访问属性

  1. 修改属性

Bool 属性

bool 属性比较乱, attr 操作会有诸多问题

  1. checked: 其实所有表单元素都有此属性,但只有radio, checkbox能在图形上表现出勾选的效果,一旦勾选上,其name及value就能提交

  2. selected: option的属性,一旦选上,就出现高亮状态,并将其name,value(没有就取其innerHTML)提交上去

  3. readonly: 用于输入性的控件,让用户只能看,不能修改

  4. disabled: 让表单元素蒙上一个灰白的色调,用户无法操作它,也不会提交其内容

  5. multiple:让下拉框变成多选形式,可以按着SHIFT进行多选

  6. hidden: 用于所有元素,这是HTML5新增的布尔属性,效果如同display:none,但其优先级低于CSS,因此没有大规范使用

  7. contentEditable: 应用于所有可见的非表单元素,让元素也像INPUT那样编辑它里面的内容

属性操作:

  1. 访问属性

  1. 修改属性

四 JQuery 对象概述

注意
1. JQuery 对象不是 DOM 对象
2. JQuery 选择器获取来的节点是封装成数组 DOM 对象, 故 JQuery 对象不能直接操作 DOM 对象的方法和属性

操作
1. 对象转换

  1. 对象遍历
    使用 each(function(){}), 或者直接当成数组遍历即可

五 事件

事件对象

事件对象, 就是操作动作封装成的对象. 一个事件对象包含了事件对象操作的 DOM 对象本身所封装成的属性和事件本身的属性, 比如事件发生时间 (timeStamp) 等

事件属性 描述
bubbles 返回布尔值,指示事件是否是起泡事件类型。
cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素(事件的目标节点)。
timeStamp 返回事件生成的日期和时间。
type 事件种类

绑定, 解绑事件

  1. 绑定
    bind()
  2. 解绑
    unbind()
  3. 一次性绑定
    one()

事件委托

委托父元素操作子元素

$(‘a’).on(event, [selector], call back function) // 这里的 selector 是相对于 a 的

六 动画

七 AJAX

详见如下
AJAX

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部