前端学习笔记：jq第一天--JQuery、jq的使用、jq对象和dom对象转化

本文链接：https://blog.youkuaiyun.com/weixin_44519518/article/details/119332258

这篇博客介绍了jQuery的基本概念和使用，包括如何下载和引用jQuery，详细讲解了选择器、DOM操作、事件处理、动画效果以及jQuery对象与DOM对象之间的转化。内容涵盖选择标签、类和ID，添加、删除和切换样式，控制元素显示与隐藏，以及音乐播放等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery

jQuery是目前最流行的JavaScript程序库，它通过封装原生的JavaScript函数得到一整套定义好的方法。

jq下载：https://www.jq22.com/jquery-info122

jq手册：https://www.w3cschool.cn/jquery/

jq的使用

jq的引用：

<script src="js/jquery.min.js"></script>

jq选择器：

选择标签 $('标签名')
选择类名 $('.类名')
选择id名 $('id名')
选择类数组中的某一个标签选择器.eq(a)
选择子级 a.children() 选择所有子级，可以限制为某一类的同级
选择父级 a.parent()
选择除了a以外的别的同级标签（同一父级） a.siblings() 如果不限制，选择所有的同级，可以限制为某一类的同级
获取当前用户操作的是第几个标签 a.index(）

修改CSS 获取标签.css('k','v')

事件：获取标签.事件类型(function(){执行的代码})

<body>
        <div>dsfsd</div>
        <div>dsfsd</div>
        <div>dsfsd</div>
        <div>dsfsd</div>
        <div>dsfsd</div>
        <div>dsfsd</div>
        <p>递四方速递</p>
        <p>递四方速递</p>
        <p>递四方速递</p>
        <ul>
            <li>
                <h5>dsfds</h5>
                <p>多了几分临时冻结</p>
            </li>
            <li>
                <h5>dsfds</h5>
                <p>多了几分临时冻结</p>
            </li>
            <li>
                <h5>dsfds</h5>
                <p>多了几分临时冻结</p>
            </li>
            <li>
                <h5>dsfds</h5>
                <p>多了几分临时冻结</p>
            </li>
        </ul>
        
        <p>dsfsd</p>
        <!-- 第一步需要引入框架 -->
        <script src="js/jquery.min.js"></script>
        <script>
            
            $('div').css('color','red');
            $('div').eq(0).css('background','red')
            
            $('div').click(function(){
                // jq中使用this的时候，需要$(this)   this不能加引号
                
                // .index()可以获取当前用户操作的是第几个标签
               alert( $(this).index())

               
                $(this).css('background','red');
                $(this).siblings('div').css('background','blue');
                // 点击li 当前点击li内部的h5背景色是粉色，其余h5白色
            })
            $('ul li').click(function(){
                $(this).children('h5').css('background','pink');
                $(this).siblings().children('h5').css('background','lime')
            })
        </script>
    </body>

创建标签： $('标签')

控制标签的html

获取HTML：a.html();
修改HTML ：a.html('新的内容')

控制表单元素的val

获取值 获取标签.val()
修改值 获取标签.val('内容')

新增

a.before(b) 把b添加到a的同级之前
a.after(b) 把b添加到a的同级之后
a.append(b) 把b添加到a内部的后面
a.prepend(b) 把b添加到a内部的前面

删除 a.remove() 删除a标签

<body>
        <input type="text">
        <button>按钮</button>
        <ul>
            <li>jjjjjj<span >X</span></li>
            <li>cccccc<span >X</span></li>
            <li>mmmmmm<span >X</span></li>
        </ul>

        <script src="js/jquery.min.js"></script>
        <script>
            var num=0;
            $('button').click(function(){
                // 创建标签 $('标签')
                // var  tag=$('<p></p>');

                // 新增内容
                // tag.html('新增'+num++);

                // tag.css('color','red');
                // 追加
                // 同级之前 a.before(b)把b追加到a的同级之前
                // $(this).before(tag);

                // 同级之后 a.after(b)把b追加到a的同级之后
                // $(this).after(tag)

                // a.append(b)把b追加到a内部的后面
                // $('ul').append(tag)

                // a.prepend(b)把b追加到a内部的前面
                // $('ul').prepend(tag)

                // a.remove()删除a标签
                // $(this).remove()

                var val=$('input').val();
                var tag=$('<li></li>');
                tag.html(val+'<span onclick="del(this)">X</span>');
                tag.html(val);
                
                $("ul").append(tag);
                
            })

            
            function del(a){
                $(a).parent().remove()
            }
        </script>
    </body>

克隆标签： a.clone() 克隆a标签如果带有参数克隆的标签带有事件，否则不带事件

<script>
            $('button').click(function(){
                
                var tag=$('button').eq(0).clone(true);
                tag.html('新增的');
                $('button').before(tag);
            })
        </script>

类的控制：

增加类：获取标签.addClass('类名')
删除类：获取标签.removeClass(‘类名')
切换类: 获取标签.toggleClass('类名') 如果有该类，删除。否则增加
判断类： hasClass('类名') 判断是否有该类

<style>
            div{
                width: 100px;
                height: 100px;
                background: red;
                transition: all 1s;
            }
            .current{
                border-radius: 50%;
                background: pink;
            }
            .c{
                background: lime;
            }
        </style>
    
    <body>
        <div></div>
        <button>按钮</button>
        <script src="js/jquery.min.js"></script>
        <script>
            $('div').mouseenter(function(){
                $(this).addClass('current')
            })
            $('div').mouseleave(function(){
                $(this).removeClass('current')
            })
            $('button').click(function(){
                $(this).toggleClass('c');
                console.log($(this).hasClass('c'))
            })
        </script>
    </body>

属性控制

获取属性：获取标签.attr('k')
修改属性：获取标签.attr('k','v')

hover复合事件 选择器.hover(function(){鼠标移入},function(){鼠标移出})

 <body>
        <img src="https://img12.360buyimg.com/jdcms/s150x150_jfs/t1/192650/12/13720/514762/60f4e270Eafddfff5/e04c448fea389b5f.jpg.webp" alt="">
    
        
        <script src="js/jquery.min.js"></script>
        <script>
           
            $('img').hover(function(){
               $(this).attr('src','https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/155398/14/8632/36377/5fcde054E51c1dab9/92b4231200f5d001.jpg.webp')
            },function(){
                $(this).attr('src','https://img12.360buyimg.com/jdcms/s150x150_jfs/t1/192650/12/13720/514762/60f4e270Eafddfff5/e04c448fea389b5f.jpg.webp')
            })
        </script>
    </body>

控制标签的显示与隐藏

无动画
- 显示：获取标签.show(时间) 默认时间为0可以自定义时间单位ms
- 隐藏：获取标签.hide(时间)默认时间为0可以自定义时间单位ms
- 切换：获取标签.toggle(时间)默认时间为0可以自定义时间单位ms
淡入淡出
- 淡入：获取标签.fadeIn(时间) 默认自带动画可以自定义时间单位ms
- 淡出：获取标签.fadeOut(时间)默认自带动画可以自定义时间单位ms
- 切换：获取标签.fadeToggle(时间)默认自带动画可以自定义时间单位ms
滑动
- 显示：获取标签.slideDown(时间) 默认带有动画可以自定义时间单位ms
- 隐藏：获取标签.slideUp(时间)默认带有动画可以自定义时间单位ms
- 切换：获取标签.slideToggle(时间)默认带有动画可以自定义时间单位ms

<style>
            div{
                width: 100px;
                height: 100px;
                background: lime;
            }
        </style>
<body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>

        <script src="js/jquery.min.js"></script>
        <script>
            $('button').eq(0).click(function(){
                $('div').show(1000)
                  //$('div').fadeIn()
            })
            $('button').eq(1).click(function(){
                $('div').hide()
                  //$('div').fadeOut()
            })
            $('button').eq(2).click(function(){
                $('div').toggle(500)
               //$('div').fadeToggle(1000)
            })
        </script>
    </body>

动画：获取标签.animate({'k':'v','k':'v'},时间ms)

animate实现动画可以修改值为纯数值的css(width,height,margin,paddding,left,top,bottom,right)

<style>
            div{
                width: 100px;
                height: 100px;
                background: lime;
                transform:translateX(200px)
            }
        </style>
  
    <body>
       <button>按钮</button> 
       <div></div>
        
        <script src="js/jquery.min.js"></script>
        <script>
            $('button').click(function(){
                $(this).animate({'font-size':'100px'})
                $('div').animate({'width':'200px','height':'200px'},1000)
            })
        </script>

引入音乐： controls播放控制条 autoplay自动播放

pause()暂停音乐原生的方法
play()播放音乐原生的方法

<style>
            p{
                width: 100px;
                height: 100px;
                background: lime;
                animation: move 2s infinite linear;
            }
            .play{
                /* 动画暂停 */
               animation-play-state: paused;
            }
            @keyframes move {
               0%{
                   transform: rotate(0deg);
               } 
              100%{
                   transform: rotate(360deg);
               } 
            }
        </style>
  
    <body>
        <p ></p>
        <!-- 引入音乐 controls播放控制条 autoplay自动播放-->
        <audio src="music.m4a"  autoplay></audio>
        <div id="app">
            djslfdj
        </div>
        <div>
            dfsd
        </div>

        <script src="js/jquery.min.js"></script>
        <script>
           
            $("div")[0].style.color='red'
            $("div")[1].style.color='red'

            $('p').click(function(){
                $(this).toggleClass('play');
                if($(this).hasClass('play')){
                      // pause()暂停音乐 原生的方法 
                    $('audio')[0].pause()
                }else{
                     // play()播放音乐 原生的方法
                     $('audio')[0].play()
                }
            })
        </script>
    </body>