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]){
}
网友评论