Web开发-JQuery

最新推荐文章于 2022-08-25 16:51:12 发布

KrisChung

最新推荐文章于 2022-08-25 16:51:12 发布

阅读量523

点赞数

分类专栏：个人总结 123

本文链接：https://blog.csdn.net/qq_39469688/article/details/82430610

版权

个人总结同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

123

2 篇文章 0 订阅

订阅专栏

关于js对象与jq对象

js对象与jq对象的互相转换以及获取元素创建元素
.
.
关于jq插件的引用
www.bootcdn.cn –> 复制链接 jquery.min.js


<!DOCTYPE html>
<html>
<head>
    <title></title>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


</head>
<body>

    <div>
        <p>hello world</p>
        <p>hello python</p>
        <p>hello yueqi</p>

    </div>

    <script type="text/javascript">

        /*
            $ :
                $()  参数类似于选择器的字符串
        */
        //$('div p').css('color','red');


        //将js对象转换成jq对象，放在$括号内即可
        //$(document.body).css('background', 'orange');
        var ap = document.getElementsByTagName('p');
        ap[1].style.color='blue';
        $(ap).css('color','#f00');

        //将jq对象转换成js对象
        /*
            $('p').get(1).style.color='red';
            $('p')[1].style.color='red';
            $('p').get(1)就是转换成的js对象

            筛选jq对象
            $('p').eq(2).css('color','red')
        */

        $('p').eq(2).css('color','blue')



        //创建一个div节点，将其变成jq对象(添加一个div盒子)
        $(document.body).append($('<div></div>'))





    </script>


</body>




</html>

jq获取值与设置样式的函数


<!DOCTYPE html>
<html>
<head>
    <title></title>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


</head>
<body>

 <div id='box'>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
     </ul>

 </div>

    <script type="text/javascript">

     /*
        获取jq对象的长度
        .length  /  .size()

        .html()
            有参数: 相当于改变元素的html内容(innerHTML), 返回这个jq对象
            无参数: 获取第一个元素的html内容

        .text() 类似



     */
    alert($('#box ul li').length) //5

    // 对jq对象的方法操作
    //先给li加上文本hello 在修改其样式
    $('#box ul li').html('hello').css('color','aqua');

这里写图片描述

    //当html()无参数时，获取第一个元素的html内容
    alert($('#box ul li').html()) //1
    alert($('#box ul li').eq(1).html()) //2 获取第二个元素内容


    /*
        .css()
            一个参数：
                参数为字符串:
                    获取第一个元素对应的该属性的值(getstyle)
                参数为json:
                    设置多个属性
                    {
                       属性: 值，
                        属性：值，
                        属性：值
                    }


            两个参数:
                两个参数都为字符串
    */
    var c = 'color';
    $('#box ul li').css(c, 'red');

    alert($('#box ul li').css('color'))
    // rgb(255,0,0)

    //修改设置对象的css样式
    $('#box ul li').css({
        color:'red',
        fontSize:'25px',
    });



    </script>


</body>




</html>



<!DOCTYPE html>
<html>
<head>
    <title></title>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


</head>
<body>

    <div id="box" class="nav" chs='haha' goudan='as'></div>
    <input type="text" value="123456" id="txt">



    <script type="text/javascript">

    /*
        .attr() 操作标签属性

    */
    //获取元素属性值
    alert( $('#box').attr('chs') ) //haha
    alert( $('#box').attr('id') )  //box
    //添加设置元素属性值
    $('#box').attr({
        class:'nav',
        game:'none',

    })

这里写图片描述


    /*
        .remove()
        移除标签属性值

        prop()获取/设置标签属性(只能用来获取合法标签属性)
    */
    $('#box').removeAttr('goudan');


    /*
        .addclass()
            给类名添加类名

        .removeClass()

        .toggleClass('nav')
            有nav这个类名就删除，没有就添加
    */
    $('#box').addClass('clearfix');

这里写图片描述



    /*
        .val()
            获取内容
            有参数: 设置value
            无参数: 获取value
    */
    document.onclick = function(){
        //获取val
        alert( $('#txt').val() )
        //设置val
        $('#txt').val('chs')
    };





    </script>


</body>




</html>

这里写图片描述

关于获取和设置宽高值的方法



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0px;
                padding:0px;
            }

            body{
                height:2000px;
            }

            #wrap{
                margin-top:10px;
                margin-left:10px;
                width:600px;
                height:400px;
                box-shadow:0 0 10px;
            }

            #box{
                width:300px;
                height:200px;

                background:pink;
                margin-top:20px;
                top:20px;
                left:30px;

                position:absolute;
            }


        </style>

        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


    </head>
    <body>

        <div id="wrap">
            <div id="box"></div>

        </div>

        <script>
            /*
                offset()   .left获取此标签距离页面左边距的像素
                            .top获取此标签距离页面上边距的像素

                position()  获取元素到定位父级的距离,返回一个对象，该对象包含top/left两个属性           

             */

            //距离页面左边距为30px
            alert($('#box').offset().left); //30

            //距离页面顶端40px 父级margin-top子级元素跟着向下移
            alert($('#box').offset().top); //40

            alert($('#wrap').offset().left)    //10
            alert($('#wrap').offset().top) //10

            //距离定位父级左边距的距离
            alert($('#box').position().left)   //30
            //距离定位父级上边距的距离
            alert($('#box').position().top)        //20



            /*
                scrollTop()获取和设置页面滚动高度
                scrollLeft()获取和设置滚动宽度


                .width()  .height() 获取或设置高度/宽度
             */

            document.onclick = function(){
                //此处this关键字指代document,即调用方法的js对象
                //设置页面滚动高度
                $(this).scrollTop(1500);   //点击页面跳转到高度为1500px的地方
                //alert($(this).scrollTop())   //获取鼠标点击页面处的高度px
            }

            alert( $('#box').width() );//获取box标签的宽度    300px
            alert( $('#box').css('width') ) //300px

            $('#box').width(200) //设置宽度为200px



            /*
                .innerHeight()  .innerWidth()  
                            没有设置功能，只能获取宽度/高度 + padding  (类似clientHeight)

                .outerHeight()  .outerWidth()
                            获取宽度/高度, + padding*2(上下内边距) + border*2  (类似offsetHeight)
             * */





        </script>

    </body>
</html>

关于标签元素的添加复制等方法


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

        <style>

            #box{
                width:300px;
                height:200px;
                margin:100px auto;
                border:1px solid pink;
            }
        </style>

    </head>
    <body>

        <a href="">document.get...</a>

        <div id="box">

            这是原本的内容

        </div>

        <p class="add">添加的内容</p>
        <br />
        <br />



            <b >我是chs我需要被标签包裹</b>



        <br />
        <br />
        <br />
        <div class="clone">
            我是clone目标div

        </div>



        <script type="text/javascript">

            /*
                .append()
                    类似于标签的字符串
                    jq对象  往元素里面的最后面添加内容
             * 
             * */
            $('#box').append('<p class="ppp">哈哈哈</p>')
            $('#box').append( $('.add') )

            //添加标签并设置其样式
            var ap = $('<a href="" class="adda">a标签</a>');
                ap.css('color','red');
            $('#box').append( ap );


            $('#box').append( document.getElementsByTagName('a') )


            /*
                appendTo()
                    将一个元素添加到另一个元素里
                    只有jq对象才能调用此方法
             * */
            $('<p>我是apependTo</p>').appendTo( document.getElementById('box') )



            /*
                after() 将要添加的元素添加到原元素标签外的后面
                        与被添加元素同级

                before()
             * */
            var $a = $(' <a href="">after()</a> ')
            $a.css('color','red')
            $('#box').after($a)


            /*
             *  .wrap() 将指定内容包裹jq对象元素
             * 
             * */
            $('b').wrap('<del></del>')
            //$('b').unwrap() //去除封装




            /*
                    .empty() 清空元素内的内容
                    $('b').empty() / $('b').html('')

                    .remove() 删除元素自己   标签也一并删除
                    $('b').remove()

             * 
             * */





            /*
                .clone()
                    复制克隆一个元素的副本
                    再进行添加到其他元素标签中

             * */

//          var clo = $('b').clone()
//          clo.css('color','red')
//          $('.clone').append( clo )

            //改进写法
            $('.clone').append( $('b').clone() )








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

这里写图片描述

jq对象的筛选


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

        <style>


        </style>

    </head>
    <body>

        <p>p1</p>
        <p class="d">p2</p>
        <p>p3</p>
        <p class="d">p4</p>
        <p>p5</p>

        <div class="wrap">
            <p>p1</p>
            <p class="red">p2</p>
            <p class="red">p3</p>
            <p>p4 <a href="">k</a></p>
            <p id="p5">p5</p>

        </div>



        <script type="text/javascript">


            /*
                筛选
                    $('box').eq() 0,1,2,3,4...-1,-2....

             * */
            $('p.d').eq(0).css('color','red');


            //判断元素标签有没有类名
            ap = $('div').hasClass('wrap')
            alert(ap)   //true


            /*
                筛选 .filter()
             * */
            $('.wrap p').css('fontSize','20px').filter('.red').css('color','red')



            /*
                筛选之判断   .is() 
                        判断jq对象是不是方法内的元素标签，有则返回true否则返回false
             * 
             * */
            alert( $('.wrap p').is('a') ); //false
            alert( $('.wrap p').parent().is('div') )   //true


            /*
                筛选    .has('a') 
                        判断jq对象中有没有a标签，如果有则进行后面的操作
             * */
            //筛选有a标签的p标签进行css设置
            $('.wrap p').has('a').css('color','red');

            //筛选没有red类名的p标签进行css设置
            $('.wrap p').not('.red').css('color','blue')

            //筛选.wrap标签元素的所有子元素将其加上类名on 子元素的子元素不进行修改
            $('.wrap').children().addClass('on')

这里写图片描述


            /*
                筛选  .find()
                        从方法内的元素的子元素开始遍历，找到条件满足为止
             * 
             * */
            //遍历查找div后代的所有的a标签进行修改设置
            $('div').find('a').addClass('in')




            /*
                    offsetParent    定位父级
                    parent      父级
                    parents     所有的先代一直到html为止
                    siblings    同级

             * 
             * */
            //遍历查找div的所有先代
            $('div').parents().addClass('haha')
            //遍历查找div所有先代中的body元素
            $('div').parents('body').addClass('iii')
            //遍历id为p5的元素的所有同级
            $('#p5').siblings().addClass('ooo')
            //遍历查找id为p5元素的所有同级中类名为red的同级元素
            $('#p5').siblings('.red').addClass('wqd')


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

jq 对象的事件



<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

        <style>

            #box{
                width:100px;
                height:100px;
                background:pink;
            }


        </style>

    </head>
    <body>



        <div id="box">
            <ul>
                <li>111</li>
                <li>22</li>
                <li>333</li>
                <li>444</li>
            </ul>

        </div>

        <input type="button" id="btn"/>

        <script type="text/javascript">

            //document.onclick = function(){}
            /*
                    jquery事件
                        $().click(function(){
                            snip
                            ...
                        })
             * 
             * 
             * */
            //jq事件的基本语法
            $(document).click(function(e){

                alert('click')
            });



            //需要将页面所有的东西都加载完才能触发(等样式丶图片丶js代码等加载完毕)
            window.onload = function(){
                alert('window 加载完毕')
            }
            //只要文档结构加载完就可触发
            //一般情况下jq加载会比js加载块
            $(document).ready(function(){
                alert('ready 加载完毕')
            });
            //缩写
            $(function(){
                alert('ready 加载完毕')
            });




            //事件的重叠
            $('#box').click(function(){
                alert(1)
            });


            //js中事件重叠后者覆盖前者  jq中事件会重复 都执行
            $('#box').click(function(){
                alert(2)
            });







            /*
                生成元素的事件触发
             * 
             * */
            // 事件的注册是在li5生成之前，所以不会执行点击li5触发事件
            //应用于如用户点击按钮新增的元素,无法进行事先设计的事件
            $('#box ul li').click(function(){
                alert( $(this).html() )    //点击1.li 111  点击2.li 22

            })


            $('#box ul').append('<li>555</li>')


            /*
                对上新增元素无法触发事件进行修改
                重点

             * */
            //点击页面新增一个li
            $(document).click(function(){
                $('#box ul').append('<li>5555</li>');
            });

            //on()方法 参数1:点击事件的方式  参数2:新增的元素的标签名   参数3:function(){}
            //注意此处jq对象需要是触发事件元素的父级或者任意祖级
            $('#box ul').on('mouseenter','li',function(){
                console.log($(this).html());
            });

            //不需要用到该点击事件时  用off方法进行解绑  无法解除js的onclick事件
            $('#box ul').off('mouseenter');
            $(document).off('click')

            //jq 解除事件方法off 也不会解除js 中的addEventListener绑定事件的事件
            //只解除jq 中添加的事件
            document.addEventListener('click',function(){
                alert('haha')
            });









            /*

             *      只触发一次就自动解除的事件
             * 
             * 
             * */

            $('#btn').bind('click', function() {
                $(this).unbind('click');
                alert('Clicked and unbound!');
            });






            /*

             *      hover()事件  
             *              mouseenter mouseleave的组合
             * 
             *      js中没有hover()方法
             * 
             * 
             * */
            //.hover()方法两个参数  第一个参数方法代表mouseenter , 第二个代表mouseleave
            //若只有一个参数方法，则代表两者合并事件,两事件触发同一内容
            $('#box').hover(function(){
                console.log('enter');

            },function(){
                console.log('leave');
            });

            //一个参数方法
            $('#box').hover(function(){
                alert('两内容共用此内容')
            });






        </script>










    </body>
</html>

jq 动画方法


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

        <style>

            #box{
                width:100px;
                height:100px;
                background:pink;
                /*display: none;*/

            }


        </style>



    </head>
    <body>

        <p>111</p>
        <p>222</p>
        <p class='red'>333</p>
        <p>444</p>

        <div class="wrap">
            <p>2</p>
            <p>2</p>
            <p></p>
            <p></p>
            <p></p>

        </div>


        <div id='box'>


        </div>

        <input type="button" value="显示" id="show"/>
        <input type="button" value="隐藏" id="hide" />


        <script type="text/javascript">



            /*
                    index

                    each
             * 
             * */
            //输出被点击的元素的序列号
            $('p').click(function(){
                //this 指代p 则表示在同级中的序列号
                //.index('p')表示在同级的p元素中筛选序列号
                alert( $(this).index('p') );

            });

            //对.wrap 中p同级元素中的p进行遍历
            $('.wrap p').each(function(i){
                //遍历输出每个p标签的序列号
                $(this).html(i);

            });







            /*
                    动画方法
             *      .show(num)  num单位为ms
             *      .fadeIn(num)   淡入
             *      .fadeOut(num)   淡出
             *      .slideDown(num)  宽度不变，高度渐变
             *      .slideUp(num)   
             * 
             *      .hide(num)      宽高渐变  慢慢隐藏消失
             * 
             *      
             * 
             * */
            //盒子div 逐渐展示  function指代动画完成后做什么事情
//          $('#box').show(2000,function(){});

            //宽高不变  从透明渐变为不透明
//          $('#box').fadeIn(5000,function(){})

            //前提是display:normal
//          $('#box').fadeOut(5000,function(){})

            //宽度不变，高度慢慢增加显示
//          $('#box').slideDown(5000,function(){});

            //宽度不变  高度渐渐收缩直至消失
//          $('#box').slideUp(5000,function(){})











            /*
                    元素运动动画方法
                    .animate({json},2000,function(){}, 'easy')
                        参数1: json
                        参数2: 毫秒数(默认300)  fast  normal slow
                        参数3： 匀速  加速度  可不写

             * 
             * 
             * 
             * */
            //jq动画  将box盒子上左边距在两秒内变到500px
            $('#box').animate({
                marginLeft:'500px',
                marginTop:'500px',
                opacity:0,
            },2000,function(){
                //动画结束后将其隐藏  即display:none
                $(this).hide();
            });

            //在两秒内将该盒子的透明度变为0
//          $('#box').animate({
//              opacity:0
//          },2000);




            /*
                    fadeToggle(num)     对反   fadeIn()  或者     fadeOut()
                                        当前是fadeIn() 则 fadeToggle()实现fadeOut()效果

                    toggle()方法              对反     show() 和 hide()

                    slideToggle()        对反  slideDown() 和 slideUp()

                    fadeTo(num, 0~1)

             * */

            //变到0.7的透明度
            $('#box').fadeTo(3000,0.7)







            //鼠标划入划出  的jq 淡入淡出动画
            //stop()移除所有动画队列   防止太多事件注册 动画执行很久
            //stop(true 表示要不要停止该事件, 默认false  true表示停下动画队列 并 把元素放到队列最后一刻，动画瞬间完成直到最后一个动画执行)
            $('#show').mouseenter(function(){

                $('#box').stop(true,false).fadeIn(2000);

            });

            $('#hide').mouseenter(function(){

                $('#box').stop(true,false).fadeOut(2000);

            });



            /*
                    延迟动画方法
                        延迟多久之后执行后面的动画队列
                        只能延迟动画
             * 
             * 
             * */

            $('#box').delay(2000).fadeOut();






        </script>








    </body>
</html>

KrisChung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web开发-JQuery

关于js对象与jq对象关于js对象与jq对象 js对象与jq对象的互相转换以及获取元素创建元素 . . 关于jq插件的引用 www.bootcdn.cn –&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; 复制链接 jquery.min.js&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&a
复制链接

扫一扫