jQuery
jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。
一、寻找元素
基本语法：$(selector).action()
1、选择器
1.1 基本选择器
$("#id") 根据ID匹配一个元素；
$("element") 根据元素标签名匹配其元素；
$(".class") 根据类名匹配元素；
$("*") 匹配所有元素；
$(".class,p,div") 将每一个选择器匹配到的元素合并后一起返回。
1.2 层级选择器
$(".outer div") 祖籍元素下匹配所有后代元素；
$(".outer>div") 在给定的父元素下匹配所有子元素；
$(".outer+div") 匹配所有紧接在 outer 元素后的 div 元素；
$(".outer~div") 匹配 outer 元素之后的所有 div 元素；
1.3 基本筛选器
$("li:first") 获取匹配 li 的第一个元素；
$("li:last") 获取最后一个元素；
$("li:eq(2)") 匹配一个给定索引值的元素；
$("li:even") 匹配所有索引值为偶数的元素，从0开始计数；
$("li:odd") 匹配所有索引值为计数的元素，从0开始计数；
$("li:gt(1)") 匹配所有大于给定索引值的元素；
$("li:lt(2)") 匹配所有小于给定索引值的元素；
1.4 属性选择器
$("div[id]") 匹配包含给定属性的元素；
$('[alex="sb"][id]') 匹配给定的属性是某个特定值的元素；
$("input[name!='news']") 匹配所有不含指定的属性或是属性不等于特定值的元素；
$("input[name^='news']") 匹配给定的属性是某些值开始的元素；
$("input[name$='letter']") 匹配给定属性是以某些值结尾的元素；
$("input[name*='man']") 匹配给定属性是以包含某些值的元素；
1.5 表单选择器
$(":input") 匹配所有 input, textarea, select 和 button 元素
$(type="text") 匹配所有单行文本框；可以简写成$(":text") 但值适用于input标签；
$(":checkbox") 匹配所有复选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<div id="div1">div1</div>--> <div id="div1"> <p class="ll"></p> <p class="ll"></p> <p class="go"></p> <p class="go login regis"></p> <p class="go-1"></p> <p class="go-2"></p> <p class="goo-1"></p> <p class="ps"></p> <p class="ps"></p> <a class="ps"></a> <a class="ps"></a> <a href="http://www.baidu.com" target="_blank"></a> <a href="http://www.baidu.com" target="_blank"></a> <a href="http://www.baidu.com"></a> <a href="http://www.yangyinghua.com"></a> <a href="http://www.yangyinghua.com"></a> <div class="ll"></div> <div class="ll"></div> <div class="ll"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script type="text/javascript"> //（1）核心选择器： /*比如jQuery 中 length属性，：jQuery中有多少元素*/ //选择所有元素 /* $(function(){ alert($("*").length); // *代表选取所有元素 });*/ /* $(function(){ alert($("#div1 *").length); });*/ //选择特定类型的元素 /* $(function(){ alert($("div").length); })*/ //选择具有特定class的元素 /* $(function(){ alert($("p.ll").length); });*/ //选择具有特定class的某类元素 /* $(function(){ alert($("p.ll").length); });*/ //选择具有特定id属性值的元素 /* $(function(){ alert($("#div1").length); });*/ //（2）属性选择器 //选取定义了attr（attr只是一个名字而已）属性的元素，即使这个属性没有值 /* $(function(){ alert($("[href]").length); });*/ //选取attr属性值等于字符串val的元素 /* $(function(){ alert($("[href='http://www.yangyinghua.com']").length); });*/ //选取attr属性值等于字符串val的元素 /* $(function(){ alert($("[class^='l']").length); });*/ //选取attr属性值以字符串val结尾的元素 /* $(function(){ alert($("[class$='l']").length); });*/ //选取attr属性值包含字符串val的元素 /* $(function(){ alert($("[class*='l']").length); });*/ //选取attr属性值其中一个值是字符串val的元素 /* $(function(){ alert($("[class~='login']").length); });*/ //选取attr属性值等于字符串val，或属性值为连字符分割的值列表且第一个值是字符串val的元素 /* $(function(){ alert($("[class|='go']").length); });*/ //复合属性选择器，需要同时满足多个条件时使用 /* $(function(){ alert($("[href='http://www.baidu.com'][target='_blank']").length); });*/ $(function(){ alert($("p[class='ps']").length); }); //还有其他选择器知识之后补充... </script> </body> </html>
2、筛选器
2.1 过滤筛选器
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test")
2.2 查找筛选器
$("div").children(".test") 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
$("div").find(".test") 搜索所有与指定表达式匹配的元素
$(".test").next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集；
$(".test").nextAll() 查找当前元素之后所有的同辈元素；
$(".test").nextUntil() 查找当前元素之后所有同辈元素，直到遇到匹配的那个元素为止；
$("div").prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合；
$("div").prevAll() 查找当前元素之前所有的同辈元素
$("div").prevUntil() 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$(".test").parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合；
$(".test").parents() 取得一个包含着所有匹配元素的祖先元素的元素集合；
$(".test").parentUntil() 查找当前元素所有父辈元素，直到遇到匹配的那个元素为止；
$("div").siblings() 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
二、操作元素（属性CSS 和 文档处理）
1、属性操作
$("p").text() 获取所有匹配元素的内容；
$("p").html() 获取第一个匹配元素的html内容；
$(":checkbox").val() 获得匹配元素的当前值；
$(".test").attr("alex") 返回被选元素的属性值；
$(".test").attr("alex","sb") 设置被选元素的属性值；
$(".test").attr("checked","checked") 获取匹配的属性并设置；
$(":checkbox").removeAttr("checked") 删除匹配元素的属性值；
$(".test").prop("checked",true) 获取在匹配的元素集中的第一个元素的属性值；
$(".test").removeProp() 用来删除由.prop()方法设置的属性集；
$(".test").addClass("hide") 为每个匹配的元素添加指定的类名；
$("p").removeClass("selected") 从所有匹配的元素中删除全部或指定的类；
2、CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() 获取匹配元素在当前视口的相对偏移
$("p:last").offset({ top: 10, left: 30 });
position() 获取匹配元素相对父元素的偏移。
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
scrollTop() 获取匹配元素相对滚动条顶部的偏移。
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
scrollLeft() 获取匹配元素相对滚动条左侧的偏移。
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
(尺寸) height() 取得匹配元素当前计算的高度值（px）
$("p").height();
width() 取得第一个匹配元素当前计算的宽度值（px）
$("p").width();
3、文件处理
内部插入 $("#c1").append("<b>hello</b>") 向每个匹配的元素内部追加内容。
$("p").appendTo("div") 把所有匹配的元素追加到另一个指定的元素元素集合中。
prepend() 向每个匹配的元素内部前置内容。
prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中
外部插入 before() 在每个匹配的元素之前插入内容。
aftter 在每个匹配元素之后插内容。
insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
insertAfter() 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
替换 replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素；
replaceAll() 用匹配的元素替换掉所有匹配到的元素；
删除 remove()删除 从DOM中删除所有匹配的元素。
empty()清空 删除匹配的元素集合中所有的子节点。
detach() 从DOM中删除所有匹配的元素；
复制 clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
$("b").clone().prependTo("p");
4、事件
页面加载
$(document).ready(function(){}) -----------> $(function(){}) 在文档加载后才执行这个函数，相当于放在代码的后面。
事件处理
$("p").click(function(){}) 将页面内所有段落点击后隐藏。
$("p").dblclick( function () { alert("Hello World!"); }); 给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").bind("click",function(){}) 为每个匹配元素的特定事件绑定事件处理函数。
$("p").bind("click", function(){
alert( $(this).text() );
});
$("ul").delegate("li","click",function(){}) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> </head> <body> <div style="background-color:red"> <p>这是一个段落。</p> <button>请点击这里</button> </div> <script> $("div").delegate("button","click",function(){ $("p").slideToggle(); }); </script> </body> </html>
更多详情：http://www.php100.com/manual/jquery/index.html
http://www.cnblogs.com/yuanchenqi/articles/5663118.html