简单涉猎jquery

jquery作为以前前端的龙头老大，我们必须得了解了解
  • 首先怎么使用jquery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div>
        1
        <div>2</div>
    </div>
    <script>
        // jquery相当于一个对象，使用时可以使用 jQuery或 $ 一般用 $
       
        // 下面结果是相等的
        // console.log(jQuery===$); // true

        // 打印jquey对象
        // console.log($);  // 可见里面是返回一个jQuery

        // 使用jquery获取节点 $() 或 jQuery() 里面放想获取的节点 标签直接写标签 id用# class用.
        var a = $('div') // 获取div节点 这里是两个都选中了
        console.log(a);  // 打印出来可以看到，两个div在jquery里面是成数组形式存在的
        // 因此我们访问单个的话可以
        console.log(a[1]);
        // 此外获取节点之后我们可以看到有标签的各种信息我们也是可以直接获取的

        // jquery也可以像class里选中子代一样选中节点
        $('div>div');  // 获取div的直接子代div
        $('div div');  // 获取div下的所有div
    </script>
</body>
</html>
  • 接下来就是jquery操作css样式和类名了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div>
        1
        <div>2</div>
    </div>
    <script>
    // 原生js里我们获取节点使用document.querySelector
    // 设置样式使用 document.querySelector().style.fontSzie='xxx'

    // jquery使用 .css设置
    
    // $('div').css("font-size","40px") // 传两个参数的时候前者为属性后者为值
   
    // $('div').css("font-size","40px").css("background","red"); 
    // 添加多个样式的时候可以直接在后面接着.css 这里涉及链式编程后面会介绍
    
    $('div').css({
        "font-size":"40px",
        "background":'green',
        "width":'100px',
        "height":'100px'
    })
    // 更加方便的是在.css里以对象的形式设置样式
   

    </script>
</body>
</html>
  • 此外jquery也封装了css3的动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
    </style>
</head>
<body>
    <div>

    </div>
    <button>隐藏</button>
    <button>显示</button>
    <button>切换</button>
    <script>
        // 设置div的样式
        $('div').css({
            "width":"100px",
            "height":'100px',
            "background":'pink'
        })
        // jquery隐藏动画

        // 显示隐藏
        // 没有过渡效果的
        // document.querySelector('button').onclick=function(){
        //     // 给button绑定点击事件 按理来说这一操作每个button都绑定了该事件
        //     // 但是原生js只会绑定第一个button
        //     $('div').hide(1000,()=>{
        //         // jquery的隐藏属性，参数为时间，速度，执行函数 执行函数必不可少
        //         console.log('隐藏')
        //     })
        // }
        // // jquery显示动画
        // document.querySelectorAll('button')[1].onclick=function(){
        //     // 选中坐标为1的button标签绑定点击事件
        //     $('div').show(1000,()=>{
        //         console.log('显示');
        //         // 这个隐藏显示功能根据控制台的观察原理是控制标签的display:none
        //     })
        // }

        // 上拉过渡效果
        // document.querySelector('button').onclick=function(){
        //     $('div').slideUp(1000,()=>{
        //         console.log('向上')
        //         // 向上缩短
        //     })
        // }

        // document.querySelectorAll('button')[1].onclick=function(){
        //     $('div').slideDown(1000,()=>{
        //         console.log('向下')
        //         // 向下展开
        //     })
        // }

        // 淡入淡出
        // document.querySelector('button').onclick=function(){
        //     $('div').fadeOut(1000,()=>{
        //         console.log('淡出')
        //     })
        // }
        // document.querySelectorAll('button')[1].onclick=function(){
        //     $('div').fadeIn(1000,()=>{
        //         console.log('淡入')
        //     })
        // }

        // 切换 显示隐藏同一个按钮
        document.querySelectorAll('button')[2].onclick=function(){
            $('div').slideToggle(1000,()=>{
                console.log('切换状态')
            })
        }
        document.querySelectorAll('button')[1].onclick=function(){
            $('div').fadeToggle(1000,()=>{
                console.log('切换状态')
            })
        }


        // 三组过渡效果 hide show slideUp slideDown fadeOut fadeIn
        // slideUp slideDown fadeOut fadeIn 都有 Toggle 切换
    </script>
</body>
</html>
  • jquery允许我们自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
    </style>
</head>
<body>
    <div>

    </div>
    <button>开始</button>
    <script>
        // 设置div的样式
        $('div').css({
            "width":"100px",
            "height":'100px',
            "background":'pink',
            "position":'absolute',
            "left":"100px"
        })
        
        // 自定义动画
        // 单个样式改变
        // document.querySelector('button').onclick=function(){
        //     $('div').animate({width:200},1000,function(){
        //         console.log('宽度增加动画')
        //     })
        //     // jquery绑定的节点才拥有animate方法 三个参数，一是样式，二是时间，三是回调函数
        // }

        // 多个样式改变
        // document.querySelector('button').onclick=function(){
        //     $('div').animate({width:200,height:200},1000,function(){
        //         console.log('宽度增加动画')
        //     })
        //     // 参数里的样式不需要加单位px，以对象的形式传，也可以加双引号
        // }

        // 多个样式分开执行
        document.querySelector('button').onclick=function(){
            $('div').animate({width:200},1000,function(){
                console.log(this);
                // 这里的this指的是div,只有jQuery绑定的节点才有animate属性方法
                $(this).animate({height:200},1000,function(){
                    // 所以这样$(this)等价于第一个$(div) 这样才有animate方法
                    $(this).animate({top:200},1000,function(){
                        console.log('距离上边200')
                    })
                })
            })
        }
    </script>
</body>
</html>
  • jquery也大大方便了我们对节点的操作，增删改查
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
    </style>
</head>
<body>
    <!-- <a href="http://www.baidu.com">百度</a> -->
    <!-- <div>

    </div> -->
    <script>
        // js原生添加标签
        // let a = document.createElement('a')
        // // 直接添加href属性赋值
        // a.href = 'http://www.baidu.com'
        // a.innerHTML="百度"
        // // a.text = "百度" 两种都可以添加内容 有value值的通过节点.value添加
        // // 使用append添加到body里，append不会覆盖之前的，只是在有的基础上新加一个
        // document.querySelector('body').append(a);
    
        // jq添加
        $('body').append($("<a href='http://www.baidu.com'>百度</a>"))
        // 返回一个jquery对象
        // var a = $('body').html(); // 获取节点内的内容 里面传参数就是操作内容
        // console.log(a);

        // 清空
        // $('body').empty();

        // 删除
        // $('a').remove();

        // 克隆
        console.log($('a').clone(true));
        $('body').append($('a').clone());
    </script>
</body>
</html>
  • 当然jquery也可以操作DOM了，并且还加了一些属性方法在里面供我们使用呢
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        .a{
            color: red;
        }
    </style>
</head>
<body>
    <div id="name">
        <span>1111</span>
    </div>
    <div id="name2">
        2222
    </div>
    <script>
    //    原生js设置样式
    // var a = document.querySelector('#name')
    // a.style.fontSize = "20px";
    // a.className = 'a'; // 会覆盖之前的
    // a.setAttribute();
    // a.getAttribute();

    // jquery设置样式
    // $("div").attr('style');
    // // 获取style里的信息
    // console.log($("div").attr('style'));
    
    // 往DOM节点里添加多个属性
    $('div').attr({data:111,class:"aa bb",style:"background:red;"})
    console.log($("div").attr("class"));

    // 移除属性
    $("div").removeAttr("style");
    console.log($("div").attr("style"));  // undefined

    // 获取值
    $("div").html("<h1>3333</h1>")   // 添加值
    $("div").text();
    console.log($("div").text());    // 3333

    
    //带参数表示设置高度
    $("div").height(200);
    //不带参数获取高度
    $("div").height();
    //带参数表示设置宽度
    $("div").width(200);
    //不带参数获取宽度
    $("div").width();
    </script>
</body>
</html>
  • 接下来到我们伟大的事件出场了 jquery事件的绑定和使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div>
        <span>dddd</span>
    </div>
    <div>
        <span>dddd</span>
    </div>
    <script>
        // jq添加单个事件
        $("div").on("click",function(ev){
            console.log(ev);
            // jq的event对象对比原生的event对象加入了更多的方法
        })

        // jq添加多个事件
        // $("div").on("click mouseenter",function(ev){
        //     console.log(ev);
        //     // 很少用
        // })

        // 触发事件
        $("div").trigger("click")
        $("div").click();


        // 事件解绑
        $("div").off(); // 解除所有事件
        $("div").off("click"); // 接触指定事件
        // 解绑所有代理的click事件，元素本身的事件不会被解绑
        $("div").off( "click", "**" );
    </script>
</body>
</html>
  • 可能你会觉得奇怪，为什么css可以直接那样连成条的设置
  • 下面介绍jquery的链式编程原理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div></div>
    <ul>
        <li>11</li>
        <li class="frist"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        // js链式原理 return this 函数只能返回一个，所以不能链式
        var obj = {
            add(a,b){
            console.log(a+b);
            return this
            },
            sub(a,b){
                console.log(a-b)
                return this
            },
            mul(a,b){
                console.log(a*b);
                return this
            }
        }
        obj.add(1,3).sub(1,4).mul(3,4);
        // 4 -3 12
        // jq链式应用
        $("div").css("width",100).css('height',100).css('background','red');

        // 设置可以链式，获取不萌链式
        // $('div').height().width(100); // 报错
        // 可以使用end()来回到之前的状态
        $('li').eq(0).end()   // eq() 获取数组0坐标的属性值
        console.log($('li').eq(0).end())
    </script>
</body>
</html>
  • 或许好奇的小伙伴会在一开始css操作的时候疑惑
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery 你好</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div id="name"></div>
    <div class="aa"></div>
    <script>
        // 隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

        // 如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

        $('.aa').css({
            "height":'100px',
            "width":'100px',
            "background":"red"
            // 这里原本是.css().css()通过隐式转换我们可以直接这样写,方便操作
        })
    </script>
</body>
</html>

  • 最后到了插件引用，关于插件引用，我们可以根据插件库的提示来走
    http://www.jq22.com/

  • 最后提供本人的学习小技巧
    在我们学会js的一些基础和一些高阶的知识点后，光靠敲一些demo是没什么太大的作用的，也体会不到真正的用法。到头来遇到难一点点的都会束手无策。不管有什么方便的框架以及一些库，插件可以直接使用虽好，但是用完之后需要提升的可以看源码，然后去模仿着写一些小插件，这样对提高自己的编程能力很有帮助，毕竟不管什么都是建立在js基础上造出来的。
    然后怎么去学习呢，上面这个插件网站里，有好多是提供了源码的，我们可以把根据源码一步一步去理解，然后变成自己的。
    最后大家一起学习一起提高技能把。加油

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345