ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

jquery的学习

2022-03-18 21:01:20  阅读：123  来源： 互联网

标签：jquery function click 学习 jQuery li div


1.jquery到底是什么

jQuery的官网 http://jquery.com/
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

What is jQuery?

 jQuery is a fast, small, and feature-rich JavaScript library. 
   It makes things like HTML document traversal and manipulation, 
   event handling, animation, and Ajax 
   much simpler with an easy-to-use API that works across a multitude of browsers. 
   With a combination of versatility and extensibility, 
   jQuery has changed the way that millions of people write JavaScript.

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。
（animate.js、common.js）

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，
其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

2.jquery的版本问题

官网下载地址：http://jquery.com/download/
jQuery版本有很多，分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

大版本分类：

  • 1.x版本：能够兼容IE678浏览器
  • 2.x版本：不能兼容IE678浏览器
  • 3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版和未压缩版：

  • query-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
  • jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读

jquery的入口函数
使用jQuery的三个步骤：

  1. 引入jQuery文件
  2. 入口函数
  3. 功能实现

关于jQuery的入口函数：

//第一种写法
$(document).ready(function() {
	
});
//第二种写法
$(function() {
	
});

jQuery入口函数与js入口函数的对比：

  1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
  2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

3.jq对象和dom对象(重要)

  1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
  2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的 对象就是jQuery对象。
  3. jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合（伪数组）
  4. DOM对象与jQuery对象的方法不能混用。

如下图这样用的话就会报错

$('div').style.display = 'none';

在这里插入图片描述

DOM对象转换成jQuery对象：【联想记忆：花钱】

  • DOM对象转换成 JQuery对象
<body>
    <video src="aa.mp4"></video>
</body>
<script>
    //1. 我们可以直接获取视频得到的是 jQuery对象
    // (1)直接获得
    $('video');
    // (2)使用原生js 获取DOM对象
    var myvideo = document.querySelector('video');
    $(myvideo);
    $(myvideo).play();  //这个会报错的，因为jquery里面没有play这个方法

    // 2.转为原生的对象
    myvideo.play();  //这个可以原生的比较麻烦

    // 两种方式
    $('video')[0].paly();  //只有一个视频文件所有用0就可以了
    $('video').get(0).play();

</script>

为什么要将jquery的转换为原生的呢?
因为有的方法是原生的有的而jquery没有的，如上面的代码中play()。但是由于原生的获取元素比较麻烦，而用封装之后的jquery就比较方便。‘

4.jquery选择器

4.1.什么是jQuery选择器

  • jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
    注意：jQuery选择器返回的是jQuery对象。
  • jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
    需要的时候可以查看文档
  • jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
    所以我们平时真正能用到的只是少数的最常用的选择器。

4.2 基本选择器和层级选择器

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

隐式迭代(重要)

在这里插入图片描述
在这里插入图片描述

简单的理解，隐式迭代就是给所有匹配到的元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

4.3 筛选选择器(方法)

在这里插入图片描述
在这里插入图片描述
更多的筛选方式如下
在这里插入图片描述
还是觉得上面代码写的那些方式比较好

4.4下拉菜单案例(以后再写)

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="js/jquery-3.6.0.js"></script>
</head>
<body>
    <button>你好啊</button>
    <button>你好啊</button>
    <button>你好啊</button>
    <button>你好啊</button>
    <button>你好啊</button>
</body>
<script>
    $(function(){
        // 1.隐式迭代 给所有的按钮都绑定了点击事件
        $('button').click(function(){
            //2.前的元素变化背景颜色  
            $(this).css("background","red");
            //3.其余的兄弟去掉背景颜色
            $(this).siblings("button").css("background","");
        })
    })
</script>
</html>

在这里插入图片描述

4.5 淘宝服饰精品案例(以后再写)

4.6 链式编程

在这里插入图片描述
在这里插入图片描述

5.元素设置

在这里插入图片描述

5.1 类名设置

    /*1.添加一个类*/
    $('li').addClass('now');
    /*2.删除一个类*/
    $('li').removeClass('now');
    /*3.切换一个类  有就删除没有就添加*/
    $('li').toggleClass('now');
    /*4.匹配一个类  判断是否包含某个类  如果包含返回true否知返回false*/
    $('li').hasClass('now');

<!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>样式操作</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 0.5s;
        }
        .current{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="cont"></div>
</body>
<script>
    // 操作样式的css方法
    $(function(){
        /* //1.添加类 addClass
        $('div').click(function(){
            // $(this).addClass('current');
        });
        //2.删除类 removeClass
        $('div').click(function(){
            $(this).removeClass('cont');
        }) */
        //3.切换类 toggleClass()
        $("div").click(function(){
            $(this).toggleClass("current");
        })
    })

</script>
</html>

下面应该是一个动图的
在这里插入图片描述

在这里插入图片描述

5.2 显示与隐藏效果

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div class="one"></div>
    <script>
        // 1.语法部分
        // // 显示语法规范
        // show([speed],[easing],[fn]);
        // // fn为完成的时候执行的函数

        // 2.案例部分
        // 显示于隐藏的案例
        $(function(){
            $("button").eq(1).click(function(){
                $("div").hide("fast");
                $("div").hide(1000,function(){
                    alert("隐藏完毕");
                })
            })
            $("button").eq(0).click(function(){
                $("div").show("fast");
            })
            $("button").eq(2).click(function(){
                $("div").toggle("fast");
            })
        })

        // 一般的情况下我们都是不会写比如hide()里面的参数，因为它的参数已经很好了

    </script>
</body>
</html>

在这里插入图片描述

5.3上拉和下拉效果

<!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>
        div{
            width: 300px;
            height: 100px;
            background-color: red;
            display: none;
        }

        
    </style>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <button style="width: 100px;">下拉</button>
    <button style="width: 100px;">上拉</button>
    <button style="width: 100px;">切换</button>
    <div class="one"></div>
    <script>

        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown();   //下拉
            })
            $("button").eq(1).click(function(){
                $("div").slideUp("fast");
            })
            $("button").eq(2).click(function(){
                $("div").slideToggle();
            })
        })

        // 一般的情况下我们都是不会写比如hide()里面的参数，因为它的参数已经很好了
        

    </script>
</body>
</html>

运行结果

6.动画(先跳过)

7.属性操作

7.1设置或获取元素的固有属性的值

所谓的固有属性也就是元素本身自带的属性，比如元素里面的href,比如元素里的type
代码如下

<!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>
    
    </style>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <a href="http://www.baidu.com" title="哈哈"></a>
    <input index="1" type="checkbox" name="" id="" checked>
    <span>dasfa</span>
    <script>

        $(function(){
            //element.prop("属性名")   prop获得元素的固有属性
            console.log($("a").prop("href"));

            // 设置属性值
            $("a").prop("title","我们不一样"); 

            $("input").change(function(){      //change方法也太好用了吧
                console.log($(this).prop("checked"));  //
            })

            // 2.元素的自定义属性通过attr()
            $("input").attr("index",4);

            // 3.数据缓存 data() 这个数据是存放在元素的内存里面的
            $("span").data("uname","andy");   //这个方法的数据我们是看不到的
            console.log($("span").data("uname"));  

        })
        

        
    </script>
</body>
</html>

7.2 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>
    <style>
    
    </style>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        $(function(){
        //   对于一以前的方式$("div").css("color","red");这个是隐式迭代的方式，不是很方便
    
        // 接下来要谈到的是each()方法 方法遍历元素
        var arr = ["red","green","blue"];
        var sum = 0;
        $("div").each(function(index,domEle){   //第一个参数是索引号，会自动变成  //第二个是dom对象
            // dom对象没有css方法
            $(domEle).css("color",arr[index]); //三个都是不一样的颜色
            sum+=parseInt($(domEle).text());
        })
        console.log(sum);
        })


    </script>
</body>
</html>

7.3 jquery遍历数据$.each

<!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>
    
    </style>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        $(function(){
        //   对于一以前的方式$("div").css("color","red");这个是隐式迭代的方式，不是很方便
    
        // 接下来要谈到的是each()方法 方法遍历元素
        var arr = ["red","green","blue"];
        var sum = 0;
        $("div").each(function(index,domEle){   //第一个参数是索引号，会自动变成  //第二个是dom对象
            // dom对象没有css方法
            $(domEle).css("color",arr[index]); //三个都是不一样的颜色
            sum+=parseInt($(domEle).text());
        })
        console.log(sum);


        // 2.$.each() 方法遍历元素 主要用于遍历数据 处理数据
        // $.each($("div"),function(i,ele){
        //     console.log(i);
        //     console.log(ele);
            
        // })
        // 下面的这个更好
        $.each(arr,function(i,ele){
            console.log(i);
            console.log();    
        })
        $.each({
            name:"andy",
            age:18
        },function(i,ele){
            console.log(i);  //输出的是name age
            console.log(ele);  //输出的是andy和age属性值
        })
    </script>
</body>
</html>

8 jquery事件导读

8.1事件注册

on的事件实现

<!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>事件导读</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <ul>
        <li>我们都是坏孩子</li>
        <li>我们都是坏孩子</li>
        <li>我们都是坏孩子</li>
        <li>我们都是坏孩子</li>
        <li>我们都是坏孩子</li>
    </ul>
    <ol>

    </ol>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //1.注册事件
            /* $("div").click(function(){
                $(this).css("background","purple");   
            })
            $("div").mouseover(function(){
                $(this).css("background","black");  //经过的时候触发
            }) */


            // 由于上面方式要分开写，比较麻烦，下面的就比较好
             //2.事件的处理on
            $("div").on({
                mouseover:function(){
                    $(this).css("background","blue");
                },
                click:function(){
                    $(this).css("background","purple");
                },
            });
            // (2)on可以实现事件委托(委派)
            // 定义:也就是把原来加给子元素的事件绑定在父元素的身上，就是把事件委派给父元素
            // $("ul li").click;
            $("ul").on("click","li",function(){   //事件绑定在父元素的身上，但是触发的对象是li事件
                alert("你好啊");
            });
            // (3)on可以动态创建元素绑定事件(用原来的方式的话就不可动态的创建了)
            $("ol").on("click","li",function(){
                alert(li);
            })

            for(let i = 0;i<10;i++){
                var li = $("<li>我是后来创建的</li>");
                $("ol").append(li);
            }
        
        })

        
    </script>
</body>
</html>

运行结果
在这里插入图片描述

8.2 微博的案例

<!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>微博案例</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" id="" cols="30" class="txt" rows="10"></textarea>
        <button class="btn" style="width: 100px;color:pink;">发布</button>
        <ul>

        </ul>
    </div>
    <script>
        $(function(){
            $(".btn").on("click",function(){
                var li = $("<li></li>");
                li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })
            // 点击删除按钮可以删除当前的微博留言
           /*  $("ul a").click(function(){   //此时的click不能给动态创建的a添加事件
                alert(11);
            }) */

            $("ul").on("click","a",function(){
              $(this).parent().remove();  
            })
        })
    </script>
</body>
</html>

运行结果
在这里插入图片描述

8.3事件处理off()解绑事件

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

8.4 jquery自动触发事件tigger()

有些事件它比较希望自动触发

<!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>微博案例</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <input type="text">
    <script>
        $(function(){
           $("div").on("click",function(){
               alert(11);
           })

            //    自动触发事件
            // 1.元素.事件()
            // $("div").click();   //自动调用
            // 2.方式2
            // $("div").trigger("click");
            //3. 方式3   就是不会触发元素的默认行为(比如下面的例子中光标不会闪烁(默认行为))
            // $("div").triggerHandler("click");

            $("input").on("focus",function(){
                $(this).val("你好吗，你在干什么");
            })

            // $("input").triggerHandler("focus");  //不会有光标的闪烁
            $("input").trigger("focus"); //会有光标闪烁
        })
    </script>
</body>
</html>

8.5 事件对象

<!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>微博案例</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function(){
            $(document).on("click",function(){
                console.log("点击了document");
            })
            $("div").on("click",function(event){
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();   //阻止事件冒泡
            })
        })
        
    </script>
</body>
</html>

在这里插入图片描述

9.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>拷贝事件</title>
    <script src="js/jquery-3.6.0.js"></script>
    <style>

    </style>
</head>
<body>
    <script>
        $(function(){
            var targetObj = {};
            var obj = {
                id:1,
                name:"andy",
            }
            // $.extend(target,obj);  //语法
            $.extend(targetObj,obj);
            console.log(targetObj);
        })

        // 如果原来和现在的重复的话就会覆盖之前的
    </script>
</body>
</html>

jquery多库共存

方式一:别人用了就用
方式二:自己定义一个
var wei = $.noConflick(); 将它的释放出来。

jquery插件

jquery插件库 http://www.jq22.com
jquery之家 http://www.htmleaf.com更推荐

图片懒加载技术

本内容通过对于https://blog.csdn.net/wuyxinu/article/details/103669718下进行的
参考的视频:https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.337.search-card.all.click里面的jquery

花时间:快速了解jquery的内容

标签：jquery,function,click,学习,jQuery,li,div
来源： https://blog.csdn.net/weixin_47994845/article/details/123535782

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有