- 使用jQuery
- jQuery概述
- 引入jQuery
- 查找元素
- 执行操作
- 链式操作
- 检测页面是否可用
- jQuery插件
- 避免和其他库的冲突
- 使用Ajax
使用jQuery
jQuery概述
- Write Less Do More(用更少的代码来完成更多的工作)
- 使用CSS选择器来查找元素(更简单更方便)
- 使用jQuery方法来操作元素(解决浏览器兼容性问题、应用于所有元素并施加多个方法)
引入jQuery
- 下载jQuery的开发版和压缩版
- 从CDN加载jQuery
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script src="js/jquery-3.3.1.min.js"></script>')
</script>
查找元素
- 选择器
- * / element / #id / .class / selector1, selector2
- ancestor descendant / parent>child / previous+next / previous~siblings
- 筛选器
- 基本筛选器::not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus
- 内容筛选器::contains(‘…’) / :empty / :parent / :has(selector)
- 可见性筛选器::hidden / :visible
- 子节点筛选器::nth-child(expr) / :first-child / :last-child / :only-child
- 属性筛选器:[attribute] / [attribute=’value’] / [attribute!=’value’] / [attribute^=’value’] / [attribute$=’value’] / [attribute|=’value’] / [attribute~=’value’]
- 表单::input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked
执行操作
- 内容操作
- 获取/修改内容:
html()
/text()
/replaceWith()
/remove()
- 获取/设置元素:
before()
/after()
/prepend()
/append()
/remove()
/clone()
/unwrap()
/detach()
/empty()
/add()
- 获取/修改属性:
attr()
/removeAttr()
/addClass()
/removeClass()
/css()
- 获取/设置表单值:
val()
- 获取/修改内容:
- 查找操作
- 查找方法:
find()
/parent()
/children()
/siblings()
/next()
/nextAll()
/prev()
/prevAll()
- 筛选器:
filter()
/not()
/has()
/is()
/contains()
- 索引编号:
eq()
- 查找方法:
- 尺寸和位置
- 尺寸相关:
height()
/width()
/innerHeight()
/innerWidth()
/outerWidth()
/outerHeight()
- 位置相关:
offset()
/position()
/scrollLeft()
/scrollTop()
- 尺寸相关:
- 特效和动画
- 基本动画:
show()
/hide()
/toggle()
- 消失出现:
fadeIn()
/fadeOut()
/fadeTo()
/fadeToggle()
- 滑动效果:
slideDown()
/slideUp()
/slideToggle()
- 自定义:
delay()
/stop()
/animate()
- 基本动画:
- 事件
- 文档加载:
ready()
/load()
- 用户交互:
on()
/off()
- 文档加载:
链式操作
检测页面是否可用
<script>
$(document).ready(function() {
});
</script>
<script>
$(function() {
});
</script>
jQuery插件
- jQuery Validation
- jQuery Treeview
- jQuery Autocomplete
- jQuery UI
避免和其他库的冲突
先引入其他库再引入jQuery的情况。
<script src="other.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(function() {
jQuery('div').hide();
});
</script>
先引入jQuery再引入其他库的情况。
<script src="jquery.js"></script>
<script src="other.js"></script>
<script>
jQuery(function() {
jQuery('div').hide();
});
</script>
使用Ajax
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- 原生的Ajax
- 基于jQuery的Ajax
- 加载内容
- 提交表单