jQuery简便使用(中)

1、jQuyery和原生JavaScript加载的区别？

$(function(){});

$(document).ready(function(){});

window.onload = function(){}

/*
    上面的这两种写法是一样的，只是上面一个是下面一个简写
    那么前两个jQuery的写法和原生JavaScript写法和window.onload
    有什么区别吗？jQuery中的两种写法是等待DOM树加载完毕就开始执行
    而window.onload是等待HTML整个页面全部加载完毕后才执行的,理解了这些才能把握好页面加载的时机可以做一些操作。
 */

2、jQuery和JavaScript混合编程的入口？

<style type="text/css">
    div{height: 100px;width: 100px;}
    li{list-style: none;display: block;width: 200px;height: 100px;margin-bottom: 20px;}
</style>
<script type="text/javascript">

    $(function(){
        //document.getElementById(‘box‘) 原生JavaScript中获取元素的方法
        $(‘#box‘).get(0).style.background = ‘blue‘;//jQuery中获取元素的方法和JavaScript混合编程的入口就是get()函数，这一行代码的前半段是用jQuery获取元素，然后使用JavaScript原生方法进行操作

        /*

            get()方法可以实现jQuery和原生JavaScript混用的效果，前提是在get()获取相应的元素之后，获取的元素可以是一个，也可以是多个,同时也可以用数组下标的方式。但是下面的$(‘li‘).length这种写法就不是混合写法了，因为jQuery中有length这个属性，所以要进行区分。
         */
        for(var i = 0 ; i < $(‘li‘).length; i++){
            //$(‘li‘).get(i).style.background = ‘green‘;
            $(‘li‘)[i].style.background = ‘pink‘;
        }
    });
</script>

<div id="box">DIV ONE</div>
<ul>
    <li>HTML5</li>
    <li>jQuery</li>
    <li>Bootstrap</li>
</ul>

3、jQuery数据序列化的两种方式?

现在web开发中最流行的两种数据交换格式是XML和JSON，其实他们是两个标准，规定了互联网上的数据进行交流的格式。下面是jQuery如何对数据怎样进行序列化获取到我们想要的数据格式。

<script type="text/javascript">

    $(function(){  
        //username=JamesGosling&password=jQuery 
        console.log($(‘form‘).serialize());    

        //同时还可以将form中的值转换为JSON格式的数据
        console.log($(‘form‘).serializeArray());

        /*
            [
                [name:‘username‘,value=‘JamesGosling‘],
                [name:‘password‘,value=‘jQuery‘]
            ];
            返回这种JSON格式的数据，等以后学到了Ajax就会发现这种格式的传输格式非常便利。
        */
    });
</script>

<form action="#" method="get">
    用户名:<input type="text" name="username" value="JamesGosling">
    密码:<input type="password" name="password" value="jQuery">
</form>