XiYuJing|文章:JQuery

[[ slide_text ]]

[[item.c]]

JQuery

发布时间：2022年09月29日 作者：靖华来源：XiYuJing

Js JQuery

# JQuery

## 介绍

jQuery 是一个 JavaScript 库，也是一个JS文件。 JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ是实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现。

### 理念

JQ总的来说，体现了：write less， do more。简单来说，就是代码量少，功能强大。

### 特性

1. 丰富的强大的语法（CSS选择器），来查询文档元素
2. 高效的查询方法，用来找到与CSS选择器匹配的文档元素集
3. 一套有用的方法，用来操作选中的元素
4. 强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个
5. 简介的语言用法（链式用法），用来表示一系列顺序操作。

### 引入方法

#### 官网

官网地址：https://jquery.com/
国内翻译参考：http://jquery.cuishifeng.cn/
前端资源查找：https://www.bootcdn.cn/

#### 标准版本

JQuery完整版本，包含注释等，学习时可以参考，建议学习使用
下载地址：https://cdn.bootcss.com/jquery/3.4.1/jquery.js

#### 压缩版

压缩版去除了不必要的注释和空格，变量名等内部标识符也替换成更短的名字
下载地址：https://cdn.bootcss.com/jquery/3.4.1/jquery.js

### 案例演示

```js

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

<script src="js/jquery-3.4.1.js"></script>

在JQ中，$()是最重要的方法，可以传递CSS选择器、Element、Document或者Window对象、HTML文本字符串、函数、字符串等对象
注意：JQ的API只对自己开放，JQ不能用js的API，js也不能用JQ的API

### JQ选择器：$()

```js
<script>
    //js获取元素
    document.getElementById("p1");  //通过id
    document.getElementsByClassName("p2");  //通过class
    document.getElementsByTagName("p"); //通过标签名

//jquery获取元素
    // console.log($('#p1'));  //通过id
    // console.log($('.p2'));  //通过class
    // console.log($('p'));    //通过标签名
    //$()就是jQuery选择器

/*js
    .innerText 修改文本  .innerhtml 修改文本也会解析标签
     */
    //$('#p1').innerText = "111"; //行不通

/*
    * jquery
    * text() 修改文本
    * html()    修改文本 可解析标签
    * */
    console.log(document.getElementById("p1")); //通过js获取
    console.log($('#p1').text("111"));  //通过jQuery获取
    console.log($('#p1').html("<h1>www</h1>"));  //通过jQuery获取
    $('#p1').html("<h1>333</h1>");

</script>
```

### JQ与JS对比

![undefined](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1tEiAGXUOAAJlzPFExjI2600235 "undefined")

通过对比，我们可以发现，使用JQ可以极大的提高书写效率，同时语法规则也变得更加简单

### JQ与JS对象相互转换

```js
<script>
    $('p').text("111");
    //JQ转JS
    console.log($('p')[1].innerText = "www");   //第一种方法 用角标去取
    console.log($('p').get(2).innerText = "ffff");  //第二种方法 用get()

//js转JQ
    var oP = document.getElementsByTagName("p");    //js方法 通过标签名
    console.log(oP);    //js
    console.log($(oP).text("tttt")); //JQuery
    console.log($(oP).eq(1).text("gggg")); //JQuery eq()就是jQuery获取下标的方法
</script>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1tFKAVY6MAAD4HaAYDZE7392479)

在each内部可以使用js方法，也可以用JQ的形式

## JQ操作HTML属性

#### 属性

attr 设置、获取 标签属性

removeAttr() 移除标签属性

在JQ中，设置某个值的时候，一般自带遍历，获取某个值的时候，一般获取第一个

#### 类名

addClass 加class名字

removeClass 移除传入的class； 没有，移除全部

toggleClass  操作class类名，有就删，没有则加

```js
<script>
      /*
      操作Class属性
          addClass 增加
          removeClass  移除
   */
      $('div').addClass("div1");  //增加
      $('div').addClass("div2");  //增加    不会覆盖

$('div').removeClass("div2");   //移除
      $('div').addClass("div1");
      $('div').removeClass("div1").addClass("div3");  //修改

/*
          操作其他属性
              attr 增加/修改
              removeAttr   移除
   */
      $('div').attr("id","id1");  //增加
      $('div').attr("id","id2");  //增加
      $('div').removeAttr("id");  //删除

/*
          toggleClass()
          无则增加  有则删除
          可以用于点击事件，点一下增加，点一下删掉。效果
*/
      $('div').toggleClass("div1");   //增加
      $('div').toggleClass("div2");   //增加
      $('div').toggleClass("div2");   //增加

// js  .value    jq .val 获取输入框中的值
      console.log($('input').eq(1).val(333));
  </script>
```

## JQuery操作CSS样式

```js
<script>
    /*
        width()  获取本身设置的宽度
        innerWidth()  获取内边距加上宽度之后的宽
        outerWidth()  获取加上padding和border 之后的宽
    */
    console.log($('div').width());   //200 获取本身设置的宽度
    console.log($('div').height());   //200 获取本身设置的高度

console.log($('div').innerWidth()); //300 获取本身设置的宽度 + padding
    console.log($('div').innerHeight()); //300 获取本身设置的高度 + padding

console.log($('div').outerWidth()); //310 获取本身设置的宽度 + padding + border
    console.log($('div').outerHeight()); //310 获取本身设置的高度 + padding + border

/*
        css()  修改单个样式
        css({})  修改多个样式  键值对的形式
    */
    $('div').css("width","400px");  //修改单个

//修改多个
    $('div').css({
        "width": "600px",
        "height": "600px",
        "background-color": "green",
    })
</script>
```

## JQuery事件
![undefined](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1tF6ARpfBAAIkzKBMX4I2984572 "undefined")

JQ可以存在两个或以上一样的函数。但JS不能，会覆盖，只执行最后一个

```js
<script>
    //单击事件  click()
    $('p').eq(0).click(function () {
          alert(111);
    })

//双击事件  dblclick()
    $('p').eq(1).dblclick(function () {
        alert(2222);
    })

//滑入和滑出 hover()
    //如果有两个参数，第一个代表滑入，第二个代表滑出
    // $('p').eq(2).hover(function () {
    //     $('p').eq(2).text("移入了");
    // },function () {
    //     $('p').eq(2).text("移出了");
    // })

//如果只有一个参数，那就代表滑入和滑出
    $('p').eq(2).hover(function () {
        $('p').eq(2).text("移了");
    })

//移除上面的点击事件 off
    $('button').click(function () {
        $("p").eq(0).off("click");
    })
</script>
```

![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1tGmAcqaDAAIwrzxIe6s9900034)

## JQ动画

> show		显示 
> hide 		隐藏
> toggle	自动显示隐藏
>
> fadeIn /fadeOut /fadeTo(1000, 0.1) 可以把透明度设置一个值，时间参数不能省略
>
> slideDown/slideUp/slideToggle 改变高度
![undefined](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1tG-AdJFCAAOhCnc4LvU6995243 "undefined")

Animate 动画

> 传参：
> 	obj 必须要传入，{} 代表变化的属性和目标值的数值变化
> 	number/string 可缺省，代表毫秒数或者预设好的值，默认是300
> 	string 可缺省，代表运动曲线，JQuery默认提供：linear 和 swing
> 	function 可缺省，代表动画结束后的回调函数
![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1tHWAWHvpAADaEgDGE2Q0089546)
![](http://43.143.99.137:8888/group1/M00/00/01/CgAECmM1tH-AIzXtAAHAfxX7Kp05664198)

```js
<script>
    /*
        hide()  隐藏
        show()  显示
    */
    // $('#btn1').click(function () {
    //     $('div').hide();    //隐藏
    // })
    //
    // $('#btn2').click(function () {
    //     $('div').show();    //显示
    // })

/*
        滑动
            slideUp()  向上隐藏
            slideDown()  向下显示
            slideToggle()  取反
   */
    // $('#btn1').click(function () {
    //     $('div').slideUp(2000); //向上隐藏
    // })
    //
    // $('#btn2').click(function () {
    //     $('div').slideDown(); //向下显示
    // })
    //
    //  $('#btn3').click(function () {
    //     $('div').slideToggle(); //取反
    // })

/*
        淡入 谈出
            fadeOut  隐藏
            fadeIn  显示
            fadeToggle 取反
    */
    // $('#btn1').click(function () {
    //      $('div').fadeOut(2000); //淡出隐藏
    // })
    //
    // $('#btn2').click(function () {
    //      $('div').fadeIn(2000); //淡入显示
    // })
    //
    // $('#btn3').click(function () {
    //      $('div').fadeToggle(2000); //取反
    // })

/*
        自定义  透明度是从  0 - 1
            fadeTo()
    */
    // $('#btn1').click(function () {
    //     //第一个参数代表过渡的秒数，第二个参数代表透明度
    //      $('div').fadeTo(2000,0.2); //淡出隐藏
    //  })
    //
    // $('#btn2').click(function () {
    //     //第一个参数代表过渡的秒数，第二个参数代表透明度
    //      $('div').fadeTo(2000,0.8); //淡出隐藏
    //  })

/*
        动画
            animate() 动画
            stop()  停止
            delay() 延迟之后在执行
    */
    $('#btn1').click(function () {
        $('div').animate({
            width: 300,
            height: 300,
            left: 300,
            top: 100,
        },2000).delay(4000);
    });

$('#btn2').click(function () {
        $('div').animate({
            width: 100,
            height: 100,
            left: 0,
            top: 0,
        },2000)
    });

$('#btn3').click(function () {
        $('div').stop();    //停止
    })
</script>
```

你觉得文章怎么样

已浏览 14 次，0 条评论