jQuery day02_.card .content .details .actionbtn button:nth-chil-CSDN博客

本文链接：https://blog.csdn.net/lzw995189944/article/details/121761760

初体验

先下载先去官网下载jQuery.js 脚本文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>111</button>
    <button>222</button>
    <!-- 引入 jquery 脚本 -->
    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // jQuery的固定写法
      // $(选择器).事件名(回调函数)
      // 事件触发时, 就会执行回调函数, 函数中的this就代表选择器选到的元素
      // 选择器: 所有的css选择器在这里都可以使用!
      $("button").click(function () {
        this.style.color = "blue"
      })

      // 选择第二个按钮:
      // 本质是 DOM的 querySelectorAll('选择器')
      // nth-child(n): 选中作为第二个孩子的 button元素
      $("button:nth-child(2)").click(function () {
        this.style.backgroundColor = "red"
      })
    </script>
  </body>
</html>

1.监听页面加载完毕

<body>
    <!-- 切记: 使用jQuery 必须先引入脚本! -->
    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // jQuery: 监听
      // 选中document对象, 添加ready准备就绪事件, 触发回调函数
      $(document).ready(function () {
        console.log("dom加载完毕")
        box.style.backgroundColor = "purple"
      })
      // 简化
      $(function () {
        console.log("dom加载完毕")
        box.style.border = "2px solid green"
      })
      // 插件代码块: jqshort
      $(function () {})
    </script>

    <script>
      // 监听页面加载完毕的事件, 在这个事件里执行dom操作
      // onload: 在页面加载完毕后, 会自动触发
      window.onload = function () {
        console.log("页面加载完毕!")
        box.style.color = "red"
      }
    </script>

2.jq对象

<body>
    <button>111</button>
    <button>222</button>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 官方推荐: 保存jq查询结果的变量, 应该用 $ 开头, 以示特殊性
      // 此规范 非强制
      let $btns = $("button")
      console.log($btns)
      // jquery对象: 原型中包含了各种各样的 方法, 用来操作DOM元素
    </script>

3.jq事件click

事件的绑定底层是 addEventListener: 添加的是事件列表多次添加click事件, 不会覆盖之前的, 而是顺序执行
可以移除所有事件: unbind()
可以移除指定事件, 要求必须使用 命名函数

xxx.unbind('事件名', 函数名)

 <body>
    <button>点击事件</button>
    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      $("button").click(function () {
        console.log("111111")
      })
      // jqclick
      $("button").click(function (e) {
        // 代码块自带: 阻止默认事件, 推荐保留, 可以避免很多麻烦
        e.preventDefault()
        console.log(22222)
      })
      // 新增事件 不会替换已有事件, 说明是 addEventListener 的方式添加的
      // 带有事件列表, 会按照添加顺序执行

      // 删除所有事件:  unbind: 不绑定
      // $("button").unbind()

      // 删除指定事件: 要求事件必须是 命名函数 才可以!
      function show() {
        console.log(33333333)
      }
      $("button").click(show)
      // 指定删除: click 的 show 方法
      $("button").unbind("click", show)
    </script>
  </body>

4.对css的操作

 <body>
    <div id="box" style="color: blue; border: 2px solid green; font-size: 30px">
      Hello World
    </div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 获取 id='box' 元素的 css 样式的内容
      // 读取的box对象, 存储在变量中, 便于反复使用, 变量名推荐$开头
      let $box = $("#box")
      // 读取样式中的color的值
      console.log($box.css("color"))
      console.log($box.css("border"))
      // 代码块: jqcssGet
      console.log($("#box").css("font-size"))

      // 修改颜色: jqcssSet
      $("#box").css("color", "purple")

      // 同时设置多个属性: jqcssSetObj
      $("#box").css({
        "border-radius": "9px",
        "background-color": "gold",
        // 对于带 - 的属性,  可以用字符串方式, 也可以用小驼峰写法
        // "font-size":"44px",
        fontSize: "50px",
      })
    </script>
  </body>

5.class操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .danger {
        width: 200px;
        background-color: red;
        border-radius: 4px;
        text-align: center;
        padding: 10px 0;
        color: white;
      }
    </style>
  </head>
  <body>
    <button>添加样式</button>
    <button>删除样式</button>
    <button>切换样式</button>
    <button>判断是否存在danger样式</button>

    <div id="box">Welcome to 2107</div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 缩写格式: eq(n)  序号n 的元素, 序号从0开始数!
      // equal: 相等
      // $("button:nth-child(1)")  // css的孩子从 1 开始数
      $btn0 = $("button:eq(0)")
      console.log($btn0)
      // 为 id='box' 的元素添加 danger 样式class
      $btn0.click(function () {
        $("#box").addClass("danger") // jqClassAdd
      })

      // 删除按钮点击时, 删除 id='box' 元素的 danger 样式
      $("button:eq(1)").click(function (e) {
        // removeClass: 移除
        $("#box").removeClass("danger")
      })

      // 切换: 有的时候删除, 没的时候添加
      $("button:eq(2)").click(function (e) {
        // toggle: 切换
        $("#box").toggleClass("danger")
      })

      // 是否存在 danger 样式
      $("button:eq(3)").click(function (e) {
        e.preventDefault()
        console.log($("#box").hasClass("danger"))
      })
    </script>
  </body>
</html>

6.事件

 <body>
    <div
      id="box"
      style="width: 200px; height: 200px; border: 1px solid red"
    ></div>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 单击事件: jqclick
      $("#box").click(function (e) {
        //设置盒子的内容
        // $("#box").html("单击事件!")
        // 在事件内部, 使用 this 代表当前元素
        // $(this): 代表jQuery 封装之后的 JQ 对象, 可以使用JQ的相关方法
        $(this).html("单击事件!")
        console.log($(this))
        // this: 代表当前操作的DOM元素, 使用原生的DOM语法
        // 相当于 document.getElementById('box')
        this.innerHTML = "单击事件!"
        console.log(this)
      })

      // 双击事件:   dbl:  double
      $("#box").dblclick(function () {
        // html: 设置元素的 innerHTML 属性
        $(this).html("双击事件")
      })

      // 鼠标进入: jqMouseEnter
      $("#box").mouseenter(function () {
        $(this).html("鼠标进入")
        $(this).css("background", "green")
      })

      // 鼠标移出: jqMouseLeave
      $("#box").mouseleave(function () {
        // 链式写法:  xxx.xx.xxx.xx.xxx
        $(this).html("鼠标移出").css("background-color", "orange")
      })

      // 鼠标事件通常是合并的:  移入+移出 -- hover
      // hover(进入时触发, 移出时触发)
      $("#box").hover(
        function () {
          $(this).css("border-radius", "10px")
        },
        function () {
          $(this).css("border-radius", "1px")
        }
      )
    </script>
  </body>

 <body>
    <input type="text" placeholder="用户名" />
    <br />
    <input type="password" placeholder="密码框" />
    <br />
    <input type="checkbox" checked />

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      //对于input标签, 具有不同的type类型, 提供了快速选取的方式:
      let $name = $(":text")
      console.log($name)

      $name.focus(function () {
        console.log("用户名输入框获得焦点")
      })

      // 失去焦点
      $name.blur(function () {
        console.log("用户输入框失去焦点")
      })

      // 选择密码框
      console.log($(":password"))

      // 多选框的勾选: change 事件 -- jqchange
      $(":checkbox").change(function (e) {
        e.preventDefault()
        console.log("多选框变化:", $(this).prop("checked"))
        // prop: 用于读取或设置 属性的值
        // property的缩写: 属性
      })
    </script>
  </body>

7.序号选择器

<body>
    <ul>
      <li>0.</li>
      <li>1.</li>
      <li>2.</li>
      <li>3.</li>
      <li>4.</li>
      <li>5.</li>
    </ul>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 选中 eq 序号3 的li, 改为 红色  css color red
      $("li:eq(3)").css("color", "red")
      // lt: less than  小于    实体字符: &lt; <
      // gt: greater than 大于  实体字符: &gt; >

      // 小于序号3 的元素, 改为 绿色
      $("li:lt(3)").css("color", "green")
      // 大于序号3的元素, 改为 橙色
      $("li:gt(3)").css("color", "orange")

      // even: 偶数  --4个字母的单词是偶数
      // odd: 奇数  -- 3个字母的单词是奇数
      // li的偶数序号 添加背景色 浅灰
      $("li:even").css("background-color", "lightgray")
      // 奇数行, 添加 brown 背景颜色
      $("li:odd").css("background-color", "brown")
    </script>
  </body>

8.属性的操作

<body>
    <!-- data-color: 自定义属性  -->
    <a href="http://www.baidu.com" target="_blank" data-color="blue"
      >百度一下</a
    >

    <input type="checkbox" checked />
    <input type="checkbox" />

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 读取属性值的两种方式: prop (property) 和 attr (attribute)
      console.log($("a").prop("href"))
      console.log($("a").attr("href"))

      // 差别1:
      // prop只能读取官方提供的属性
      // attr能读取 官方提供的属性 + 自定义属性
      console.log($("a").prop("data-color"))
      console.log($("a").attr("data-color"))

      // 差别2:
      // prop: 可以读取所有类型的返回值
      // attr: 只能读取字符串类型的返回值
      console.log($(":checkbox"))
      console.log($(":checkbox:eq(0)").prop("checked")) //true
      console.log($(":checkbox:eq(1)").prop("checked")) //false

      console.log($(":checkbox:eq(0)").attr("checked")) //checked
      console.log($(":checkbox:eq(1)").attr("checked")) //undefined3

      // 总结: 凡是系统提供的属性, 用prop
      // 凡是自定义属性用 attr
    </script>
  </body>

9.属性的修改

 <body>
    <a href="http://www.baidu.com">百度一下</a>
    <button>修改href</button>

    <input type="checkbox" />
    <button disabled>注册</button>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      // 点击按钮, 修改 a 的href属性
      $("button").click(function (e) {
        // prop: 典型的 函数重载: 根据参数数量/类型的不同, 执行不同的代码逻辑
        // prop(属性名):  单参数是 读取操作
        // prop(属性名, 值): 双参数 是设置操作
        $("a").prop("href", "http://tmooc.cn")
        // attr也能修改, 但是attr适合修改 自定义属性
        $("a").attr("href", "xxxxxx")
      })

      // 读取 disabled 属性:  此属性是系统的,用prop读取
      console.log($("button:eq(1)").prop("disabled"))
      // 监听 勾选框的change事件, 修改 按钮的disabled 值
      $(":checkbox").change(function (e) {
        console.log($(this).prop("checked"))
        if ($(this).prop("checked")) {
          //勾选, 则按钮可用, 说明 disabled 是false
          $("button:eq(1)").prop("disabled", false)
        } else {
          $("button:eq(1)").prop("disabled", true)
        }
      })
    </script>
  </body>

10.图片的轮播

 <body>
    <img src="./img/1.jpg" alt="" data-cur="0" />
    <button>下一张</button>

    <script src="./vendor/jquery-3.6.0.min.js"></script>

    <script>
      let imgs = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"]
      //点击时, 修改 src 的值为下一张
      $("button").click(function (e) {
        // data-cur: 自定义属性, 保存了当前图片的序号
        let $img = $("img")
        let cur = $img.attr("data-cur") //自定属性, 用attr
        cur++ //下一张, ++代表+1
        // 更新当前页 序号
        // %: 取余符号  超过最大需要 自动回0
        // 例如 1%4 = 1;  2%4=2   4%4=0
        cur = cur % imgs.length
        // 实时读取数组长度, 数组就算有变化, 代码依然会正常运行
        $img.attr("data-cur", cur)

        // 注意: 不能写cur+=1, 因为 cur 是字符串类型, 会导致拼接操作
        // 根据新的序号 读取新的图片
        let new_img = imgs[cur]
        // src 是系统的属性, 用prop
        $img.prop("src", `./img/${new_img}`)
      })
    </script>
  </body>