第一章 认识jQuery

1.1.1 jQuery 能帮我做什么

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transaction//EN" "http://www.w3.org/TR/xhtml1/DTD/>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery/jquery-2.2.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  console.log('aacc');
  alert("Hi,您好!");
  }
 )
</script>
<title>上机练习</title>
</head>
<body>
'aaa'
</body>
</html>


在jQuery 库中,$是jQuery的别名  $()等效于jQuery()


jQuery()函数是jQuery库文件的接口函数,所有jQuery 操作都必须从该接口函数切入。

jQuery()函数相当于页面初始化事件处理函数,当页面加载完毕,

会执行jQuery()函数包含的函数,




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transaction//EN" "http://www.w3.org/TR/xhtml1/DTD/>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery/jquery-2.2.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  console.log('aacc');
  // 第1行代码,在文档中添加4个按钮
  $('<input type="button" value="第1个按钮"/>
    <input type="button" value="第2个按钮"/>
	<input type="button" value="删除按钮事件处理函数"/>
	<input type="button" value="隐藏或显示文本"/>'>.appendTo($('body'));
  //第2行代码,分别选中4个按钮,并为它们绑定不同的事件处理函数
  $('input[type="button"]').eq(0).click(function(){
      alert('是第一个按钮的事件处理函数');
}).end().eq(1).click(function(){
   $('input[type="button"]:eq(0)').trigger('click');
   }).end().eq(2).click(function(){
    $('input[type="button"]:eq(0)').unbind('click');
	}).end().eq(3)
	.toggle(function(){
	$('pannel').hide('slow');
	},function(){
	$('.pannel').show('show');
	});
	});
  alert("Hi,您好!");
  }
 )
</script>
<title>上机练习</title>
</head>
<body>
'aaa'
</body>
</html>




4.在页面中引入jQuery:

本书将jquery-1.3.1.js放在目录scripts下,在所提供的jQuery例子中为了方便调试,引用时使用的相当路径。

在实际项目中,读者可以根据实际需要调整jQuery库路径

<html>
  <head>
   <!-- 在head标签年内引入jQuery-->
   <script src="./scripts/jquery-2.2.2.min.js" type="text/javascript"></script>
   </head>
   <body>
</html>


1.3.2  编写简单的jQuery代码:

在开始编写第1个jQuery 程序之前,首先应该明确一点,在jQuery库中,

$就是jQuery 的一个简写形式,

例如$("#foo")和jQuery("#foo")是等价的,

$.ajax 和jQuery.ajax 是等价的




<html>
  <head>
   <!-- 在head标签年内引入jQuery-->
   <script src="./scripts/jquery-2.2.2.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(document).ready(function(){
   alert("Hello World!");
   });
   </script>
   </head>
   <body>
</html>




<html>
  <head>
   <!-- 在head标签年内引入jQuery-->
   <script src="./scripts/jquery-2.2.2.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   windows.onload=function(){
   alert("Hello World!")
   };
   </script>
   </head>
   <body>
</html>


执行时机:

必须等待网页中所有的内容加载完毕后(包括图片)才能执行

1.3.3 jQuery代码风格

1. 链式操作风格:

以一个实际项目中的代码为例,这是一个导航栏,HTML代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"/>
<title>1-5-1</title>
<style type="text/css">
.has_children{background:#555;color :#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0;}
diva{background:#888;display:none;float:left;width:300px;}
</style>
</head>
<body>
<div id="menu">
 <div class="has_children">
 <span>第1章-认识jQuery</span>
 <a>1.1-JavaScript和JavaScript库</a>
 <a>1.2-加入jQuery</a>
 <a>1.3-编写简单jQuery代码</a>
 <a>1.4-jQuery对象和DOM对象</a>
 <a>1.5-解决jQeury和其他库的冲突</a>
 <a>1.6-jQuery开发工具和插件</a>
 <a>1.7-小结</a>
 </div>
 <div class="has_children">
 <span>第2章-jQuery选择器</span>
 <a>2.1-jQuery选择器是什么</a>
 <a>2.2-jQuery选择器的优势</a>
 <a>2.3-jQuery选择器</a>
 <a>2.4-应用jQuery改写示例</a>
 <a>2.5-选择器中的一些注意事项</a>
 <a>2.6-案例研究---类似淘宝网品牌列表的效果</a>
 <a>2.7-还有其他选择器么?</a>
 <a>2.8-下结</a>
 </div>
 
 <div class="has_children">
 <span>第3章-jQuery中的DOM操作</span>
 <a>3.1-DOM操作的分类</a>
 <a>3.2-jQuery中的DOM操作</a>
 <a>3.3-案例研究---某网站超链接和图片提示效果</a>
 <a>3.4-下结</a>
</div>
</div>
</body>
</html>
 
 
代码执行效果如图1-10所示:

项目需求是做一个导航栏,单击不同的章节称链接,显示相应的内容,

同时高亮显示当前选择的章节。

选择jQuery来实现这个导航栏效果,编写的代码片段如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"/>
<title>1-5-1</title>
<style type="text/css">
.has_children{background:#555;color :#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0;}
div a{background:#888;display:none;float:left;width:300px;}
</style>
</head>
<body>
<div id="menu">
 <div class="has_children">
 <span>第1章-认识jQuery</span>
 <a>1.1-JavaScript和JavaScript库</a>
 <a>1.2-加入jQuery</a>
 <a>1.3-编写简单jQuery代码</a>
 <a>1.4-jQuery对象和DOM对象</a>
 <a>1.5-解决jQeury和其他库的冲突</a>
 <a>1.6-jQuery开发工具和插件</a>
 <a>1.7-小结</a>
 </div>
 <div class="has_children">
 <span>第2章-jQuery选择器</span>
 <a>2.1-jQuery选择器是什么</a>
 <a>2.2-jQuery选择器的优势</a>
 <a>2.3-jQuery选择器</a>
 <a>2.4-应用jQuery改写示例</a>
 <a>2.5-选择器中的一些注意事项</a>
 <a>2.6-案例研究---类似淘宝网品牌列表的效果</a>
 <a>2.7-还有其他选择器么?</a>
 <a>2.8-下结</a>
 </div>
 
 <div class="has_children">
 <span>第3章-jQuery中的DOM操作</span>
 <a>3.1-DOM操作的分类</a>
 <a>3.2-jQuery中的DOM操作</a>
 <a>3.3-案例研究---某网站超链接和图片提示效果</a>
 <a>3.4-下结</a>
</div>
</div>
<script type="text/javascript" src="./scripts/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a5.js"></script>
</body>
</html>


node2:/var/www/html#cat a5.js
$(".has_children").click(function(){
    $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
    });


代码格式调整后,易读性好了很多

也许读者看了上面的代码还是不明白其中的要领,这里总结4种情况:

1) 对于同一个对象不超过3个操作的,可以直接写成一行。代码如下:

1.4 jQuery对象和DOM对象

第1次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是DOM对象,因此需要重点了解

jQuery对象和DOM对象以及它们之间的关系:

1.DOM 对象

DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成一颗树。

下面来构建一个非常基本的网页,网页代码如下:

<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
   <title>aaabbb</title>
 </head>
 <body>
    <h3>例子</h3>
	<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
	<ul>
	     <li>苹果</li>
		 <li>橘子</li>
		 <li>菠萝</li>
	</ul>
 </body>
 </html>

在这颗DOM树中,<h3>,<p>,<ul>以及<ul>的3个<li>子节点都是DOM元素节点

<body>
    <h3>例子</h3>
	<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
	<ul>
	     <li>苹果</li>
		 <li>橘子</li>
		 <li>菠萝</li>
	</ul>
 </body>
 
 
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
   <title>aaabbb</title>
 </head>
 <body>
    <h3>例子</h3>
	<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
	<ul>
	     <li>苹果</li>
		 <li>橘子</li>
		 <li>菠萝</li>
	</ul>
 </body>
 </html>
 
 可以通过JavaScript 中的getElementsByTagName或者getElementById来获取元素节点。
 
 像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法,示例如下:
 
 node2:/var/www/html#cat a7.html 
<html>    
<body>    
<div id='kj'>科技</div>    
<div id='cs'>测试</div>    
<div id='tl'>泰隆</div>    
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a7.js"></script>    
</body>    
</html>  
 
node2:/var/www/html#cat a7.js
var domObj = document.getElementById("id");//获得DOM对象    
console.log('aaaaaaa');
console.log(domObj);    
/*var ObjHTML= domObj.innerHTML;    
console.log(ObjHTML);   */



node2:/var/www/html#cat a8.js 
var domObj = document.getElementsByTagName("div");//获得DOM对象    
var ObjHTML= domObj.innerHTML;    
console.log(ObjHTML); 

node2:/var/www/html#cat a8.html 
<html>    
<body>    
<div id='kj'>科技</div>    
<div id='cs'>测试</div>    
<div id='tl'>泰隆</div>    
<div >aaaa</div>    
<div >bbbb</div>    
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a8.js"></script>    
</body>    
</html>   
node2:/var/www/html#
node2:/var/www/html#cat a8.js
var domObj = document.getElementsByTagName("div");//获得DOM对象    
var ObjHTML= domObj.innerHTML;    
console.log(ObjHTML); 


2.jQuery对象:

jQuery对象就是通过jQuery 包装DOM对象后产生的对象

jQuery 对象是jQuery独有的,如果一个对象是jQuery对象,那么久可以使用jQuery 里的方法。例如:


$("#foo").html();// 获取id为foo的元素内的html代码. .html()是jQuery的方法:


node2:/var/www/html#cat a7.html 
<html>    
<body>    
<div id='kj'>科技</div>    
<div id='cs'>测试</div>    
<div id='tl'>泰隆</div>    
<div id='foo'>泰隆</div>    
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a7.js"></script>    
</body>    
</html> 


node2:/var/www/html#cat a7.js
var aa=$("#cs").html(); //获取id为foo的元素内的html代码。.html()是jQuery里的方法
console.log('aaaaaaa');
console.log(aa); 

node2:/var/www/html#cat a7.js
var aa=document.getElementById("kj").innerHTML; //获取id为foo的元素内的html代码。.html()是jQuery里的方法
console.log('aaaaaaa');
console.log(aa);    


在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML  和$("#id").checked之而立的写法都是错误的


可以用$("#id").html()和$("#id").attr("checked") 之类的jQuery 方法来代替


1.4.2 jQuery对象和DOM对象的相互转换:

在讨论jQuery对象和DOM对象的相互转换之前,先约定好定义变量的风格。

如果获取的对象是jQuery对象,那么在变量前面加上$,例如:


node2:/var/www/html#cat a7.html 
<html>    
<body>    
<div id='kj'>科技</div>    
<div id='cs'>测试</div>    
<div id='tl'>泰隆</div>    
<div id='foo'>泰隆</div>    

<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a7.js"></script>    
</body>    
</html>   

node2:/var/www/html#cat a7.js
var $aa=$("#cs").html();
console.log($aa)


node2:/var/www/html#cat a7.js
var aa=document.getElementById("kj").innerHTML; //获取id为foo的元素内的html代码。.html()是jQuery里的方法
console.log('aaaaaaa');
console.log(aa); 

1.jQuery 对象转成DOM对象

jQuery 对象不能使用DOM中的方法,但如果对jQuery 对象所提供的方法不熟悉


jQuery 提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)

1)jQuery 对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象

jQuery 代码如下:

node2:/var/www/html#cat a7.html 
<html>    
<body>    
<div id='kj'>科技</div>    
<div id='cs'>测试</div>    
<div id='tl'>泰隆</div>    
<div id='foo'>泰隆</div>    

<script type="text/javascript" src="jquery-2.2.2.min.js"></script>    
<script type="text/javascript" src="a7.js"></script>    
</body>    
</html>   


node2:/var/www/html#cat a7.js
var $aa=$("#cs");
console.log($aa);


node2:/var/www/html#cat a7.js
var $aa=$("#cs");
console.log($aa);

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。

方式为$(DOM对象)

node2:/var/www/html#cat a7.js
var aa=document.getElementById("id");
console.log(aa);



node2:/var/www/html#cat a7.js
var aa=document.getElementById("id");
console.log(aa);



node2:/var/www/html#cat a7.js
var $aa=$(cs);                       //jQuery对象
console.log($aa);

转换后,可以任意使用jQuery中的方法

1.4.3 实例研究

下面举个简单的例子,来加深对jQuery 对象和DOM对象的理解

有些论坛在用户注册的时候,必须先要同意论坛的规章制度

编写一段简单的代码来实现这个功能,新建一个空白的页面,然后添加以下HTML代码:

<input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label>



然后编写JavaScript部分,前面讲过,没有特殊声明,jQuery库是默认导入的

$(document).ready(function(){         //等待dom元素加载完毕
          var $cr=$("#cr");           // jQuery对象和DOM对象
		  var cr=$cr[0];               //DOM对象,或者$cr.get(0)
		  $cr.click(function(){
		     if (cr.checked){  //DOM方式判断
			  alert("感谢你的支持!你可以继续操作!");
			  }
			  })
			  })
			               

换一种方式,使用jQuery 中的方法来判断选项是否被选中,代码如下:

node2:/var/www/html#cat a9.js
$(document).ready(function(){      //等待dom元素加载完毕
   var $cr=$("#cr");
   $cr.click(function(){
    if($cr.is(":checked")){       //jQuery 方式判断
        alert("感谢你的支持!你可以继续操作!");
})

node2:/var/www/html#cat a9.js
$(document).ready(function(){      //等待dom元素加载完毕
   var $cr=$("#cr");
   $cr.click(function(){
    if($cr.is(":checked")){       //jQuery 方式判断
        alert("感谢你的支持!你可以继续操作!");
})

1.5  解决jQeury和其他库的冲突:

默认情况下,jQuery用$作为自身的快捷方式

在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来

将变量$的控制权移交给其他JavaScript库 。
相关文章
相关标签/搜索