一、jQuery与DOM必须分清的几个知识点
1.window.onload与$(documnet).ready()的区别
window.onload只能调用一次,必须等待网页中所有内容加载完毕后才能执行
window.onload = fuction(){
alert("test");
};
window.onload = fuction(){
alert("test2");
};
只能输出一个test信息的提示框
而Jquery中的 (documnet).ready()方法能够调用多次,网页中所有DOM结构绘制完毕后就可以执行,可能DOM元素关联的东西并没有加载完毕,简写: (function(){});
$(document).ready(function(){
alert("hello");
});
$(document).ready(function(){
alert("hello2");
});
以上代码都能执行,输出两个消息提示框
2.一个简单的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
<!--定义id选择器,菜单,宽度300px-->
#menu
{
width : 300px;
}
<!--定义类选择器,菜单目录,背景颜色,字体颜色白色,在该区域时鼠标指针形状-->
.has_children{
background : #555;
color : #fff;
cursor : pointer;
}
<!--定义类选择器高亮:字体颜色白色,背景颜色绿色-->
.highlight{
color : #fff;
background : green;
}
<!--定义标签选择器div,padding内边距为0,与上一层标签外边距10px-->
div {
padding: 0px;
margin: 10px;
}
<!--定义联合标签选择器 div标签 下的a标签属性:背景颜色,不显示,在左边符上,宽度300px-->
div a {
background: #888;
display: none;
float: left;
width: 300px;
}
</style>
</head>
<body>
<form action="">
<p>
<label>Username:<input name="search" type="text" id="search"/></label>
</p>
<script type="text/javascript">
document.getElementById('search').focus()
</script>
<script src="jquery-1.11.3.js" type="text/javascript">
</script>
</form>
<div id="menu">
<div class="has_children">
<span>第1章-认识Jquery</span>
<a>1.1-JavaScript和JavaScript库</a>
</div>
</div>
</body>
</html>
获取id为foo的元素内的html代码:
jquery中获取的方式
$(“#foo”).html()
DOM中获取的方式
var domObj = document.getElementById(“id”);
var ObjHtml = domObj.innerHTML;
3.如何让jQuery对象与DOM对象相互转换
3.1jquery对象转换为DOM对象
var $cr = $("#cr");
var cr = $cr.get(0); //方式一
var cr = $cr[0];//方式二
3.2DOM对象转换为jquery对象
var cr = document.getElementById("cr");
var $cr = $(cr);
4.注意
jquery对象不能调用DOM对象的方法,DOM对象的方法不能调用jquery对象的方法
平时用到的JQuery对象都是通过$()函数制造出来的,这个函数就是一个jquery对象的制造工厂。
二、解决jQuery库和其他库的冲突
分情况解决冲突,一个是jQuery库在其他库之前声明,一个是jQuery库在其他库之后声明
1.JQuey库在其他库之后导入
关键代码:解决方案一
<script src="prototype-1.6.0.3.js" type="text/javascript">
</script>
<script src="jquery-1.11.3.js" type="text/javascript">
</script>
jQuery.noConflict();//将变量$的控制权移交给prototype.js
jQuery(function(){//使用jQuery
jQuery("p").click(function(){
alert(jQuery(this).text());
})
})
$("pp").style.display = 'none';//使用prototype
<p>test---jquery</p>
<p id="pp">test-prototype</p>
关键代码:解决方案二:自定义一个快捷方式
var $j = jQuery.noConflict();//自定义一个快捷方式
如果不想给JQuery自定义这些备用名称,还想使用
而不管其他库
()方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法:
方法一
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){//使用jQuery设定页面加载时执行的函数
$("p").click(function(){//在函数内部继续使用$()方法
alert($(this).text());
})
})
$("pp").style.display = 'none';//使用prototype
方法二
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){//匿名函数内部的$均为jQuery
$("p").click(function(){//继续使用$()方法
alert($(this).text());
});
});
})(jQuery);$("pp").style.display = 'none';//使用prototype
应该是最理想的方法,因为可以通过改变最少的代码来实现全面的兼容性
2.jQuery库在其他库之前导入
无需调用noConflict()函数
jQuery(function(){//直接使用jQuery
jQuery("p").click(function(){
alert(jQuery(this).text());
})
})
$("pp").style.display = 'none';//使用prototype
3.下载插件地址
xtnd.us/dreamweaver/jquery,下载jquery插件