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.οnlοad=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库 。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
