简便使用jQuery(上)

简便使用jQuery(中)

简便使用jQuery(下)-jQuery自定义插件的编写

1.为什么要使用jQuery?

jQuery最近比较流性，由于其优秀的设计和架构，使得开发更容易和快捷了。以下可以认为是jQuery的有点有参考价值：

 1.jQuery代码的独特写法
 2.jQuery可以和JavaScript共存融合
 3.强大的网页元素操作效率
 4.对浏览器兼容性非常友好和大量的工具集

2.取值和赋值和遍历操作

<script type="text/javascript">
    $(function(){
        //val()没有参数表示获取值，有参数表示设置值
        alert($('input').val());
        $('input').val('Hello jQuery!!!');

        //第一个参数表示元素索引值，第二个参数表示元素对象本身
        $('li').each(function(index,elem){
            $(elem).html(index + 1);
        });
    });
</script>

<input type="button" value="按钮">
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

3.属性操作

<style type="text/css">
    div{width: 50px;height: 50px;background: yellowgreen;padding: 60px;border: 70px solid red;}
    .box1{background: yellow;}
    .box2{background: blue;}
</style>
<script type="text/javascript">        
    $(function(){
        //$('div').addClass('.box1 .box2');//打开浏览器调试工具才能看到
        alert($('.box').width());//width 50
        alert($('.box').innerWidth());//width + padding 50+60+60=170
        alert($('.box').outerWidth());//width + padding + border 50+60+60+70+70=310
    });
</script>

<div class="box">jQuery</div>

4.DOM操作

<style type="text/css">
    body{height: 2000px;}
    div{width: 100px;height: 100px;background: greenyellow;}
    p{background: gray;}
    span{background: seagreen;}
</style>
<script type="text/javascript">

    $(function(){
        $('span').insertBefore($('div'));//对dom节点的剪切移动并非复制
        $('span').remove();//移除span

        //on方法里面还可以调用自定义方法非常方便使用
        $('div').on({
            'click':function() {
                alert('jQuery');
            },

            'mouseover':function(){
                alert('Bootstrap');
            }
        });


        //off方法是阻止某个方法的执行           
        $('div').on('click mouseover',function(){
            alert('jQuery');
            $('div').off('click');
        });


        $(document).click(function(){
            alert( $(window).scrollTop() );//滚动的高度
        });
    });
</script>

<div>jQuery</div>
<p>Bootstrap</p>
<span>HTML5</span>

5.事件细节

<script type="text/javascript">
    $(function(){
        $('#box').click(function(ev){
            //ev：event对象，已经处理过的兼容事件对象 这里的ev相当于JavaScript中的var ev = ev || window.event ;
            //alert(ev.pageX);

            //ev.pageX是相对于文档的
            //clientX是JavaScript原生方法相对于可视区

            //ev.whick:keyCode 键盘事件

            //ev.preventDefault();//阻止默认事件

            //ev.stopPropagation();//阻止冒泡事件

            return false ;//阻止默认事件和冒泡事件
        });
    });
</script>

6.动画（案例）

<style type="text/css">
    body,ul,li,div,a{margin: 0;padding: 0;}
    #menu{margin: 0 auto;}

    #box{width: 120px;height: 36px;background: #ECE8E7;line-height: 36px;text-align: center;}
    #win{width: 120px;height: 100px;}

    a{text-decoration: none;}
    a:hover{background: pink;display: block;}
    ul{width: 120px;background: #F8F8F8;}
    li{list-style: none;height: 36px;line-height: 36px;font-size: 18px;text-align: center;
       border: 1px solid #ECE8E7;color: #888888;}
</style>

<script type="text/javascript">
    $(function(){
        $('#box').hover(function(){
            //$(this).css('background','blue');

            //$('#win').hide();

            //$('#win').fadeOut(1000);
            $('#win').slideDown(1000);

        },function(){
            //$(this).css('background','pink');

            //$('#win').show();

            //$('#win').fadeIn(1000);

            $('#win').slideUp(1000);

        });
    });
</script>

<div id="menu">
    <div id="box">WEB前端开发</div>
    <div id="win">
        <ul>
            <li>
                <a href="#">jQuery</a>
            </li>
            <li>
                <a href="#">JavaScript</a>
            </li>
            <li>
                <a href="#">Bootstrap</a>
            </li>
            <li>
                <a href="#">AngularJS</a>
            </li>
            <li>
                <a href="#">Node JS</a>
            </li>
        </ul>
    </div>
</div>

7.案例：固定的导航栏

思路：当滚动条滚动的时候动态设置导航栏的位置

    <style type="text/css">
        body,div{padding: 0;margin: 0;}
        #box{width: 100%;height: 150px;background: gainsboro;position: absolute;}
    </style>

    <script type="text/javascript">
        /*
            当滚动滚动条的时候顶部导航栏不变
            思路：当触发滚动事件的时候重新计算div的top值
         */
        $(function(){

            $(window).on('resize scroll',function(){
                $('#box').css('left',0);
                $('#box').css('top', $(window).scrollTop());
            });
        });
    </script>
</head>
<body style="height: 2000px;">
    <div id="box"></div>
</body>