jQuery概述
- Write Less Do More（用更少的代码来完成更多的工作）
- 使用CSS选择器来查找元素（更简单更方便）
- 使用jQuery方法来操作元素（解决浏览器兼容性问题、应用于所有元素并施加多个方法）
引入jQuery
- 下载jQuery的开发版和压缩版
- 从CDN加载jQuery
|
1 2 3 4 5 |
<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()
链式操作
检测页面是否可用
|
1 2 3 4 5 |
<script> $(document).ready(function() { }); </script> |
|
1 2 3 4 5 |
<script> $(function() { }); </script> |
jQuery插件
- jQuery Validation
- jQuery Treeview
- jQuery Autocomplete
- jQuery UI
避免和其他库的冲突
先引入其他库再引入jQuery的情况。
|
1 2 3 4 5 6 7 8 |
<script src="other.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); jQuery(function() { jQuery('div').hide(); }); </script> |
先引入jQuery再引入其他库的情况。
|
1 2 3 4 5 6 7 |
<script src="jquery.js"></script> <script src="other.js"></script> <script> jQuery(function() { jQuery('div').hide(); }); </script> |
使用Ajax
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- 原生的Ajax
- 基于jQuery的Ajax
- 加载内容
- 提交表单
本文来自这个系列长期转载Python-100-Days ，本文观点不代表蓝洛水深立场，转载请联系原作者。
微信扫一扫 
支付宝扫一扫 
