美文网首页
10-jQuery01

10-jQuery01

作者: 努力爬行中的蜗牛 | 来源:发表于2018-12-25 12:28 被阅读6次
jQuery介绍

jQuery是目前使用最广泛的JavaScript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jQuery是一个函数库，一个js文件，页面使用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jQuery的口号和愿望Write Less，Do More（写的少，做的多）
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

jQuery加载
<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        window.onload = function() {
            var $div = $('#div1');
            alert('原生弹出的' + $div);
        }

        // ready完整写法
        // ready 比window.onload要快
        // 原因是：window.onload是等标签加载完后，再渲染完后才运行，ready是标签加载完后即开始运行
        // $(document).ready(function() {
        //  var $div = $('#div1');
        //  alert('jquery弹出的' + $div);
        // })

        // ready简写
        $(function() {
            var $div = $('#div1');
            alert('jquery弹出的' + $div);
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>

</body>
</html>
jQuery选择器

jquery用法思想一
选择某个网页元素，然后对它进行某种操作

jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$('#myId') // 选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') // 选择所有的li元素
$('#ul1 li span'）// 选择id为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            var $div = $('#div1');
            $div.css({'color':'red'});

            var $div2 = $('.box');
            $div2.css({'color':'green'});

            var $li = $('.list li');
            // 带“-”的样式属性可以写成驼峰式，也可以写成原始的
            $li.css({'background-color':'pink'});

        });
    </script>

    <style type="text/css">
        #div1 {
            color: red;
        }

    </style>
</head>
<body>
    <div id="div1">这是一个div元素</div>

    <div class="box">这是第二个div元素</div>

    <div class="box">这是第三个div元素</div>

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

</body>
</html>
对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); // 选择class不等于myClass的div元素
$('div').filter('.myClass'); // 选择class等于myClass的div元素
$('div').eq(5); // 选择第6个div元素
选择集转移
$('div').prev(); // 选择div元素前面紧挨的同辈元素
$('div').prevAll(); // 选择div元素之前所有的同辈元素
$('div').next(); // 选择id元素后面紧挨的同辈元素
$('div').nextAll(); // 选择div元素后面所有的同辈元素
$('div').parent(); // 选择div的父元素
$('div').children(); // 选择div的所有子元素
$('div').siblings(); // 选择div的同级元素
$('div').find('.myClass'); // 选择div内的class等于myClas的元素

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            $('div').css({'background-color':'gold'});

            $('div').has('p').css({'backgroundColor':'gray','fontSize':'30px'});

            $('div').eq(4).css({'textIndent':'20px'});

            $('div').eq(4).prev().css({'color':'red'});

            $('div').find('.tip').css({'fontSize':'30px'});
        });
    </script>


</head>
<body>
    <div>1</div>
    <div><p>2</p></div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div><span>8</span><span class="tip">9</span></div>

</body>
</html>
判断是否选择到了元素

jquery有容错机制，即使没有找到元素，也不会出错，可用length属性来判断是否找到了元素，length等于0，就是没有选择到元素，length大于0，就是选择到了元素。

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            $div = $('#div1');

            alert($div.length);

            $div2 = $('#div2');

            alert($div2.length);

        });
    </script>


</head>
<body>
    <div id="div1">div元素</div>

</body>
</html>
jquery用法思想二

同一个函数完成取值和赋值

操作行间样式

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            // 读取css属性
            var $div = $('#box');
            var sTr = $div.css('fontSize'); 
            alert(sTr);
            // 写属性值
            $div.css({'color':'red','backgroundColor':'pink','fontSize':'20px'});

            // 原生是无法读取行间没有定义的css属性
            // var oDiv = document.getElementById('box');
            // alert(oDiv.style.fontSize);
        });
    </script>
</head>
<body>
    <div id="box">这是一个div元素</div>

</body>
</html>

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width"),获取的是第一个div的width

操作样式类名

$('#div1').addClass('divClass2'); // 为id为div1的对象追加样式divClass2
$('#div1').removeClass('divClass2'); // 移除id为div1的对象的class名为divClass的样式
$('#div1').removeClass('divClass divClass2'); // 移除多个样式
$('#div1').toggleClass('anotherClass'); // 重复切换antherClass样式

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            var $div = $('.box');
            // 在原来样式名的基础上加上“big”的样式名
            // $div.addClass('big');
            // 在原来样式的基础上去掉“red"的样式名
            $div.removeClass('big red');

        });
    </script>

    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: gold;
        }

        .big {
            font-size: 30px;
        }

        .red {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box big red">这是一个div元素</div>

</body>
</html>
绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function() {
      // 内部的this指的是原生对象

      // 使用jquery对象用$(this)
})

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
                        // 绑定click事件
            $('#btn').click(function() {
                // if ($('.box').hasClass('col01')) {
                //  $('.box').removeClass('col01');
                // } else {
                //  $('.box').addClass('col01');
                // }
                
                // 简化写法
                $('.box').toggleClass('col01');
            })

        });
    </script>

    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: gold;
        }

        .col01 {
            background-color: green;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="切换样式" id="btn">
    <div class="box">div元素</div>

</body>
</html>
获取元素的索引值

有时候需要获取匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取。

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            var $li = $('.list li');
            alert($li.filter('.myli').index());

        });
    </script>


</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="myli">5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>

    </ul>

</body>
</html>

选项卡demo

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            var $btn = $('.btns input');
            var $div = $('.cons div');

            $btn.click(function() {
                // this指的是原生的方法，表示当前点击的对象
                // $(this)，jquery的this
                // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
                $(this).addClass('current').siblings().removeClass('current');

                // 当前点击的按钮对应索引值的div加上active样式，其他的去掉
                $div.eq($(this).index()).addClass('active').siblings().removeClass('active');
            })

        });
    </script>

    <style type="text/css">
        .btns input {
            width: 100px;
            height: 40px;
            background-color: #ddd;
            border: 0;
        }

        .btns .current {
            background-color: gold;
        }

        .cons div {
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
        }

        .cons .active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="01" class="current">
        <input type="button" name="" value="02">
        <input type="button" name="" value="03">
    </div>

    <div class="cons">
        <div class="active">选项卡1</div>
        <div>选项卡2</div>
        <div>选项卡3</div>
    </div>

</body>
</html>
jquery特殊效果

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            $('#btn').click(function() {
                // $('.box').fadeIn(1000,'swing',function() {
                //  alert('动画完了！');
                // });

                // $('.box').fadeToggle(1000,'swing',function() {
                //  alert('动画完了！');
                // });

                // $('.box').show();

                // $('.box').toggle();

                // $('.box').slideDown();

                $('.box').slideToggle(1000, function() {
                    alert('动画结束了！')
                });
            });

        });
    </script>

    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            background-color: gold;
            display: none;
        }
    </style>
    
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>

</body>
</html>
jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连接来写：

('#div1') // id为div1的元素
.children('ul') // 该元素下面的ul子元素
.slideDown('fast') // 高度从零编导实际高度来显示ul元素
.parent() // 跳到ul的父元素，也就是id为div1的元素
.siblings() // 跳到div1元素平级的所有兄弟元素
.children('ul') // 这些兄弟元素中的ul子元素
.slideUp('fast'); // 高度实际高度变化到零来隐藏ul元素

层级菜单demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级菜单</title>
    
    
    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0px;
            padding:0px;
        }
        
        ul{list-style:none;}


        .menu{
            width:200px;
            margin:20px auto 0;
        }

        .menu .level1,.menu li ul a{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;           
        }

        .menu .level1{
            border-bottom:1px solid #afc6f6;
            
        }

        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;
                    
        }

        .menu li ul li{
            border-bottom:1px solid #afc6f6;
        }

        

        .menu li ul{
            display:none;
        }

        .menu li ul.current{
            display:block;
        }

        .menu li ul li a:hover{
            background-color:#f6b544;
        }


    </style>
    
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>

    <script type="text/javascript">
        
        $(function(){
            $('.level1').click(function() {
                // $(this).next().slideDown().parent().siblings().children('ul').slideUp();

                // 通过stop() 可以修正反复点击导致的持续动画的问题
                $(this).next().stop().slideToggle().parent().siblings(),children('ul').slideUp();
            })
            

        })

    </script>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>
            <ul class="current">
                <li><a href="#">苹果</a></li>
                <li><a href="#">梨子</a></li>
                <li><a href="#">葡萄</a></li>
                <li><a href="#">火龙果</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">海鲜</a>
            <ul>
                <li><a href="#">蛏子</a></li>
                <li><a href="#">扇贝</a></li>
                <li><a href="#">龙虾</a></li>
                <li><a href="#">象拔蚌</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">肉类</a>
            <ul>
                <li><a href="#">内蒙古羊肉</a></li>
                <li><a href="#">进口牛肉</a></li>
                <li><a href="#">野猪肉</a></li>                
            </ul>
        </li>
        <li>
            <a href="#" class="level1">蔬菜</a>
            <ul>
                <li><a href="#">娃娃菜</a></li>
                <li><a href="#">西红柿</a></li>
                <li><a href="#">西芹</a></li>
                <li><a href="#">胡萝卜</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">速冻</a>
            <ul>
                <li><a href="#">冰淇淋</a></li>
                <li><a href="#">湾仔码头</a></li>
                <li><a href="#">海参</a></li>
                <li><a href="#">牛肉丸</a></li>
            </ul>
        </li>
        
    </ul>
</body>
</html>

滑动选项卡demo

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            var $btn = $('.btns input');
            var $slides = $('.cons .slides');



            $btn.click(function() {
                // this指的是原生的方法，表示当前点击的对象
                // $(this)，jquery的this
                // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
                $(this).addClass('current').siblings().removeClass('current');

                $slides.stop().animate({'left':-500*$(this).index()});
            })

        });
    </script>

    <style type="text/css">
        .btns input {
            width: 100px;
            height: 40px;
            background-color: #ddd;
            border: 0;
            outline: none;
        }

        .btns .current {
            background-color: gold;
        }

        .cons {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .cons .slides div {
            width: 500px;
            height: 300px;
            background-color: gold;
            /*display: none;*/
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            float: left;
        }

        .slides {
            width: 1500px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .cons .active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="01" class="current">
        <input type="button" name="" value="02">
        <input type="button" name="" value="03">
    </div>

    <div class="cons">
        <div class="slides">
            <div>选项卡1</div>
        <div>选项卡2</div>
        <div>选项卡3</div>
        </div>
        
    </div>

</body>
</html>
jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function() {
            $('#btn').click(function() {
                $('.box').animate({'width':600},1000,function() {
                    $('.box').animate({'height':400},1000,function() {
                        $('.box').animate({'opacity':0});
                    });
                });
            })
            
            $('#btn2').click(function() {
                $('.box2').stop().animate({'width':'+=100'});
            })

        });
    </script>

    <style type="text/css">
        .box, .box2 {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="动画" id="btn">
    <div class="box"></div>
    <br>
    <br>

    <input type="button" name="" value="动画" id="btn2">
    <div class="box2"></div>


</body>
</html>

相关文章

  • 10-jQuery01

    jQuery介绍 jQuery是目前使用最广泛的JavaScript函数库。据统计，全世界排名前100万的网站，有...

网友评论

      本文标题：10-jQuery01

      本文链接：https://www.haomeiwen.com/subject/qwjxlqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|10-jQuery01|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！