JQuery 就是这么简单(一)
首先我解释一下{zj2}的意思和我想达到的效果：
1.很多人都在为学习找教程，但是总是找不到最适合自己，找了换，换了再找，导致白白的浪费了时间。
2.效果：只要有编程基础（asp,php,jsp都成），我可以保证简单得会让你有种想吐的感觉。
OK，切入主题：
准备阶段：
1.首先下载一个jquery-
2.然后在页面内引用<script language=”javascript” type=”text/javascript” src=”jquery-1.3.1.js”></script>
ok，这样就可以开工了，简单吧。
只要是编程语言，学习的{dy}步，是什么？先看看这段文字：
某程序员对书法十分感兴趣，退休后决定在这方面有所建树。于是花重金购买了上等的文房四宝。一日，饭后突生雅兴，磨墨拟纸，点了上好的檀香，颇有王羲之风范，又具颜真卿气势，定神片刻，泼墨挥毫，郑重地写下一行字： hello world！
这段文字的亮点就是Hello World，有些冷哈，那么，学习jquery的话，我们最开始，也用Hello World开启路程。
在经过上面的准备步骤之后，继续写：
<script>
$(function(){
alert(”hello world!”);
document.write(”hello world!”);
});
</script>
然后打开页面，马上弹出提示框，内容为hello world！
然后我在解释一下这段代码的意思：
$(function(){
});
这一段，表示页面刚加载的时候，也就是body onload事件，然后alert()弹出提示框，或者document.write()打印文字内容;
所以，{dy}讲，主要目的，就是入门。
个人发布教程，追求的就是简洁、明了，甚至是来个外行或傻子都能明白的境界。
然后我们在稍微延伸一下。
在body里面，加一个<a>标签，如下：
<a href=”#” id=”test” >jQuery</a>
而<script>中的内容，变成：
<script>
$(function(){
alert(”hello world!”);
document.write(”hello world!”);
$(”#test”).click(function(){
alert(”你点击了这个超链接”);
});
});
</script>
效果：点击超链接，就会弹出提示框。
程序运行流程：
1.页面加载的时候，选中id=”test”的标签，jquery获得某个标签其实和写css选中是一样的。
2.选定之后，会赋予这个超链接点击事件，然后点击时候，执行函数体内的内容，我这里设置的是alert()弹出对话框。
就是这么简单。
其实，如果超链接形式为<a href=”#” class=”test” >jQuery</a>
那么，获得超链接这个标签就是$(”.test”).click()这样了。
简单吧！！！
全文完。
下一篇，为jquery的选择器。
JQuery 就是这么简单(二)
{dy}篇，是最简单的入门教程。
你要问我入门的感觉是什么？我可以告诉你，就像是一颗大树，猛然长出主干，接下来，分支就会不断的伸展，成长。
开讲之前，大家{zh0}手上有一个jquery帮助文档，我放在附件，大家自由下载。
有了文档之后，打开，你就会发现，东西还真不少！
1.核心（不要理会这些没用的东西）
2.选择器（拐杖）
3.属性（走路的开始）
4.筛选（走路的开始）
5.文档处理（这个不怎么重要）
6.CSS（让页面来得更生动些，想要加强前端，这个是重点）
7.事件（确定目标）
8.ajax（安装了消音器的枪）
9.工具（不要理会这些没用的东西）
10.关于（不要理会这些没用的东西）
不急，不要因为多而失去耐心，因为，我们首先会掌握常用的！
{dy}讲，只是让你了解到jquery是如何运作的，而第二讲，根据本人学习的经验来看，只非常重要的基础，有了这个基础之后，就好比之前是需要依靠拐杖来走路，而当你掌握了之后，这个拐杖就不再需要了！
ok，开始巩固我们树的根基！
jquery的选择器。
之前看到好多人问怎么选中这个标签啊什么之类的，是，开始学的时候，我也苦恼过，但现在，不存在了，信手拈来！
一.最基本的选择：这点对于了解css是如何选中标签，优势会很明显，我就不废话了，直接上代码：
html代码：<a href=”#” id=”xiongdilian” class=”jerry”></a>(这里什么a,p,span,h1,h2等等均可，会一举反三是{jd1}没错滴！)
1.通过id来获取标签：$(”#xiongdilian”).click(function(){alert(”点击就弹出”);});
2.通过class来获取标签：$(”.jerry”).mouseover(function(){alert(”鼠标移动就弹出”);});
我这里只谈这2点，这样，返回的就这一个标签的jquery对象，还有其他的，但是用得都比较少，知道了这2点，其他的运用一下就OK了，搞多了会混淆的。
二.最基本的还有一种方式，就是不依靠id或者class命名，也能准确选中。
html代码：
<div class=”xiongdilian”>
<p>aaaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbb</p>
<p>cccccccccccccccc</p>
</div>
1.提问：看到这段代码，是不是会想到，我怎么样才能获得div中的p了？其实很简单
$(”xiongdilian p”)或者$(”.xiongdilian > p”)，这2个，都可以。
具体的js代码：
$(function(){
size = $(”.xiongdilian p”).size();
alert(size);
});
弹出值为3，表示获得了div中3个p元素。
2.拓展：有人会想说，我不要3个，我只要1个，那这时候怎么办了，方法有很多种，我这里就不改html代码了，直接上代码。
$(function(){
wenben = $(”div p:eq(0)”).text();
alert(wenben);
});
看看弹出的是什么值，没错，是aaaaaaaa的p标签，其实方法不止这一个，还有：
wenben = $(”div p:first”).text(); 可能有人会问first是什么意思？我觉得学一些基础的英文，是有必要的，呵呵。
还有人想问，我要获得div中，第2个p标签，这也很简单，上代码：
wenben = $(”div p:eq(1)”).text();
这里，我先解释下一个概念，玩jquery或者其他语言，返回值必须存在！我就不解释这个概念了。
那么，选中标签的时候，其实就是返回了一个或者多个jquery对象。
选中一个的话，那就是单个对象；二个或者多个的话，绝大多数，都是以数组形式返回的。
有了这个概念，我们就看eq(i)，在这里变量值i，其实就相当于数组的下标，从0开始，然后依次绑定选中。
这样，我们就可以循环取出了，代码如下：
size = $(”div p”).size(); //size = 3
for (i=0; i<size; i++){
alert($(”div p:eq(”+i+”)”).text());
}
这样，就循环打印出了获得的值。
这里我们先总结一下我们遇到的属性：eq()属性，size()属性，text()属性。
有基础的童鞋，是不是觉得灰常滴简单了？好了，废话就不多说了，下一步，进入表单的筛选。
其实最最最常用的就是这些，掌握了这些，拐杖就等于丢弃了，接下来就是在地上怕了，但放心，想走或者跑起来，也很快！
三.表单相关，因为网站一些信息的验证是必须的，所以，这点也非掌握不可！
表单控件如下：
<input type=”text” name=”buxili” />
<input type="checkbox" name="xiongdilian" value="baby" checked='checked' />
<input type="checkbox" name="xiongdilian" value="come" />
<input type="checkbox" name="xiongdilian" value="on" />
这里我就举文本框和复选框这两种，因为实质都是一样的。
你可以看到这些控件上都没有什么id或者class，但你也可以加，但我这里主要是想讲控制器中的根据属性值来选定。
选取文本框：$(”input[name='buxili']“)，这样就选中了。
复选框同理：$(”input[name='xiongdilian']“)，这可是一选就是3个哦。
什么？你想选择复选框的时候只选取选中的？这也不难哦。
$(”input[name='xiongdilian']:checked”);
ok，这一讲，我想就此打住了，因为，已经包含了很多知识点了。
学技术，总结是非常重要的，下面我们来总结一下我们运用到了那些方面，那些方面还需要加强！
1.基本的选取：通过id或者class，还有eq()方法。
如果要拓展的话：
:first({dy}个)，:last({zh1}一个)，:not(排除一个)。
:even，:odd。这2个和table或者li结合得比较多，前者是偶数行，后者是奇数行。
:gt(i)，lt(i)。前者是选取大于i的，后者是选取小于i的。
其他的就用得比较少了，知道了行。
2.和表单结合的：通过属性；通过控件的种类；通过表单对象的属性。
通过属性：$(”input[name='xxx']“)获得name值为xxx的控件。
通过控件种类：$(”:checked”)获得所有的复选框；
$(”:radio”)获得所有的单选框。
通过表单对象属性：$(”input:checked”)或者$(”input:selected”)获得选中的值。
本人在学习的过程中走了一些弯路，现在回头看，发现了距离最近到达终点之路，所以提取出重点，还有一些其他的，可以自行根据需要学习。
另外，本人再三强调，在jquery 中，选择器是必须且要熟练掌握的，这样才可事半功倍，宁可在这一个知识点上花费很多时间，也一定要掌握！
因为这个知识点，好比一个树的根基，根延伸在地底的长度和粗壮程度，决定着树的成长粗度和高度！
JQuery 就是这么简单(三)
ok，开始我们的第三讲，讲之前，我们先来看个笑话放松一下心情~
一楼盘开盘，开发商制作大幅广告吸引市民，上述：没有房子，就没有媳妇。于是年末房产行业协会评比大会上，该楼盘开发商荣获“最诚实地产商”。
好滴，有心滴童鞋们看了上一讲之后，不知道掌握了多少哈。
如果掌握滴好的话，我现在就可以恭喜你，你成功了一半哦，也许你会说：are u kidding me? 显然我会说：yes！哈哈，玩笑。
哈哈，不扯了，进入主题。
Jquery的属性
正式开讲之前，也许你遇到过这些问题：
1.怎样通过js获得一个标签里属性的值？
2.怎样给一个标签“动态”添加和去除样式？
3.怎样得到标签的html代码和标签里面的值？
4.怎样得到表单元素的值？
也许有足够经验的人可以简单的写出来，但这里，用jquery，你会发现来得更快，更简单哦。
html代码：
<span class=’jerry’ title=’xiongdilian’>aaaaaaaaaaaaa</span> 同理，可以是a，p，label等标签。
html代码很简单，ok，那我们开始回答之前提到的问题。
1.怎么获得span标签里title的值？
js代码：$(”.xiongdilian”).attr(’title’);
没错，就是这么简单，恭喜你，成功了。
如果我就这里打住，就太对不起人了我觉得，所以，我想拓展一下。
这里的attr()方法，除了获得属性值外，还可以设置属性值。
比如我们从列表页跳转到修改页时，也许有一个字段会有多个状态，那我们写程序的时候，首先显示这个状态，然后在循环出不等于这个状态的其他状态，是不是？这里用js，可以来得更自己一点。
比如，html代码：
<select name=’xxx’ class=’jerry’>
<option value=’0′>aaa</option>
<option value=’1′>bbb</option>
<option value=’2′>ccc</option>
</select>
也就是说，我当前的状态为bbb(value=’1′)，所以，在加载修改页的时候，那显然应该选择中bbb(value=’1′)这个选项了，那么，我们怎么靠jquery实现了？
首先，隐藏一个<lable class=’cls_chen’ title=’1′>
js代码：
size = $(”.jerry option”).size();
for (i=0; i<size; i++){
if ($(”.cls_chen”).atte(”title”)==$(”.jerry option:eq(”+i+”)”).val()){
$(”.jerry option:eq(”+i+”)”).attr(”selected”,”selected”);
}
}
然后在运行，看看选中的是什么？嘿嘿，lable标签里面的title值是动态加载的哦，所以这样也可以实现加载的状态值。
看到这里，那我们就一口气掌握了：获得标签的属性值和设置标签的属性值，是不是很简单了？
那我们在乘火打铁。
2.获得和设置标签的文本值。
也许你在做表单验证时，提交的那一刻，如果用户有一项必填的没有填写，你可以马上做出“友好”动作来提示，而不是弹出一个对话框，是不是有这样的情况，这里，用jquery实现起来，你会发现，太犀利鸟。
html代码：
<p><input type=”text” name=”uname”>
<label class=”cls_uname”></label></p>
<input type=”button” value=”提交”>
js代码：
$(”:button”).click(function(){
if (trim($(”input[name='uname']“).val())==”"){
$(”.cls_uname”).text(”fuck u!用户名必填，ok?”);
}
});
效果是什么了？ 点击就知道了哦。
或者，我们在判断里改成如下代码：
$(”.cls_uname”).html(”<font color=’red’>fuck u!用户名必填，ok?</font>”); 在看看效果，嘿嘿，是不是很方便了？
木有错，不要怀疑自己的眼睛，就系勒么简单。
开讲css时，我们先来看看学到了些什么东西？
val()获得表单的值；attr()获得属性值和设置属性值；text()获得和设置文本；html()获得和设置html代码。
嘿嘿，那么就开始{zh1}一个小知识点，设置css()。
3.设置css和移除属性，这里会配合到css样式的。
css代码：
<style>
.change {color:red;}
</style>
html代码：
<p class=”jerry”>点击我变红色</p>
js代码：
$(”.jerry”).click(function(){
$(this).addClass(”change”);
});
点击得看看，是不是变红色了呢？哈哈，蛮好玩的。
但是，没错，又是这该死的但是，是不是觉得有时候不需要一些样式，要移除的？ok，这就是我们接下来要讲的。
<style>
.jerry{color:red;}
</style>
html代码：
<p class=”jerry”>点击我变红色</p>
js代码：
$(”.jerry”).click(function(){
$(this).removeClass(”jerry”);
});
在点击的看看~是不是就不是红色的了呢？
什么？丫你还不满足？要最开始是黑色，然后点击变成红色，在点击变回黑色，然后不断循环？
好吧，满足你。
<style>
.change {color:red;}
</style>
html代码：
<p>点击我变红色</p>
js代码：
$(”.jerry”).click(function(){
$(this).toggleClass(”change”);
});
效果：开始黑色，点击变红色，在点击变回黑色，如此循环。
我简单的解释一下，最开始p标签是没有任何样式的，在点击之后，js就会自动判断是否有change样式，有就去掉，没有就加上，所以，颜色就是不断在变化的。
是不是很好玩了？
OK，这一讲，就结束了，{zh1}，送一个小例子，我们来用p标签模拟a标签的效果。
css代码：
<style>
.change {color:red; text-decoration:underline;}
</style>
html代码：
<p class=”jerry”>我不是超链接，我是p标签，点击得试试看~</p>
js代码：
<script>
$(function(){
$(”.jerry”).mouseover(function(){
$(this).addClass(”change”);
}).mouseout(function(){
$(this).removeClass(”change”);
}).click(function(){
location.href=”“;
});
});
</script>
下一期，讲解筛选。
JQuery就是这么简单（四）
上一讲我们说的是：jquery的属性，准确来说就是得到标签的属性值和设置标签的属性值，不难吧。
那么这一讲，我要说的是：jquery的筛选。
其实说实话，jquery的筛选这一块，在我个人的实际运用中，只占非常小的部分，也就是说在实际运用的过程当中，很少用到，或者有很多东西都作用不大，但我还是会把重点提取出来，把用得频繁的介绍一下，然后大家在根据兴趣学习其他的。
这一章一共有三个知识点：过滤，查找，串联。
一.过滤
这个知识点里面，常用并且经常用的有，eq()，hasClass()，not()就这3个，至于其他的，建议如果需要，就直接查手册；
eq()这一个嘛，前些章已经讲过了，就不重复了，介绍下中文意思：按索引值选取标签。
hasClass()这个有必要了解一下，因为有时候可以当判断用，而jquery里面，选中返回值为bolean值，非常少。
html代码：
<p>aaaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbbb</p>
<input type=”button” value=”标签p的class值为chen就会变红” />
js代码：
$(function(){
$(”:button”).click(function(){
size = $(”p”).size();
for (i=0; i<size; i++){
if ($(”p:eq(”+i+”)”).hasClass(”xxx”)){
$(”p:eq(”+i+”)”).css(”color”,”red”);
}
}
});
});
效果就是：aaaaaaaaaa变成了红色。
not()，这里是一个方法，和jquery选择器里的:not区别的，大家可以自行操作看一下区别。
html代码：
<p>aaaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbbb</p>
<p>cccccccccccccccc</p>
<p>dddddddddddddddd</p>
<input type=”button” value=”除了{dy}个不变红，其他都变红” />
js代码：
$(function(){
$(”:button”).click(function(){
$(”p”).not(”:first”).css(”color”,”red”);
});
});
效果：{dy}个不变红，其他都变红。
二.查找
这里面，个人用过的有：children()，parent()，next()，prev()。
children()，中文意思是：下一代，子级。
html代码：
<p>aaaaaaaaaaaaaaaa</p>
<div>
<p>bbbbbbbbbbbbbbbb</p>
</div>
<p>cccccccccccccccc</p>
<input type=”button” value=”点我获得第二个p标签的值” />
js代码：
$(”:button”).click(function(){
alert($(”.xxx”).children().text());
});
parent()，中文意思是：上一代，父级。
可能用通过tr来获得table，或者通过li获得ul会运用到这一个。
html代码：
<ul title=”你得到了”>
<li>aaaaaaaaaaaa</li>
<li>bbbbbbbbbbbb</li>
</ul>
<input type=”button” value=”获得ul的title值” />
js代码：
$(”:button”).click(function(){
title = $(”li”).parent().attr(”title”);
alert(title);
});
同理next()和prev()方法，前者是得到下一个，后者是得到上一个。
三.串联
这个说实话，里面的方法我没用过，所以不多做评价。
{zh1}讲一下第二个知识点当中的find()，也许会用到哦。
html代码：
<p><span>aaaaaaaaaa</span>bbbbbbbbbbbbbbbbbb<strong>cccccccccccc</strong></p>
<input type=”button” value=”点击得到aaaa” />
js代码：
$(”:button”).click(function(){
text = $(”p”).find(”strong”).text();
alert(text);
});
改变find()方法里面的标签值，就会得到不一样的文本，谁试谁知道撒。
全文完，下一篇讲：jquery的事件，先跳过文档处理和css的部分。
JQuery就是这么简单（五）
今天这一讲，就是：jquery事件。
首先我想声明一点，这一讲里面，如果是想做出jquery相关高级效果，有一些知识点只务必要熟悉的，但就我个人情况而言，主要是运用这些事情来处理程序相关的事情，所以一些深层次的东西，希望大家有运用地方，自己尝试一下。
一.页面载入
$(document).ready(function(){
});
上面的这一段代码，其实就是等于
$(function(){
});
指的就是页面刚加载的时候，需要为标签绑定些什么事件，或者需要处理一些什么程序的问题，都可以包含在函数体当中，如果是有新的函数，当然可以在之外声明。
二.事件
我们来了解一下javascript的事件名称在jquery里面的写法
blur()—-失去焦点事件
click()—-点击事件
dblclick()—-双击事件
focus()—-获得焦点事件
keydown()—-键盘按下事件
keypress()—-键盘点击事件
keyup()—-键盘松开事件
mousedown()—-鼠标在目标上点下事件
mousemove()—-鼠标在目标上移动事件
mouseout()—-鼠标移出目标事件
mouseover()—-鼠标移出目前事件
mouseup()—-鼠标在目标上点击之后抬起事件
主要就是这些吧，其他的我个人运用得比较少，所以个人推荐了解一下其他的。
这里我就不写代码演示了，主要讲一下事件这个概念：事件，其实就是通过一定的动作，而触发的。就是这么简单！
三.事件切换（这一点很好玩）
这里就讲一个hover()事件，另外一个我用得非常少。
html代码：
<p>其实我是p，但是我可以做到a的移进移出效果</p>
js代码：
<script>
$(function(){
$(”p”).hover(
function (){
$(this).css(”text-decoration”,”underline”);
$(this).css(”color”,”red”);
},
function(){
$(this).css(”text-decoration”,”none”);
$(this).css(”color”,”black”);
}
);
});
</script>
这样标签a的效果就模拟出来了。
其实还有两点：事件处理，还有事件委派这2个知识点，大家可以直接复制里面的代码进行实验，因为我基本上就没用过这几个，建议了解即可。
是不是感觉这一章的知识点讲得太少了不过瘾？嘿嘿，没事，下面我在介绍一个关键字：事件冒泡。你们以后{jd1}会遇到的。
大家可以参考这一篇文章(附源码的)了解一下，为以后遇到这类似的问题，就可以顺利处理了。
稍后发布jquery封装的动态效果，你就会发现用jquery做动态效果是如此简单。
JQuery就是这么简单（六）
这一章的知识点包括：基本的动态效果，滑动，淡出淡入，自定义，设置。
这一讲会比较好玩一点哦。
一.基本的动态效果
show()和hide()。
css代码：
.change {background-color:#80D6FF;}
html代码：
<table align=”center” border=”1″>
<tr align=”center”><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
<tr align=”center”><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td></tr>
<tr align=”center”><td>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</td></tr>
</table>
js代码：
$(”.tb tr”).mouseover(function(){
$(this).addClass(”change”);
}).mouseout(function(){
$(this).removeClass(”change”);
});
就可以实现鼠标移动到表格的一行上，背景色会变的效果了，that’s very easy。
至于toggle()方法，这个我就用得比较少，看了一下他的那个示例，应该会有用到的地方，因为个人没怎么用过，所以自己可以尝试一下，很简单的，以后感觉有需要，就看一看。
二.滑动
介绍我就不多说了，直接上代码。
html代码：
<p>鼠标移动上来</p>
<span style=”display:none;”>鼠标移动过来就显示，移出就消失。</span>
js代码：
$(function(){
$(”p”).mouseover(function(){
$(”span”).slideDown(”fast”);
}).mouseout(function(){
$(”span”).slideUp(”fast”);
});
});
效果就如p标签里面的内容啦，至于slideToggle()这东西，我也没用过，不说实话，jquery封装了这些效果，是真的很省力，你觉得了？
三.淡出淡入
这一点的话，可以参照第二点，因为形式和实质是一样的，我就不上代码了，但大家一定要试一试，动手能力要强。
四.自定义动画
主要就是一个animate()和stop()方法，这两点我之前压根就没接触过，但是目前，看了一下，然后找了例子，然后在解析一下。
css代码：
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background:#93C9FF; cursor: pointer;}
html代码：
<input type=”button” id=”go” value=”Go” /> <input type=”button” id=”stop” value=”stop” />
<div id=”panel”></div>
<div>bbb</div>
js代码：
$(function(){
$(”#go”).click(function(){
$(”#panel”).animate({left:”400px”,top:”400px”},3000);
});
$(”#stop”).click(function(){
$(”#panel”).stop();
});
});
这里具体解释一下这个效果，首先有2个按钮，是引发事件用的，然后，有一个div容器，给这个div容器加样式，其中有一个重点，就是相对定位！
因为我在做的过程当中，发现没有这个相对定位它压根就不移动，但加上之后，就成了。
并且这里的相对定位，指的就是相对于整个页面定位，并且在移动时，可以无视其他div元素(bbb)没有受影响移动。
像这样的效果，可以做出<marquee >标签的效果，但是具体能控制到什么程度，我就没有研究啦。
因为这些都是属于非常前端的效果了，而我用jquery主要只是处理程序上的事件，所以…….有兴趣可以继续深入哦
下一篇，就是给我们的枪安上消音器的时刻了：jquery的ajax
JQuery就是这么简单（七）
OK，直接进入主题。
我们要实现的效果：在用户文本框失去焦点时，判断用户名是否重复。
html代码：
<input type=”text” name=”u_name” /> <input type=”button” class=”check_user” value=”判断用户名是否重复” />
js代码：
$(function(){
$(”.check_user”).click(function(){ //事件可以是blur()，失去焦点，因为我不是在自己的电脑上，所以就写一个点击事件。
uname = $(”input[name='u_name']“).val();
$.ajax({
type:”post”,
,
success:function(result){
if (result==”1″){
alert(”该用户名不可以用”);
} else {
alert(”该用户名可以用”);
}
}
});
});
});
上面那个页面{zh0}是动态页，在同级目录下新建一个check_user.php页面。
php代码：
<?php
$uname = $_GET['uname'];
//这里就可以写一些sql代码，按照$uname去数据库查是否有记录，下面就判断是否重复了
if ($uname==”admin”){
echo 1;
} else {
echo 0;
}
?>
ok，就是这么简单啦，不复杂的，流程都是这样子的，照搬就成了。
