Jquery学习第一天
1、jQuery优点
轻量级，强大的选择器，出色的DOM操作，可靠的事件处理，完善的Ajax，不污染的顶级变量，出色的浏览器兼容，链式操作，隐式迭代，行为层和结构层分离，丰富的插件，完善的文档，开源
2、类型说明
Jquery-*.js完整的版本，主要用于测试和学习开发
Jquery-*.min.js主要用于产品和项目
3、引入jquery开始学习
<script src=”jquery-1.7.2.js” type=”text/javascript”></script>
4、JQuery宗旨
用少量的代码实现复杂的功能
5、先体验一个简单的例子
代码如下：
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
<script src=”jquery-1.7.2.js” type=”text/javascript”></script>
<style>
#menu{ width:200px;}
.has_children{ background:#555;color:#fff;cursor:pointer;}
.highlight{color:#fff; background:green;}
div{ padding:0; margin:10px 0px;}
div a{ background:#888; display:none; float:left; width:200px;}
</style>
<body>
<div id=”menu”>
<div class=”has_children”>
<span>认识Jquery</span>
<a>栏目名称</a>
<a>栏目名称</a>
<a>栏目名称</a>
<a>栏目名称</a>
<a>栏目名称</a>
<a>栏目名称</a>
</div>
<div class=”has_children”>
<span>认识Jquery2</span>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
</div>
<div class=”has_children”>
<span>认识Jquery2</span>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
<a>栏目名称2</a>
</div>
</div>
<script type=”text/javascript” language=”javascript”>
$(“.has_children”).click(function(){
$(this).addClass(“highlight”)
.children(“a”).show().end()
.siblings().removeClass(“highlight”)
.children(“a”).hide();
});
</script>
</body>
PS：其中js代码必须在下部，还有就是如果代码复杂一定要做适量的注释
6、认识JQuery对象和DOM对象
通过javascript的getElementsByTagName或者getElementById得到的元素节点就是DOM对象，而其他都是JQuery对象。
$(“#footer”).html();//这是jquery对象
特别注意：两个对象的方法不要弄混淆了，不可以互用的
7、Jquery对象和dom对象转换
7.1Jquery转换成dom
使用[index]转换：
var $jq=$(“footer”);//jquery对象
Var do=$jq[0]//dom对象
使用get方法
Var do=$jq.get(0);//dom对象
7.2dom转换成jquery
对与dom对象只需要用$()把dom对象包含起来就可以
Var do=document.getElementById(“footer”);//dom对象
Var $jq=$(do);
8、Jquery开发工具
Dreamweaver、aptana、jquerywtp等
腾讯云开发者
