一、简介
1.概念
javascript库，封装了很多预定义的对象和使用函数
2.组成部分
- WEB版本
- UI版本 集成了UI组件
- Mobile版本 针对移动端开发
- quit版本 用js测试
3.流行的javascript库
| 名称 | 简介 |
|---|---|
| JQuery | 最流行 |
| Dojo | 很多js单独文件 常用来开发小图标 |
| Prototype | 对js框架开发 |
| YUI | Yahoo User Interface |
| Bookstrap | 来自Twitter是目前比较新的 前端框架 基于jQuery |
4.优点
- 轻量级
- 核心理念：write less,do more
- 兼容各种浏览器
- 开发更便捷
- 支持文档操作/选择DOM元素/制作动画效果
- 支持代码分离和HTML标签
- 不用再插入一堆js 只要定义id即可
- jquery的api成熟 文档说明很全
二、基本语法
1.语法
$(选择器).方法名()
$–> 定义jquery 选择器–>用来查找HTML元素 .方法名–>执行对元素的操作
2.jquery对象和Dom的转换
3.选择器
基本选择器
| 名称 | 符号 |
|---|---|
| id选择器 | # |
| 类选择器 | . |
| 标签选择器 | input |
层级选择器
| 语法 | 作用 |
|---|---|
| ancestor descendant | 获取ancestor元素内所有的descendant后代元素 爷孙 |
| parent > child | 获得parent元素内部所有的child子元素 父子 |
| prev + next | 获得prev后面的第一个next元素兄弟 |
| prev ~ siblings | 获得 prev元素后面的 所有兄弟 |
| siblings(expr) | 获得同级的所有兄弟元素 |
基本过滤
| 语法 | 作用 |
|---|---|
| :first | 第一个 |
| :last | 最后一个 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :even | 偶数 从0开始 |
| :odd | 奇数 从0开始 |
| :eq(index) | 获得指定索引 从0开始 |
| :gt(index) | 大于 从0开始 |
| :lt(index) | 小于 从0开始 |
| :header | 所有的标题元素 例如 .. |
| :focus | 获得焦点 |
内容过滤
| 语法 | 作用 |
|---|---|
| :contains(text) | 标签体是否包含指定的文本 |
| :empty | 当前元素是否为空(是否有标签体 子元素 文本) |
| :has(selector) | 当前元素 是否包含有指定的子元素 |
| :parent | 当前元素是否是父元素 |
可见性过滤
| 语法 | 作用 |
|---|---|
| :hidden | 隐藏 特指 <xxx style="display:none;"><input type="hidden"> |
| :visible | 可见(默认) |
属性
| 语法 | 作用 |
|---|---|
| [attribute] | 获取指定的属性名的元素 |
| [attribute=value] | 获取属性名 等于指定值的元素 |
| [attribute!=value] | 获取属性名 不等于 指定值的元素 |
| [attribute^=value] | 获取以属性值 开头的元素 |
| [attribute$=value] | 获取以属性值 结尾的元素 |
| [attribute*=value] | 获取含有属性值的元素 |
| [attr1][attr2][attrN] | 符合选择器 多个条件同时成立 类似于 where…and… |
子元素
| 语法 | 作用 |
|---|---|
| :nth-child(index) | 获取第几个孩子 从1开始 |
| :first-child | 第一个孩子 |
| :last-child | 最后一个孩子 |
| :only-child | 获得独生子 |
表单
| 语法 | 作用 |
|---|---|
| :input | 所有的表单元素 input select textarea button |
| :text | 文本 |
| :password | 密码 |
| :radio | 单选框 |
| :checkbox | 复选框 |
| :submit | 选择 type=”submit”的按钮 如果button标签 没有设置type 大多数浏览器都会把它当成是submit |
| :image | 图片按钮 |
| :reset | 重置 |
| :button | 所有的普通按钮<button> 或者是 <input type="button"> |
| :file | 文件 |
| :hidden | 隐藏域 <input type="hidden"><xxx style="display:none"> |
其他 <br> <option> 但是存在着浏览器兼容性问题
表单对象属性
| 语法 | 作用 |
|---|---|
| :enabled | 可用 |
| :disabled | 不可用 |
| :checked | 选中 单选框 复选框 |
| :selected | 选择 下拉列表中 被选中 |
4.属性和css
属性
attr(name)获取指定属性名的值
attr(key,val)给一个指定的属性名 赋值
removeAttr(name)移除指定属性
css
addClass(class)追加一个类
removeClass(class)将指定类移除
toggleClass("my")如果有my 就将他移除 没有 就添加
HTML代码/文本/值
html()获取html代码 含有html标签
text()获取文本值 将标签过滤掉
val()获得value值
位置
offset()设置坐标
position()定位
scrollTop()垂直滚动条 滚过的距离
scrollLeft()水平滚动条 滚过的距离
5.文档处理
内部插入
append()A.append(B) 将 B插入到A的内部 后面
prepend()A.prepend(B) 将 B插入到A的内部 前面
appendTo()A.appendTo(B) 将A插入到B的内部 后面
prependTo()A.prependTo(B) 将A插入到B的内部 前面
外部插入(同级)
| 语法 | 作用 |
|---|---|
| after() | A.after(B) 将 B插入到A的后面 |
| before() | A.before(B) 将 B插入到A的前面 |
| insertAfter() | A.insertAfter(B) 将A插入到B的后面 |
| insertBefore() | A.insertBefore(B) 将A插入到B的前面 |
删除
empty()清空标签体
remove()如果用remove()删除 事件以及绑定的数据将被清除
detach()如果用detach()删除 事件以及绑定的数据不会被清除
绑定
data(name)获取
data(name,value)设置
复制
clone()克隆
替换
replaceWith()A.replaceWith(B) 使用B 将A替换掉
replaceAll()A.replaceAll(B) 使用A 将B替换掉
包裹
| 语法 | 作用 |
|---|---|
| wrap() | A.wrap(B) 使用B将每一个A进行包裹(多个B) |
| unwrap() | A.unwrap() 将A的父元素删除 自己保留 |
| wrapall() | A.wrapall(B) 使用B将所有A进行包裹(一个B) |
| wrapInner() | A.wrapInner(B)使用B将每一个A的标签体 包裹 |