jQuery操作标签的内容

html()方法

• 相当于原生JS中的innerHTML属性，用来获取或者设置标签内部的内容
  方法可以传递一个参数，自定义的字符串内容
• 获取：文本和标签内容
  语法：jQuery对象.html()；
  获取时只能获取第一个元素内部的文案，以及内部的标签
• 设置：若设置标签时，标签就会被渲染
  语法：jQuery对象.html('文本内容')
  内部参数也可以是标签字符，如果是标签字符，就会按照标签进行加载
  如下：

    // 如果内部的字符串包含了标签的语法的字符，会按照 html 语法进行加载
    $box.html('这是新增加的子级<p>这是段落</p>')

text()方法

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

• 获取：仅仅是文本
  语法：jQuery对象.text();
  获取的时候可以获取所有标签内部的文本内容，忽略内部标签
• 设置：若设置标签时，标签会被当做普通文本
  语法：jQuery对象.text('文本内容');

val()方法

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

• 获取：表单元素的 value 语法：
  jQuery对象.val();
  特别注意：在section标签中获取value是获取的其结构下的option标签的value值
  批量类似于option标签获取value时获取的是第一个元素的值，跟html方法有点类似
• 设置：表单元素的value 语法：
  jQuery对象.val('文本内容');
  设置内容如果有对应的value值，其选择栏的内容也会随之改变，如果没有，就只改变value的值，但是内容不会改变
  select下的三个option标签，首选为天津
  进行value()方法的设置后，默认选项就变为了北京
  设置为不存在的value值后，value值确实会改变，但是选项不会进行改动
  改成guangzhou，但是没有改变内部选项值

jQuery中操作标签属性的方法

attr()方法

attr：attribute，属性的意思
内部name和value值记得要打双引号，包括下面的removeAttr()方法内的参数也是一样

• 作用：获取或者设置标签的属性值
• 设置标签的属性
  语法：jQuery对象.attr(name,value)
• 获取标签属性值
  语法：jQuery对象.attr(name)

removeAttr()方法

• 作用：移除标签的属性
• 语法：removeAttr(name)

prop()方法

• 针对：selected，checked，disabled 等表单元素的属性，此类属性的属性值和属性名相同
• 获取：
  语法：$("input").prop('属性名');

    // prop() 方法，直接操作的就是布尔值
    console.log($btn.prop("disabled"))
    console.log($choose.prop("checked"))

• 设置
  语法：$('input').prop('属性值',值);

    // 设置
    $btn.prop("disabled",false)

jQuery操作css样式方法

css()方法

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

注意：

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

 // css() 传一个参数：获取对应的属性值
    console.log($box.css("width"))

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

    // css() 传入两个参数：设置或更改对应的属性值
    $box.css("width","400px")
    $box.css("width","400")
    $box.css("width",500)
    $box.css("width","+=100px")

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

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

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

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

jQuery中操作类名的方法

不影响元素上的其他类名，只操作指定类名，很方便

addClass()添加类名

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

removeClass()移除类名

• 删除指定类名
• 语法：jQuery对象.removeClass();
• 参数：字符串格式的类名
• 不传参数，表示删除元素之上的所有的类名

toggleClass()类名切换

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

判断类名是否存在的方法

• 语法：jQuery对象.hasClass('类名')
• 返回值：false和true
  综合使用：
  判断是否有指定的类名，没有就添加，有就删除

<script>
        // 给 box 切换 demo 的类名，从而改变背景颜色
        var $box = $("#box");
        var $btn1 = $("#btn1");
        var $btn2 = $("#btn2");
        var $btn3 = $("#btn3");

        // 判断一个类名在标签中是否加载
        console.log($box.hasClass("demo"))
        // 模拟一下 切换 类名的效果
        $btn3.click(function () {
          // 判断 box 是否有 demo 的类名
          if ($box.hasClass("demo")) {
            // 如果有 demo，就删除
            $box.removeClass("demo")
          } else {
            // 如果没有 demo，就添加一个
            $box.addClass("demo")
          }
        })
    </script>

jQuery常用事件方法

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

mouseenter()方法

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

mouseleave()方法

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

mouseenter 和 mouseleave 没有事件冒泡
在不需要事件冒泡的情况下，在使用时替换掉mouseover 和 mouseout 更加合适。因为mouseover和mouseout具有事件冒泡

hover()方法

• hover事件相当于mouseenter和mouseleave事件进行了合写
• 参数：两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数

        // hover() 方法，对mouseenter 和 mouseleave 进行了合并书写
        $box.hover(function () {
          // 鼠标移入
          $box.addClass("demo")
        },function () {
          // 鼠标离开
          $box.removeClass("demo")
        })

jQuery关系查找方法

$(this)自己

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

parent()父级

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

      // 找到事件源的 父级元素，添加黄色背景
      $(this).parent().css("background-color","yellow")

children()子级

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

    $box.click(function () {
    //   // 获取子级
      // $(this).children().css("background-color","pink")
    //   // 添加参数后，会按照指定的选择器在子级中进行二次选择
      $(this).children("p").css("background-color","pink")
    })

siblings() 兄弟

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

      // 查找兄弟元素
      // $(this).siblings().css("background-color","skyblue")
      $(this).siblings("h2").css("background-color","skyblue")

链式调用

• jQuery 对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回值就是 jQuery 对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用JQ的方法和属性。
• 可以使用 jQuery 对象进行连续打点调用。
• 好处：简化代码书写
  案例：点击一个元素，让自己变红色，兄弟变金色，父级变粉色， 父级的兄弟变蓝色，父级的兄弟的子级变黄绿色

    $ps.click(function () {
      // 让点击的自己 颜色变红色
      // jQuery 对象调用除了节点关系的方法之外，其他的方法执行后，返回值就是 对象自己
      // 可以继续链式调用其他的 jQuery 对象的方法和属性
      // 好处：简化代码书写
      // console.log($(this).css("background-color","red").html("哈哈"))
      $(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")  // 父级的兄弟的子级变黄绿色

    })

其他关系查找方法

find()后代元素

• jQuery 对象可以利用 find() 方法，传递一个参数，参数部分规定的选择器，查找范围是jQuery 对象的所有后代。
• 参数是字符串格式的选择器（必须要有参数）

兄弟元素

紧邻的兄弟元素方法

• next()下一个兄弟
• prev()上一个兄弟
  多选方法
• nextAll()后面所有兄弟
• prevAll()前面所有兄弟
• 通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面或者后面兄弟中选中符合选择器规定的部分

parents()祖先级
通过该方法得到的是指定对象的包含body在内的所有祖先级元素组成的jQuery对象

• 通过传参进行二次选择，参数位置是字符串格式的选择器

案例：验证码控制按钮

逻辑：

• 添加按钮的点击事件
• 让按钮被禁用
• 替换按钮的文字内容
• 每隔1s更改计时内容
• 5s结束后，恢复发送
• 让按钮取消禁用

<body>
  <input type="text">
  <input type="button" value="发送">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // 获取元素
    var $btn = $("input:button")
    // 添加按钮的点击事件
    $btn.click(function () {
      // 定义一个变量存储时间的数字
      var n = 5;
      // 让按钮被禁用
      // 替换按钮的文字内容
      $(this).prop("disabled",true).val(n + "s 后重新发送")
      // 每隔 1s 更改倒计时内容
      // 通过定时器进行每隔 1s 减时间效果
      // 使用箭头函数定义定时器，原因是没有this，避免定时器内部的this指向window
      var timer = setInterval(() =>{
        n--;
        $(this).val(n + "s 后重新发送");
        if(n<=0){
          clearInterval(timer);
          $(this).val("重新发送").prop("disabled",false);
        }
      },1000)
    })
    
  </script>
</body>

案例：放大镜切换项