24-JQuery

最新推荐文章于 2024-05-21 14:15:14 发布

weixin_51339105

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.2k

点赞数

分类专栏：前端学习文章标签： jquery javascript 前端 css ajax

本文链接：https://blog.csdn.net/weixin_51339105/article/details/124698020

版权

前端学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.JQuery

官网：http://jquery.com

js+query

jquery是一个快速的轻量的功能丰富的js库，满足了各种浏览器的兼容问题；

功能：元素的查找与遍历、元素的操作、CSS样式的操作、元素事件、JS动画

解决web2.0之后的交互问题；

使用感受：简单简洁、链式调用、读写一体；

Jquery使用：

使用思路：查找+操作
DOM查询
$(参数) 调用 $ 函数进行查询，参数是一个字符串，CSS选择器

jQuery 对象使用jQuery方法获取的对象，不能直接调用JS原生方法自带遍历功能事件可以叠加
Js对象使用原生JS获取的对象，不能直接调用JQuery方法手动遍历，事件会覆盖

联系：JQuery对象是JS对象的集合，他是一个数组，数组的每一项就是原生的js对象
转换：
js=>jq $(js对象)
jq=>js 取数组的项 jq[0]

$(选择器字符串) 查找DOM
$(对象) 入口函数
$(对象) 转换成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-3.6.0.min.js'></script>
  
</head>

<style>
    .r{
        border: 3px solid red;
    }
    .g{
        border: 3px solid green;
    }
    .b{
        border: 3px solid blue;
    }
</style>
<body>
    <div class="div"></div>
    <div class="div1">
        <ul id="myul">
            <li class="li1" name="ul-li-1">1</li>
            <li class="li2" name="num-li">2</li>
            <li class="li3" name="li num">3</li>
            <li class="li4">4</li>
            <li class="li5">5</li>
            <li class="li6">6
                <ul>
                    <li>内部</li>
                </ul>
            </li>
        </ul>
         <button id="btn1">1</button>
         <button id="btn2">2</button>
         <button id="btn3">3</button>
         <button id="btn4">4</button>
    </div>

    <!-- 入口函数不会等待图片的加载，只等待Dom文档加载完成后执行 -->
    <script>
        
        // console.log($);

        $(function(){
            // 入口 开始写代码
            // Dom的查询
            // $('*').css({color:'red'});
            // $('div').toggleClass('r');
            // $('.div1').toggleClass('b');
            // $("li[name*='li']").toggleClass('b');


            // 关系选择器
            // $('div ul').toggleClass('g');


            // jQuery新增选择器
            // 1.过滤 类型
            // $('li:first').toggleClass('r');
            // $('#myul>li:even').toggleClass('g');


            // 2.选择器的方法
            // children和find都是基于父元素查找子元素
            // $('#myul').children().toggleClass('r');
            // $('.li1').siblings().toggleClass('r');



            // 比较两种对象 JS和JQ
            const jsbtn = document.getElementById('btn1');
            const jqbtn = $('#btn1');
            console.log('js对象',document.getElementById('btn1'));
            console.log('jquery对象',$('#btn1'));
            console.log(jsbtn === jqbtn[0]);   //true

            function click1(){
                console.log('c 1')
            }
            function click2(){
                console.log('c 2')
            }

            // jsbtn.onclick = click1;
            // jsbtn.onclick = click2;

            jqbtn.click(click1);
            jqbtn.click(click2);


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

<!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>DOM 操作</title>
    <script src="./jquery-3.6.0.min.js"></script>
    
</head>
<style>
    .mytext{
        width: 300px;
        height: 300px;
        padding: 50px;
        border: 10px solid red;
    }
</style>
<body>
    <div class="mytext" name="arr">
        jQuery 停好的
        <span>是的</span>
    </div>

    <script>

        $(function(){

            // 1.属性的操作与获取
            // console.log($('.mytext').text('123'))
            // console.log($('.mytext').html('<span>12341</span>'));
            console.log($('.mytext').attr('name',9));
            
        })
    </script>
</body>
</html>

weixin_51339105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
24-JQuery

1.JQuery官网：http://jquery.comjs+queryjquery是一个快速的轻量的功能丰富的js库，满足了各种浏览器的兼容问题；功能：元素的查找与遍历、元素的操作、CSS样式的操作、元素事件、JS动画解决web2.0之后的交互问题；使用感受：简单简洁、链式调用、读写一体；Jquery使用：使用思路：查找+操作DOM查询$(参数) 调用 $ 函数进行查询，参数是一个字符串，CSS选择器jQuery 对象使用jQuery方法获取的对象，不能直接调用JS原生方法自
复制链接

扫一扫