02-jQuery常用方法

L_yang\

已于 2022-08-19 23:58:03 修改

阅读量111

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-08-19 23:45:27 首次发布

本文链接：https://blog.csdn.net/qq_68478665/article/details/126420664

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客介绍了jQuery的基本用法，包括$符号的作用、jQuery的选择器、事件处理、DOM操作和动画效果。讲解了如何使用$获取DOM对象，转换DOM对象，以及使用index()、text()、css()和val()等方法。此外，还讨论了事件委托、链式操作和添加删除类等。最后，展示了如何使用show()、hide()以及fadeIn()、fadeOut()等动画效果。

摘要由CSDN通过智能技术生成

$的作用

$其实是一个函数名，是jQuery的缩写；用到$的地方可以用jQuery单词替代
$可以作为选择器，获取DOM对象相对应的jQuery对象；
$可以将一个DOM对象，转换成一个jQuery对象；$(this).val ; val() = value;
事件中的tihs指向DOM对象，所以需要使用$(this)做转换；
jQuery本质上就是js，只不过是可以使用一些现成的方法而已；

jQuery的常用方法

index(); 获取父级元素索引
text();获取和设置文本节点
css(); 获取和设置样式
val(); 获取和设置value属性 val（）

<body>
    <input type="text" value="input按钮">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
    <script src="script/jquery.js"> </script>
    <script>
    $("button").click(function(){
        // // 获取索引（）
        // let index = $(this).index();
        // console.log(index)
        // 文本（）
        // let txt = $(this).text()
        // console.log(txt)
        // $(this).text("新按钮")
        // 样式（）
        // let css = $("button").css("height");
        // console.log(css);
        // $("button").css("height","80px")
    })
    $("input").click(function(){
        // val（）
        // let value = $(this).val("新的input");
        // console.log(value);
        // $(this).val("新的input");
    })

attr(); 获取和设置属性值，例如src
addClass(); 添加class
removeClass(); 删除class
toggleClass切换class
siblings(); 获取同级其他元素可以设置只亮一个其他的默认

img{
    width: 640px;
    height: 320px;
}
.active{
    background-color: red;
}
    </style>
</head>
<body>
    <img src="images/a1.png" alt="">
    <div class="btn-list">
        <button class="active">1</button>
        <button class="active">2</button>
        <button class="active">3</button>
    </div>


    <script src="script/jquery.js"> </script>
    <script>
        let imgSrc = [
            "images/a1.png",
            "images/a2.png",
            "images/a3.png"]
    $("button").click(function(){
        // 获取索引
        let index =$(this).index();
        // 设置属性
        $("img").attr("src",imgSrc[index]);
        //  设置背景色（通过添加class名）
        // $(this).addClass("active");
        // $(this).removeClass("active"); // 删除class名字
        //切换class 有则删  无则添
        $(this).toggleClass("active");
        // 获取同级元素
        $(this).addClass("active");
        $(this).siblings().removeClass("active")
    })

find(“选择器”);获取子级
parent(); 获取父级

    <style>
        .box{
            width: 200px;
            height: 200px;
            border:  2px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <button>按钮</button>
    </div>
    <div class="box">
        <button>按钮</button>
    </div>
    <div class="box">
        <button>按钮</button>
    </div>
    <script src="script/jquery.js"></script>
    <script>
        // //  找子级
        $(".box").click(function(){
            $(this).find("button").css("background-color","green")
        })
        // 找父级 
        $("button").click(function(){
            $(this).parent().css("background-color","red");
        })
    </script>

jQuery里的DOM操作

append();添加元素节点

remove();删除元素节点

通过on实现事件委托：将事件子级的事件委托给父级处理

<body>
    <input type="text" placeholder="请输入">
    <button>添加</button>
    <ul class="ul-list">
        <li>苹果</li>
        <li>鸭梨</li>
        <li>柠檬</li>
    </ul>
    <script src="script/jquery.js"></script>
    <script>
        // // 删除
        // $(".ul-list li").click(function(){
        //     $(this).remove();
        // })
        // 添加
        $("button").click(function(){
        let value = $("input").val();
        let li = $(`<li>${value}</li>`)
        $(".ul-list").append(li);
        })
         // 通过on绑定  on第一个参数写事件 第二个写子级  第三个写函数 这里的this指向li标签    
        $(".ul-list").on("click","li",function(){
            $(this).remove();
        })

  // 通过on绑定  on第一个参数写事件 第二个写子级  第三个写函数 这里的this指向li标签    
  $("button").on("click","li",function(){
            this
        })

jQuery事件

click() 点击
mouseenter（）鼠标移入
mouseleave（）鼠标移出
mousemove（）鼠标移动
on（）事件委托

// 通过on绑定  on第一个参数写事件 第二个写子级  第三个写函数 这里的this指向li标签    
$(".ul-list").on("click","li",function(){
$(this).remove();
})
// click
$(".box").click(function(){
            $(this).find("button").css("background-color","green")
        })
//mouseenter
$(".box").mouseenter(function(){
            console.log("mouseenter")
        })
//mouseleave
$(".box").mouseleave(function(){
            console.log("mouseleave")
        })
//mousemove
$(".box").mousemove(function(){
            console.log("mousemove")
        })

链式操作：每个方法的返回值都是子级

        $(".box").mouseenter(function(){
            console.log("mouseenter")
        }).mouseleave(function(){
            console.log("mouseleave")
        }).mousemove(function(){
            console.log("mousemove")
        })

jQuery的动画方法

show();显示可以写延迟秒数从左上角消失
hide();隐藏可以写延迟秒数从左上角消失

    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <div class="box"></div>
    <script src="script/jquery.js"></script>
    <script>
    $(".show").click(function(){
        $(".box").show(500);
    })
    $(".hide").click(function(){
        $(".box").hide(500);
    })

fadeln();显示逐渐透明读数增加的出现
faddeOut();隐藏逐渐透明读数减少消失

    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <div class="box"></div>
    <script src="script/jquery.js"></script>
    <script>
    $(".show").click(function(){
        $(".box").fadeIn(500);
    })
    $(".hide").click(function(){
        $(".box").fadeOut(500);
    })