[TOC]

jQuery 入门教程

参考文档地址:

准备工作

jQuery介绍
- 是一个用js封装的库, 专用用来方便我们操作dom节点的
- $(‘#app’).html(); // 获取id为app的元素的节点的内容(包含标签)
导入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>

创建jQuery对象

var aa = $(选择器);   // 方法1
var bb = $(dom节点)  // 方法2

(一) 绑定事件

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

事件托管

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

```html <!DOCTYPE html>

1.xxxx
2.xxxx
3.xxxx
4.xxxx
5.xxxx


3. $(document).ready(fn);    相当于window.onload
```html
<!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 请求

get 请求: https://jquery.cuishifeng.cn/jQuery.get.html
post 请求

ajax 请求 ```javascript


<a name="aOsjg"></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>

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>

siblings 查找兄弟元素 ```html <!DOCTYPE html>

第1个li元素
第2个li元素
第3个li元素
第4个li元素

<a name="wozug"></a>
## (四) 操作 html

1. $(选择器).html()   相当于innerHTML

html <!DOCTYPE html>

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

添加或移除一个类

$(选择器).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>

$(选择器).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>

$(选择器).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>

$(选择器).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>

滑动 ```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>

```

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

(八) 插件

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

一个日期插件示例

(十) zepto.js

移动版的jquey

JavaScript

第10节 jQuery 入门教程