学习/前端学习/JQ/day01

了解jQuery
- 是什么: What?
  - 一个JS函数库: write less, do more
  - 封装简化DOM操作(CRUD) / Ajax
- 为什么用它: why?
  - 强大选择器: 方便快速查找DOM元素
  - 隐式遍历(迭代): 一次操作多个元素
  - 读写合一: 读数据/写数据用的是一个函数
  - 链式调用: 可以通过.不断调用jQuery对象的方法
  - 事件处理
  - DOM操作(CUD)
  - 样式操作
  - 动画
  - 浏览器兼容
- 如何使用: How?
  - 引入jQuery库
    - 本地引入与CDN远程引入
    - 测试版与生产版(压缩版)
  - 使用jQuery
    - 使用jQuery函数: $/jQuery
    - 使用jQuery对象: $xxx(执行$()得到的)
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元素在所有兄弟中的下标
选择器
- 是什么?
  - 有特定语法规则(css选择器)的字符串
  - 用来查找某个/些DOM元素: $(selector)
- 分类
  - 基本
    - id
    - tagName/*
    - .class
    - selector1,selector2,selector3: 并集
    - selector1selector2selector3: 交集
  - 层次
    - 找子孙后代, 兄弟元素
    - selector1>selector2: 子元素
    - selector1 selector2: 后代元素
  - 过滤
    - 在原有匹配元素中筛选出其中一些
    - :first
    - :last
    - :eq(index)
    - :lt
    - :gt
    - :odd
    - :even
    - :not(selector)
    - :hidden
    - :visible
    - [attrName]
    - [attrName=value]
  - 表单
    - :input
    - :text
    - :checkbox
    - :radio
    - :checked: 选中的
属性/文本
- 操作标签的属性, 标签体文本
- 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): 读写标签体文本

id