jQuery 3-2 · 常用方法及事件

jQuery 中封装了大量的方法，极大地简化了代码，更方便实现不同的业务场景

（一）常用操作方法

1.1 操作标签内容

1.1.1 html() 方法

html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置标签内部内容。 方法可以传递一个参数，自定义的字符串内容。

（注：不能用于单标签，只能用于双标签元素）

概述

1. 获取内容：文本和内部标签
   语法：jQuery对象.html();

2. 设置内容：字符串格式的文本内容。如果字符串包含HTML标签，会按照HTML标签渲染结构。注：新设置的内容会覆盖标签内所有的内容
   语法：jQuery对象.html('文本内容');

示例

    //  不传值：获取元素文案。如果获取到多个元素，只能获取第一个元素的文案或内部标签
    console.log($div.html()); // <p>hello word 1</p>

    //  传值：批量修改元素内容，返回元素标签的类数组
    let $pTxt = $div.html("你好");
    //  如果新设置的内容中有标签元素，会按照HTML标签渲染结构
    let $pTxt2 = $div.html("文案<p>新的文案1</p>");

1.1.2 text() 方法

text() 方法相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字。

（注：不能用于单标签，只能用于双标签元素）

概述

1. 获取内容：只获取文本内容
   语法：jQuery对象.text();

2. 设置内容：设置文本为字符串格式；设置标签时，标签会被当做普通文本
   语法：jQuery对象.text('需要设置的文案内容');

示例

    // 获取元素
    let $box = $(".box");

    //  获取内容： 获取到的是标签内部所有的文本内容。（并且输出的文本会保留源码中的文案格式，包括换行缩进等）
    console.log($box.text())

输出：

    //  设置内容 ：设置的内容会替换掉元素内部所有的内容：包括普通文本和标签等；如果设置的字符串内容中包括HTML标签元素，会当做普通文本加载，不会渲染页面结构
    $box.text("新的文案<p>新的段落</p>");  // 

输出：

1.1.3 val() 方法

val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容。

概述

1. 获取内容：表单元素的 value
   语法：jQuery对象.val();

2. 设置内容：表单元素的 value
   语法：jQuery对象.val("需要设置的内容");

参数

获取元素内容不传参，直接调用该方法

设置内容，将设置的内容作为字符串进行传参

示例

获取 value

    // 获取 value 值
    console.log($box.val()); // 没有value属性所以返回空
    console.log($input.val()); // 返回第一个元素的value属性值
    console.log($text.val()); // 返回第一个元素的文本
    console.log($sel.val()); // 返回的是表单选中的项的value属性值
    console.log($opt.val()); // 返回的是表单选中的项的value属性值

输出：

设置 value

// 设置 value 值
$box.val("新的文案？"); // 毋庸置疑 是不能生效的
$input.val("新的文案？"); // 批量修改value值（新值渲染在页面，HTML结构中的 value 属性值不发生变化）
$text.val("新的文案？"); // 批量修改value值（新值渲染在页面，HTML结构中的 value 属性值不发生变化）
$sel.val("xigua"); // 更改显示 select 的默认选项
$opt.val("xigua"); // 批量修改value值（HTML结构中的 option 元素 value 属性值被批量修改）

输出：

1.2 操作标签属性

1.2.1 attr()方法

attr：全称 attribute，属性的意思。

attr() 方法用来获取标签元素的属性 或者 设置标签元素的属性值。

注：可以是标签的自定义属性

概述

1. attr() 方法内部参数传一个值：用来获取标签元素的属性
   语法：jQuery对象.attr("属性名");

2. attr() 方法内部参数传两个值：用来设置标签元素的属性值
   语法：jQuery对象.attr("属性名","属性值");

参数

字符串格式的参数

示例

获取属性：

// 获取属性
console.log($inp.attr("class")); // box

设置属性：

// 设置属性值
$inp.attr("name","newNmae");

输出：

1.2.2 removeAttr()方法

removeAttr()方法 用来移除标签上的属性，如：id、class、value...

概述

将标签内存在的属性名作为参数传进去

参数

字符串格式的参数

示例

移除属性：

// 移除标签的属性
$inp.removeAttr("id");

输出：

1.2.3 prop()方法

针对：selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同

概述

1. prop() 方法内部参数传一个值：用来获取标签元素的属性
   语法：jQuery对象.prop("属性名");

2. prop() 方法内部参数传两个值：用来设置标签元素的属性值
   语法：jQuery对象.prop("属性名",布尔值);

参数

获取属性值：字符串格式的参数

设置属性值：第一个参数字符串格式的属性名；第二个参数普通值

示例

获取属性值：

// 获取  表单元素属性值：返回 true 或 false 的布尔值
console.log($btn.prop("disabled"));
console.log($choose.prop("checked"));

输出：

设置属性值：

 // 设置 属性值
 $btn.prop("disabled",false);
 $choose.prop("checked",false);

输出：

1.3 操作css样式

1.3.1 css() 方法

用于调用 css 属性值或者更改 css 属性值。

概述

一个参数： 表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式。

两个参数： 表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成：带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。

css() 方法的第一个参数如果是复合属性的单一属性写法：可以是驼峰命名法，也可以是横线写法。

可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，作为 css()的参数。

语法

jQuery对象.css(name,value);

参数

参数1：字符串格式的 css 样式属性名

参数2：设置或更改的属性值。

示例

结构： 初始样式：

获取样式属性值：

    // 获取样式属性值
    console.log($box.css("width"));
    console.log($box.css("border")); // 没有设置这条属性返回默认值
    // 获取符合属性书写格式：驼峰 或者 -连接符
    console.log($box.css("background-color"));
    console.log($box.css("backgroundColor"));

输出：

设置样式属性值：

    // 设置样式属性值
    $box.css("width", 100);
    $box.css("width", "200");
    $box.css("width", "300px");
    $box.css("width", "+=300");
    $box.css("width", "+=300px");
    // 批量设置多个属性: 对象格式的参数
    $box.css({
        // "width": 100,
        // "width": "200",
        "width": "200px",
        "height": 100,
        "backgroundColor": "rgb(255, 99, 88)"
    });

1.4 操作class类名

jQuery封装了操作标签类名属性的方法，通过添加或者移除指定的类名，达到实现不用样式的效果。

注：该类方法只操作指定的类名，不会对原有的其他类名产生影响

1.4.1 addClass()方法

概述 addClass()方法用来添加指定属性名

语法 $jQuery对象.addClass("要添加的类名")

参数 传入字符换类型的类名

示例

    // 添加类名
    $btn1.click(function () {
    $box.addClass("newStyle");
  });

1.4.2 removeClass()方法

概述 removeClass()方法用来移除指定属性名

语法 $jQuery对象.removeClass("要移除的类名")

参数 传入字符换类型的类名

示例

    // 移除类名
    $btn2.click(function () {
    $box.removeClass("newStyle");
    });

1.4.3 toggleClass()方法

概述 toggleClass()方法用来切换添加、删除的指定属性名

语法 $jQuery对象.toggleClass("类名")

参数 传入字符换类型的类名

示例

    // 类名切换: toggleClass
    $btn3.click(function () {
    $box.toggleClass("newStyle");
    });

1.4.4 hasClass()方法

概述 hasClass()方法用来判断是否包含该类名。

可以搭配 addClass 方法、removeClass 方法，实现切换添加、删除的指定属性名。效果同toggleClass()方法

语法 $jQuery对象.hasClass("类名")

参数 传入字符换类型的类名

示例

    $btn4.click(function () {
    // 判断这条属性是否有该类名
    if ($box.hasClass("newStyle")) {
      // 如果有
      $box.removeClass("newStyle");
    } else {
      $box.addClass("newStyle");
    }
    });

效果：

（二）常用事件方法

jQuery 中常用鼠标事件

1. mouseenter() 事件：当鼠标移入元素时 触发事件函数

2. mouseleave() 事件：当鼠标移出元素时 触发事件函数

3. hover() 事件：组合事件：当鼠标移出元素时、和移除元素时 触发事件函数

注： jQuery 中的鼠标事件和原生 JS 的鼠标事件 mouseover()和 mouseout()不同，没有事件冒泡

2.1 mouseenter()

概述

当鼠标移入元素时 触发事件函数

语法

$jQuery对象.mouseenter();

参数

fn()函数参数

示例

    //  进入元素，触发事件
    $box.mouseenter(function(){
    console.log("触发：mouseenter()事件，进入小盒子");
    });

2.2 mouseleave()

概述

当鼠标移出元素时 触发事件函数

语法

$jQuery对象.mouseleave();

参数

fn()函数参数

示例

    // 移出元素，触发事件
    $box.mouseleave(function(){
    console.log("触发：mouseleave()事件，离开小盒子");
    }); 

2.3 hover()

概述

当鼠标移出元素时、和移除元素时 触发事件函数。事件函数内两个函数参数。

语法

$jQuery对象.hover();

参数

两个函数参数 fn()

第一个参数：进入元素触发的事件；第二个参数：移出元素触发的事件

示例

    // 综合事件： hover()
    $warp.hover(function(){
        console.log("进入大盒子：触发事件");
    },function(){
        console.log("移出大盒子：触发事件");
    });

（三）关系查找方法

节点关系查找方法，可以查找到一个jQuery对象的父级、子集、兄弟元素等

方法返回的是 查找到的节点的类数组对象

3.1 &(this)

概述

jQuery 中使用 this 关键字，需要用jQuery对象函数 $() 包裹起来，才能调用jQuery的方法。

this 指向的是，调用this的 jQuery对象

语法

jQuery对象.(this);

参数

this

示例

    // 给点击的对象自己添加事件
    // 需要使用 $() 包裹 this ，转化成jQuery对象才能调用jQuery方法
    $(this).css("backgroundColor","orange");

3.2 parent()

概述

parent() 方法找到自己最近的父级元素

parents() 方法找到自己所有的父级元素。包括 body 在内

调用该方法之后可以继续打点调用jQuery的方法，不需要传参

语法

jQuery对象.parent();

jQuery对象.parents();

参数

可以传字符串类型的选择器参数

parent()方法： 的是符合父级已有的选择器可正常生效，否则父级不会被选中

parents()方法： 传入指定的参数，可选择符合条件的指定父级元素

示例

    // parent()：点击自己，找到自己上一层最近的父级元素
    $(this).parent().css("backgroundColor","tomato");
    
    // parents()：自己之上的所有父级元素
    $(this).parents().css("backgroundColor","tomato");

3.3 children()

概述

children()方法 选中自己的子集元素

传参：选中符合特定条件的子集元素

不传参：选中所有的子集元素

语法

jQuery对象.children()

参数

字符串类型的选择器参数

示例

    $(this).children().css("backgroundColor", "tomato");
    // 传参
    $(this).children("span").css("backgroundColor", "tomato");

3.4 siblings()

概述

选中同一父级元素下的兄弟元素

不传参：选中所有兄弟元素

传参：选中指定特征兄弟元素

语法

jQuery对象.siblings()

参数

字符串类型的选择器参数

示例

    $(this).siblings().css("backgroundColor", "tomato");
    // 传参
    $(this).siblings("h5").css("backgroundColor", "tomato");

其他关系查找方法

3.5 find()

概述

查找指定的符合选择器的元素

语法

jQuery对象.find()

参数

字符串类型的选择器参数

示例

$(this).find("p").css("backgroundColor", "red");

3.6 next()

概述

查找下一个兄弟元素

语法

jQuery对象.next()

参数

字符串类型的选择器参数

示例

    // 下一个 p
    $(this).next("p").css("backgroundColor", "red");

3.7 perv()

概述

查找上一个兄弟元素

语法

jQuery对象.perv()

参数

字符串类型的选择器参数

示例

    // 上一个 p
    $(this).prev("p").css("backgroundColor", "red");

3.8 nextAll()

概述

查找后所有的兄弟元素

语法

jQuery对象.nextAll()

参数

字符串类型的选择器参数

示例

    // 后面所有 p
    $(this).nextAll("p").css("backgroundColor", "red");

3.9 pervAll()

概述

查找上面所有的兄弟元素

语法

jQuery对象.pervAll()

参数

字符串类型的选择器参数

示例

    // 上面所有 p
    $(this).prevAll("p").css("backgroundColor", "red");

（四）链式调用

链式调用是一个 jQuery对象在调用任何方法（出节点关系方法）执行完之后，方法都有一个返回值，返回的就是对象自己

所以就可以对执行结果继续打点调用 jQuery对象的方法或属性

达到简化代码

概述

可以对jQuery对象连续打点执行不同的方法和属性

语法

jQuery对象.siblings().css()parent().css()...

参数

方法可传参，指定特定的元素

示例

    $(this).css("backgroundColor", "red")
    .siblings("h5").css("backgroundColor", "yellow")
    .parent().css("backgroundColor", "tomato");