jQuery常用方法

大大大石头
237 阅读3分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

jQuery常用方法

.html()方法 -- 标签内容

相当于原生js中的innerHTML方法，用来获取或者设置标签内部内容

语法：jq对象.html( '可选参数 ' )

作为方法，内部传递参数和不传递参数会有不同作用

  • 不传递参数：获取标签内部内容（包括文本和标签）
  • 传递参数：设置标签内容，参数会批量完全替代标签原本的内容，可以添加标签，参考innerHTML
<body>
  <div class="box">
    <p>123</p>
  </div>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // 不传入参数，可以获取元素内容
    l($('.box').html())
    // 传递参数，可以修改内容
    $('.box').html('456')
  </script>
</body>

注意：获取内容时候，只能获取jq对象第一个元元素的内部内容

.text()方法--标签文本

相当于原生的innerText属性，用来获取标签内部的文字内容（仅文本）

语法：jq对象.text( '可选参数 ' )

作为方法，内部传递参数和不传递参数会有不同作用

  • 不传递参数：获取标签内部文本内容（可以获取全部内部标签文字内容）
  • 传递参数：设置标签文本内容，如果参数包含结构也会被解析成文本，不会解析成标签，参考innerText
<body>
  <p>123<span>789</span></p>
  <p>123</p>
  <p>123</p>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // 不传入参数，可以获取元素文本内容(忽略标签)
    l($('p').text())
    // 传递参数，可以修改文本内容（只能修改文本内容，即使传入包含标签也会被解析成文本）
    $('p').text('456<p>我是一个标签</p>')
  </script>
</body>

.val方法--标签value值

相当于原生js中的value属性，一般用于但标签元素，用来获取或者设置表单元素的内容

语法：jq对象.val( '可选参数 ' )

作为方法，内部传递参数和不传递参数会有不同作用

  • 不传递参数：获取表单元素的value值
  • 传递参数：设置表单元素value的值

单标签无法使用html和text方法

attr()方法--标签属性

用来设置标签的属性名和属性值

语法：jq对象.attr( 属性名（必填） , 属性值（选填） )

根据arrt第二个参数是否传入，代表着不同的功能：

  • 不传入：表示查询指定属性名的属性值
  • 传入：设置属性名和对应的属性值

removeAttr()方法--删除标签属性

移除标签指定属性值

语法：removeAttr('属性名')

<body>
  <div id="box" class="box">123</div>
  <div id="box2" class="box2">345</div>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // attr()方法
    // 查询属性值
    l($('#box').attr('class'))
    // 修改属性值
    $('#box').attr('class', 'box3')
    // 查看是否修改
    l($('#box').attr('class'))
    // 添加一个没有的属性，自定义属性也可以
    $('#box').attr('name', 'name')


    // removeAttr()方法
    // 删除元素现有的属性值
    $('#box2').removeAttr('class')
  </script>
</body>

prop()方法--标签布尔值属性

针对selrcted、checked、disabled等表单的属性，此类属性属性名和属性值形同，无法通过attr方法直接获取

语法：JQ对象.prop( ' 属性名 ' ，‘属性值-布尔值’)

根据是否传入属性值，porp方法会有不同的作用：

  • 不传入：获取相应属性值
  • 传入：设置属性和属性的值

这里不写代码了，同attr（）方法类似

.css()方法--css样式

用于调用css属性值或者更改css属性值（计算后）

语法：jq对象.css(属性名，属性值)

根据属性值是否传入可有不同的功能：

  • 不传入参数：查询属性值
  • 传入参数：设置属性值

注意事项：

查询方法返回的是最终加载到页面上的最终值

如果属性值是数字类型的可以直接写成纯数字、不带单位的字符串甚至带+=赋值运算符的字符串都可以

复合属性可使用驼峰命名也可以使用带—的写法

多条属性可以直接把所有属性写成一个对象来合并写在一起

<body>
  <div class="box"></div>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    const $box = $('.box')
    l($box.css('width')) //200px
    // 下面四种写法都可以实现300px的效果（前提是带数字的属性值）
    // $box.css('width', '300px') 
    // $box.css('width', '300')
    // $box.css('width', 300) 
    $box.css('width', '+=100') //使用运算

    // 下面两种方法都可以更改属性值，属性名两种写法都可以
    // $box.css('background-color', 'skyblue') 
    $box.css('backgroundColor', 'skyblue')

    // 对条属性可以合并书写
    $box.css({
      'width': 300,
      'height': 400,
      'background-color': 'yellow'
    })
  </script>
</body>

添加、删除、切换类名方法

  • addClass()：向标签上添加类名
  • removeClass()：删除指定类名（如果参数为空则会删除全部类名）
  • toggleClass()：切换类名（程序会自行判断是否是否有这个类名，有则删除，无则添加）

注：三种方法正常使用都不会直接影响其他类名

	<body>
  <!-- 创建三个按钮，一个div -->
  <input id="add" type="button" value="添加">
  <input id="remove" type="button" value="删除">
  <input id="tag" type="button" value="切换">
  <div class="box"></div>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // 获取四个元素
    const $add = $('#add')
    const $remove = $('#remove')
    const $tag = $('#tag')
    const $box = $('.box')
    // 该三个按钮添加事件
    // 添加按钮调用addClass方法，点击添加类名
    $add.click(() => $box.addClass('box-b'))
    // 添加按钮调用removeClass方法，点击删除类名
    $remove.click(() => $box.removeClass('box-b'))
    // 添加按钮调用taggleClass方法，点击切换类名
    $tag.click(() => $box.toggleClass('box-b'))
  </script>
</body>

hasClass()检测类名是否存在

可以判断元素上是否存在特定类名，返回布尔值

语法：jq对象.hasClass()

<body>
  <!-- 创建三个按钮，一个div -->
  <input id="add" type="button" value="添加">
  <input id="remove" type="button" value="删除">
  <input id="tag" type="button" value="切换">
  <div class="box"></div>
  <!-- 引入jQuery文件 -->
  <script src="./js/jquery.min.js"></script>
  <script>
    // 获取四个元素
    const $add = $('#add')
    const $remove = $('#remove')
    const $tag = $('#tag')
    const $box = $('.box')
    // 该三个按钮添加事件
    // 添加按钮调用hasClass方法，判断类名是否存在，如果存在删除类名，如果不存在添加类名
    $tag.click(() => {
      if ($box.hasClass('box-b')) {
        $box.removeClass('box-b')
      } else {
        $box.addClass('box-b')
      }
    })
  </script>
</body>

JQ常用事件方法

和原生写法类似，不需要添加on，直接在jq对象后面打点调用即可

语法：jq对象.事件名( 事件函数 )

jq新增事件

  • mouseenter(事件函数)方法：鼠标进入元素
  • mouseleave(事件函数)方法：鼠标离开元素

区别于onmouseover和onmouseout事件，mouseenter()和mouseleave()不会触发事件冒泡，所以使用后者更多

  • hover(鼠标移上事件函数，鼠标离开事件函数)方法：鼠标移上和鼠标移出的合写方法
<body>
  <div class="box"></div>
  <script>
    const $box = $('.box')
    // 使用mouseenter和mouseleave创建鼠标进入和离开事件
    // $box.mouseenter(() => console.log('我进来啦'))
    // $box.mouseleave(() => console.log('我出来啦'))

    // 使用hover把鼠标进入和鼠标离开事件写在一起
    $box.hover(() => console.log('我进来啦'), () => console.log('我出来啦'))
  </script>
</body>

JQ关系查找方法

  • $(this)可以指向自己的jq对象，就可以使用jq方法
  • parent()：得到自己的父亲级，也是一个jq对象
  • children(可选参数)： 得到自己所有子集组成的jq对象，不限标签类型，参数为字符串类型的选择器，可以在子集内部搜小范围查找
  • siblings(可选参数)：得到除自己以外同父元素下的所有兄弟元素，得到jq对象，串儿参数可以二次筛选
<body>
  <div class="box">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <h2>3</h2>
    <h2>3</h2>
    <h2>3</h2>
    <h2>3</h2>
  </div>
  <div class="box">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <h2>3</h2>
    <h2>3</h2>
    <h2>3</h2>
    <h2>3</h2>
  </div>
  <script>
    // 获取元素
    const $box = $('.box')
    //添加点击事件
    $box.click(function () {
      // 打印自己
      l('自己', $(this))
      // 打印父亲
      l('父亲', $(this).parent())
      // 打印子集
      l('子集', $(this).children('h2'))
      // 打印兄弟
      l('兄弟', $(this).siblings())

    })
  </script>
</body>

链式调用

jq调用任何方法（除了节点关系方法）执行后，方法都会返回jq对象自己，我们可以接着打点调用属性和方法

<body>
  <div class="box">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
  </div>
  <div class="box">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
  </div>
  <script>
    const $box = $('.box')
    // 案例1:点击一个元素,让他自己变红色,兄弟级变金色。
    // $box.click(function () {
    //   $(this).css('background-color', 'red').siblings().css('background-color', 'yellow')
    // })
    // 案例2:升级版本，点击一个元素，让他自己变红色，兄弟变金色，他们的父级变粉色，父亲的兄弟变蓝色，父亲的兄弟的子级变黄绿色。
    $('p').click(function () {
      $(this).css('background-color', 'red')
        .siblings().css('background-color', 'yellow')
        .parent().css('background-color', 'pink')
        .siblings().css('background-color', 'blue')
        .children().css('background-color', 'yellowgreen')
    })
  </script>
</body>

其他关系节点查找

  • find(可选参数)：查找所有后代，如果有参数可以进一步缩小范围
  • next()：下一个兄弟元素
  • prev()：上一个兄弟元素
  • nextAll(可选参数)：后面所有的兄弟元素，参数为字符串类型的选择器，可以更精确查找
  • prevAll(可选参数)：前面所有的兄弟元素，参数为字符串类型的选择器，可以更精确查找
  • parents(可选参数)：获取包括body在内的全部祖先级，参数为字符串类型的选择器，可以更精确查找

这里不添加代码，可以自行尝试

案例：获取验证码控制按钮

需求：当点击按钮后，按钮禁用，并且倒计时，5秒后才可重新点击

<body>
  <!-- 创建一个按钮 -->
  <input type="button" value="发送验证码">
  <script>
    // 获取按钮
    const $input = $('input')
    // 按钮点击事件
    $input.click(function () {
      // 计时器
      let num = 5
      // 点击后按钮修改内容并且禁用
      $(this).val(`${num}秒 后重新发送`).prop('disabled', true)
      // 创建一个定时器，每秒执行一次修改按钮内容
      const timer = setInterval(() => {
        num--
        $(this).val(`${num}秒 后重新发送`)
      }, 1000);
      // 创建延时器，5秒后修改内容停止定时器
      setTimeout(() => {
        $(this).val('重新发送').prop('disabled', false)
        clearInterval(timer)
      }, 5000)
      // 可以把延时器中的代码放到定时器内部，当num=0执行即可
    })
  </script>
</body>

案例：放大镜切换

需求看案例吧，这里写了html、css和js，图片和源码自己找一下吧，js才是重点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>

<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="lib/jquery-1.12.4.js"></script>
  <script>
    // 获取元素
    const $lis = $('.leftBox ul li'),
      $top = $('.top'),
      $rightBox = $('.rightBox')
    // 给li标签添加鼠标滑入事件
    $lis.mouseenter(function () {
      // 删除所有的active
      $lis.removeClass('active')
      // 给我自己添加类名active
      $(this).addClass('active')
      // 左侧大图修改src属性
      $top.children().attr('src', `img/${$(this).children().attr('msrc')}`)
      // 右侧大图修改属性
      $rightBox.children().attr('src', `img/${$(this).children().attr('bsrc')}`)
    })
  </script>
</body>

</html>

/* 初始化 */
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

/* 版心 */
.w {
  width: 1120px;
  margin: 0 auto;
}

/* 左侧盒子 */
.leftBox {
  width: 400px;
  float: left;
}
.leftBox .top {
  width: 400px;
  border:1px solid #ccc;
}
.leftBox .top img {
  width: 400px;

}
.leftBox ul {
  width: 188px;
  margin: 10px auto;
}
.leftBox ul li {
  float: left;
  width: 54px;
  height: 54px;
  border:1px solid #fff;
}
.leftBox ul li.active {
  border-color: red;
}
.leftBox ul li + li {
  margin-left: 10px;
}

/* 右侧盒子 */
.rightBox {
  float: left;
  margin-left:10px;
  width: 500px;
  height: 500px;
  border:1px solid #ccc;
  overflow: hidden;
}

方法补充

  • each()遍历方法
  • width()获取窗口宽度
  • index()得到的是它自己在HTML结构中的兄弟中的下标位置的是
avatar
文章
阅读
粉丝