jQuery的学习

最新推荐文章于 2024-05-05 23:51:11 发布

多喝开水少熬夜

最新推荐文章于 2024-05-05 23:51:11 发布

阅读量108

点赞数 2

分类专栏：前端学习文章标签： jquery

本文链接：https://blog.csdn.net/m0_52695557/article/details/118463114

版权

jQuery 选择器动画效果事件处理属性操作

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我是六月份在B站黑马那里看视频学习jQuery的，现在写这篇文章算是主要对笔记进行一些整理和复习吧(jQuery学习也可以参考w3school)

jQuery简介

jQuery就是1个对JS的某些操作进行简化后的js文件。
使用jQuery时要引入该内容，比如

 <script src="../jQuerymeasure/jquery.js"></script>

在这里插入图片描述

jQuery基本使用

顶级对象$

在这里插入图片描述

 <script>
  $(function(){
      alert(1);
      $('div').hide();
  });
  jQuery(function(){
      alert(1);
  });//这两个效果一样
    </script>

选择器

在这里插入图片描述

常用API导读

jquery选择器

jquery基础选择器

$(“选择器”)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjuslFGF-1625385866620)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210603163533176.png)]$

jquery层级选择器

隐式迭代

把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法

jquery筛选选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EZ5FgzR6-1625385866625)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210603165231401.png)]$

jquery筛选方法

在这里插入图片描述
还有一些具体有关操作css的方法就不做赘述了。

jQuery效果

在这里插入图片描述

动画队列及其停止排队方法

在这里插入图片描述

一些操作演示

 <!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>
    <script src="../jQuerymeasure/jquery.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
        }
        .cur{
            background-color: #bfa;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div ></div>
    <script>
        // $(function(){
        //     console.log($("div").css("width"));
        //     $("div").css("width",100);//属性名一定要加引号
        //     $("div").css({
        //         width:400,
        //         height:400,
        //         backgroundColor:"red",
        //     })
        // })
        $(function(){
    // $("div").click(function(){
    //     // $(this).addClass("cur");
    // });
    // $("div").click(function(){
    //     $(this).removeClass("cur");
    // });
    // toggleClass
    $("div").click(function(){
    $(this).toggleClass("cur")})
        })
    </script>
</body>
</html>

<!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>
    <script src="../jQuerymeasure/jquery.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aqua;
             display: none;
        }
    </style>
</head>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown();
            })
            $("button").eq(1).click(function(){
                $("div").slideUp();
            })
            $("button").eq(2).click(function(){
                $("div").slideToggle();
            })
        })
    </script>
</body>
</html>
``

```javascript
  <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
               $("div").fadeIn();
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut();

            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);

            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>

总之还是要多找素材来练习才能有提升。

jquery属性操作

在这里插入图片描述

  <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));

            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>

jquery内容文本值

.普通元素内容html()(相当于原生innerHTML)
普通元素文本内容text()(相当于原生innerText)
表单的值val()(相当于原生value)

jquery元素操作

1.遍历元素

1.$(“div”).each(function(index,domEle){xxx;})

回调函数第一个参数一定是索引号，可以自定义字母

第二个参数一定是dom元素对象

$.each(object,function(index,element){xxx;})遍历dom用

可用于遍历任何对象，主要用于处理数据，比如数组

2.创建元素

var li=$("<li></li>");

3.添加元素

内部添加：生成后是父子关系

$(“ul”).append(li);

把内容放入匹配元素内部最后面，类似原生appendChild

$(“ul”).prepend(li) 内部添加并且放到内容的前面

外部添加：生成后是兄弟关系

var div=$("<div>我是后面的</div>")

$(".test").after(div)

$(".test").before(div)

删除元素

element.remove()删除本身匹配的元素

element.empty()删除匹配元素集合中所有的子节点

element.html("")清空匹配元素的内容

jquery尺寸

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83FTodur-1625387669316)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210605214150355.png)]$

以上参数为空，则是获取相应值，返回的是数字型

如果参数为数字，则是修改相应值

jquery尺寸，位置操作

element.offset()返回对象offset().top…返回具体位置

offset()获取设置距离文档的位置（偏移）

offset({

修改：类似CSS

})

position()获取距离带有定位父级位置

这个方法只能获取不能设置偏移

scrollTop(),scrollLeft()

scrollTop()方法设置或返回被选元素被卷去的元素

$(document).scrollTop(100)//设置初始滚动到100px

jquery事件

jquery事件处理 on()绑定事件

element.on(events,[selector],fn)
类似对象写法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ft2UzB6k-1625388033872)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210608141848346.png)]$

如果多个事件具有一样的效果，可以写一块，中间空格隔开

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Gz884oB-1625388033873)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210608142106152.png)]$

$(“父元素”).on(“事件”,“子元素”,fn)
在这里插入图片描述
事件是绑定在父元素身上的但触发的对象是子元素

on可以给未来动态创建的元素绑定事件
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jly71tDV-1625388033879)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210608143212392.png)]$

off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$(“元素”).off(“事件”)，解除某个元素上的事件

解除事件委托

$(“父元素”).off(“事件”,"子元素)
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mVniZOHC-1625388033881)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210608153933298.png)]$

one()事件

$("元素").one("事件",function(){

})只会触发一次

trigger()自动触发事件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H4hwNAfd-1625388033883)(C:\Users\一杯热白开\AppData\Roaming\Typora\typora-user-images\image-20210608163716592.png)]$
三种自动触发

 <script>
    $(function(){
        $("div").on("click",function(){
            alert("Sad");
        });
        // $("div").click();
        // $("div").trigger("click");
        $("div").triggerHandler("click");//不会触发元素的默认行为
    })
    </script>