一、简介
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的标签体 包裹 |