《锋利的jQuery》一、认识jQuery


title: 《锋利的jQuery》一、认识jQuery
date: 2017-06-13 14:14:24
tags: 锋利的jQuery


window.onload和$(document).ready()

window.onload:必须等网页中所有的内容加载完毕后(包括图片)才能执行,不能同时编写多个。

$(document.ready()):网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完,可以同时编写多个,可以简写为$(function(){})

jQuery对象和DOM对象的转换

jQuery转为DOM对象有两种方法,即[index]get(index)

var box = $('#box')[0];

var box1 = $('#box1').get(0);

DOM转为jQuery对象,只需要用$()把DOM对象包装起来,$()就是一个jQuery对象的制造工厂

var box = document.getElementById('box');

var $box = $(box);

$快捷方式的更改

$是jQuery的快捷方式,为防止冲突,也可以自定义这个快捷方式。

交给其他js库

假如jQuery库在其他库之后引入,在其他库和jQuery库加载完成后就可以使用jQuery.noConflict()将变量$的控制权交给其他js库,如果先引入jQuery就不需要jQuery.noConflict()方法,直接写$即可。

<body>
    <p id="pp">Test-prottype</p>
    <p>Test-jQuery</p>
    <!--引入prototype-->
    <script src="lib/prototype.js"></script>
    <!--引入jQuery-->
    <script src="../jquery1.9.1.min.js"></script>
    <script>
        jQuery.noConflict();   // 将变量$的控制权移交给prototype.js

        jQuery(function(){     // 使用jQuery
            jQuery('p').click(function(){    
                alert( jQuery(this).text() )
            })
        })

        $('pp').style.display = 'none';         // 使用prototype隐藏元素
    </script>
</body>

防止$冲突

第一种方法:想确保jQuery不会与其他库冲突,可以自定义一个快捷方式。

<body>
    <p id="pp">Test-prottype</p>
    <p>Test-jQuery</p>
    <!--引入prototype-->
    <script src="lib/prototype.js"></script>
    <!--引入jQuery-->
    <script src="../jquery1.9.1.min.js"></script>
    <script>
        var $j = jQuery.noConflict();       // 自定义一个快捷方式

        $j(function(){          // 利用刚自定义的快捷方式使用jQuery
            $j('p').click(function(){
                alert($j(this).text());
            })
        })

        $('pp').style.display = 'none';         // 使用prototype隐藏元素
    </script>
</body>

第二种方法:如果不想自定义名称,同时又想避免冲突可以这样。

<body>
    <p id="pp">Test-prottype</p>
    <p>Test-jQuery</p>
    <!--引入prototype-->
    <script src="lib/prototype.js"></script>
    <!--引入jQuery-->
    <script src="../jquery1.9.1.min.js"></script>
    <script>
        jQuery.noConflict();   // 将变量$的控制权移交给prototype.js

        jQuery(function($){     // 将$通过参数传入
            $('p').click(function(){
                alert($(this).text());
            })
        })

         $('pp').style.display = 'none';         // 使用prototype隐藏元素
    </script>
</body>

判断是否获取到了某元素

在原生javascript中通过这样来判断页面中是否有这个元素

if(document.getElementById('tt')){
    document.getElementById('tt').style.color = 'red';
}

在jQuery中因为$()获取的是一个对象,所以不能直接判断这个对象是否存在

if($('#tt')){
    // 这里将永远判断为true,因为jQuery对象一直存在
}

应该这样判断

if($('#tt').length > 0){

}

或者

if($('#tt')[0]){

}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值