web前端：17_jQuery（升级的js）

于 2023-07-15 15:06:18 发布
阅读量72 收藏
点赞数
文章标签： 前端 jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45906368/article/details/131737507
版权

1,导入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 通过cdn加速，在互联网上实时获取jQuery文件源码   网址：https://www.bootcdn.cn/jquery/-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <!-- 导入本地的jQuery文件 -->
    <!-- <script src="jquery.min.js"></script> -->
</body>
</html>

2，获取元素--基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="title">个武器</h1>
    <h2>礼包</h2>
    <ul>
        <li>未采取</li>
        <li  class="item">全二册</li>
        <li  class="item">前外侧</li>
        <li>ce完全</li>
        <li>企鹅舞</li>
    </ul>
    <p>骶尾部</p>
    <span>qehqu</span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script>

        // let title = document.getElementById('title')
        $('#title').css('color','#096').css('text-align','center')
        $('.item').css('background-color','#6cf')
        $('p,span').css('font-size','70px')
        console.log($('.item'))  //伪数组
        
    </script>

</body>
</html>

3，获取元素--过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="title">个武器</h1>
    <h2>礼包</h2>
    <ul>
        <li>未采取</li>
        <li  class="item">全二册</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li  class="item">前外侧</li>
        <li>ce完全</li>
        <li>企鹅舞</li>
    </ul>
    <p>骶尾部</p>
    <span>qehqu</span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script>
        // 获取元素--过滤选择器
       $('.item:first').css('color','#096')  //选择第一个item元素
       $('.item:last').css('color','#6cf')  //选择最后item元素
       $('li:odd').css('color',"gold")  //选择li里的奇数下标的元素
       $('li:even').css('color',"red")      //选择li里的偶数下标的元素
       $('li:eq(7)').css('font-size',"70px")      //eq(index)  匹配指定下标的元素
       $('li:lt(7)').css('text-align',"right")      //lt(index)  选择下标小于index的元素
       $('li:gt(7)').css('font-size',"30px")      //gt(index)  选择下标大于index的元素
       $('li:not(.item)').css('color',"aqua")      //选中不是item的元素
               
    </script>

</body>
</html>

4,操作元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div></div>
    <input type="text" name="" id="">
    <button>点我提交</button>
    <!-- 导入jQuery文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script>

        $('div').html('<b>记得要多喝热水</b>')  //html识别标签内容
    //   基于jQuery的点击事件
    $('button').click(function(){
        alert($('input').val())   //弹出input里面的值
    })
    </script>
</body>
</html>

5，操作标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="img/05.jpg" alt="">
    <p title="123">产权人</p>
    <a href="">而且</a>
    <p>
        背后完全
        <input type="checkbox" name="" id="check">
        <a href="#">vgve</a>
        谢谢
    </p>
    <input type="submit" name="注册" id="reg">

    <!-- 导入jQuery文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script>

    $('#reg').click(function(){

            //    获取表单里的checked属性是否有值
            // alert($('#check').attr('checked'))
            alert($('#check').prop('checked'))  //prop可以判断表单状况
            })

            // 如果勾选了，输出勾选成功
            $('#check').prop('checked')  ? alert('注册成功') : alert('请勾选协议')


        // attr 设置或者读取选择属性  检测不了值是否发生了变化
        $('img').attr('src','img/7.jpg')  //修改标签属性，替换img的src属性里的值
        // alert($('img'))
        $('p').removeAttr('title')  //删除p标签的title属性
        $('a').attr('href','https://www.bootcdn.cn/') //增加标签属性，给a添加href赋值

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

6,操作样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #096;
        }
        .test{
            border: 5px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="test"></div>


    <!-- 导入本地的jQuery文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 
    <script>
        $('div').addClass('box') // 给div添加box属性
        $('.box').removeClass('test') // 删除test. 如果里面空着不写,就是删除所有类
    </script>
</body>
</html>

7,操作标签样式案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul,li{
            list-style: none;
            float: left;
            margin: 0;
            padding: 0;
        }
        ul{
            border: 3px solid #6cf;
        }
        .item{
            margin: 15px;
        }
        .active{
            background-color: #096;
            color:gold;
        }
    </style>
    
</head>
<body>
    <h1>工具选择</h1>
 
    <ul>
        <li class="item active">百宝箱</li>
        <li class="item">小刀</li>
        <li class="item">ak47</li>
        <li class="item">霜之哀伤</li>
    </ul>


    <!-- 导入本地的jQuery文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 
    <script>
       $('.item').click(function(){
        // $('.item').removeClass('active') //当点击时候，激活元素。点击时候，删除active元素
        // $('this').addClass('active')    //this,选中当前点击的
        $(this).toggleClass('active')  //如果有active就溢出，没有就添加
       })
    </script>
</body>
</html>

8，操作行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作行内样式</title>
</head>
<body>
    <div></div>

    <!-- 导入本地的jQuery文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 
    <script>
    //    $('选择器').css('样式名'，'x属性名')
    // $('div').css('height','300px').css('width','300px').css('background','#096')
    $('div').css({
        'width' : '500px',
        'height' : '500px',
        'background' : '#6cf',
    })
    </script>
</body>
</html>

9，元素增删操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素增删操作</title>
</head>
<body>
    <button id="btn"> 而此前我认为v</button>

    <!-- 导入本地的jQuery文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
     <script>
        // 增加标签 body里面添加div
    $('body').append('<div id="water">多喝热水</div>')   //给body标签从最后添加一个元素
     $('body').prepend('<div id="water">多喝岩浆</div>')  //给body标签从最前面添加一个元素

        // 添加兄弟元素  插入div
     $('#water').before('<div class = "bro">我是你楼上的兄弟</div>')
     $('#water').before('<div class = "bro">我是你楼上的兄弟</div>')
     $('#water').before('<div class = "bro">我是你楼上的兄弟</div>')

     $('#water').after('<div class = "bro">我是你楼下的兄弟</div>')
     $('#water').after('<div class = "bro">我是你楼下的兄弟</div>')
     $('#water').after('<div class = "bro">我是你楼下的兄弟</div>')
     $('#water').after('<div class = "bro">我是你楼下的兄弟</div>')
    //   删除
     $('#btn').click(function(){
        $('.bro').remove()  //点击按钮，删除兄弟
     })
       </script>
</body>
</html>

 10，动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #096;
        }
    </style>
</head>
<body>
    <div class="box"></div>
 
    <button id="btn1">隐藏</button>
    <button id="btn2">上推</button>
    <button id="btn3">淡隐</button>
 
    <!-- 导入本地的jQuery文件 -->
    <script src="jquery.min.js"></script>
 
    <script>
        $('#btn1').click(function(){
            // 当我点击时,如果字写着隐藏,就实现隐藏功能.  否则执行显示功能
            // 如果为隐藏.执行隐藏功能,1秒完成.完成后,把按钮1里的字改为显示
            if($(this).text() == '隐藏'){
                $('.box').hide(1000,function(){
                    $('#btn1').text('显示')
                })
            }else{
                $('.box').show(1000,function(){
                    $('#btn1').text('隐藏')
                })
            }
        })
 
        $('#btn2').click(function(){
            if($(this).text() == '上推'){
                $('.box').slideUp(1000,function(){
                    $('#btn2').text('下拉')
                })
            }else{
                $('.box').slideDown(1000,function(){
                    $('#btn2').text('上推')
                })
            }
        })
 
        $('#btn3').click(function(){
            if($(this).text() == '淡隐'){
                $('.box').fadeOut(1000,function(){
                    $('#btn3').text('淡现')
                })
            }else{
                $('.box').fadeIn(1000,function(){
                    $('#btn3').text('淡隐')
                })
            }
        })
    </script>
</body>
</html>

11,遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
 
    <!-- 导入本地的jQuery文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
 
    <script>
        /*
            $(选择器).each(function(下标,元素){
                代码
            })
        */
       
        // 遍历1
        $('li').each(function(index,obj){
            console.log(index,obj)
        })

        // 遍历2
        let arr =['阿宸老师','七零老师','婷婷老师','玫玫老师','伊诺老师']
        console.log(arr)
        $(arr).each(function(index,obj){
            console.log(index,obj)
        })
 
        // 遍历对象的语法
        let kylin = {
            name : '麒麟',
            age : 27,
            hobby : '打游戏'
        }
        $.each(kylin,function(index,obj){
            console.log(index,obj)
        })
 
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值