首页 > 代码库 > jQuery应用

jQuery应用


1.连写
        对于发生在同一个jQuery对象上的一组动作,可以直接连写而无需重复获取对象。
2.库导入
        <Script src="http://www.mamicode.com/jquery.js" type="text/javascript"></Script>
3.使用
        如:在页面载入后弹出一个对话框
        <Script type="text/javascript">
            $(    function(){
                    alert("Hello world!");
                }
            )
        </Script>
        
4.jQuery对象与Dom对象是不同的。所以jQuery对象的属性方法不能被Dom对象直接调用,反之亦然。
        jQuery是一组相同Dom对象的数组。将jQuery对象转换为Dom对象,可以:
        1>使用数组下标
            $(    function(){
                    var $li = $("li");
                    var li = $li[0];
                    alert(li.innerHtml);
                }
            )
            
        2>使用jQuery对象的Get()方法,传递一个索引值
            $(    function(){
                    var $li = $("li");
                    var li = $li.get(0);
                    alert(li.innerHtml);
                }
            )
            
        将一个Dom对象转为jQuery对象:
        1>直接使用$()函数
            $(    function(){
                    var li = document.getElementById("li");
                    var $li = $( li[0] );
                    alert($li.html());
                }
            )
        
        2>直接把Dom数组传递给$()
            $(    function(){
                    var li = document.getElementById("li");
                    var $li = $( li );
                    alert($li.html());
                }
            )
        注:jQuery是一个类数组,而不数组类型的数据。
        
5.jQuery.ready与window.Load比较
        1>Load在网页中所有元素加载完才会执行。可能会出现的情况是网页已显示出来,但一部分音频文件未加载完,所以Load事件这里也不执行。
            ready事件在Dom绘制完毕后执行。这时即使有未加载完的音频也会执行。
            ready先于Load执行。只有在网页没有外部文件需要加载的情况下近乎同时执行。
        2>Load只会影响最后一次的事件处理过程
            如:Window.onLoad = function (){
                    alert("1");
                }
                
                Window.onLoad = function (){
                    alert("2");
                }
                
            只有"2"的处理过程被执行
            而,jQuery的ready可被多次执行
                $(    function(){
                        alert("1");
                    }
                )
                
                $(    function(){
                        alert("2");
                    }
                )                
            这样有利于复杂的初始化操作。

jQuery应用