1.下载
下载地址:http://jquery.com/download/
jquery-3.2.1.js——用于开发和学习(229K)
jquery-3.2.1.min.js——用于项目和产品(31K)
2.引入jQuery.js
<head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.2.1.js"></script> <script src="js/jquery-3.2.1.min.js"></script> </head>
3.编写jQuery代码
<script type="text/jscript"> $(document).ready(function(){ <!--语句体--> alert("0000000001"); }); <!--简写--> $(function(){ <!--语句体--> alert("0000000002"); }); </script>
结论:网页中所有DOM绘制完毕后执行,可能元素关联的东西并没有加载完,前后同时输出
4.DOM对象——Document Object Model,文档对象模型。DOM树,用来构建一个基本网页。
<h3>\<p>/<ul><li>子节点都是DOM元素节点。
获得DOM对象:
var domObj=document.getElementById("id");
使用JavaScript中的属性——innerHTML:
var ObjHTML=domObj.innerHTML;
5.jQuery对象——通过jQuery包装DOM对象后产生的对象。.jQuery对象只能使用.jQuery对象方法。
获取id为foo的元素内的html代码。html()是.jQuery方法,如下:
$("#foo").html();
等同于
document.getElementById("foo").innerHTML;
6.jQuery对象和DOM对象的相互转换
如果获取的对象是——jQuery对象,那么在变量前加$.
var $variable=jQuery对象;
如果获取的对象是——DOM对象
var variable=DOM对象;
(1)jQuery对象——转——DOM对象
方法一:jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象。
var $cr=$("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checked是否被选中了
方法一:jQuery方法,通过get(index)方法得到相应的DOM对象。
var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checked是否被选中了
(2)DOM对象——转——jQuery对象
方法:只要用$()把DOM对象包装起来,就可以获得一个jQuery对象;方式为$(DOM对象)
var cr=docment.getElentById("cr"); //DOM对象 var $cr=$(cr); //jQuery对象
1.5 jQuery库和其它库的冲突
(1)jQuery库在其他库之后导入
方法一:在jQuery第一行,调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库;
方法二:用其它快捷字母代替$,自定义一个快捷方式。
语法: var 其它快捷字母代替$=jQuery.noConflict();
var $j=jQuery.noConflict(); //自定义一个快捷方式 $j(function(){ //使用jQuery,利用自定义快捷方式——$j $j("p").click(function(){ alert($j(this).text()); }) }) $("pp").style.display='none'; //使用prototype.js隐藏元素
可以自定义备用名称,如jq\$j\awesomequery等。
问题:如果不想给jQuery自定义名称,还想使用$而不管其他库的$()方法,同时又不想与其它库相冲突。
解决方法一:
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function($){ //使用jQuery设定页面加载时执行的函数 $("p").click(function(){ //在函数内部继续使用$()方法 alert($(this).text()); }) }) $("pp").style.display='none'; //使用prototype.js隐藏元素
解决方法二:
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js (function($){ //定义匿名函数并设置形参为$ $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){ //继续使用$()方法 alert($(this).text()); }) }) })(jQuery); //执行匿名函数且传递实参jQuery $("pp").style.display='none'; //使用prototype.js隐藏元素
(2)jQuery库在其他库之前导入
可以直接使用“jQuery”来做一些jQuery工作。同时使用$()方法作为其他库的快捷方式,无需调用jQuery.noConflict()函数。如下:
jQuery(function(){ //直接使用jQuery,无需调用jQuery.noConflict()函数 jQuery("p").click(function(){ alert(jQuery(this).text()); }) }) $("pp").style.display='none'; //使用prototype.js隐藏元素