jQuery简单笔记
目录
jQuery 是一个 JavaScript 库,简化了 JavaScript 的编程。
语法:$(selector).action()
selector 是字符串,表示HTML元素。
| 对象 | 符号 | 例子 | 效果 |
|---|---|---|---|
| 当前整个HTML | this | this | 选择整个HTML |
| 标签 | 标签名 | “p” | 选择所有<p>元素 |
| id | # | “#test” | 选择所有 id = “test"的元素 |
| class | . | “.test” | 选择所有 class = “test"的元素 |
| 链接 | [] | [href=“test”] | 选择所有 href 等于 “test"的元素 |
| [href!=“test”] | 选择所有 href 不等于 “test"的元素 | ||
| [href$=“test”] | 选择所有 href 以 “test” 结尾的元素 | ||
| 表格 | ul li: | “ul li:first” | 选择每个 <ul> 的第一个 <li> 元素 |
以上三者可以合起来用:$(“p#test.test”)
action()列表:
| 隶属 | 名称 | 功能 |
|---|---|---|
| document | ready(function) | HTML文档加载完毕时执行function |
| window | 浏览器视口 | |
| 所有元素 | hide() | 隐藏所选元素 |
| show() | 显示所选元素 | |
| toggle() | 以上两者切换 | |
| fadeIn() | 渐渐隐藏 | |
| fadeOut() | 渐渐显示 | |
| fadeToggle() | 以上两者切换 | |
| slideUp() | 向上滑动隐藏元素 | |
| slideDown() | 向下滑动显示元素 | |
| slideToggle() | 以上两者切换 | |
| addClass() | 添加一个或多个类 | |
| removeClass() | 删除一个或多个类 | |
| toggleClass() | 以上两者切换 | |
| mouseover(function) | 鼠标悬停在元素上时执行function | |
| focus(function) | 元素获得焦点时执行function | |
| click(function) | 点击元素时执行function | |
| dblclick(function) | 双击元素时执行function | |
| attr() | 改变元素的属性 | |
| css() | 改变或返回元素的css属性 | |
| animate({dict参数}) | 执行动画以使元素符合参数指定内容(属性名用骆驼命名法) | |
| stop(bool,bool) | 停止动画 | |
| text() | 设置或返回所选元素的文本内容 | |
| html() | 设置或返回所选元素带 HTML 标记的内容 | |
| val() | 设置或返回表单字段的值 | |
| append(string) | 元素内容结尾添加 | |
| after(string) | 元素结束之后添加 | |
| remove() | 删除整个元素 | |
| empty() | 删除子元素 | |
| width() | 不包括 padding 和 border | |
| height() | 不包括 padding 和 border | |
| innerWidth() | 包括 padding | |
| innerHeight() | 包括 padding | |
| outerWidth() | 包括 padding 和 border | |
| outerHeight() | 包括 padding 和 border | |
当出现动画动作时,可以传入两个参数:
- 毫秒表示动作过渡时长。
- 回调,在动画完成后执行
可在数值前使用 += 和 -= 表示相对值。
在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
AJAX:
load()
get()
post()