Hello WEB！ JQ是不是更加方便？（二）--Jquery基本用法

最新推荐文章于 2022-08-15 13:46:59 发布

Padaz

最新推荐文章于 2022-08-15 13:46:59 发布

阅读量99

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119376860

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

JQ的引入
       本地文件引入 <script src="5.JQ.js"></script>
       CDN引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
       网址：https://www.bootcdn.cn/jquery/ PS：如果alert可以成功弹出便是成功引入JQuery

   JQ的选择器
       JQ中所有的选择器都是以美元符开头的：$
       JQ中的选择器和CSS选择器是一样的
           元素选择器 $('元素')
           id选择器 $('#id')
           类选择器 $('.类名')

   修改内容
       JS innerHtml()\innerText() // JS修改内容
               document.getElementById('p1').innerText='我将标签改变了';
       JQ html()\text() // JQ修改内容
               $('.c2').text('我用JQ改的');

转换
       JQ转JS $('p').get(2).innerText = 'JQ转换成JS';
       JS转JQ
           var p1 = document.getElementById('p1');
           console.log(p1);
           $(p1).text('JS转换JQ了!!!');

   鼠标
       点击 click()
       划入划出 hover()

   添加/追加(嵌套)
       添加（在前面添加） prepend()
       追加（在后面追加） append()

   前后（没有嵌套）
       前 before() 前后是兄弟元素
       后 after()

   移除
       清空 empty() 相当于一个垃圾桶，把里面的垃圾倒掉
       删除 remove() 相当于一个垃圾桶，桶和垃圾一起丢掉

   操作属性
       attr()
       removeAttr()

   添加/移除
       addClass()
       removeClass()

判断属性 hasClass() 判断被选元素是否包含指定的class，结果为true表示有这个class

   遍历 each()
   索引 index() 从下标0开始
   滚动条事件
       scroll() 子主题 1
       scrollTop() 相对顶部的偏移位置
       scrollLeft() 相对左边的偏移位置

   元素辈分
       父子元素
           parent()
           children()
       兄弟 siblings()
       后代 find()
       祖先 parents

   定位父级 position()
   窗口 offset() 设置或返回被选元素相对于文档的偏移坐标
   宽高 width()/height()
   循环添加 on
   移除 off

    JQ动画
           隐藏 hide()
           显示           show()
           向上           slideUp
           向下           slideDown
           取反           slideToggle
           淡入           fadeIn
           淡出           fadeOut
           自定义 fadeTo
           取反           fadeToggle
           动画           animate
           停止          stop
           延迟            delay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.JQuery</title>

    <style>
        .xxx {
            background-color: #dafffc
        }

        .yyy {
            font-size: smaller
        }

        .s1{width: 100px;height:100px;border: 2px solid red}
        .s2{width:100px;height:100px;border: 2px solid pink;background-color:skyblue}
        .div2{width: 200px;height: 200px;background-color: coral}

    </style>

</head>
<body>


<p>我是p标签</p>
<p id="p1">我是p1标签</p>
<p class="c2">我是c2标签</p>
<p id="p3">我是p3标签</p>
<p class="c4">我是c4标签</p>
<p id="p5">我是p5标签</p>
<p id="p6">我是p5标签</p>

<div>
    <p>我是要被清空的</p>
    <p>我是要被清空的</p>
</div>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>
<button>移除</button>
<div id="div1">
    <p>天天向上</p>
    <p>好好学习</p>
</div>
<button id="button1">样式①</button>
<button id="button2">样式②</button>
<br>

<button id="button3">隐藏</button>
<button id="button4">显示</button>
<button id="button5">向上</button>
<button id="button6">向下</button>
<button id="button7">向下取反</button>
<button id="button8">淡入</button>
<button id="button9">淡出</button>
<button id="button10">淡入取反</button>
<button id="button11">自定义</button>
<button id="button12">动画（延迟）</button>
<button id="button13">动画（停止）</button>
<br>
<div id="div2" class="div2">
</div>


<!--导入库-->
<!--本地引入-->
<!--<script src="5.JQ.js"></script>-->

<!--网址引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>


<script>

    // ********************************************基本操作********************************************************

    // js修改内容
    // document.getElementById('p1').innerText='我将标签改变了';
    // JQ修改内容
    // $('.c2').text('我用JQ改的');

    // JS转换JQ
    var p1 = document.getElementById('p1');
    console.log(p1);
    $(p1).text('JS转换JQ了!!!');
    // JQ转换JS
    $('p').get(2).innerText = 'JQ转换成JS';

    // 鼠标点击
    $('#p3').click(function () {
        alert('你点击了p3标签');
    });
    // 鼠标划过
    $('.c4').hover(
        function () {// 鼠标划入
            $('.c4').text('你的鼠标碰到我了!');
        },
        function () {// 鼠标划出
            $('.c4').text('你终于划走了~');
        });


    $('#p5').append('<p>我是追加append标签<p>');       // 追加
    $('#p5').prepend('<p>我是添加prepend标签<p>');    //添加


    $('#p6').before('<p>我是before标签<p>');    // 前
    $('#p6').after('<p>我是after标签<p>');  // 后

    //$('div').empty();    // 清空标签内部标签
    // $("div").remove();       // 清除当行标签

    $('#p1').attr('style', 'background:pink');      // 属性操作
    $('#p1').click(function () {
        $('#p1').removeAttr('style');
    });        // 移除属性


    // $('div').addClass('xxx yyy');   // 添加类属性
    // $('div').removeClass('xxx');    // 移除类属性

    // alert($('div').hasClass('yyy'));// 判断属性

    // 遍历
    $('li').each(function () {
        // alert($(this).text());
    });

    // 索引
    $('li').each(function () {
        // alert($(this).index());
    });

    // 滚动条事件
    $(window).scroll(function () {
        // console.log($(document).scrollTop()); //相对顶部相差  px
        // console.log($(document).scrollLeft()); //相对顶左边相差  px
    });


    console.log($('li').parent());      // 父元素
    console.log($('div').children());   // 子元素
    console.log($('#p1').siblings());   // 兄弟元素
    console.log($('div').find());       // 后代元素
    console.log($('li').parents());     //祖先元素
    console.log($('div').position());  // 定位父级

    //窗口
    var box2 = $('div').offset();
    console.log(box2.top);
    console.log(box2.left);

    console.log($('div').width());   //宽
    console.log($('div').height());  // 高

    // 循环添加
    $(document).ready(function () {
        $('p').on('click', function () {// 添加一个事件
            $(this).css('background-color', 'pink');
        });

        $('button').click(function () {// 移除事件
            $('p').off('click');
        });
    });

    // ********************************************操作样式********************************************************

    $(document).ready(function () {
        $('#button1').click(function () {
            $('#div1').removeClass('s2');
            $('#div1').addClass('s1');});

        $('#button2').click(function () {
            $('#div1').removeClass('s1');
            $('#div1').addClass('s2');});
    });

    // **********************************************动画**********************************************************
    //隐藏、显示
    $('#button3').click(function () {
        $('#div2').hide(1000);
    });
    $('#button4').click(function () {
        $('#div2').show(1000);
    });

    // 向上向下
    $('#button5').click(function () {
        $('#div2').slideUp();
    });
    $('#button6').click(function () {
        $('#div2').slideDown();
    });
    $('#button7').click(function () {
        $('#div2').slideDown();
        $('#div2').slideToggle(); //取反
    });

    // 淡出淡入
    $('#button8').click(function () {
        $('#div2').fadeIn();
    });
    $('#button9').click(function () {
        $('#div2').fadeOut();
    });
    $('#button10').click(function () {
        $('#div2').fadeIn();
        $('#div2').fadeToggle(); //取反
    });

    // 自定义
    $('#button11').click(function () {
        $('#div2').fadeTo(1000,0.1);
        $('#div2').fadeTo(1000,0.5);
    });

    // 动画延时
    $('#button12').click(function () {
        $('#div2').animate({width:500, height:300},1000).delay(5000);
    });

    //动画停止
    $('#button13').click(function () {
        $('#div2').stop();
    });




</script>


</body>
</html>

Padaz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Hello WEB！ JQ是不是更加方便？（二）--Jquery基本用法

JQ的引入本地文件引入 <script src="5.JQ.js"></script> CDN引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 网址：https://www.bootcdn.cn/jquery/ PS：如果al...
复制链接

扫一扫