今天才开始学习锋利的JQuery一书~虽然有点晚，但是不是有句俗话叫只要学习就没有晚么~呵呵~以前对JQ在工作中用到过，但是还不够系统，所有今天开始从头系统的学习下~
HTML5和JQuery一起学~~目前IE10好像还并不支持HTML5,至少我的IE10不支持，所以以下代码都是用GoogleChrome测试的。。。
本文中只列些我觉得有用的东西，还有初学者容易混淆或者遗忘的部分。
1. JQuery中$和JQuery是等价的，当然如果页面还有用的这两个字符的，可以把默认的进行修改，修改代码如下：
var JQ=jQuery.noConflict();
//已经把原有的$替换成JQ
JQ(document).ready(function(){
JQ("div").hide();
});
2. $(document).ready(function() {alert("大家好！);});
也可以简写：$(function(){alert("大家好！");});
3. 记住所有代码必须在$(function(){});下才能执行
4. 记住$(".level1 > a") 和$(".level1 a")是完全不一样的，第一个指只是在.level1 下的child子元素<a>,然而第二种则是指里面所有的后代元素<a>。。。。
1.3.3章节中案例全解析（样式是我自定义的哦）
样式：
.div1{ width:800px; height:500px;background-color:#0FC; margin:0 auto; }
.curent
{ display:block; background-color:#F00;}
.level1
{ background-color:#09C; width:200px;}
JQ书上面的代码：
$(function(){
$(".level2").hide(); //这句是我自己加的，而且是运行必须要的，加载的时候先隐藏所有level2的标签
$(".level1> a").click(function(){
$(this).addClass("curent") //给当前元素添加curent样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("curent") //父元素的同辈元素的子元素<a>移除curent样式
.next().hide(); //他们的下一个元素隐藏
returnfalse;}
);
});
网页中的HTML5代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试JQ</title>
<scriptsrc="JQ/jquery-1.11.2.js"type="text/javascript"></script>
<script src="JQtest.js"type="text/javascript"></script>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>
<div class="div1">
<ul class="menu">
<li class="level1"><a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">格子衬衫</a></li>
<li><a href="#none">条形衬衫</a></li>
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
</ul>
</li>
<li class="level1"><a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">纯棉长裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
</ul>
</li>
<li class="level1"><a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">帽衫</a></li>
<li><a href="#none">圆领卫衣</a></li>
<li><a href="#none">立领卫衣</a></li>
<li><a href="#none">西服式卫衣</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
