jQuery常用方法

jQuery 操作标签的内容

html()方法

• html()方法相当于原生JS中的innerHTML属性，用来获取或设置标签内部内容。
• 功能
  • 获取：文本和内部标签，语法：jquery对象.html();
  • 设置: 若设置标签时，标签会被渲染。语法：jquery对象.html("文本内容");

<div class="box">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</div>
<div class="box">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</div>
<input type="text" value="请输入你的名字">
<script src="../js/jquery.min.js"></script>
<script>
// 获取jQuery对象
var $box = $(".box");
// html()方法
// 1. 获取：只能获取第一个元素内部的文案,即：第一个名为box的元素的内部文案。
// 将p标签和文本内容一起输出
console.log($box.html()); 
// 2.设置
$box.html("<p>这是唯一的p标签</p>"); 
</script>

• 注意：获取时，只能获取第一个元素内部的文案

text()方法

• text()方法相当于原生JS中的innerText属性，用来获取或设置标签内部文字。
• 功能
  • 获取：仅仅是文本，会忽略标签，语法：jQuery对象.text();
  • 设置: 若设置标签时，标签会被当做普通文本，语法：jQuery对象.text("文本内容");

// text()方法
// 1.获取
console.log($box.text());
// 2.设置:会忽略标签，将其当作文本全部输出在页面上
$box.text("<p>这是唯一的p标签</p>");

• 注意：获取时，将所有获取到的元素的内部文案输出，忽略标签。

针对单标签和双标签

• 单标签不能调用html()、text()方法
• 演示代码

<div class="box">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</div>
<div class="box">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</div>
<input type="text" value="请输入你的名字">
<textarea class ="txt" cols="30" rows="10">请输入自我介绍</textarea>
<select class="sel">
    <option value="tianjin">天津</option>
    <option value="chengdu">成都</option>
    <option value="beijing">北京</option>
</select>
<script src="../js/jquery.min.js"></script>
<script>

// 获取jQuery对象
var $box = $(".box");
var $inp = $("input");
var $txt = $(".txt");
var $sel = $(".sel");
var $opt = $("option");

// 针对 单标签 / 双标签之间的问题
// 1. 单标签 调用 html() \ text()方法
// 全部输出空
// 即：单标签不能调用html()、text()方法
console.log($inp.html());
console.log($inp.text());

// 2. 双标签 调用 html() \ text()方法
// 输出:请输入自我介绍
console.log($txt.html());
console.log($txt.text());
// 输出：包含标签结构的元素内部文案
console.log($sel.html());
// 输出：不包含标签结构的元素内部文案
console.log($sel.text());

val()方法

• val()方法相当于原生JS中的value属性，用来获取或设置表单元素内容。
• 功能
  • 获取：表单元素的value,语法：jQuery对象.val();
  • 设置: 表单元素的value,语法：jQuery对象.val("文本内容");
• 演示代码

// val()方法
// 1.获取
// 输出是空的
console.log($box.val()); 
// 输出：请输入你的名字
console.log($inp.val());
// 输出：请输入自我介绍
console.log($txt.val());
// 输出：tianjin
// selection会默认选中的option,进行输出
console.log($sel.val());
// 输出：tianjin
console.log($opt.val());

// 2.设置
// 批量操作
$inp.val("lalla");
$txt.val("你好");
$sel.val("beijing");
$opt.val("dishini");

jQuery 操作标签的属性

attr()方法

• attr：全称 attribute，属性的意思。
• 作用：用来获取或者设置标签的属性值(自定义属性的设置和获取也可以)。
• 设置标签的属性
  • 语法：jQuery对象.attr(name,value);
• 获取标签属性值
  • 语法：jQuery对象.attr(name);
• 演示代码

// attr()方法
// 1.获取
console.log($box.attr("class"));

// 2.设置
$img.attr("src","../img/cat2.jpg");
// 添加：自定义属性
$img.attr("hobby","cat");
// 获取：自定义属性值
console.log($img.attr("hobby"));

removeAttr()方法

• 作用：移除标签的属性
• 语法：removeAttr(name);
• 演示代码

// removeAttr()方法
$img.removeAttr("hobby");

prop()方法

• 针对：selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同。
• 通过原生js获取的是布尔值，而jQuery对象的attr()方法获得的是与属性名相同的值（并非布尔值），因此在使用的时候可能需要转换，现在用prop()方法获取的就是布尔值(解决问题)。
• 获取 语法：$('input').prop('属性名');
• 设置 语法：$('input').prop('属性名',值);
• 演示代码

// prop()方法
// 原生获取：selected、checked、disabled等表单元素的属性
var opt = document.querySelector(".current");
console.log(opt.selected); // true

// jQuery对象获取
var $opt = $(".current");
console.log($opt.attr("selected")); // selected

// console.log($opt.val());
// 将jQuery对象转换成原生js，就可以得到true
console.log($opt[0].selected); // true

// 使用prop()方法,直接操作的就是布尔值
// 1.获取
console.log($opt.prop("selected")); // true

// 2.设置
$opt.prop("selected",false);

jQuery 操作样式方法

css()方法

• jQuery 对象有一个 css() 的方法，用于调用 css 属性值或者更改 css 属性值。
• 语法：jQuery对象.css(name,value);
• 参数1：字符串格式的 css 样式属性名
• 参数2：设置或更改的属性值。

注意

• 一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式。
• 两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。

<div class="box" style="width: 300px;"></div>
<script src="../js/jquery.min.js"></script>
<script>
    // 获取元素
    var $box = $(".box");
    // css()方法
    // 得到的是某个元素的计算后的值，即：真实的、最终加载再页面上的值
    // 1.获取
    console.log($box.css("width")); // 300px
    // 2.设置
    $box.css("width","400"); //400px
    // 表达的意思：在原有计算后的width之上，加200px
    $box.css("width","+=200"); // 600px
</script>

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

// 复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法。
// 驼峰命名法
$box.css("backgroundColor","skyblue");
// 横线写法
$box.css("background-color","skyblue");

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

// 设置多条属性，可以使用对象形式的参数
$box.css({
    width: 200,
    backgroundColor: "green"
});

jQuery 操作类名方法

• 以下代码所用的结构

<input type="button" value="添加" class="btn1">
<input type="button" value="删除" class="btn2">
<input type="button" value="切换" class="btn3">
<div class="box"></div>

addClass()添加类名

• 语法：jQuery对象.addClass('类名')
• 参数：字符串格式的类名。
• 演示代码

// jQuery中的类名控制方法，只会操作指定的类名，不会影响其他类名
// addClass()
$btn1.click(function (){
    $box.addClass("demo");
});

removeClass()移除类名

• 删除指定的类名
• 语法：jQuery对象.removeClass();
• 传参数：字符串格式的类名。
• 不传参数：表示删除所有的类名
• 演示代码

// removeClass()
$btn2.click(function (){
    $box.removeClass("demo");
    // 什么参数都不传的时候，表示：删除所有的class属性值
    // $box.removeClass();
});

toggleClass()类名切换

• 若这个类名存在，则会移除该类名;否则添加该类名。
• 语法：jQuery对象.toggleClass('类名');
• 参数：字符串格式的类名。
• 优点：三个方法只操作参数部分的类名，不影响原有的其他类名。
• 演示代码

// toggleClass():将add和remove的功能集为一体,节省了判断语句的书写
$btn3.click(function (){
    $box.toggleClass("demo");
});

hasClass()检测类名是否存在

• 语法：jQuery对象.hasClass('类名');
• 返回值：true 和 false
• 演示代码

// hasClass():返回值 true 或 false
console.log($box.hasClass("box")); // true

jQuery 常用事件方法

• jQuery 对象封装了一系列的事件方法。
• 事件方法与原生JS事件方法名称类似，不需要写on。
• 事件方法需要jQuery对象打点调用，小括号内的参数是事件函数。
• 例如点击事件：click()方法。

mouseenter()方法

• jQuery 中自己的事件方法。
• 功能：鼠标进入一个元素触发的事件。

// jQuery 中自己的事件方法
// mouseenter()方法
$out.mouseenter(function (){
    console.log("out-mouse-in");
});
$inner.mouseenter(function (){
    console.log("inner-mouse-in");
});
// 先点击外部的out,然后再点击内部的inner标签
// 通过输出结果,可以看出来,点击inner标签的时候,out的事件函数并没有执行
// 每次都只输出一个结果
// 故:mouseenter方法不会事件冒泡

mouseleave()方法

• jQuery 中自己的事件方法。
• 功能：鼠标离开一个元素触发的事件。

// // mouseleave()方法
$out.mouseleave(function (){
    console.log("out-mouse-out");
});
$inner.mouseleave(function (){
    console.log("inner-mouse-out");
});

对比

• 注意：mouseenter 和 mouseleave 没有事件冒泡。
• 在使用时替换 mouseover 和 mouseout 更加合适。
• 演示代码

<div class="out">
    <div class="inner"></div>
</div>

// 对比：mouseout 和 mouseover ：有事件冒泡
$out.mouseover(function (){
    console.log("out-mouse-in");
});
$inner.mouseover(function (){
    console.log("inner-mouse-in");
});
// mouseout()方法
$inner.mouseout(function (){
    console.log("inner-mouse-out");
});
$out.mouseout(function (){
    console.log("out-mouse-out");
});
// 即：先点击内部的小div，再点击外面的大div
// 输出：inner-mouse-in
//       out-mouse-in
//       inner-mouse-out
//       out-mouse-out
//       out-mouse-in

hover()方法

• hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写,不存在事件冒泡。
• 参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数。
• 演示代码

// hover:有两个参数(是mouseenter和mouseleave的合并)，
//  第一个参数是鼠标移上执行的事件函数，
//  第二个参数是鼠标离开执行事件函数。
$out.hover(function(){
    // 鼠标移上
    console.log("in");
},function (){
    // 鼠标离开
    console.log("out");
});

jQuery 关系查找方法

• 公共的结构

<div class="box">
    <p>hi</p>
    <p>hi</p>
    <p>hi</p>
    <p>hi</p>
    <p>hi</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
</div>
<div class="box">
    <p>nihao</p>
    <p>nihao</p>
    <p>nihao</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
    <p>nihao</p>
    <p>nihao</p>
</div>

$(this)自己

• 在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可 以使用 JQ 的方法。
• 演示代码

// $(this)
// 获取所有的p标签
var $ps = $("p");

// 批量添加事件
$ps.click(function (){
    // 点击自己，让自己变成pink
   $(this).css("backgroundColor","pink"); 
});

parent()父级

• jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级（唯一的）。
• 父级得到的也是一个 jQuery 对象，直接继续打点调用 JQ 方法和属性。
• 演示代码

// parent() 找到父级，父级是唯一的
// 因此点击子级p标签，使子级的父级变为skyblue
$ps.click(function (){
    $(this).parent().css("background-color","skyblue");
});

children()子级：可参数筛选

• jQuery 对象内部有一个 children() 方法，可以得到自己的所有子级元素组成的 jQuery对象。
• 得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性。
• 获得子级时，不限制标签类型。
• children()可以传参数：参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择。
• 演示代码

// children()子级，一个父级可以有多个子级
// 可以通过传递参数的方式，来筛选子级
$box.click(function (){
    // 没有传递参数，统一设置所有的自己元素
    $(this).children().css("background-color","yellowgreen");
    // 设置参数，对获取的自己元素进行筛选
    // 子级中只有h2标签的背景颜色被修改
    $(this).children("h2").css("background-color","pink");
});

siblings()兄弟：可参数筛选

• jQuery 对象通过调用 siblings() 方法可以得到除了自己以外的所有同级元素（兄弟）组成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟。
• 得到 jQuery 对象可以继续使用 JQ 的方法和属性。
• siblings() 方法得到的 jQuery 对象可以进行二次选择，通过给参数传递字符串格式的选择器。
• 演示代码

// siblings()兄弟：有多个,可参数筛选
// 兄弟节点,只能选中亲兄弟(除自己以外)
$ps.click(function (){
    // 没设置参数
    $(this).siblings().css("background-color","skyblue");
    // 设置参数,进行筛选: 将亲兄弟中所有的p标签全部选中
    $(this).siblings("p").css("background-color","lightcoral");
});

注意

• click方法是有事件冒泡的

$ps.click(function (){
    $(this).siblings("p").css("background-color","lightcoral");
});
$box.click(function (){
    $(this).children("h2").css("background-color","pink");
});
// 执行上述代码后:
  // 先点击外部的box,然后再点击内部的p标签
  // 通过输出结果,可以看出来,点击p标签的时候,box的事件函数再次被执行
  // 输出了两次结果
// 故:click方法是有事件冒泡的

• 图片示例

链式调用

链式调用概述

• jQuery 对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回值就是 jQuery对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用JQ的方法和属性。
• 可以使用 jQuery 对象进行连续打点调用。

案例

• 案例1：点击一个元素，让他自己变红色，兄弟级变金色。

// 案例1：点击一个元素，让他自己变红色，兄弟级变金色。
$ps.click(function (){
    $(this).css("background-color","red")
    .siblings().css("background-color","gold");
});

• 案例2：升级版本，点击一个元素，让他自己变红色，兄弟变金色，他们的父级变粉色，父亲的兄弟变蓝色，父亲的兄弟的子级变黄绿色。

// 案例2：升级版本，点击一个元素，
$ps.click(function (){
    // 让他自己变红色，
    $(this).css("background-color","red")
    // 兄弟变金色，
    .siblings().css("background-color","gold")
    // 他们的父级变粉色，
    .parent().css("background-color","pink")
    // 父亲的兄弟变蓝色，
    .siblings().css("background-color","blue")
    // 父亲的兄弟的子级变黄绿色。
    .children().css("background-color","yellowgreen");
});

jQuery 其他关系查找方法

• 公共结构

<div class="box">
    <p>hi</p>
    <p>hi</p>
    <p>
        <h2>啦啦</h2>
    </p>
    <p>hi</p>
    <p>hi</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
</div>
<div class="box">
    <p>nihao</p>
    <p>
        <h2>啦啦</h2>
    </p>
    <p>nihao</p>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
    <p>nihao</p>
    <p>nihao</p>
</div>

find()后代元素: 必须传参数

• jQuery 对象可以利用 find() 方法，传递一个参数，参数部分规定的选择器，查找范围是jQuery 对象的所有后代(子孙等).
• 参数是字符串格式的选择器。
• 不局限于找到子级，而是符合条件的后代.
• 演示代码

// find()后代元素: 必须传参数筛选
// 查找所有的h2标签: 将子级和孙子级的h2标签全部找出来
$box.find("h2").css({
    "background-color":"red",
    // 可以不写单位
    width: 20,
    height:20
});

兄弟元素

• 紧邻的兄弟元素方法
  • next() 下一个兄弟
  • prev() 上一个兄弟
• 代码演示

// 紧邻的兄弟元素方法
$ps.click(function (){
    // 下一个兄弟
    $(this).next().css("background-color","red");
    // prev() 上一个兄弟
    $(this).prev().css("background-color","gold");
});

• 多选方法(可传参进行筛选)
  • nextAll() 后面所有兄弟
  • prevAll() 前面所有兄弟
• 通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面或后面兄弟中选中符合选择器规定的部分。
• 演示代码

// 紧邻的兄弟元素方法
$ps.click(function (){
  // 1.不设置参数
  // nextAll() 后面所有兄弟
  $(this).nextAll().css("background-color","red");
  // prevAll() 前面所有兄弟
  $(this).prevAll().css("background-color","gold");
  // 2.设置参数,进行筛选
  $(this).nextAll("h2").css("background-color","red");
  $(this).prevAll("p").css("background-color","gold");
}); 

parents()祖先级: 可传参筛选

• 通过该方法得到的是指定对象的包含body在内的所有祖先级元素组成的 jQuery 对象。
• 通过传参进行二次选择，参数位置是字符串格式的选择器
• 演示代码

// parents()祖先级: 可传参筛选
$ps.click(function (){
    // 1.没设置参数
    // 指定对象的**包含body在内**的所有祖先级元素组成的 jQuery 对象
    // 选中自己的父级和body
   $(this).parents().css("background-color","skyblue"); 
    // 2.设置参数
    // 选中自己的父级
    $(this).parents(".box").css("background-color","skyblue");
}); 

综合案例

发送验证码控制按钮禁用

• 演示代码

// 获取元素
var $btn = $("#btn");
// 绑定事件
$btn.click(function (){
    // 定义倒计时变量
    var s = 5;
    // 禁用按钮
    $(this).prop("disabled",true)
    // 按钮字变化
    .val(s + "秒后重新发送");
    // 倒计时:定时器
    var timer = setInterval(() => {
      s--;
      // 这里使用this出现错误，定时器内的this指向的是window
      $(this).val(s + "秒后重新发送");
      if(s <= 0){
         // 到0，变成发送
          clearInterval(timer);
          $(this).prop("disabled",false).val("发送");
      }
    },1000);
});

• 注意：出现了一个问题，就是：定时器内部的this指向的是window,出现错误
• 解决方法：替换成箭头函数

放大镜切换项

• 演示代码

<body>
  <!--版心  -->
  <div class="w">
    <!-- 左侧 -->
    <div class="leftBox">
      <!-- 上 -->
      <div class="top">
        <img src="img/m1.jpg">
      </div>
      <ul>
        <li class="active">
          <img src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg">
        </li>
        <li>
          <img src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg">
        </li>
        <li>
          <img src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg">
        </li>
      </ul>
    </div>
    <!-- 右侧 -->
    <div class="rightBox">
      <img src="img/b1.jpg" alt="">
    </div>
  </div>
    <script src="js/jquery.min.js"></script>
    <script>
        // 获取元素
        var $imgs = $(".leftBox ul li img");
        var $mimg = $(".leftBox .top img");
        var $bimg = $(".rightBox img");
        // 给每个小图片绑定事件
        $imgs.click(function (){
            // 让图片的父级取消兄弟的类名，给自己添加
            $(this).parent().addClass("active").siblings().removeClass("active")
            var msrc = $(this).attr("msrc");
            var bsrc = $(this).attr("bsrc");
            // 存储路径中的前缀
            var path = "img/";
            // 转换中图片
            $mimg.attr("src",path + msrc);
            // 转换大图片
            $bimg.attr("src",path + bsrc);
        });
    </script>
</body>