jQuery（小结，了解jQuery/jQuery的两把利器/选择器/属性/文本）

视频

加粗部分是笔试常考

1. 了解jQuery

• 是什么: What?
  • 一个JS函数库: write less, do more
  • 封装简化DOM操作(CRUD) / Ajax
• 为什么用它: why?
  • 强大选择器: 方便快速查找DOM元素
  • 隐式遍历(迭代): 一次操作多个元素
  • 读写合一: 读数据/写数据用的是一个函数
  • 链式调用: 可以通过.不断调用jQuery对象的方法
  • 事件处理
  • DOM操作(CUD)
  • 样式操作
  • 动画
  • 浏览器兼容
• 如何使用: How?
  • 引入jQuery库
    • 本地引入与CDN远程引入
    • 测试版与生产版(压缩版)
  • 使用jQuery
    • 使用jQuery函数: $/jQuery
    • 使用jQuery对象: $xxx(执行$()得到的)

2. jQuery的2把利器

• jQuery函数: $/jQuery

  • jQuery向外暴露的就是jQuery函数, 可以直接使用
  • 当成一般函数使用: $(param)
    • param是function: 相当于window.onload = function(文档加载完成的监听) 区别
    • param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
    • param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
    • param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
  • 当成对象使用: $.xxx
    • each(obj/arr, function(key, value){})
    • trim(str)

• jQuery对象

  • 包含所有匹配的n个DOM元素的伪数组对象

  • 执行$()返回的就是jQuery对象

  • 基本行为:

    • length/size(): 得到dom元素的个数

    • [index]: 得到指定下标对应的dom元素

    • each(function(index, domEle){}): 遍历所有dom元素

    • index(): 得到当前dom元素在所有兄弟中的下标

3. 选择器

• 是什么?
  • 有特定语法规则(css选择器)的字符串
  • 用来查找某个/些DOM元素: $(selector)
• 分类
  • 基本
    • #id
    • tagName/*
    • .class
    • selector1,selector2,selector3: 并集
    • selector1selector2selector3: 交集
  • 层次
    • 找子孙后代, 兄弟元素
    • selector1>selector2: 子元素
    • selector1 selector2: 后代元素
  • 过滤
    • 在原有匹配元素中筛选出其中一些
    • :first
    • :last
    • :eq(index)
    • :lt(index)
    • :gt(index)
    • :odd
    • :even
    • :not(selector)
    • :hidden
    • :visible
    • [attrName]
    • [attrName=value]
  • 表单
    • :input
    • :text
    • :checkbox
    • :radio
    • :checked: 选中的

4. 属性/文本

• 操作标签的属性, 标签体文本
• attr(name) / attr(name, value): 读写非布尔值的标签属性
• prop(name) / prop(name, value): 读写布尔值的标签属性
• removeAttr(name)/removeProp(name): 删除属性
• addClass(classValue): 添加class
• removeClass(classValue): 移除指定class
• val() / val(value): 读写标签的value
• html() / html(htmlString): 读写标签体文本