JQuery的基本使用
JQuery的基本使用
JQuery是 JavaScript的函数库，通过JQuery可以帮助我们简化DOM元素的操作，这里只简单的介绍下我有使用过的内容，更具体的内容请查询学习文档，见jquery 在线手册 | jQuery API 中文手册 | jQuery 速查表 | jQuery 参考手册 | jQuery CHM | jQuery 在线文档 | jQuery 1.12.1。学习时的在线编辑器见菜鸟教程在线编辑器
一. 基本概念
1. $
$ 是 JQ的顶级元素，相当于原生html的 window
//表示页面加载完成后调用
$(function(){});
//原生方式
window.onload = function() {}
2. JQ集合和DOM对象相互转换
1. DOM -> JQ(1) $('[选择器]') (2) $([DOM对象])
e.g var a = document.getElementById('container') //DOM对象var $a = $(a) //JQ集合
2. JQ -> DOM数组操作：通过 JQ集合.get([索引]) 或 JQ集合[[索引]]获取
e.gvar $div = $('div') //JQ集合var div1 = $div[0] //DOM对象
3. 隐式遍历
我们通过包含多个对象的JQ集合去调用JQ的方法时，会自动帮我们迭代其中的对象，分别调用这个方法
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</body>
<script>$(function(){var $li = $('li') $li.css('color', 'red') //每个li标签都变红})
</script>
二. 常用API
基本调用方法都是通过$('xx').[方法]进行调用
1. 选择器
基本选择器都和原生的一样，这里只记录特殊的
| 选择器 | 说明 |
|---|---|
| $(this) | 当前Html元素 / 当前上下文元素 |
2. 属性
| 方法 | 说明 | 例子 |
|---|---|---|
attr(name, val(可选)) | 获取 / 修改 原生Html标签的属性，不存在时返回undefined | |
prop(name, val(可选)) | 获取 / 修改 DOM对象的属性，不存在时返回 ‘’ | |
addClass(name) | 给元素加上对应name的class类 | |
removeClass(name) | ||
toggleClass(name, condition) | 如果存在对应name的class类，则删除；不存在则添加 condition可以写js表达式通过boolean判断是否要调用 | |
html(val(可选)) | 获取 / 修改 元素标签里的内容 | |
text(val(可选)) | 获取 / 修改 元素标签里的文本 | |
val(val(可选)) | 获取 / 修改 元素的value值 | |
data(key,val(可选)) / removeData(key) | 在某个元素上查看 / 存储 / 删除键值对 |
3. 定位
| 方法 | 说明 | 例子 |
|---|---|---|
offset({top:x, left: x}) | 相对与docment的偏移 | |
position({top:x, left: x}) | 相对于父元素的偏移 |
4. 遍历
| 方法 | 说明 |
|---|---|
each(function(index(可选), doEle(可选)) | 遍历JQ集合 |
$.each([dom / JQ集合], function()) | 遍历任意集合 |
5. 拷贝
| 方法 | 说明 |
|---|---|
$.extend(deep布尔值, target, object1 [, objectN ]) | 拷贝 |
6. 文档处理
| 方法 | 说明 |
|---|---|
appnd([String/JQ对象/DOM元素]) | 添加元素到末尾 |
before([String/JQ对象/DOM元素]) | 添加到元素到该元素之前 |
after([String/JQ对象/DOM元素]) | 添加到元素到该元素之后 |
7. 事件
| 方法 | 参数 | 说明 |
|---|---|---|
on(event,childSelector(可选),data,function) | event :事件名。多个事件时，中间用空格隔开 childSelector: 子选择器表达式 data: 事件触发时需要传递的数据 function: 事件触发的函数 | 绑定事件 |
off(event,childSelector(可选),function) | 移除事件 | |
bind(event,data,function) | 绑定事件 | |
unbind(event,data,function) |
bind和on的区别:
- bind只能给符合条件的元素本身添加事件
- on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件
8. Ajax
| 方法 | 参数 | |
|---|---|---|
$.ajax(url, settings) | settings: 方法类型：type 返回值类型：dataType 回调函数：success、error、complete(无论成功失败都调用) 数据（入参）: data |