JQuery基本使用二

作者: 书中有凉气 | 来源:发表于2016-12-21 10:16 被阅读0次

JQuery基本使用二
前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery的基本使用二
jQuery基本使用
JQuery基本使用
jQuery 的基本使用
jQuery
jQuery笔记
07-JQuery插件应用
jQuery的基本使用

JQuery各种基本使用

代码预览：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu26-1.html

源码：

<html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>

    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
    </script>
    <style>
    fieldset{
        margin: 20px;
    }
       .example{
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        margin: 10px;        
       }
       .one{
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        margin: 10px;
       }
       .color_blue{
        background-color: #6fc;
       }
       .eleven{
        position:absolute;
        right:100px;
        background-color:grey;
       }

    </style>
</head>
<body>
    <fieldset>
        <legend>
            1.给元素 $node 添加 class active，给元素 $noed 删除 class active<br>
            2.展示元素$node, 隐藏元素$node
        </legend>
            <div class="one"></div>
            <button class="add">add</button>
            <button class="remove">remove</button>
            <button class="none">none</button>
    </fieldset>
    <fieldset>
        <legend>
            3.获取元素$node 的 属性: id、src、title， 修改以上属性
        </legend>
            <div class="three example" id='three' src='zhang xuan' title="yan jia jia"></div>
            show:
            <div class="show-three"></div>
            <button class="get-three">get</button>
            <button class="change-three">change</button>
    </fieldset>
    <fieldset>
        <legend>
            4.给$node 添加自定义属性data-src
        </legend>
            <div class="four example"></div>
            show:
            <div class="show-four"></div>
            <button class="add-four">add</button>
    </fieldset>
    <fieldset>
        <legend>
            5.在$ct 内部最开头添加元素$node<br>
            6.在$ct 内部最末尾添加元素$node<br>
            7.删除$node<br>
            8.把$ct里内容清空
        </legend>
            <div class="five example"></div>
            <button class="add-five">add</button>
            <button class="delete-five">delete</button>
            <button class="clear-five">clear</button>
    </fieldset>
    <fieldset>
        <legend>
            9.在$ct 里设置 html //<div class="btn"></div>
        </legend>
            <div class="nine example"></div>
            <button class="set-nine">set</button>
    </fieldset>
    <fieldset>
        <legend>
            10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
        </legend>
            <div class="ten example"></div>
            show:
            <div class="show-ten"></div>
            <button class="get-ten">get</button>
            <button class="set-ten">set</button>
    </fieldset>
    <fieldset>
        <legend>
            11.获取窗口滚动条垂直滚动距离
        </legend>
            show:
            <div class="show-eleven"></div>
            <button class="get-eleven">get</button>
    </fieldset>
    <fieldset>
        <legend>
            12.获取$node 到根节点水平、垂直偏移距离
        </legend>
                <div class="twelves example"></div>
            show:
            <div class="show-twelves"></div>
            <button class="get-twelves">get</button>
    </fieldset>
     <fieldset>
        <legend>
            13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
        </legend>
            <div class="thirteen example">13</div>
            <button class="get-thirteen">get</button>
    </fieldset>
    <fieldset class="ct">
        <legend>
            14.遍历节点，把每个节点里面的文本内容重复一遍<br>
            15.从$ct 里查找 class 为 .item的子元素<br>
            16.获取$ct 里面的所有孩子<br>
            17.对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
        </legend>
            <div class="fourteen example">
                14
                <div class="fourteen-1 item panel">
                    14-1
                    <div class="fourteen-2 item">
                        14-2
                    </div>
                </div>
            </div>
            show:
            <div class="show-fourteen"></div>
            show:
            <div class="show-fifteen"></div>
            show:
            <div class="show-seventeen"></div>
            <button class="get-fourteen">get</button>
            <button class="get-fifteen">get-items</button>
            <button class="get-seventeen">get-pa</button>
    </fieldset>
    <fieldset>
        <legend>
            18.获取选择元素的数量<br>
            19.获取当前元素在兄弟中的排行
        </legend>
            <div class="eighteen example">18</div>
            <div class="eighteen example">18</div>
            <div class="eighteen example whoami">whoami</div>
            <div class="eighteen example">18</div>
            show:
            <div class="show-eighteen"></div>
            show:
            <div class="show-nineteen"></div>
            <button class="get-eighteen">get</button>
            <button class="get-nineteen">whoami</button>
    </fieldset>
    <script>
        //1,2
        var $one=$('.one');
            $add=$('.add'),
            $remove=$('.remove'),
            $none=$('.none'),
        $add.on('click', function(){
            $one.addClass('color_blue');
        })
        $remove.on('click', function(){
            $one.removeClass('color_blue');
        })
        $none.on('click', function(){
            $one.toggle('slow');
        })
            //3
        $('.get-three').on('click', function(){
            var $title=$('.three').attr('title'),
                $src=$('.three').attr('src'),
                $id=$('.three').attr('id');
            var all='tilte:'+$title+'src:'+$src+'&#10 id:'+$id;
            $('.show-three').text(all);
        })
        $('.change-three').on('click', function(){
                    $('.three').attr('title','123');
                    $('.three').attr('src','xuan zhang');
                    $('.three').attr('id','three-changed');
        })
      //4
        $('.add-four').on('click', function(){
                $('.four').attr('data-src','zhang xuan');
                $('.show-four').text('data-src:'+$('.four').attr('data-src'));
        })
      //5
        $('.add-five').on('click', function(){
                $('.five:first').before('<div class="five example"></div>');
                $('.five:last').after('<div class="five example"></div>');              
        })
                $('.delete-five').on('click', function(){
                        $('.five:first').remove();
                })
                $('.clear-five').on('click', function(){
                        $('.five').remove();
                })
            //9
        $('.set-nine').on('click', function(){
            $('.nine').append('<div class="btn example"></div>')
        })
      //10
        $('.get-ten').on('click', function(){
                    var text='';
            text+='宽度：'+$('.ten').width();
            text+='<br>高度：'+ $('.ten').height();
            text+='<br>包括内边距宽度：'+$('.ten').innerWidth();
            text+='<br>包括内边距高度：'+$('.ten').innerHeight();
            text+='<br>包括内边距和边框宽度：'+$('.ten').outerWidth();
            text+='<br>包括内边距和边框高度：'+$('.ten').outerHeight();
            text+='<br>包括内边距、边框和外边距宽度：'+$('.ten').outerWidth(true);
            text+='<br>包括内边距、边框和外边距高度：'+$('.ten').outerHeight(true);
            $('.show-ten').html(text);
        })
        $('.set-ten').on('click', function(){
            $('.ten').width('200');
            $('.ten').height('200');
        })
      //11
        $('.get-eleven').on('click', function(){
            $('.show-eleven').text($(window).scrollTop());          
        })
      //12
        $('.get-twelves').on('click', function(){
            var all=$('.twelves').offset().left+' '+$('.twelves').offset().top;
            $('.show-twelves').text(all);
        })
        //13
        $('.get-thirteen').on('click', function(){
            $('.thirteen').css({'color':'red','font-size':'14px'});
        })
       //14,15,16,17
        $('.get-fourteen').on('click', function(){
            $('.show-fourteen').text($('.fourteen').parent().children().text());
        })
        $('.get-fifteen').on('click', function(){
            $('.show-fifteen').text($('.fourteen').children().find('item'));   
        })
        $('.get-seventeen').on('click', function(){
            if($('.fourteen').parent().hasClass('ct') && $('.fourteen').children().hasClass('panel')){
                $('.show-seventeen').text(true);
            };
        })
       //18,19
        $('.get-eighteen').on('click', function(){
            $('.show-eighteen').text($('.eighteen').length);
        })
        $('.get-nineteen').on('click', function(){
            $('.show-nineteen').text($('.whoami').index());
        })
    </script>

</body>
</html>

代码预览2：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu26-2.html
源码：

<html>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
    </script>
    <style>
    fieldset{
        margin: 20px;
    }
       .example{
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        margin: 10px;
               
       }
       .two{
        background-color:grey;
        color:#6fc;
       }
       .four{
        margin:20px;
       }
    </style>
</head>
<body>
    <fieldset>
        <legend>
            1.当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
        </legend>
            <div class="one example"></div>
            <button class="one-add">add</button>        
    </fieldset>
    <fieldset>
        <legend>
            2.当窗口滚动时，获取垂直滚动距离
        </legend>
                <div class="two example"></div>
            <button class="two-add">add</button>        
    </fieldset>
    <fieldset>
        <legend>
            3.当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
        </legend>
                <div class="three example"></div>
            <button class="three-show">show</button>        
    </fieldset>
    <fieldset>
        <legend>
            4.当鼠标激活 input 输入框时让输入框边框变为蓝色，<br>
            当输入框内容改变时把输入框里的文字小写变为大写，<br>
            当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
        </legend>
                <input class='four'></input>       
    </fieldset>
    <fieldset>
        <legend>
            5.当选择 select 后，获取用户选择的内容
        </legend>
                <select class='five-sl'>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                show:
                <div class='five-show'></div>       
    </fieldset>
    <script>
        //1
            $('.one-add').on('click', function(){
                $('.one').css({backgroundColor:'red'});
                setTimeout(function(){$('.one').css({backgroundColor:'blue'})},1000)            
            })
        //2
            $('.two-add').on('click', function(){
                setInterval(function(){$('.two').text($(window).scrollTop())},100);
            })
        //3
            $('.three').on('mouseenter', function(){
                $('.three').css({'background-color':'red'});
            })
            $('.three').on('mouseleave', function(){
                $('.three').css({'background-color':'#fff'});
            })
        //4
            $('.four').on('focusin', function(){
                $(this).css({border: '1px solid blue'})
            })
            $('.four').on('focusout', function(){
                $(this).css({border: '1px solid grey'})
            })
            $('.four').on('keyup', function(){
                $('.four').val($('.four').val().toUpperCase());
            })
        //5
            $('.five-sl').on('change',function(){
            $('.five-show').text($('.five-sl').val())
            })
        </script>
</body>
</html>

JQuery基本使用二
JQuery各种基本使用代码预览：https://jirengu-inc.github.io/jrg-renwu...
前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常...
jQuery的基本使用二
1 jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ;...
jQuery基本使用
一. jQuery的基础知识源文件jQuery文件min是压缩过的版本。区别：在开发过程中，我们使用未压缩的版...
JQuery基本使用
一. 基本使用 jquery的入口函数实例：通过使用入口函数的方式，将div在页面加载完毕后隐藏。 2.jque...
jQuery 的基本使用
1.2. jQuery 的基本使用 1.2.1 jQuery 的下载 jQuery的官网地址： https...
jQuery
jQuery框架一、jQuery基础添加jQuery到网页 jQuery基本语法二、jQuery 选择器示...
jQuery笔记
1. jQuery 介绍 2. jQuery 的基本使用 3. jQuery 选择器 4. jQuery 样式操...
07-JQuery插件应用
本教程主要以Jquery UI为例，简单介绍Jquery插件的使用。使用JQuery UI提供的基本功能，需要如...
jQuery的基本使用
1. js的新选择器 document.querySelector() 查找单个document.querySel...