jQuery基础

最新推荐文章于 2024-06-07 23:26:45 发布
最新推荐文章于 2024-06-07 23:26:45 发布
阅读量922 收藏
点赞数
分类专栏： jQuery 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangZhang_521/article/details/124136441
版权

01-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.min.js"></script>
</head>

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>

    <ol>
        <li>
            <p>我是p</p>
        </li>
        <li>
            <p>我是p</p>
        </li>
        <li>我是ol的</li>
        <li>我是ol的</li>
    </ol>
    <ul>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>
    <script>
        $(function() {
            // console.log($('.nav'));
            // console.log($('ul li')); //后代选择器 包含孙子
            console.log($('ol > li')); //子代选择器 只选儿子，不选孙子



        })
    </script>
</body>

</html>

02-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.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 150px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>惊不惊喜，意不意外</div>
    <div>惊不惊喜，意不意外</div>
    <div>惊不惊喜，意不意外</div>
    <div>惊不惊喜，意不意外</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1.获取四个div元素
        console.log($('div'));
        // 2.给四个div设置背景颜色为粉色

        // 方法一 先把jquery对象转换为DOM对象 再设置(不建议使用)
        // $('div')[0].style.backgroundColor = 'pink'
        // $('div')[1].style.backgroundColor = 'pink'
        // $('div')[2].style.backgroundColor = 'pink'
        // $('div')[3].style.backgroundColor = 'pink'

        // 方法二 $('div').css('属性','值')
        $('div').css('background', 'pink')

        // 3.隐士迭代：就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $('ul li').css('background', 'yellow')
    </script>

</body>

</html>

03-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.min.js"></script>
</head>

<body>
    <ul>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
    </ul>
    <ol>
        <li>我是ol的小li</li>
        <li>我是ol的小li</li>
        <li>我是ol的小li</li>
        <li>我是ol的小li</li>
        <li>我是ol的小li</li>
        <li>我是ol的小li</li>
    </ol>
    <script>
        $(function() {
            $('ul li:first').css('color', 'pink')
            $('ul li:last').css('color', 'red')
            $('ul li:eq(2)').css('color', 'skyblue')
            $('ol li:odd').css('color', 'green')
            $('ol li:even').css('color', 'purple')




        })
    </script>
</body>

</html>

04-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.min.js"></script>
    <style></style>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
    <div class="nav">
        <p>我是pink</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意：方法都要加括号
        $(function() {
            //1.选取父元素 parent()   返回的是最近一级的的父元素亲爸爸，不包含爷爷
            console.log($('.son').parent());

            //2.选取子元素
            // (1) 亲儿子 children() 不选孙子 相当于子代选择器 ul>li
            $(".nav").children("p").css("color", "pink")
                // (2) 可以选里面所有的孩子 包括孩子和孙子 find()
            $(".nav").find('p').css('color', 'red')
        })
    </script>
</body>

</html>

05-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.min.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>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li class="blue">我是ul的小li</li>
        <li class="pink">我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
    </ul>
    <div class="current">我有current</div>
    <div>我没有current</div>
    <script>
        $(function() {
            // 1.选取兄弟元素 siblings() 选除了自身之外所有的兄弟元素
            $(".item").siblings("li").css("color", "red")

            // 2.选取当前元素之后的所有同辈元素  nextAll()
            $(".pink").nextAll("li").css('color', 'pink')

            // 3.选取当前元素之前的所有同辈元素 pervAll()
            $(".blue").prevAll("li").css('color', 'blue')
        })
    </script>
</body>

</html>

06-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.min.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>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
        <li>我是ul的小li</li>
    </ul>
    <div class="current">我有current</div>
    <div>我没有current</div>
    <script>
        $(function() {
            // 4.选取第n个元素 
            var index = 2

            // (1) 我们可以利用选择器的方式选择
            //  $('ul li:eq(2)').css('color', 'blue')

            // (2) 利用选择方法的方式选择   eq() 推荐使用 (记住)
            $('ul li').eq(index).css('color', 'blue')


            // 5.判断是否有某个类名 hasClass()
            var item = $('div:first').hasClass('current')
            console.log(item); // true说明有这个类名
            var item1 = $('div:last').hasClass('current')
            console.log(item1); // false说明没有这个类名

        })
    </script>
</body>

</html>

07-隐式迭代新浪下拉菜单案例

<!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>
        * {
            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.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>私信</li>
                <li>评论</li>
                <li>@我</li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            // $('.nav>li').mouseover(function() {
            //         //$(this) jQuery当前元素 this不加引号
            //         // show() 显示元素
            //         $(this).children('ul').slideDown()
            //     })
            //     // 鼠标离开
            // $('.nav>li').mouseout(function() {
            //     // hide()隐藏元素
            //     $(this).children('ul').slideUp()
            // })


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

            // 1.事件切换  hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
            $('.nav>li').hover(function() {
                // stop()方法必须写到动画或效果的前面,相当于结束上一次的动画，只执行最新(下一次)的动画
                // stop() 方法用于停止动画或效果
                $(this).children('ul').stop().slideToggle();
            })


        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

08-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.min.js"></script>
</head>

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

            })
        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

09-链式编程

<!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.min.js"></script>
</head>

<body>
    我是body的文字
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1.给所有的按钮绑定点击事件
            $('button').click(function() {
                // 2.让当前按钮变色
                // $(this).css('color', 'red')
                // 3.其余兄弟颜色不变
                // $(this).siblings().css('color', '')

                // 链式编程写法 为了节省代码量
                // 我的颜色为红色,我的兄弟的颜色为空
                // $(this).css('color', 'red').siblings().css('color', '')

                // 我的兄弟的颜色为红色 我本身不变颜色
                //  $(this).siblings().css('color', 'red')

                //给兄弟的爸爸body变化颜色
                $(this).siblings().parent().css('color', 'blue')


            })
        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

10-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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function() {
            // 1.参数只写属性名,则返回的是个属性值
            // console.log($('div').css('width')); //200px

            // 2.参数是属性名和属性值,逗号分隔,是设置一组样式
            // $('div').css('width', '300px')
            // $('div').css('width', 300) //值如果是数字可以不用跟单位和引号
            // $('div').css(height, '300px') //属性必须加引号 ,不加引号会报错

            // 3.参数可以是对象格式,方便设置多组样式.属性名和属性值用冒号隔开,属性可以不用加引号
            $('div').css({
                width: 300,
                height: 400,
                backgroundColor: 'red'
                    // 复合属性必须采取驼峰命名法
                    // 属性值不是数字,需要加引号
            })


        })
    </script>
</body>

</html>

11-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>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all .5s;
        }
        
        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.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>

12-tab栏切换案例

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $(function() {
            // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $('.tab_list li').click(function() {
                //  $(this).addClass('current');
                //  $(this).siblings().removeClass('current')
                // 链式编程写法
                $(this).addClass('current').siblings().removeClass('current')
                    // 2.点击的同时，得到当前li 的索引号
                let index = $(this).index()
                    // console.log(index);
                    // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $('.tab_con .item').eq(index).show().siblings().hide()
            })





        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

13-jQuery类操作与原生js中的className区别

<!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>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .3s;
        }
        
        .two {
            transform: rotate(720deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="one"></div>
    <script>
        // 原生js中的className会覆盖原先里面的类名
        //  var one = document.querySelector('.one');
        //  one.className = 'two'


        // jQuery里面类操作只是对指定类进行操作,不影响原先的类名
        // $('.one').addClass('two'); //这个addClass相当于追加一个类名,不影响之前的类名
        $('.one').removeClass('two');
    </script>
</body>

</html>

14-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>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {

            $('button').eq(0).click(function() {
                $('div').show('fast', function() {
                    alert(1) // 显示后执行
                })
            })

            $('button').eq(1).click(function() {
                $('div').hide('fast', function() {
                    alert(1) // 隐藏后及动画消失后执行
                })
            })


            $('button').eq(2).click(function() {
                    $('div').toggle('fast', )
                })
                // 一般情况下都不加参数,直接显示隐藏就可以了

        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

15-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>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.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()

            })
       $('button').eq(2).click(function() {
                // 滑动切换 slideToggle()
                $('div').slideToggle()
            })
})
    </script>
</body>

</html>

效果展示

在这里插入图片描述

16-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>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.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>

效果展示

在这里插入图片描述

17-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>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: 0.4,
                    width: 500,
                    height: 400,
                    backgroundColor: "skyblue"
                }, 500)
            })

        })
    </script>
</body>

</html>

效果展示

在这里插入图片描述

WangZhang_521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 基础语法
既然选择远方，便只顾风雨兼程！
02-27 2456
文章目录jQuery 基础语法一、 jQuery 概述1、 JS 库2、 jQuery 概念3、 jQuery 优点二、 jQuery 基本使用1、 jQuery 使用步骤2、 jQuery 入口函数3、 jQuery 顶级对象4、 jQuery 对象和 DOM 对象三、 jQuery 常用 API1、 jQuery 选择器2、 隐式迭代3、 jQuery 筛选选择器4、 jQuery 筛选方法5、 jQuery 里面的排他思想6、 链式编程四、 jQuery 样式操作1、 操作 CSS 方法2、 设置类样
Jquery基础
m0_60165694的博客
10-15 701
1.什么是 jQuery ？ jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件] 1.jQuery 是一个 JavaScript 函数库。[.js] 2.jQuery 极大地简化了 JavaScript 编程。 3.jQuery 很容易学习。 jQuery库包含以下功能： 1.HTML元素选取 2.HTML元素操作 3.CSS 操作 4.HTML 事件函数 5.JavaScript 特效和动画[元素的隐藏和显示] 6.HTML DOM 遍历和修改
jQuery基础知识
qq_51781439的博客
09-11 1284
一、jQuery简介 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 函数库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示： 除此之外，jQuery 还提供了大量的插件。 二、jQuery的语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法：...
JQuery基础语法
weixin_54597170的博客
10-27 1682
目录JQuery基础概述JQuery对象和JS对象区别与转换基础操作选择器基本选择器层级选择器属性选择器过滤选择器表单过滤选择器DOM操作内容操作属性操作CRUD操作 JQuery基础 概述 一个JavaScript框架， 简化JS开发， 本质上就是一些js文件，封装了js的原生代码而已。 JQuery对象和JS对象区别与转换 1.操作 JQuery对象在操作时，更加方便。 2.通用性 JQuery对象和js对象方法不通用的. 3.转化 1. jq – > js : jq对
轻松掌握 jQuery 基础
不迁怒，不贰过。小知识，大智慧。
11-15 1103
jQuery是一个优秀的JavaScript框架，它能帮助用户更方便的处理HTML文件、事件、动画效果、AJAX交互等。它的出现极大程度地改变了开发者使用JavaScript的习惯。
JQuery基础事件
FirMoveBrick的博客
08-04 4293
简介 但是毕竟08年的还是php页面的时候，前端的点击事件，基本都是后端在写的，所以13年的时候就用到了以前最火的 jquery ，我为了融入他们的氛围，我不得不用 jquery 写点击事件. 下面，让我们直接进入主题吧！ 简单的点击事件 jq
JQuery 基础
想骑车的彭于晏
12-30 1889
1.获取DOM节点的三种方式及区别 ①Document.getElementById();取得一个元素对象 ②Document.getElementsByClassName()：取得多个元素对象放入数组中 ③Document.getElementsByTagName()：取得多个元素对象放入数组中 2.jQuery中的动画有哪些？并分别概述其实现效果？ ① slideDown()：向下滑动 ②sl...
JQuery基础
bbbeddd的博客
11-17 405
jQuery 基础篇
Alemon的博客
11-18 1035
1、为什么要使用jQuery？1.1 原生js的缺点1.2 jQuery的优势1.3 什么是jQuery？1.4 jQuery的版本问题2、如何使用jQuery？3、jQuery的入口函数4、jQuer
jQuery基础教程
07-22
资源名称：jQuery基础教程资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
jQuery基础文件
03-30
包括1.11.3，2.1.4，3.3.1版本，一块打包下载，不用去另外找了。
前端性能优化：提升网站加载速度的终极指南
最新发布
喔的嘛呀的博客
06-07 716
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏
lianmindiandi
06-04 166
比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波。是不是很简单,但是这里面还有一些注意点,
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 817
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
NSSCTF WEB 题解（一）
2301_81105268的博客
06-04 1012
题目提示：F12下发环境，打开网址，进入网页后点击F12查看源代码直接查找flag可以得到flag。
详解智慧互联网医院系统源码：开发医院小程序教学
meihusdk的博客
06-01 525
通过本文的介绍，我们详细解析了智慧互联网医院系统的源码结构，并讲解了如何开发一个简单的医院小程序。从环境搭建到前后端联调，每一步都进行了详细说明，希望能为广大开发者提供实用的参考。
jquery基础教程
09-28
jQuery是一个快速、简洁的JavaScript库，用于简化HTML文档的遍历、事件处理、动画和Ajax等操作。它具有简单易学的语法和强大的功能，因此成为了web开发中广泛使用的工具之一。 下面是学习jQuery的基础教程步骤： 1. 引入jQuery库：在HTML文件中引入jQuery库，可以使用CDN链接或者本地引入文件的方式。 2. 选择器：学习使用jQuery选择器来选取HTML元素。jQuery提供了多种选择器，包括基本选择器、属性选择器、过滤选择器等。 3. 操作元素：学习使用jQuery来操作选中的元素。可以使用jQuery提供的方法来修改元素的属性、样式、内容等。 4. 事件处理：学习使用jQuery来处理页面中发生的事件，例如点击、鼠标移动等。可以使用jQuery提供的方法来为元素绑定事件处理函数。 5. 动画效果：学习使用jQuery来创建各种动画效果，例如淡入淡出、滑动、隐藏显示等。 6. Ajax：学习使用jQuery来发送Ajax请求，与服务器进行数据交互。可以使用jQuery提供的方法来发送GET或POST请求，处理返回的数据。 7. 插件扩展：学习使用jQuery插件来扩展jQuery的功能。jQuery拥有庞大的插件生态系统，可以通过插件来实现各种特定的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值