JQuery基本使用

最新推荐文章于 2024-06-20 20:20:21 发布

攻城老湿

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量116

点赞数

文章标签： js jquery dom java javascript

本文链接：https://blog.csdn.net/yorickjun/article/details/116645863

版权

一. 基本使用

jquery的入口函数

$(function(){
    //页面加载后执行的入口
});

实例：通过使用入口函数的方式，将div在页面加载完毕后隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div> 
    <script>
        $(function(){
            $('div').hide();
        });
    </script>
</body>
</html>

2.jquery中的$符号是jquery的别称，两者等价

实例：将1中的$符号替换为jQuery后依旧可以正常运行，分别在页面中弹出不同的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
    <div></div>
    <script>
        //1.$是jquery的别称
        // $(function(){
        //     alert("hello world");
        // });

        //2.上述与下面代码一致
        // jQuery(function(){
        //     alert("hello jquery");
        // });

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

DOM对象和jquery对象的关系

两者的方法不能交叉使用

实例：DOM对象将div隐藏需要使用的方式和jquery对象使用的方式不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //1. DOM对象:使用原始js的方式获取的对象为DOM对象
        var domDiv = document.querySelector("div");
        console.dir(domDiv);
        //2.jquery对象:用jquery方式获取的对象为jquery对象，本质是把dom原始进行包装
        var jqueryDiv = $("div");
        console.dir(jqueryDiv);
        //3.两个对象只能分别使用自己的方法，不能交叉使用方法
        //domDiv.style.display="none"; //ok
        //jqueryDiv.hide();  //ok
        //domDiv.hide(); //error
        //jqueryDiv.style.display="none"; //error
    </script>
</body>
</html>

两者的转换

实例：通过转换，调用对应对象的方法执行div的隐藏操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
       //1.DOM转换为jquery对象
       //(1)直接获取jquery对象
       //$("div").hide();
       //(2)已经使用原始js获取dom对象，将其转换
       //var domDiv = document.querySelector("div");
       //$(domDiv).hide();
       
       //2.jquery转为dom对象
       //$("div")[0].style.display="none";
    </script>
</body>
</html>

二. 常用API

常用的选择器

jquery基本选择器

通过基本选择器可以选择符合要求的一组DOM元素

$("选择器")

//ID选择器，获取指定id元素
$("#id")
//全选择器，匹配所有元素
$("*")
//类选择器，获取同类class的元素
$(".class")
//标签选择器，获取同一类型的标签
$("div")
//并集选择器，选取多元素
$("div,p,li")
//交集选择器，选取交集元素，多个选择器直接连接在一起
$("li.current")

jquery层级选择器

通过层级选择器可以选择包含有层级关系的一组DOM元素

//子代选择器，获取亲儿子层级元素，并不会获取孙子层级的元素
$("ul>li")
//后代选择器，获取后代，包括孙子
$("ul li")

实例：测试基本和层级选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>
            我是ol 的
            <ul>
                <li>我是ol_2 的</li>
            </ul>
        </li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            //获取div
            console.log($("div"));
            //获取class=”nav“
            console.log($(".nav"));
            //并集获取div和p
            console.log($("div,p"));
            //交集获取div class="nav"
            console.log($("div.nav"));
            //获取ol的直接儿子
            console.log($("ol>li"));
            //获取ol的子代，包括孙子
            console.log($("ol li"));
        })
    </script>
</body>
</html>

隐式迭代

遍历jQuery对象内部的各个DOM元素(伪数组存储)的过程叫做隐式迭代，避免了使用循环遍历的冗余方式迭代

实例：使用jquery获取全部div对象，并为各个div使用隐式迭代的方式设置背景颜色，避免使用了循环赋值的方式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 给四个div设置背景颜色为蓝色 jquery对象不能使用style
        // 2. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $("div").css("background","blue");
        
        //给ul中的所有li字体颜色修改为绿色
        $("ul>li").css("color","green");
    </script>
</body>
</html>

筛选选择器

在基本选择器的基础上进一步筛选DOM元素

//选择第一个li
$("li:first")
//选择最后一个li
$("li:last")
//选择获取元素中索引号为2的元素(从0开始)
$("li:eq(2)")
//选择奇数元素
$("li:odd")
//选择偶数元素
$("li:even")

实例：通过筛选器改变li中的字体颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
           //ul中第一个li变为红色
           $("ul li:first").css("color","red");
           //ul中第三个li变为蓝色
           $("ul li:eq(2)").css("color","blue");
           //ol的奇数行变为绿色
           $("ol li:odd").css("color","green");
           //ol的偶数行变为粉色
           $("ol li:even").css("color","pink");
        })
    </script>
</body>
</html>

筛选方法

获取父元素，获取直接子元素，获取子元素(包括孙子)

实例：使用 parent() 获取直接父元素，使用 children() 获取直接子元素，使用 find() 获取全部子元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是屁</p>
        <div>
            <p>我是p</p>
            <div>
                <p>我是pp</p>
            </div>
        </div>
    </div>
    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());

            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
            //$(".nav").children("p").css("color","green");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color","red"); 
        });
    </script>
</body>
</html>

获取除自己以外的兄弟元素，获取第n个元素，判断是否有某个属性

实例：兄弟元素 siblings()，获取第n个元素 eq(index)，判断是否有某个类名 hasClass()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            //$("ol .item").siblings().css("color","red");

            // 2. 获取第n个元素
            //var index = 2;
            // (1) 我们可以利用选择器的方式选择
            //$("ul li:eq(2)").css("color","green");
            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
            //$("ul li").eq(index).css("color","blue");

            // 3. 判断是否有某个类名
            //console.log($("div:first").hasClass("current"));
            //console.log($("div:last").hasClass("current"));
        });
    </script>
</body>
</html>

排他思想

排他思想表示仅选择的元素发生行为的改变，而其他兄弟保持原样

实例：使用排他思想，通过隐式迭代给每个button绑定单击事件，让this指向的当前元素变化，让其余的兄弟元素剔除效果，实现排他思想。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "green");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body> 
</html>

操作jquery样式

操作css

实例：使用 css() 方法操作jquery样式。

参数只写属性名，则返回对应的属性值
参数写属性名和属性值，则设置一组样式
参数已对象的形式传入表示设置多组样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 操作样式之css方法
        $(function() {
            //1.参数只写属性名，则返回对应的属性值
            console.log($("div").css("width"));

            //2.设置一组样式
            // $("div").css("width", "300px");
            // $("div").css("width", 300); //ok //数值可不加引号
            // $("div").css(height, "300px"); //error 属性名一定要加引号，否则认定为变量

            //3.参数已对象的形式传入表示设置多组样式，其中属性名可以不加引号
            $("div").css({
                width: 400,
                height: 400,
                backgroundColor: "red"
                    // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
            })
        })
    </script>
</body>
</html>

设置类样式

实例：在外层定义好类样式，调用类样式的操作方法动态增添样式

添加类 addClass()
删除类 removeClass()
切换类 toggleClass()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }

        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <div class="current"></div>
    <script>
        $(function () {
            // 1. 添加类 addClass()
            // $("div").click(function() {
            //     // $(this).addClass("current");
            // });

            // 2. 删除类 removeClass()
            // $("div").click(function() {
            //     $(this).removeClass("current");
            // });

            // 3. 切换类 toggleClass()
            $("div").click(function () {
                $(this).toggleClass("current");
            });
        });
    </script>
</body>
</html>

操作jquery效果

显示隐藏效果

//1.显示 speed 速度，easing 切换效果 fn 回调函数
show([speed,easing,fn])
//2.隐藏
hide([speed,easing,fn])
//3.切换
toggle([speed,easing,fn])

实例：给三个按钮分别绑定单击事件，分别执行div元素的显示，隐藏和切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                //显示
                $("div").show(1000, function() {
                    alert(1);
                });
            });
            $("button").eq(1).click(function() {
                //隐藏
                $("div").hide(1000, function() {
                    alert(1);
                });
            });
            $("button").eq(2).click(function() {
                //切换
                $("div").toggle(1000);
            });
                // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>
</html>

滑动效果

//1.下拉 speed 速度，easing 切换效果 fn 回调函数
slideDown([speed,easing,fn])
//2.上拉
slideUp([speed,easing,fn])
//3.切换
slideToggle([speed,easing,fn])

实例：点击不同的按钮，分别实现下拉，上拉和切换的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            });
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            });
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>
</html>

事件切换

// over 鼠标移动到元素上触发 == mouseenter
// out 鼠标移出元素要触发的函数 == mouseleave
hover([[over,] out])

实例：使用 hover() 方法实现触发下拉和上拉的功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过 使用上拉下拉的原始方法
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });

            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });

            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });
        })
    </script>
</body>
</html>

动画队列的停止

用于停止动画的效果，需要将其写在触发动画的方法之前，相当于停止上一次的动画

stop()

实例：将3中的事件切换方法进行改造，实现禁止动画排队执行，将上一次的动画停止

$(".nav>li").hover(function() {
     //stop() 方法需要写在动画方法的前面
     $(this).children("ul").stop().slideToggle();
 });

淡入淡出效果

实例：点击不同的按钮，分别实现淡入，淡出，切换和改变透明度的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>
</html>

自定义动画

// params必须以对象的形式传入
animate(params,[speed],[easing],[fn])

实例：点击按钮后，按照自定义的方式运动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                //第一个参数必须以对象的形式传入
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            });
        });
    </script>
</body>
</html>

jquery的属性操作

设置或获取原始固有属性值

$("a").prop("href");

设置或获取自定义属性值

$("div").attr("index");

数据缓存

$("span").data("index");

实例：使用三种方法获取元素的属性值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            //当元素属性改变时调用该函数
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });

            // 2. 元素的自定义属性 我们通过 attr()
            // console.log($("div").prop("index")); //error 不能使用prop()方法获取自定义属性
            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>
</body>
</html>

获取普通元素内容

$("div").html();

获取普通元素文本内容

$("div").text();

获取表单值

$("input").val();

实例：使用上述三种方法分别获取和修改对应元素的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123"); //赋值
        
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123"); //赋值

        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123"); //赋值
    </script>
</body>
</html>

获取某元素的祖先元素

获取该元素的全部祖先元素列表 parents()

$(this).parents();

获取某个指定的祖先元素 parents("选择器")

// 获取当前元素的祖先元素，其中该祖先元素具有 p-num 类属性
$(this).parents(".p-num");

实例：获取具有four类属性元素的全部祖先元素，获取指定的祖先元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">我不容易</div>
            </div>
        </div>
    </div>
    <script>
        console.log($(".four").parent().parent().parent());
        console.log($(".four").parents());
        console.log($(".four").parents(".one"));
    </script>
</body>
</html>

遍历元素

// 常用于遍历DOM对象
$("div").each(function(index,domElm) { xxx; });  //其中domElm为DOM对象
// 常用于遍历数组和对象等，用于处理数据
$.each(object,function(index,element) { xxx; });

实例：使用上述两种方法对数据进行遍历操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 0.隐式迭代适用于迭代对象做相同的处理
            // $("div").css("color", "red");

            // 1. each() 方法遍历元素 
            // 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for，但是比for强大)
            var sum = 0;
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(index);
                console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                console.log(domEle);
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            });
            console.log(sum);

            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // 2.1 遍历DOM对象
            $.each($("div"), function(i, ele) {
                console.log(i);
                console.log(ele);
            });
            // 2.2 遍历数组
            $.each(arr, function(i, ele) {
                console.log(i);
                console.log(ele);
            });
            // 2.3 遍历对象
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            });
        });
    </script>
</body>
</html>

元素的创建，添加和删除

创建

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

添加

// 内部添加，父子关系
$("ul").append(li); //后加
$("ul").prepend(li); //前加
// 外部添加，兄弟关系
$("div").after(div); //后加
$("div").before(div); //前加

删除

//自杀
$("ul").remove();
//只杀里面内容，本身不删除
$("ul").empty();
$("ul").html("");

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
            var div = $("<div>我是后妈生的</div>");

            // 2. 添加元素
            // (1) 内部添加，添加后呈现父子关系
            // $("ul").append(li);  // 内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            
            // (2) 外部添加，添加后呈现兄弟关系
            // $(".test").after(div);
            $(".test").before(div);

            // 3. 删除元素
            // $("ul").remove(); // 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        }); 
    </script>
</body>
</html>

事件处理

单个事件的绑定

$("div").click(function(){ xxx;});

on实现多个事件绑定

// 1.给多个事件绑定多个不同的处理方法
$("div").on({
    click: function(){},
    mouseenter: function(){},
    mouseleave: function(){}
});
// 2.给多个事件绑定相同的处理方法
$("div").on("click mouseenter",function(){ xxx; });
// 3.事件委派
// click事件绑定在ul身上，触发对象是ul里面的li
$("ul").on("click","li",function(){ xxx; });
// 4.动态元素的事件绑定，后添加的元素也可绑定事件
$("ul").on("click","li",function(){ xxx; });
var li = $("<li>我是后来创建的</li>");
$("ul").append(li);

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .current {
            background-color: purple;
        }
    </style>
    <script src="jquery-3.4.1 copy.js"></script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function() {
            // 1. 单个事件注册
            // $("div").click(function() {
            //     $(this).css("background", "purple");
            // });
            // $("div").mouseenter(function() {
            //     $(this).css("background", "skyblue");
            // });

            // 2. 事件处理on
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     },
            //     mouseleave: function() {
            //         $(this).css("background", "blue");
            //     }
            // });
            // (2) 给多个事件绑定相同的处理函数，可以将各个事件以空格分隔
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });

            // (3) on可以实现事件委托(委派)
            // $("ul li").click(); //不使用委派，需要给所有的li依此绑定事件，较为麻烦
            // 此时click事件是绑定在ul身上的，但是触发的对象是ul里面的li
            $("ul").on("click", "li", function() {
                alert(11);
            });
            
            // (4) on可以给未来动态创建的元素绑定事件
            // 单个事件的绑定，不会对未来新加入的元素绑定事件
            // $("ol li").click(function() {
            //     alert(11);
            // })
            //实现对未来添加的元素动态绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        });
    </script>
</body>
</html>

事件的解绑

$("div").off();  // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li"); //这个是解除ul的委派事件

执行一次的事件

$("div").one("click",function(){xxx;});

实例：实现对事件全部解绑，解绑指定事件，解绑委派事件以及执行一次的事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-3.4.1 copy.js"></script>
    <script>
        $(function() {
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li"); //这个是解除ul的委派事件
            
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            });
        });
    </script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是屁</p>
</body>
</html>

自动执行事件

// 1. 元素.事件()
$("div").click();
// 2. 元素.trigger("事件")
$("div").trigger("click");
// 3. 元素.triggerHandler("事件") 
$("div").triggerHandler("click");

实例：测试3种不同的自动执行事件的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-3.4.1 copy.js"></script>
    <script>
        $(function() {
            $("div").on("click", function() {
                alert(11);
            });
            $("input").on("focus", function() {
                $(this).val("你好吗");
            });

            // 自动触发事件
            // 1. 元素.事件()
            // $("div").click();会触发元素的默认行为

            // 2. 元素.trigger("事件")
            // $("div").trigger("click");会触发元素的默认行为

            // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
            // $("div").triggerHandler("click");

            //默认行为测试
            //会选中焦点
            // $("input").focus();
            // $("input").trigger("focus");
            // 不会选中焦点
            $("input").triggerHandler("focus");
        });
    </script>
</head>

<body>
    <div></div>
    <input type="text">
</body>
</html>

事件对象 event

//事件被触发时，会有事件对象产生
$("div").on("click",function(event) { xxx; });

实例：使用事件对象中的方法，停止冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-3.4.1 copy.js"></script>
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            });
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                //阻止冒泡
                event.stopPropagation();
            });
        });
    </script>
</head>

<body>
    <div></div>
</body>
</html>

其他操作

保留指定的小数位数 toFixed(n)

//保留2位小数
(price*num).toFixed(2)

深浅拷贝

// 默认 deep=false 为浅拷贝，target为目标对象，source为源对象
$.extend([deep],target,source);

实例：深浅拷贝细节测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1 copy.js"></script>
    <script>
        $(function() {
            // 1.浅拷贝
            // 1.1 可以将源对象的简单元素拷贝到目标元素
            // var targetObj = {};
            // var sourceObj = {
            //     id: 1,
            //     name: "andy"
            // };
            // $.extend(targetObj,sourceObj);
            // console.log(targetObj);
            // console.log(sourceObj);

            // 1.2 若目标对象有同名简单属性则覆盖，不同名的简单属性会保留
            // var targetObj = {
            //     name: "yorick",
            //     address: "BeiJing"
            // };
            // var sourceObj = {
            //     id: 1,
            //     name: "andy"
            // };
            // $.extend(targetObj,sourceObj);
            // console.log(targetObj); //此时，name被覆盖为andy，address属性保留
            // console.log(sourceObj);

            // 1.3 若源对象中存在对象属性，则浅拷贝仅会复制其地址。
            // 两者共享同一内存，修改属性会关联影响
            // var targetObj = {};
            // var sourceObj = {
            //     id: 1,
            //     name: "andy",
            //     msg:{
            //         age:18
            //     }
            // };
            // $.extend(targetObj,sourceObj);
            // targetObj.msg.age=20; //两个对象的age均会改变
            // console.log(targetObj); 
            // console.log(sourceObj);

            // 目标对象的同名对象属性里面的值会全部覆盖
            // var targetObj = {
            //     msg:{
            //         address:"BeiJing"
            //     }
            // };
            // var sourceObj = {
            //     id: 1,
            //     name: "andy",
            //     msg:{
            //         age:18
            //     }
            // };
            // $.extend(targetObj,sourceObj);
            // console.log(targetObj); //由于传递的是地址，address属性会被覆盖
            // console.log(sourceObj);

            // 2.深拷贝
            // 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
            var targetObj = {
                msg:{
                    address:"BeiJing"
                }
            };
            var sourceObj = {
                id: 1,
                name: "andy",
                msg:{
                    age:18
                }
            };
            $.extend(true,targetObj,sourceObj);
            console.log(targetObj); //address和age属性均存在
            console.log(sourceObj);
        });
    </script>
</head>
<body>
</body>
</html>

解决多库冲突

1.将$改为jQuery
2.让jquery 释放对$ 控制权，让用户自己决定

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1 copy.js"></script>
    <script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));

            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            
            // 2. 让jquery 释放对$ 控制权 让用户自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        });
    </script>
</head>

<body>
    <div></div>
    <span></span>
</body>
</html>

jquery插件库

http://www.htmleaf.com/
http://www.jq22.com/
//引入插件步骤
1.引入相关文件(jquery文件和插件文件)
2.复制相关html，css，js(调用插件)

攻城老湿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery基本使用

一. 基本使用jquery的入口函数$(function(){ //页面加载后执行的入口});实例：通过使用入口函数的方式，将div在页面加载完毕后隐藏。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v...
复制链接

扫一扫