web前端笔记3jQuery部分

最新推荐文章于 2022-08-08 21:16:21 发布

岛为什么会飞

最新推荐文章于 2022-08-08 21:16:21 发布

阅读量118

点赞数

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/bantoumingasong/article/details/120773332

版权

十二.jQuery

1.jQuery概述

1.1js库

js库就是一个封装了许多函数的js文件
在这里插入图片描述

1.2jQuery的概念

在这里插入图片描述

2.jQuery基本使用

2.1下载

在这里插入图片描述

2.2引入

2.3入口函数

在这里插入图片描述

2.4js顶级对象$

在这里插入图片描述

2.5jquery对象和dom对象

1.概述
在这里插入图片描述
jQuery对象只能使用jQuery的属性和方法，原生js只能使用js的对象和方法，否则会报错

<body>
    <script>
        $(function () {
            //1.dom对象
            var div = document.querySelector('.ppp');
            //2.jQuery对象
            $('.ppp');
            console.log($('.ppp'));
            //3.jQuery对象只能使用jQuery方法，原生js只能使用js方法
            $('.ppp').style.display = 'none'; //报错
            div.hide(); //报错
        });
    </script>
    <div class="ppp">123</div>
</body>

2.转换
在这里插入图片描述

3.jQuery常用API

3.1jQuery选择器

1.基础选择器
在这里插入图片描述
2.层级选择器

css怎么写就怎么写

3.jQuery隐式迭代
在这里插入图片描述

4.筛选选择器

5.jQuery筛选方法-重点！

注意
①显示与隐藏
显示： $(this).children('ul').show()
隐藏：$(this).children('ul').hide()
②在获取this时无需加引号
③在获取兄弟节点时如果括号内什么都不加是选取所有兄弟节点，如果加了，则是选取对应类型的兄弟节点，sbling，next，prev都是如此
④获取当前索引号：$(this).index()
新浪下拉菜单案例
先引入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="jQuery生产版.js"></script>
    <style>
        a {
            display: block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid pink;
            text-decoration: none;
            margin-top: -1px;
        }

        li {
            list-style: none;
        }

        .nav>li {
            float: left;
            margin-right: 40px;
        }

        .nav>li ul {
            padding-left: 0;
            display: none;
        }
    </style>
</head>

<body>
    <script>
        $(function () {
            $('.nav>li').mouseover(function () {
                $(this).children('ul').show();
            })
            $('.nav>li').mouseleave(function () {
                $(this).children('ul').hide();
            })
        });
    </script>

    <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>
    </ul>

</html>

6.jQuery排他思想
原生js是通过for循环逐一清除掉所有的样式，再给自己添加样式
jquery因为有隐式迭代，无需for循环，先给所有先加样式，再清除掉所有兄弟元素的样式

淘宝样式案例

<!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="jQuery生产版.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 250px;
            height: 195px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }

        #left,
        #content {
            float: left;
        }

        #left li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover {
            background-image: url(images/abg.gif);
        }

        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }

        #content div {
            width: 200px;
            height: 195px;
        }

        #content a {
            display: block;
            width: 100%;
            height: 100%;
        }

        #content div a img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script>
        $(function () {
            $('#left li').mouseover(function () {
                var index = $(this).index();
                $("#content div").eq(index).show().siblings().hide();


            })
        });
    </script>
    <div class="wrapper">
        <ul id="left">
            <li><a href="">风</a></li>
            <li><a href="">岩</a></li>
            <li><a href="">雷</a></li>
            <li><a href="">水</a></li>
            <li><a href="">火</a></li>
            <li><a href="">草</a></li>
            <li><a href="">冰</a></li>

        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>

        </div>
    </div>

</html>

7.链式编程
语法：$(this).css('color', 'red').siblings().css('color', '')
一行代码完成样式操作

3.2jQuery样式操作

1.操作css方法
在这里插入图片描述
注意：
①返货属性值时，如果获取的是多个，只返回第一个的属性
②第三种，对象模式，属性可以不加引号

        $('div').css({
            width: 300,
            backgroundColor: 'red'
        })

2.增删改类名
在这里插入图片描述

3.3jQuery效果

常见jquery动画效果
在这里插入图片描述
1.显示隐藏效果

一般直接省略参数，不加动画效果，不好看

2.滑动效果
语法参数和显示隐藏一样
在这里插入图片描述
3.事件切换

语法：$('div').hover(function(){},function(){})
前者就是over，后者就是out
如果只写一个函数，鼠标经过和离开都会触发函数
小技巧：利用hover和toggle可以实现一个函数完成切换效果

4.动画队列
在这里插入图片描述
语法：$('div').children("ul").stop().slideToggle();
这些个效果基本都有队列问题，要用stop

5.淡入淡出效果
和上面是一样的语法
在这里插入图片描述
多了一个fadeto修改透明度

6.自定义动画animate

$(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })

3.4jQuery属性操作

1.获取和设置固有属性值prop()
在这里插入图片描述

    <script>
        $(function () {
            $("a").prop("href", "wwwwww")
        })
    </script>
    <a href="ww...gagsd"></a>

2.获取和设置自定义属性值attr()
与prop语法相同
在这里插入图片描述
3.数据缓存
放在元素内存里面，刷新就会消失

注意：
①在获取h5自定义属性data-***时，attr要加上data-，data数据缓存获取时无需加data-

3.5jQuery文本属性值

在这里插入图片描述
注意：
①html获取，如果有标签。标签也一起获取，text只获取内容
②val() 如同value
③return false之后的内容不再执行
④parents()可以获取到所有的祖先级元素。$("a").parents(".one");选定指定的祖先级元素
⑤保留小数位数tofixed：$("a").parents(".one").toFixed(2);

3.6jQuery元素操作

主要是遍历，创建，添加，删除等操作
1.遍历
①
在这里插入图片描述

    <script>
        $(function () {
            var arr = ["red", "green", "blue"];
            var sum = 0;
            $("div").each(function (index, domEle) {
                console.log(index);
                console.log(domEle);
                $(domEle).css("color", arr[index])
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
        })
    </script>
    <div>1</div>
    <div>2</div>
    <div>3</div>

在这里插入图片描述
注意：
①index就是一个索引号参数，可以写index，也可以写i，j等都可以
②domEle获取的就是对应索引号的dom对象，无法使用jquery对象，可以修改为jquery对象

②
在这里插入图片描述

        $.each(arr, function (i, ele) {
            console.log(i);
            console.log(ele);
        })
        $.each({
            feng: 'mengde',
            yan: 'liyue'
        }, function (i, ele) {
            console.log(i);
            console.log(ele)
        })

常用遍历数组和对象

2.创建
在这里插入图片描述

语法：var li=$('<li>创建的li</li>')

3.添加
①内部添加

语法：$('ul').append(li);
放在内部的最后面
语法：$('ul').prepend(li);
放在内部的最前面

②外部添加
在这里插入图片描述
4.删除

如果html里为空字符，那么作用和empty一样

3.7jQuery尺寸位置操作

1.jQuery尺寸
在这里插入图片描述
2.jQuery位置
①offset

$("li").offset({
                top: 200,
                left: 200
            })

②position
在这里插入图片描述
语法:$("li").position()

③scollTop
被卷去的距离

④互斥锁
解决两个事件的冲突问题，仅同时执行一个
又称节流阀，用flag=true、false进行操作

4.jQuery事件

4.1jQuery事件注册

在这里插入图片描述

4.2jQuery事件处理

1.事件处理on（）绑定事件
动态绑定，后来再添加的元素也能绑定上
在这里插入图片描述
①为多个事件绑定不同的函数
采用对象形式

<script>
    $(function () {
        $("#q").on({
            click: function () {
                $(this).css("background", "purple");
            },
            mouseenter: function () {
                $(this).css("background", "skyblue");
            },
            mouseleave: function () {
                $(this).css("background", "pink");
            }
        })
    })
</script>
<div id="q"></div>

②为多个事件绑定同一个函数

<script>
    $(function () {
        $("div").on("mouseover mouseout", function () {
            $(this).toggleClass("current");
        })
    })
</script>
<div ></div>

③事件委托
在这里插入图片描述
给ul绑定，却是li触发

案例：

微博发布
<!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="jQuery生产版.js"></script>
    <style>
        .weibo {
            width: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            padding: 20px;
        }

        #area {
            width: 450px;
            height: 160px;
        }

        ul {
            list-style: none;
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }

        ul li a {
            float: right;
        }
    </style>
</head>

<body>
    <script>
        $(function () {
            $("button").on("click", function () {
                var li = $("<li></li>").html($("#area").val() + "<a href=" + "javascript:;" +
                    ">删除</a>");
                $("ul").prepend(li);
                li.slideDown()
                $("#area").val("")

            })
            $("ul").on("click", "a", function () {
                $(this).parent().slideUp(function () {
                    $(this).remove();
                })
            })
        })
    </script>
    <div class="weibo">
        <span>微博发布</span>
        <textarea name="" id="area" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul></ul>
    </div>


</html>

2.事件处理off（）解绑
语法：$("button").off("click")
如果括号为空，则全部清空
在这里插入图片描述
3.事件处理one（）仅绑定一次

4.自动触发事件trigger（）
在这里插入图片描述

第三种和第二种的区别是，第三种不会触发事件的默认行为，比如input框获取焦点时的边框闪烁就不会触发

4.3jQuery事件对象

在这里插入图片描述

5.jQuery其他方法

5.1jQuery拷贝对象

在这里插入图片描述
把object拷贝到target，会覆盖target原来的内容
深拷贝的话，如果有不冲突的属性，会合并而非覆盖

5.2多库共存

在这里插入图片描述

5.3jQuery插件

在这里插入图片描述
图片懒加载，就是拖到对应位置才加载，大大减小压力

案例：todolist
在这里插入图片描述

注意：
①本地存储只能存储字符串，通过JSON.stringify()修改
把字符串修改为对象是JSON.parse()
②splice(从哪开始，删除就几个),删除数组元素

岛为什么会飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端笔记3jQuery部分

十二.jQuery1.jQuery概述1.1js库js库就是一个封装了许多函数的js文件1.2jQuery的概念2.jQuery基本使用2.1下载2.2引入2.3入口函数2.4js顶级对象$2.5jquery对象和dom对象1.概述jQuery对象只能使用jQuery的属性和方法，原生js只能使用js的对象和方法，否则会报错<body> <script> $(function () { //1.
复制链接

扫一扫