本文详细介绍了jQuery库的优势，包括语法简洁、跨平台兼容性、轻量级特性、强大的选择器、DOM封装、处理机制、Ajax支持等，并通过代码示例展示了如何在JavaScript脚本中引用jQuery库和编写简单的jQuery程序。文章还提供了jQuery对象与DOM对象之间的相互转换方法，以及如何解决与其他库的冲突问题。最后，通过导航栏实例展示了jQuery在实际项目中的应用。
jQuery 是什么?
jQuery是一个优秀的javaScript库
为什么要使用jQuery?
语法简洁和夸平台的兼容性 这两个方面 jQuery做得非常好
轻量级
强大的选择器
出色的DOM封装
可靠的处理机制
完善的Ajax
等
jQuery适合那里使用？
<javaScrpit>脚本代码中
（1）引用jQuery库
当然你下载的什么版本的库就copy在WebRoot目录下 自己再拖进html页面中
编写第一个jQuery程序
<!--<link rel="stylesheet" type="text/css"href="./styles.css">-->
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello jquery");
})
</script>
同等于
window.onload = function(){
alert("hello jQuery");
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
（2）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>columnl.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css"href="./styles.css">-->
</head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../jquery-1.7.1.js"></script>
<style type="text/css">
#menu {
width: 260px;
background-color: white;
}
.has_children {
background: skyblue;color: #fff;cursor:pointer;
}
.highlight {
color: mediumturquoise;
background: mistyrose;
}
div {
padding: 0;
margin: 10px 0;
}
div a {
background: moccasin;
display: none;
float: left;
width: 260px;
}
</style>
<body>
<div id="menu">
<div class="has_children">
<span>第一章-认识jQuery</span>
<a>1.1-javascript和JAVA库</a>
<a>1.2-javascript和JAVA库</a>
<a>1.3-javascript和JAVA库</a>
<a>1.4-javascript和JAVA库</a>
<a>1.5-javascript和JAVA库</a>
<a>1.6-javascript和JAVA库</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第二章-jQuery选择器</span>
<a>2.1-javascript和JAVA库</a>
<a>2.2-javascript和JAVA库</a>
<a>2.3-javascript和JAVA库</a>
<a>2.4-javascript和JAVA库</a>
<a>2.5-javascript和JAVA库</a>
<a>2.6-javascript和JAVA库</a>
<a>2.7-小结</a>
</div>
<div class="has_children">
<span>第三章-jQuery中DOM操作</span>
<a>3.1-javascript和JAVA库</a>
<a>3.2-javascript和JAVA库</a>
<a>3.3-javascript和JAVA库</a>
<a>3.4-javascript和JAVA库</a>
<a>3.5-javascript和JAVA库</a>
<a>3.6-javascript和JAVA库</a>
<a>3.7-小结</a>
</div>
</div>
</body>
<script type="text/javascript">
$(".has_children").click(function(){ //将 .has_children类加载 点击时候调用
$(this).addClass("highlight")//为上面的类 添加样式
.children("a").show(1000) //找到子节点并显示
.end().siblings().removeClass("highlight") //end()返回上次操作 获取兄弟元素 并去除兄弟元素
.children("a").hide(500);//隐藏 兄弟元素下的 <a>元素
});
</script>
</html>
都是我自己敲的导航栏做起来很有意思
————————————————————————————————————————————————————————————————————————————
（3）jQuery对象和dom对象的相互转换
★.dom转成jQuery 代码如下
<script type="text/javascript" src="../WEB-INF/jquery-1.7.1.js"></script>
<script type="text/javascript">
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery 对象
// 转换后可以任意的用jQuery方法
//用过上面的方法可以任意的将DOM对象转成jQuery对象
</script>
★.jQuery转成DOM 代码如下
★.
解决和其他库冲突的问题 用到的时候再看 jQuery.pdf第一17面
书我会发在博客上的你们下载不要积分的
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
