• 使用jQuery
    • jQuery概述
    • 引入jQuery
    • 查找元素
    • 执行操作
    • 链式操作
    • 检测页面是否可用
    • jQuery插件
    • 避免和其他库的冲突
    • 使用Ajax

    使用jQuery

    jQuery概述

    1. Write Less Do More(用更少的代码来完成更多的工作)
    2. 使用CSS选择器来查找元素(更简单更方便)
    3. 使用jQuery方法来操作元素(解决浏览器兼容性问题、应用于所有元素并施加多个方法)

    引入jQuery

    • 下载jQuery的开发版和压缩版
    • 从CDN加载jQuery
    1. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    2. <script>
    3. window.jQuery ||
    4. document.write('<script src="js/jquery-3.3.1.min.js"></script>')
    5. </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. <script>
    2. $(document).ready(function() {
    3. });
    4. </script>
    1. <script>
    2. $(function() {
    3. });
    4. </script>

    jQuery插件

    • jQuery Validation
    • jQuery Treeview
    • jQuery Autocomplete
    • jQuery UI

    避免和其他库的冲突

    先引入其他库再引入jQuery的情况。

    1. <script src="other.js"></script>
    2. <script src="jquery.js"></script>
    3. <script>
    4. jQuery.noConflict();
    5. jQuery(function() {
    6. jQuery('div').hide();
    7. });
    8. </script>

    先引入jQuery再引入其他库的情况。

    1. <script src="jquery.js"></script>
    2. <script src="other.js"></script>
    3. <script>
    4. jQuery(function() {
    5. jQuery('div').hide();
    6. });
    7. </script>

    使用Ajax

    Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    • 原生的Ajax
    • 基于jQuery的Ajax
      • 加载内容
      • 提交表单