2021-07-22

最新推荐文章于 2022-03-08 11:55:18 发布

buty_nice

最新推荐文章于 2022-03-08 11:55:18 发布

阅读量95

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118996134

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

jQuery

jQUery入口

**第一种：
**$(function(){
})
第二种：
$(document).ready()
会在当前的document加载完成后执行。

<body>
  <script src="js/jquery-3.6.0.js"></script>
  <script>
    $(function () {
      // var box = document.querySelector(".box");
      // box.onclick = function () {
      //   alert("点击事件")
      // }
      console.log($("img").width());
    })
    window.onload = function(){
      console.log($("img").width());
    }
  </script>
  <div class="box" style="height: 100px;background-color: peru;">
  </div>
  <img src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg" alt="">
</body>

链式操作

链式操作：可以将对元素的一系列操作连接在一起，以链条的形式表现出来，这样的写法就是链式操作
jquery将取值和赋值的方法合并为一个。一般来说，没有参数就是取值，有参数就是赋值。
获取值的时候，如果选择器选中了多个，只会获取第一个元素的值。
jQuery特点：
隐式迭代:获取到多少元素，就对多少元素进行操作。
html() text() val()
html()中也可以书写标签。获取元素中的所有内容，包含标签文本。
text() 获取元素的文本内容 ,赋值的话不会解析HTML文本。
val() 获取表单元素的值

选择器

  $("css选择器")
  $("li:first")
  $("li:last")
  $("li:eq(2)")
  $("li:even")
  $("li:odd")

<body>
    <div>1</div>
    <div>2</div>
    <ul>
        <li>1</li>
        <li>1</li>
    </ul>
    <script src="./jqure/jquery-3.6.0.js"></script>
</body>
<script>
    //$("选择器") 里面选择器直接写css选择器即可，但是要加索引号
    // $(function() {
    //     console.log($(".nav"));
    //     console.log($("ul li"));
    // })

    //获取四个div  console.log($("div"));
    //给四个div设置背景颜色 $("civ").css("属性"，“值)
    $("div").css("color", "red");
</script>

筛选器

  .first
  .last
  .siblings 获取所有的兄弟元素
  .next 获取下一个兄弟元素
  .prev 获取是上一个兄弟元素
  .nextAll 获取下面所有的兄弟元素
  .prevAll 获取上一个兄弟元素
  .find("选择器") 在子元素中查询符合匹配规则的元素

<script>
    //选出ul里的第一个小li  想得到哪个都可以eq(第n个) ，指下标
    $(function() {
        $("ul li:first").css("color", "red");
        $("ul li:eq(3)").css("color", "blue");
    })
</script>

类名操作

hasClass(类名) 判断有没有这个类名，如果有，返回true，没有返回false。
removeClas(类名) 将一个类名移除
addClass(类名) 添加一个类名
toggleClass（类名） 切换类名如果有就删除，没有就添加。

  <style>
    .box{
      width: 300px;
      height: 300px;
      background-color: salmon;
    }
    .hide{
      display: none;
    }
  </style>
<body>
  <button>显示/隐藏</button>
  <div class="box hide"></div>
  <script src="js/jquery-3.6.0.js"></script>
  <script>
    $("button").click(function(){
      // var box = $(".box");
      // if (box.hasClass("hide")) {
      //   box.removeClass("hide");
      // }else{
      //   box.addClass("hide")
      // }
      $(".box").toggleClass("hide");
    })
  </script>
</body>

操作样式

获取元素的样式
.css(“样式名”)
获取元素的某一个样式的值。、

设置元素的样式
.css(“样式名”,“值”)
设置元素的某一个样式的值。

设置元素的多个样式
.css({
样式1：值1，
样式2：值2
})

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: slategray;
        }
    </style>
    <body>
    <div class="box">
    </div>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        // console.log($(".box").css('backgroundColor'));
        // $(".box").css("background-color","red");
        $(".box").css({
            width: "400px",
            height: "300px",
            backgroundColor: "red"
        })
    </script>
</body>

事件操作

jquery 绑定事件的写法：

第一种： 元素.事件类型(事件处理函数)

第二种： 元素.on("事件类型"，事件处理函数)

第二种方法中的事件类型可以写多个，一次绑定多个事件类型。多个事件类型之间用空格分开。

不同的事件类型，不同的事件处理函数 可以分开写，也可以使用下面的方法
元素.on({
  事件类型1：事件处理函数1,
  事件类型2：事件处理函数2
})

事件委托：
元素.on(事件类型，委托元素,处理函数)

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        
        li {
            height: 60px;
            line-height: 60px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <!-- <div class="box"></div> -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        // $(".box").click(function() {
        //     alert("事件绑定了")
        // })

        // $(".box").on("click mouseover", function() {
        //     alert("on的方式添加")
        // })

        // $(".box").on({
        //     click: function() {
        //         alert("点击事件")
        //     },
        //     mouseover: function() {
        //         alert("鼠标移入事件")
        //     }
        // })

        $("ul").on("click", "li", function() {
            console.log(this);
            $(this).css("backgroundColor", "red")
        })
    </script>
</body>

节点操作

创建节点 $(“html字符串”)
插入节点：
父元素.append(子元素) 将子元素插入到父元素的尾部。
父元素.prepend(子元素) 将子元素插入到父元素的头部

  元素.after(新元素) 将新元素插入到元素的后面
  元素.before(新元素) 将新元素插入到元素的前面。

删除节点：
remove() 将自身从父节点中删除
清空节点：
empty()
替换节点：
要被替换的节点.replaceWith(新节点)
新节点.replaceAll(要被替换的节点)

克隆节点：
clone() 会克隆自身以及子元素

  第一个参数：是否克隆元素本身的事件  
  第二个参数：是否克隆子元素的事件

  默认为false 【注意】 如果第一个参数的值为false，第二个参数为true是无效的。

<body>
    <div class="box">
        <p style="color: skyblue;">内容</p>
        <p>我讲的课很困，大家忍一下</p>
    </div>
    <!-- <div class="cloneBox"></div> -->
    <script src="js/jquery-3.6.0.js"></script>
      <script>
        // 创建节点
        var a = $("<h1>标题</h1>");
        // 插入节点
        // $("p").after(a);

        // 删除节点：
        // $("p:last").remove();

        //替换节点：
        // $("p:first").replaceWith(a);
        // a.replaceAll("p:first")

        // $(".box").click(function(){
        //   console.log("点击事件");
        // })
        $(".box p:last").click(function() {
            console.log("p标签的点击事件");
        })
        $(".box").clone(true, true).insertAfter(".box");
    </script>
</body>

属性操作

设置：
元素.attr(“属性名”，“属性值”)
获取：
元素.attr(“属性名”)

<body>
  <div class="box">
    <p style="color: skyblue;">内容</p>
    <p index="1">我讲的课很困，大家忍一下</p>
  </div>
  <script src="js/jquery-3.6.0.js"></script>
  <script>
    // $("p:last").attr("index",1);
    console.log($("p:last").attr("index"));
  </script>
</body>

元素尺寸

width() 获取元素的内容的宽

height() 获取元素的内容的高。

innerWidth() 获取内容的宽+左右padding

innerHeight() 获取内容的高+上下padding

outerWidth() 获取内容的宽+左右padding + 左右边框

outerHeight() 获取内容的高+上下padding + 上下边框

  <style>
    .box{
      width: 300px;
      height: 100px;
      border: 1px solid;
      padding: 10px;
      background-color: burlywood;
    }
  </style>
  <body>
  <div class="box"></div>
  <script src="js/jquery-3.6.0.js"></script>
  <script>
    console.log($(".box").innerWidth());
  </script>
</body>

元素位置

offset() 返回的是一个对象，left：元素与页面左侧的距离。 top：元素与页面顶部的距离、

position() 返回一个对象：元素相对于拥有定位属性的父元素的偏移量

offsetParent() 获取元素的第一个拥有定位属性的父元素

 <style>
    .father{
      border: 1px solid;
      margin-top: 200px;
      margin-left: 400px;
      width: 400px;
      height: 400px;
      position: relative;
    }
    .son{
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: hotpink;
      left: 50px;
      top: 80px;
    }
    .box{
      height: 100px;
    }
  </style>
  <body>
  <div class="box"></div>
  <div class="father">
    <div style="position: relative;">
      <div class="son"></div>
    </div>
  </div>
  <script src="js/jquery-3.6.0.js"></script>
  <script>
    console.log($(".son").offsetParent());
  </script>
</body>

动画函数

show() 显示
hide() 隐藏
toggle()切换

slideDown 下拉显示
slideUp 上拉隐藏
slideToggle() 切换

fadeIn() 淡入显示
fadeOut() 淡出隐藏
fadeToggle() 切换
fadeTo()
第一个参数，运动时间
第二个参数，透明度。

如果想要有动画效果，需要传入参数。
参数：动画执行的时间

  <style>
    .box{
      margin-top: 50px;
      width: 200px;
      height: 200px;
      background-color: peru;
    }
  </style>
  <body>
   <button>显示</button>
   <button>隐藏</button>
   <button>切换</button>
   <div class="box"></div>
   <script src="js/jquery-3.6.0.js"></script>
   <script>
     $("button:eq(0)").click(function(){
       $(".box").fadeIn(1000);
     })
     $("button:eq(1)").click(function(){
       $(".box").fadeOut(1000);
     })
     $("button:eq(2)").click(function(){
      //  $(".box").fadeTo(0.1);
       $(".box").fadeTo(1000, 0.5);
     })
   </script>
</body>

buty_nice

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-22

jQuery链式操作选择器筛选器类名操作操作样式事件操作链式操作链式操作：可以将对元素的一系列操作连接在一起，以链条的形式表现出来，这样的写法就是链式操作jquery将取值和赋值的方法合并为一个。一般来说，没有参数就是取值，有参数就是赋值。获取值的时候，如果选择器选中了多个，只会获取第一个元素的值。jQuery特点：隐式迭代:获取到多少元素，就对多少元素进行操作。html() text() val()html()中也可以书写标签。获取元素中的所有内容，包含标签文本。text() 获
复制链接

扫一扫