jQuery（1）

来源：互联网发布：系统网络架构图编辑：程序博客网时间：2024/04/25 17:21

jQuery 是什么?

jQuery是一个优秀的javaScript库

为什么要使用jQuery?

语法简洁和夸平台的兼容性这两个方面 jQuery做得非常好

轻量级

强大的选择器

出色的DOM封装

可靠的处理机制

完善的Ajax

等

jQuery适合那里使用？

<javaScrpit>脚本代码中

（1）引用jQuery库

当然你下载的什么版本的库就copy在WebRoot目录下自己再拖进html页面中

编写第一个jQuery程序

$(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>

</head>

#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>

<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>

</div>

<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>

</div>

<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>

</div>

</body>

$(".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>

★.jQuery转成DOM 代码如下

★.

解决和其他库冲突的问题用到的时候再看 jQuery.pdf第一17面

书我会发在博客上的你们下载不要积分的