jQuery简便使用(上)

浏览数：22 / 时间：2015年06月09日

1.为什么要使用jQuery?

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>取值和遍历</title>
    <script src="../jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //val()没有参数表示获取值，有参数表示设置值
            alert($(‘input‘).val());
            $(‘input‘).val(‘Hello jQuery!!!‘);

            //第一个参数表示元素索引值，第二个参数表示元素对象本身
            $(‘li‘).each(function(index,elem){
                $(elem).html(index + 1);
            });
        });
    </script>
</head>
<body>
    <input type="button" value="按钮">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

3.属性操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>5_jQuery中的属性操作</title>
    <script src="../jquery-1.8.3.js"></script>
    <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>
</head>
<body>
    <div class="box">jQuery</div>
</body>
</html>

4.DOM操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>6_jQuery DOM操作</title>
    <script src="../jquery-1.8.3.js"></script>
    <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>
</head>
<body>
    <div>jQuery</div>
    <p>Bootstrap</p>
    <span>HTML5</span>
</body>
</html>

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.动画（案例）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画</title>
    <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 src="../jquery-1.8.3.js"></script>
    <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>
</head>
<body>
    <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>
</body>
</html>

技术分享

7.案例：固定的导航栏

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style type="text/css">
        body,div{padding: 0;margin: 0;}
        #box{width: 100%;height: 150px;background: gainsboro;position: absolute;}
    </style>
    <script src="../jquery-1.8.3.js"></script>
    <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>
</html>