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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。