jQuery基本操作

作者: 松雪宝宝 | 来源:发表于2018-06-25 19:28 被阅读0次

(1)jQuery加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery加载</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // alert($);//弹出function (a,b){return new n.fn.init(a,b)}表示JQuery已经引进来了，这是它的一个构造函数
        //JS写法
        window.onload = function(){
            var oDiv = document.getElementById('div');
            alert(oDiv.innerHTML);//这是一个div元素
        }
        //jQuery的完整写法
        //比上面JS写法先弹出，因为window.onload是把页面元素加载、渲染完才弹出，而ready()是把所有页面的节点加载完之后就弹出了，不用等渲染了
        /*$(document).ready(function(){
            var $div = $('#div');
            alert('jQuery:' + $div.html());//jQuery:这是一个div元素
        })*/
        //简写方式
        $(function(){
            var $div = $('#div');//CSS样式怎么写，这里就怎么写
            //html()方法相当于原生JS的innerHTML
            alert($div.html() + 'jQuery');
        })
    </script>
</head>
<body>
    <div id="div">这是一个div元素</div>
</body>
</html>

(2)jQuery选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>
    <style type="text/css">
        #div1{
            color: red;
        }
        .box{
            color: green;
        }
        .list li{
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //选择元素的规则和css样式相同
            $('#div1').css({color: 'pink'});
            $('.box').css({fontSize: '30px'});
            $('.list li').css({
                background: 'green',
                color: '#fff',
                fontSize: '20px',
                marginBottom: '10px'
            });
        })
    </script>
</head>
<body>
    <div id="div1">这是一个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>

(3)选择集转移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择集转移</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //prev()是同级的上一个元素，prevAll()是同级的上面所有的元素
            //next()是同级的下一个元素，nextAll()是同级的下面所有的元素
            //修改#div1的下一个元素的样式
            $('#div1').next().css({color: 'red'});
            //修改#div1的下面所有p标签设置样式
            $('#div1').nextAll('p').css({color: 'red'});
            //选择上一级的父元素
            /*$('#span01').parent().css({
                width:'100px',
                height:'100px',
                background:'gold'
            })*/
            //获取祖级用$('#span02').parent().parent()不可取，可用closest('div')获取离span02最近的div
            //closest可以选择离自己最近的元素，元素可以是父级，也可以是子集
            $('#span01').closest('div').css({
                width:'200px',
                height:'200px',
                background:'pink'
            })
            /*
            $('.list li')与$('.list').children()的区别：
                原始的选择集不一样
                $('.list li')不能通过end()回到父级
                $('.list').children()可以通过end()回到父级
            */
            $('.list').children().css({
                background:'gold',
                height:'30px',
                marginBottom:'10px'
            }).end().css({
                background:'green'
            })
            //eq(2)是选择索引等于2的第三个li，siblings()表示除第三个之外的其它兄弟li
            $('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
            //find()是选择div内的class等于link1的元素
            $('#div2').find('.link1').css({color:'red'});
        })
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <div>这是第二个div元素</div>
    <p>这是一个p元素</p>

    <div>
        <p>
            <a href="#">腾讯网</a>
            <span id="span01">span元素</span>
        </p>
    </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>

    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div id="div2">
        <p>
            <a href="#" class="link1">腾讯网</a>
        </p>
    </div>
</body>
</html>

(4)jQuery样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery样式操作</title>
    <style type="text/css">
        .div2{
            color: red;
        }
        .big{
            font-size: 30px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*jQuery用同一个函数即可以取值、也可以赋值*/
            //读取样式
            alert($('#div1').css('fontSize'));//16px
            //设置（写入）样式
            $('#div1').css({background:'gold'});
            //增加行间样式
            $('#div1').addClass('big');
            //减少行间样式，多个样式用空格分开
            $('#div1').removeClass('div2 big');
        })
    </script>
</head>
<body>
    <div id="div1" class="div2">这是一个div元素</div>
</body>
</html>

(5)click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click事件</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .sty{
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 给按钮绑定click事件
            $('#btn').click(function(){
                //重复切换sty样式
                $('.box').toggleClass('sty');
            })
        })
    </script>
</head>
<body>
    <input type="button" value="切换" id="btn">
    <div class="box"></div>
</body>
</html>

(6)jQuery索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery索引值</title>
    <style type="text/css">
        .list li{
            height: 30px;
            margin-bottom: 10px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.list li').click(function(){
                // alert(this.innerHTML);//弹出标签中的内容
                alert($(this).index());//弹出下标
            })
        })
    </script>
</head>
<body>
    <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>

(7)jQuery做选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery做选项卡</title>
    <style type="text/css">
        .btns{
            width: 500px;
            height: 50px;
        }
        /*选项卡的样式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默认灰色*/
            color: #666;
            border: 0px;
        }
        /*被选中的选项卡的样式*/
        .btns input.cur{
            background-color: gold;
        }
        /*内容区的样式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默认隐藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被选中的内容区的样式*/
        .contents div.active{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btns input').click(function() {
                //this是原生的对象
                // alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素
                //jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
                //给当前元素添加选中样式，为兄弟元素移除选中样式
                $(this).addClass('cur').siblings().removeClass('cur');
                //$(this).index()获取当前按钮所在层级范围的索引值
                //显示对应索引的内容区，隐藏其它兄弟内容区
                $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
            });
        })
    </script>
</head>
<body>
    <div class="btns" id="btns">
        <input type="button" value="tab01" class="cur">
        <input type="button" value="tab02">
        <input type="button" value="tab03">
    </div>
    <div class="contents" id="contents">
        <div class="active">tab文字内容一</div>
        <div>tab文字内容二</div>
        <div>tab文字内容三</div>
    </div>
</body>
</html>

(8)jQuery属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            alert($('.box').html());//这是一个div元素
            $('.box').html('<a href="http://www.baidu.com">百度网</a>');
            */
            /*
            读写值为布尔类型的属性用prop方法
            读写值为非布尔类型的属性用attr方法
            */
            /*
            $('.box').attr({title:'这是一个div!'});//写入title属性，并赋值
            alert($('.box').attr('class'));//读属性class的值，弹出box
            */
            /*
            var $src = $('#img1').attr('src');
            alert($src);//img/1.png
            $('#img1').attr({
                src:'img/2.gif',
                alt:'图片二'
            });
            */
            /*
            alert($('#check').prop('checked'));//选中为true，非选中为false
            $('#check').prop({checked:true});//设置默认勾选
            */
            // alert($('.box2').html());//<span>这是div元素内的span</span>
            alert($('.box2').text());//这是div元素内的span
        })
    </script>
</head>
<body>
    <div class="box">这是一个div元素</div>

    <img id="img1" src="img/1.png" alt="一张图片">

    <input type="checkbox" id="check">多选

    <div class="box2">
        <span>这是div元素内的span</span>
    </div>
</body>
</html>

(9)jQuery特殊效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特殊效果</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                // $('.box').fadeOut();//淡出
                // $('.box').fadeIn();//淡入
                // $('.box').fadeToggle();//切换淡入淡出
                // $('.box').toggle();//切换显示隐藏
                $('.box').slideToggle();//切换上收和下展
            })
        })
    </script>
</head>
<body>
    <input type="button" name="" value="效果" id="btn">
    <div class="box"></div>
</body>
</html>

(10)jQuery动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            参数：
            1、什么属性做动画，属性设置{param1: value1, param2: value2}
            2、动画执行的时间，单位毫秒
            3、动画曲线：
                swing（默认值）开始和结束慢，中间快
                linear匀速
                可省略不写
            4、回调函数，动画完成之后要做的事情，可无限嵌套
            */
            $('#div1').animate({
                width: 200,
                height: 200},
                1000,
                function(){
                    // alert('动画完了！');
                    $(this).animate(
                        {marginLeft: 500},
                        1000,
                        function(){
                            $(this).animate(
                                {marginTop: 500},
                                1000
                            )
                        }
                    )
                }
            );
        })
    </script>
</head>
<body>
    <div id="div1" class="box"></div>
</body>
</html>

(11)jQuery循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery循环</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //给全部的li设置内容和样式
            // $('.list li').html('111');
            // $('.list li').css({background:'gold'});
            //第一个参数index是索引值
            $('.list li').each(function(index) {
                // alert(index);//弹出索引值
                
                //$(this)是每一个li
                $(this).html(index);
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

jQuery基本操作

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读