jQuery基础

简介

快速简洁的JS框架，封装JS常用功能代码，提供一种简便的JS设计模式，优化HTML文档操作，事件处理，动画设计和Ajax交互。

闭包：使用更大作用域的变量来记录小作用域变量的值

1. 直接全局区域，容易同名覆盖
2. 使用对象封装，对象还是会被覆盖
3. 使用工厂模式，函数还是可能会被覆盖
4. 匿名函数自调用，只能加载的时候调用一次，且数据无法获取
5. 使用闭包，将数据一次性挂在到window对象下

jQuery选择器

//id选择器
var inp = $("#uname");
inp.val();  //只有一个元素
//标签选择器
var inps = $("input");//返回数组
inps[1].value;

//类选择器
var inps = $(".common");
//组合选择器
var eles = $("h3, input");	//所有h3和input标签
//子选择器
var inps = $("div>input");	//所有div下的input子元素

var inp = $("input:first");	//第一个input元素

var tds = $("td:not(td[width])");	//去掉有width属性的td

//简单
first, last，not，even，odd，eq(index)，gt，lt，header，animated
//内容
contains(text)
empty
has(selector)
parent
//可见性
visible
hidden
//属性
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]	//以某些值开始
[attribute$=value]	//以某些值结束
[attribute*=value]	//包含某些值
[selector1][selector]	//同时满足多个条件
//子元素
nth-child
first-child
last-child
only-child
//表单
//表单对象属性

属性

var uname = $("#uname");
uname.attr("type");		//获取属性
uname.attr("value");	//不实时
uname.val();	//实时
uname.attr("type", "button");	//设置属性

操作元素内容

<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

var showdiv = $("#showdiv");
showdiv.html();		//返回标签内所有内容
showdiv.html("<b>xxxx</b>");	//修改标签内容，包括标签本身

showdiv.text();		//返回标签内内容，不包括标签
showdiv.text("<i>xxx</i>");		//不解析标签

操作元素样式

showdiv.css("background-color", "orange");	//增加
showdiv.css("width");		//获取

div.css({"border":"solid 1px","width":"300px","height":"300px"});	//json格式

div.addClass("common");		//追加
div.removeClass("dd");		//删除样式

操作文档结构

//元素内部插入
div.append("<i>sfaf</i>");	//内容解析，页面内容增加

$("#u1").appendTo("#showdiv");	//将元素外面的对象追加到里面，页面内容移动

prepend	//加到前面
prependTo	//

//元素外部插入
div.after("<b>xxx</b>");	//在div后面插入
div.before("<b>xxx</b>");	//在div前面插入
div.insertAfter();		//将匹配的内容插入后面，只是移动，并不增加
div.insertBefore();		//将匹配的内容插入前面，只是移动，并不增加

//包裹
wrap/unwrap
wrapAll
wrapInner

//替换
replaceWith
replaceAll

//删除
empty
remove
detach

//克隆
clone

操作事件

$("#btn2").bind("click",function(){alert("xxx")});	//追加，一个事件绑多个
$("#btn2").bind("click");	//解绑事件，只能解绑bind添加的
$("#btn2").one("click",function(){alert("xxx")});	//触发执行一次性即失效，可以添加多个，可以unbind解绑

页面载入事件
window.onload=function(){};	//js方式
$(document).ready(function(alert("1")));	//jquery方式，追加
$(document).ready(function(alert("2")));

动画

$("#showdiv").show(3000);	//3秒逐渐显示
$("#showdiv").hide(3000);	//3秒逐渐隐藏
toggle	//切换元素隐藏状态,效果同上

slideDown	//高度逐渐增加
slideUp		//高度逐渐缩小
slideToggle	

fadeIn		//淡入
fadeOut		//淡出