简单涉猎jquery

作者: 樊小勇 | 来源:发表于2019-05-08 19:35 被阅读0次

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基础上造出来的。
然后怎么去学习呢，上面这个插件网站里，有好多是提供了源码的，我们可以把根据源码一步一步去理解，然后变成自己的。
最后大家一起学习一起提高技能把。加油

简单涉猎jquery

jquery作为以前前端的龙头老大，我们必须得了解了解

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读