CY-Left

jQuery开发语言

JQuery 学习大纲

JQuery 概要

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

一 访问节点

  1. 选择器

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

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

  2. 过滤器

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

    1. 根据索引过滤
$('li:first')
$('li:last')
$('li:odd') // 奇数
$('li:even') // 偶数
$('li:eq()') //等于, 同理还有大于小于
2. 根据内容过滤
$('li:contaions(boy)')
$('li:empty') //内容为空
3. 表单过滤器
$('input:text')
$('input:checkbox')
$('input:radio')
4. 根据可见性 etc.

二 操作节点本身

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

  1. 新增节点
    • 内部添加
$('<hr>').appendTo($()) // 将 hr 追加到 $() 内部
$().append('<hr>') // 在 $() 内部追加 hr 元素 同理 prepend, prependTo
+ 同级添加
$('a').after($('b')) // 在 b 之后添加 a, 同理 before
+ 外部添加
$('a').wrap($('b')) // 每一个 b 都用一个 独立的 a 包裹
$('a').wrapAll($('b'))  // 一个 a 包裹所有 b
$('a').wrapInner($('b'))  // a 包裹 b 中的内容
  1. 删除节点
$('<hr>').remove() // 删除元素 
$().empty // 清空内容
  1. 修改节点
    这个一般改不了了, 总不能吧 div 改成 p 吧, 一般改改属性就不错了

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

三 操作节点属性

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

Attr 属性

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

  1. 访问属性
$('div').attr('src')
  1. 修改属性
$('div').attr('src', 'https://bad.com')

Style Css 属性

  1. 访问属性
$('div').css('width')
  1. 修改属性
$('div').css('width', '500rpx')

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. 访问属性
$('div').prop('checked')
  1. 修改属性
$('div').prop('checked', true)

四 JQuery 对象概述

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

操作
1. 对象转换

// DOM 转 JQuery 
var dom = document.getElementByID('id')
$(dom)
// JQuery 转 DOM, 两种方式
$(dom)[0]
$(dom).get(0)
  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

本文虽拙,却也系作者劳动,转载还请保留本文链接: http://cyleft.com/?p=819