JQuery总结
选择器
常用的方法
jQuery插件
jquery文件 有智能提示版本（开发时用）、源码版本、压缩版本（发布时用）
★判断对象是否存在：if($("#d1").length>0){}
jQeury顶级对象 缩写$
$() 里面可以拼字符串
1、$(document).ready(function(){
})
缩写
$(function(){
})
dom加载完成后触发，比onload提前执行
window.onload
只能注册一个方法，如果注册多个方法，最后一次会把之前的 覆盖
页面所有内容加载完成后触发（图片，css，js都加载）
2、jQuery对象(包装集) dom对象
var txt= document.getElementById("id") dom对象
//dom对象-》jQuery对象
var $txt=$(txt);
$txt.val("123");//这样就可以使用jquery对象的属性和方法
var $txt = $("#id") jQuery对象，包装集,对dom对象包装，返回的是很多个dom对象
//jQuery对象-》dom对象
var txt = $txt[0];//var txt=$txt.get(0);
txt.value="123";//这样就可以使用dom对象的方法和属性了
3、each 函数(处理字典)
$.each(array,fn)对数组arry每个元素调用fn函数进行处理， 没有返回值。猜猜内部实现。
var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": " 莉莉" };
$.each(arr, function(key, value) { alert(key +"="+value); });
map 函数 （只能对数组进行操作，并返回新的数组）
$.map()
4、jQeury选择器
一般选择器：
$("#id")
$(".class")
$("input")
复合选择器 $("#id,.class,input")
*
5、$(who).when(what) $("#btn").click(function(){})
6、层次选择器
$("div p") 包含选择器 div中所有的p 子元素 子子元素..
$("div > p") 子后代选择器 div中直接子后代
7、常用的方法html()
text() 读取或设置标签之间的内容
val() 读取或设置表单的值
css() （）里面可以是json数据
attr() ★
使用attr()方法获取或者设置元素的属性，对于JQuery没有封 装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($(“#btn1").attr("href")); //获取href属性
$("#btn1").attr("href", "http://www.rupeng.com");
removeAttr() 删除属性
节点遍历的方法：
prev() prevAll() ()里可以加选择器进行约束
next() nextAll() 都是兄弟节点（同一级别的）
自己除外
sibling() 兄弟姐妹节点（自己除外）
★end() 返回最近一次对包装集的破坏之前的状态
★andSelf()
addClass()
removeClass()
toggleClass()
this是当前dom对象 要转换为jquery对象使用 $(this)
8、简单选择器（索引都是从0开始的）
:first 选取第一个元素 $("div:first")
:last 选取最后一个元素
:not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")
:even、:odd，选取索引是奇数、偶数的元素
:eq(索引序号)、:gt(索引序号)、:lt(索引序号)
不仅可以使用选择器进行进行绝对定位，还可以进行相对定位 ，只要在$()指定第二个参数，第二个参数为相对的元素. $("ul", $(this)).css("background", "red");
9、设置样式（一般使用类样式设置style时使用）
css() 设置行内样式 设置标签的style属性
attr("class","c1") 对class属性赋值 设置标签的所有属性
addClass("myclass")(不影响其他样式)
removeClass("myclass")移除样式
toggleClass("myclass")如果存在样式则去掉样式，如果没有样式则添加样式
hasClass("myclass")判断是否存在样式
10、链式编程
$(this).css("background-color", "red").siblings().css("background-color", "white");
---------------------------
11、属性过滤选择器
$("div[id]")选取有id属性
$("div[title=test]")选取title属性为test的元素
$("div[title!=test]")选取title属性不为test的元素
etc....查看帮助
12、表单选择器
$(":input")匹配所有 input, textarea, select 和 button 元素
$(":text")匹配所有 匹配所有的单行文本框
$(":checkbox")匹配所有复选框
$(":password")选取所有密码框。同理还 有:radio、:checkbox、:submit、:image、:reset、:button 、:file、:hidden。
etc.....查看帮助
12.1表单对象选择器
$(":checkbox:checked")
$("select option:selected") 下拉列框
$("input:disabled")
$("input:enabled")
13、动态创建Dom
var link = $("<a href='http://www.baidu.com'>百度</a>");动态创建jquery对象，只是在内存中
$("div:first").append(link); 把动态创建的jquery对象，加到第一个div中
（★）动态创建dom注意：
var some = $("<div id='d1'>a<p></p>c</div>")
当把动态创建的节点添加到窗体前，不能通过$("#d1")访问到它
必须先把some追加到窗体
$("div:first").append(some);
才可以通过$("#d1") 中找到它
（★）不仅可以使用选择器进行进行绝对定位，还可以进行相对定位 ，只要在$()指定第二个参数，第二个参数为相对的元素. $("ul", $(this)).css("background", "red");
给动态生成的控件的子控件注册事件 需要用到this
append 把link元素追加到哪$("div:first").append(link);
appendTo link.appendTo("div:first")
在结束标签之前添加元素
prepend
prependTo
在开始标签之后添加元素
after
在结束标签外添加元素
before
在开始标签前添加元素
14、删除节点
remove() 删除当前节点(标签) 删除的对象还在内存中
empty() 清空当前节点之间的内容，节点保留 会把对象的事件移除
设置RadioButton的选中值：
$("input[name=gender]").val(["女"]);
或者
$(":radio[name=gender]").val(["女"]);
----------------------
15、绑定事件
绑定事件 $("#id").bind("click",function(){})
绑定多个事件：
$(":button[value=bind]").bind({
"click": function () { alert("click"); },
"mouseover": function () { alert("mouseover"); }
})
解除绑定 $("#id").unbind("click")
让事件只执行一次 $("#id").one("click",function(){})
合成事件hover toggle
（★）hover(enterfn,leavefn) 当鼠标放上时执行enterfn，当鼠标离开时执行leavefn（内部封装了mouseover 和 mousout）
toggle(fn1,fn2) 当鼠标第一次点击时执行fn1，第二次点击执行fn2，以后依次执行
16、事件冒泡
mouseover、mouseenter mouseover会事件冒泡，mouseenter不会
mouseout、mouseleave
阻止事件冒泡(★) ）
$("#d1").click(function(e){ e.stopPropagation();})
阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的window.event.returnValue=false效果一样。
$("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); });
（return false 只是在事件响应函数中使用）
17、*事件参数（都通过e参数传过来）
pageX、pageY 设置坐标位置
eg: $div.css("top",e.pageX);
target 获得触发事件的元素(冒泡的起始，和this不一样)
altKey、shiftKey、ctrlKey
keyCode 键盘码、charCode ascii码
which如果是鼠标事件获得按键（1左键，2中键，3右键）。
18、动画（★）
show()、hide() （）里可带设置速度的参数
toggle() 切换显示/隐藏
slideDown、slideUp、 fadeOut、fadeIn、slideToggle
animate 复杂动画
animate：anmite内部设置的多个值是同步变化的，链式的animate是依次动画的。
例子：animate({ left: 0, top: 0, width: 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。
还可以指定增量，$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法
先调用非动态的 在执行动态的（解决方案：使用callback）
19、插件
使用JQueryUI
1、引用jquery的css（注意不要忘了image文件夹）
2、引用jquery.js，引用jqueryui.js（如果想减小尺寸，可以引用单独的每个插件的js）
3、查看文档，根据说明使用，一般就是在ready里面加一句类似于$("#aa").draggle();
“development-bundle\demos”是例子，development-bundle\docs是每个控件的详细用法。
jQuery validate：
1、 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
2、设置元素的class="required" minlength等属性 加name属性
3、窗体加载时候调用$("#f1").validate();
4、提示内容显示为中文messages_cn.js 在开发包的localization文件夹下
<script src="../js/messages_cn.js" type="text/javascript"></script>
5、自定义出错样式和成功样式
自定义出错样式和成功样式
//提示出错文本样式
label.error
{
background: url(../images/access_disallow.gif) no-repeat 0px 0px;
color: Red;
padding-left: 20px;
}
//提示成功样式
label.checked
{
background: url(../images/access_allow.gif) no-repeat 0px 0px;
}
//出错控件样式
input.error
{
border: dashed 1px red;
}
当验证成功后，给当前提示label加上提示成功样式
$("#f1").validate({
success: function(label) {
// set as text for IE6
label.html(" ").addClass("checked");
}
});
6、自定义提示内容
View Code
1 $("#signupForm").validate({ 2 rules: { 3 firstname: "required", 4 lastname: "required", 5 username: { 6 required: true, 7 minlength: 2 8 }, 9 password: { 10 required: true, 11 minlength: 5 12 }, 13 confirm_password: { 14 required: true, 15 minlength: 5, 16 equalTo: "#password" 17 }, 18 email: { 19 required: true, 20 email: true 21 }, 22 agree: "required" 23 }, 24 messages: { 25 firstname: "Please enter your firstname", 26 lastname: "Please enter your lastname", 27 username: { 28 required: "Please enter a username", 29 minlength: "Your username must consist of at least 2 characters" 30 }, 31 password: { 32 required: "Please provide a password", 33 minlength: "Your password must be at least 5 characters long" 34 }, 35 confirm_password: { 36 required: "Please provide a password", 37 minlength: "Your password must be at least 5 characters long", 38 equalTo: "Please enter the same password as above" 39 }, 40 email: "Please enter a valid email address", 41 agree: "Please accept our policy" 42 } 43 });
jquery cookie的使用：
1、添加对jquery.cookie.js
2、设置值，$.cookie('名字', '值')。cookie中保存的值都是文本。
3、读取值，var v=$.cookie('名字')
