jquery

李白要喝酒

已于 2023-12-08 09:57:18 修改

阅读量334

点赞数

文章标签： jquery 前端 javascript

于 2023-12-08 08:38:07 首次发布

本文链接：https://blog.csdn.net/m0_64920987/article/details/134858998

版权

jq概念丰富的js库文件

引入：<script src = " "></script>

基础：


<!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>
    <script src="./jQuery v3.6.1.js"></script>
</head>
<body>
    <div id="div">
        <p>123</p>
    </div>
    <input type="text" value="李四">
</body>
<script>
    let div = $('#div')
    console.log(div.html());
    console.log(div.text());
    // div.html(`<p>测试</p>`) //innerHTML
    div.text(`<p>测试</p>`)
    let inp = $('input')
    console.log(inp.val());
    inp.val('张三') //修改input内容
    
</script>
</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>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
    <div id="div2"></div>
    <div></div>
</body>
<script>
    function jQuery(str){
        return document.querySelectorAll(str)
    }

    let div = jQuery('#div2')
    console.log(div)
</script>
</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>
    <script src="./jQuery v3.6.1.js"></script>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .box2{
            width: 300px;
            height: 300px;
            background: orange;
        }
        .show{
            display:none;
        }
    </style>
</head>
<body>
    <!-- java-id 自定义属性 用户自己设置的属性 -->
    <botton>显示</botton>
    <div class="box1" java-id="0001"></div><!-- java-id 自定义属性 用户自己设置的属性 -->
   
</body>
<script>
    let div = $('div')
    console.log(div.attr('class')); //输出
    console.log(div.attr('java-id'));
    // div.attr('class','box2')//样式改变了成为box2
    div.removeAttr('java-id')//删除属性名
    div.addClass('box2')//class名称
    div.removeClass('box1')
   
    
    $('botton').on('click',function(){
        div.toggleClass('show')//切换某个class
        console.log(div.hasClass('show'));//class存不存在
    })
</script>
</html>

# jquery

## jquery 概念

- 概念：jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中工作。
- 作用：优化dom部分代码，提高开发效率
- 特点
  - 使用jquery完成dom操作，跟原生的dom操作是不兼容的。

### jquery引入

```js
<script src="./jQuery v3.6.1.js"></script>
```

在需要的页面映入对应的JS文件



### jquery基础

- 如何选择标签

```js
let 变量名 = jQuery('css选择器')
//$ 是 jQuery的简写
let 变量名 = $('css选择器')
```

#### 修改标签

|  方法名  |    参数    |         说明         |
| :------: | :--------: | :------------------: |
| html（） | 修改字符串 | 不传入参数及获取内容 |
| text（） | 修改字符串 | 不传入参数及获取内容 |
|  val()   | 修改字符串 | 不传入参数及获取内容 |

```js
<body>
    <div id="div">
        <p>123</p>
    </div>
    <input type="text" value="李四">
</body>
<script>
    let div = $('#div')
    console.log(div.html());
    console.log(div.text());
    // div.html(`<p>测试</p>`) //innerHTML
    div.text(`<p>测试</p>`)
    let inp = $('input')
    console.log(inp.val());
    inp.val('张三') //修改input内容
```

#### 修改属性

|    方法名     |      参数      |                    说明                    |
| :-----------: | :------------: | :----------------------------------------: |
|    attr()     | 属性名，属性值 | 传入一个参数获取属性值，传入两个修改属性值 |
| removeAttr()  |     属性名     |                删除某个属性                |
|  addClass()   |    class名     |                 添加class                  |
| removeClass() |    class名     |               删除某个class                |
| toggleClass() |    class名     |               切换某个class                |
|  hasClass()   |    class名     | 返回值为布尔值，查询元素是否包含这个class  |

```js
<body>
    <!-- java-id 自定义属性 用户自己设置的属性 -->
    <botton>显示</botton>
    <div class="box1" java-id="0001"></div>
   
</body>
<script>
    let div = $('div')
    console.log(div.attr('class')); 
    console.log(div.attr('java-id'));
    // div.attr('class','box2')
    div.removeAttr('java-id')
    div.addClass('box2')
    div.removeClass('box1')
   
    
    $('botton').on('click',function(){
        div.toggleClass('show')
        console.log(div.hasClass('show'));
    })
</script>
```

#### 标签操作

|  方法名   |     参数     |              说明              |
| :-------: | :----------: | :----------------------------: |
| append()  | 字符串或元素 | 作为最后一个子标签加入父标签中 |
| before()  | 字符串或元素 |       追加到指定标签前面       |
| after（） | 字符串或元素 |       追加到指定标签后面       |
| remove()  |   没有参数   |          谁调用删除谁          |

```js
<body>
    <div id="box"></div>
    <span>测试2</span>
</body>
    <script>
        let box = $('#box')
        box.append(`<p>测试</p>`)
        // box.append($('span'))
        box.before('<a>before</a>')
        box.after('<a>after</a>')
    </script>
```



#### css操作

|  方法名  |             参数             |                        说明                        |
| :------: | :--------------------------: | :------------------------------------------------: |
|  css()   | 属性名，值或者｛属性名：值｝ | 一个参数为获取，两个参数为设置，多个样式修改用json |
| width()  |              值              |                      设置宽度                      |
| height() |              值              |                      设置高度                      |

```js
<body>
    <div id="div2"></div>
</body>
<script>
    // $('#div2').css('background','pink url("https://woniufile.oss-cn-hangzhou.aliyuncs.com/banner/class_time_home.png") center')
    // $('#div2').css('backgroundSize','cover')
    // json 数据格式 ｛键 ： 值，键 ： 值｝
    $('#div2').css({
        'background':'pink url("https://woniufile.oss-cn-hangzhou.aliyuncs.com/banner/class_time_home.png") center',
        'backgroundSize':'cover',
        'width':'500',
        'height':'300'
    })
    //  对象  ｛属性名：属性值，属性名：属性值｝
    // {
    //     name:'张三'
    // }
    // 获取样式
    console.log($('#div2').css('width'));
</script>
```

#### jquery遍历

| 方法名  |          参数          |          说明          |
| :-----: | :--------------------: | :--------------------: |
| each()  | 回调函数（index,item） | 循环之后 item 为js对象 |
|  eq()   |          下标          |   获取对应下标的元素   |
| first() |           无           |       第一个元素       |
| last()  |           无           |      最后一个元素      |
| index() |           无           |   获取元素对应的下标   |

- 注意：jquery获取的元素可以直接设置全部样式，和添加全部事件，这个现象我们叫做隐式遍历。

  ```js
  // jquery 隐式遍历
      $('div').css('background','pink')
  ```

```js
 // jquer遍历
    $('div').each(function(index,item){
        console.log(index);
        // console.log(item);
        // 遍历后为JS对象
        // item.style.background = 'pink'
        // 转为JQ对象
        // $(item).css('background','pink')
        console.log($(item).index());
    })
//获取对应下标的元素进行操作
$('div').eq(1).css('background','pink')
$('div').first().css('background','green')
$('div').last().css('background','blue')

```



#### jquer与js之间的转换

```js
//js对象转JQ对象
$(js对象) 
//JQ对象转JS对象
JQ对象 . get(下标)
JQ对象[ 下标 ]
```

```js
let _div = document.querySelector('div')
    $(_div).on('click',function(){
        alert(1)
    })

let _div = $('div')
    _div[0].addEventListener('click',function(){
        alert(1)
    })
```



#### jquery获取嵌套或者同级标签

|   方法名    |  参数  |           说明           |
| :---------: | :----: | :----------------------: |
| parent（）  |   无   |    获取当前元素的父级    |
| parents（） | 选择器 | 获取元素符合条件的祖先级 |
| children()  |   无   |       获取元素子级       |
|   find()    | 选择器 |    找满足条件的子标签    |
|   prev()    |   无   |       找上一个标签       |
|   next()    |   无   |       找下一个标签       |
| sibilings() | 选择器 |   找满足条件的兄弟标签   |

找父级

```js
<body>
    <div class="grand">
        <div class="grand">
            <div class="parent">
                <div class="child"></div>
            </div>
        </div>
    </div>
    
</body>
<script>
    $('.child').css('background','pink')
    $('.child').parent().css('background','green')
    $('.child').parents('.grand').css('background','blue')
</script>
```

找子级

```js
<body>
 
        <div class="grand">
            <div class="parent">
                <div class="child"></div>
            </div>
            <div class="parent">
                <div class="child"></div>
            </div>
            <div class="parent">
                <div class="child"></div>
            </div>
        </div>
   
    
</body>
<script>
    // 找子级
    // $('.grand').children().css('background','pink')
    $('.grand').find('.child').css('background','pink')
</script>
```

找兄弟

```js
<body>
 
        <div class="grand">
            <div class="parent box">
                <div class="child"></div>
            </div>
            <div class="parent box">
                <div class="child"></div>
            </div>
            <div id="div" class="parent">
                <div class="child"></div>
            </div>
            <div class="parent">
                <div class="child"></div>
            </div>
            <div class="parent">
                <div class="child"></div>
            </div>
            <div class="parent box">
                <div class="child"></div>
            </div>
        </div>
   
    
</body>
<script>
    // $('#div').prev().css('background','pink')
    // $('#div').next().css('background','pink')
    $('#div').siblings('.box').css('background','pink')
</script>
```

#### jquery 事件

- on

```js
//事件绑定
$('div').on('click',function(){
        alert($('div').html())
    })

//事件委托形式
$('div').on('click','p',function(){
        alert($('div').html())
    })
   
```

#### jquery动画

|   方法名    |    参数     |    说明    |
| :---------: | :---------: | :--------: |
|  fadeIn()   |  时间毫秒   |    淡入    |
|  fadeOut()  |  时间毫秒   |    淡出    |
| slideDown() |  时间毫秒   |    下滑    |
|  slideUp()  |  时间毫秒   |    上划    |
|  animate()  | {},事件毫秒 | 自定义动画 |

```js
$('#hidden').on('click',function(){
       $('div').fadeOut(500) ;
    })
    $('#show').on('click',function(){
       $('div').fadeIn(500) ;
    })
```

```js
<body>
    <div class="nav">
        <p>用户管理</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="nav">
        <p>商品管理</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script>
    $('.nav').on('click',function(){
        let _ul = $(this).find('ul')
        if(_ul.css('display') == 'none'){
            _ul.slideDown()
        }else{
            _ul.slideUp()
        }
    })
</script>
```

```js
$('div').on('click',function(){
        $(this).animate({
            'width':'300px',
            'height':'300px',
            'margin-top':'50px'
        },2000)
    })
```