0.前言：
最近学习了一下jQuery,现在总结一下，基本上是入门指导，IDE：WebStorm10.0.4，一些基本的操作和使用，写了一些小例子，现在贴出来，做一个学习的记录，也方便自己以后查看。
1.选择器：
选择器，我认为是jQuery之中非常关键的一个点，因为对于网页页面（HTML文档）之中的元素的控制都是需要使用选择器的，jQuery的选择器可以分为两类，一类是基本选择器，另一类是过滤选择器，过滤选择器在我这次学习之中 的涉及比较少，大多数使用的是基本选择器：
1.基本选择器：
基本选择器又可以分为三类，CSS选择器，层级选择器，表单域选择器，使用较多的也就是CSS选择器，CSS在和jQuery一起使用之后变得更加强大了，这是一个切实的体会。现在就说一下如何选取，标签选择器，例如$("div"),html中的标签，ID选择器，$("#test"),test表示id="test"，类选择器$(".test")，test表示class="test"，通用选择器,$("*")，群组选择器$("selector1,selector2.......selectorN")，层叠选择器：$("form input") ，选择所有的form元素中的input元素 ，$("#main > *") ，选择id值为main的所有的子元素，$("label + input")，选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素，$("#prev ~ div")，同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
2.过滤选择器：
基本过滤选择器： $("tr:first") ，选择所有tr元素的第一个，$("tr:last")，选择所有tr元素的最后一个
2：事件：
jQuery事件现在看来和我们平时所说编程语言里面的事件没有太大的区别（有点像MFC那种），例如你点击了一个按钮或者是某个div区域，那么就会反馈一个除法的事件，通常都是这么写的：$(document).ready(function(){/*处理的函数或者是语句*/});
这句话表示的含义是，当整个页面刷新出来之后，再采取一些动作或者是操作，比如说对id为mybutton的元素点击了之后，想实现一些操作，这样，如下：
<script type="text/javascript" > $(document).ready(function(){//页面完全加载好之后才会有一下的效果！这句话的意思 $("#mybutton").click(function(){ $("#mybutton").css("color","red").css("width","500px"); }); });在没有分离的情况之下，javascript语句都是写在<script></script>标签之中的，CSS文件都是写在<style></style>标签之中，如果是分离的，那么就采用src="/路径/文件名"来引用。另外一个比较有特点的是jQuery的链式风格，如这一句：$("#mybutton").css("color","red").css("width","500px");这种方式一般是对同一个选择出来的元素(element)来进行一连串的顺序操作。就我测试来看，是可以同时在一个语句之中触发多个效果的，例如：
$(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow").css("color","red"); $(".flip").slideDown("slow").css("color","white"); $("#mybutton").slideToggle(200).slideDown(300); });
3：Ajax：
单独的Ajax还没有去研究，jQuery的Ajax自己看了一下，主要是两个，一个是$("selector").load()，另一个是$.get()/$.post()方法，一般比较多的使用$.get()。以下是使用的语法格式。$("#div1").load("demo_test.txt");$("#div1").load("demo_test.txt #p1"); $.get(URL,callback); $.post(URL,data,callback);
4：小问题：
关于src的引用的方式的问题，第一种一般都是好的，第二种要是使用绝对路径一般都是有问题的，使用相对路径比较好使。
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"><script type="text/javascript" src="./jquery-1.11.3.js">这两种方式都是可以使用的，第二种一定要在和文件是同一个文件夹下面，第一种要去抱能够上网，然而谷歌的现在是不能用了。
5：学习链接：
http://blog.csdn.net/imba123456789/article/details/47107727
http://blog.csdn.net/imba123456789/article/details/47129569
http://www.php100.com/html/webkaifa/javascript/2012/0611/10527.html
6：示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery basic</title> <style type="text/css"> .selected { background-color: Green; } </style> <!--<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js">--> <script type="text/javascript" src="./jquery-1.11.3.js"> </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } p.my_ajax_first_test { margin: 0px; padding-left: 50%; padding-right: 100px; background-color: aqua; border: solid 2px aqua; text-align: center; } div.my_test p.p_test { width: 500px; height: 200px; background-color: crimson; } </style> </head> <> <h3>jQuery构造函数</h3> <p>我是测试文件，我的背景应该红色！</p> <ul> <li>jQuery(expression,context)</li> <li>jQuery(html)</li> <li>jQuery(elements)</li> <li>jQuery(jQuery(fn))</li> </ul> <input type="button" id="mybutton" value="click me!"/> <input type="button" id="mybutton2" value="哈哈!"/> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> <script language="JavaScript" type="text/javascript"> jQuery("ul>li:first").addClass("selected"); jQuery("ul>li:last").addClass("selected"); $("p").css("background-color","red"); $(this).css("background-color","yellow"); $("#mybutton").click(function(){ $("p").hide(); }); $(".flip").click(function(){ $(".panel").slideDown("slow"); }); $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); $(document).ready(function() { $("#p1").css("color", "green").slideDown(8000).slideUp(700).slideToggle("slow");/*无效*/ }); $("#mm").click(function(){ $("#pp").slideUp(3000); }); /*$('ul').append($('new item'));无效的，为什么？*/ </script> <button>开始动画</button> <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:relative;"/> <h1>测试</h1> <p id="mm" style="background:#98bf21;height:100px;width:100px;position:relative;text-align: center">123</p> <p id="pp" style="background:#98bf21;height:100px;width:100px;position:relative; text-align: center">dianwo</p> <P>123123123</P> <P>123123123</P> <P>123123123</P> <P class="my_ajax_first_test" id="ajaxtest"></P> <!--加载abc.txt文件之中的内容--> <script type="text/javascript" language="JavaScript"> $(document).ready(function() { $("#ajaxtest").load("abc.txt"); }); $("#ajaxtest").click(function() { $("#ajaxtest").slideUp(2000).css("color","red") }); $("button").click(function(){//jQuery的Ajax方法$.load()方法 $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + " Status: " + status); }); }); $(document).ready(function() { $("#test_button").click(function(){ $.get("demo_test.asp",function(data,status){//jQuery的Ajax方法$.get()方法 alert("Data: " + data + " Status: " + status); }); }); }); </script> <div class="my_test" id="test"> <p class="p_test" id="test_button" > 这是我的测试！ </p> </div> </body> </html>