美文网首页
JQuery基本操作

JQuery基本操作

作者: PySong | 来源:发表于2018-07-31 16:26 被阅读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基本操作

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JQuery基本操作|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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