[TOC]

jQuery 入门教程

参考文档地址:

官网文档

菜鸟教程

准备工作

  1. jQuery介绍
    • 是一个用js封装的库, 专用用来方便我们操作dom节点的
    • $(‘#app’).html(); // 获取id为app的元素的节点的内容(包含标签)
  2. 导入jQuery.js, 使用本地 js 或 cdn 地址都可以
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1. 创建jQuery对象
    var aa = $(选择器);   // 方法1
var bb = $(dom节点)  // 方法2

(一) 绑定事件

  1. $(选择器).on(事件类型,绑定函数);

  2. 事件托管

    $(祖先选择器).on(事件类型, 选择器, 绑定函数);
$(祖先选择器).delegate(选择器, 事件类型, 绑定函数);

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
    ul {border: 1px solid;}
    li {background-color: gray;margin-top: 15px;}
 </style>
</head>
<body>
 <ul>
     <li>1.xxxx</li>
     <li>2.xxxx</li>
     <li>3.xxxx</li>
     <li>4.xxxx</li>
     <li>5.xxxx</li>
 </ul>

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
 $(ul).on('click','li',function({
   console.log(this);
 }));
</script>
</body>
</html>

  3. $(document).ready(fn); 相当于window.onload

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script> 
 // 在这里给button标签添加事件
</script>
</head>
<body> 
 <button>
       登录
 </button>
</body>
</html>

(二) ajax 请求

  1. get 请求: https://jquery.cuishifeng.cn/jQuery.get.html
  2. post 请求
  3. ajax 请求 ```javascript 

    
<a name="a5c0c191"></a>
## (三) 选择器

1. $(选择器名称)
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">app</div>
    <div class="aaa">aaa</div>
    <button>哈哈</button>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script> 
        // 选择#app元素并打印

        // 选择.aaa元素并打印

        // 选择ul后面的li元素并打印

    </script>
</body>
</html>
    1. find 和 children 都用来查找后代元素 ```html <!DOCTYPE html>
      adsfasdf

      sfasdf

      asdfa asdfa 
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var $box = $('.box');
    // 查找$box的后代元素,类名为.aa


      // 查找$box所有后代(子代)元素

</script>


    
3. parents,closest 查找祖先元素
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="box">
        <div>
            <div class="aaa">
                <p>
                    <span>后代元素</span>
                </p>
            </div>
        </div>

    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        var $span = $('span');
      // 查找span元素的所有的祖宗元素


        // 查找祖宗元素里离它最近的,类名为aaa的元素

    </script>
</body>

</html>
    1. siblings 查找兄弟元素 ```html <!DOCTYPE html>
    • 第1个li元素
    • 第2个li元素
    • 第3个li元素
    • 第4个li元素
    <a name="bbc0a33e"></a> ## (四) 操作 html 1. $(选择器).html() 相当于innerHTMLhtml <!DOCTYPE html>
    dfasdfadsf
    dfasdfadsf
    dfasdfadsf
    2. $(选择器).text() 相当于innerText 同上,不再举例 3. $(选择器).val() 相当于input元素的.valuehtml <!DOCTYPE html> 

    
4. $(选择器).append()   相当于appendChild
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
</head>
<body> 
    <ul>
        <li>xxx</li>
        <li>xxx</li>
        <li>xxx</li>
    </ul>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
       // 在ul后面再添加一条数据

    </script>
</body>
</html>

    (五) 操作 css

    1. 添加或移除一个类

      • $(选择器).addClass(类名) 添加class;

      • $(选择器).removeClass(类名) 移除class;

        <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<style>.red{color: red;}</style>
</head>
<body>
<div id="app">asdfasdffsf</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
     // 给#app添加class red 

     // 给#app移除class red 

</script>
</body>
</html>

    2. $(选择器).toggleClass(类名) // 有则去掉,无则加上

      <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"> 
 <style>.dsn{display:none;}</style>
</head>
<body>
 <button>点击</button>
 <div id="app">
     <p> asdfasdfasdfasdfasdf </p>
     <p> asdfasdfasdfasdfasdf </p>
     <p> asdfasdfasdfasdfasdf </p>     
     <p> asdfasdfasdfasdfasdf </p>
 </div>

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script> 

         $('button').on('click', function() {
             // 若#app没有dsn类就加上,有则移除

         })
 </script>
</body>
</html>

    3. $(选择器).css() // 获取样式和设置样 ```html <!DOCTYPE html>

    asdfasdffsf

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // 获取字体大小 

    // 设置样式:背景变灰色,添加边框,可以连着写 

</script>


    
<a name="b73e4d2b"></a>
## (六) 操作属性

1. $(选择器).attr()  获取属性或者设置属性
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="http://www.baidu.com">百度</a>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 获取a标签的href属性
        var href = $('a').attr('href');
        console.log('href', href);

        // 2秒后把百度换成新浪,同时改变它的href地址

    </script>
</body>
</html>
    1. $(选择器).removeAttr() 删除属性 ```html <!DOCTYPE html>

    百度

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // 两秒后删除属性href


</script>


    
3. $(选择器).prop()  操作属性 类似attr, 当attr不管用的时候使用prop

<a name="32b4c678"></a>
## (七) 效果

1. show() 显示和hide() 隐藏
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>阿斯顿发的说法是对方</div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 2秒后隐藏div 

        // 1秒后显示div 

    </script>
</body>
</html>
    1. 滑动 ```html <!DOCTYPE html> 
    <div class="box">
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
    <p>这是一个段落。</p>
</div>
<button class="btn1">上滑</button>
<button class="btn2">下滑</button>




<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    // 点击.box向上滑动 

    // 点击.box向下滑动 

</script>

    ```

    1. 淡入淡出 https://www.runoob.com/jquery/jquery-fade.html

    (八) 插件

    https://www.jq22.com/jq1-jq3

    一个日期插件示例

    (十) zepto.js

    移动版的jquey

    (十一) underscore 和 loadash js库