常用方法
//显示信息到控制台，用于调试
console.log("hello");
//每隔一秒更新一次每个被选中的元素
$(function() { $("a").prettyDate({ interval: 1000 }); });
// 隐藏当前元素
$(this).hide()
//隐藏所有 <p> 元素
$("p").hide()
//隐藏所有 class="test" 的 <p> 元素
$("p.test").hide()
//隐藏所有 id="test" 的元素
$("#test").hide()
//添加类
$("#test").addClass('box');
//添加多个 CSS 类
$('div').addClass('red bg');
//删除多个 CSS 类
$('div').removeClass('red bg');
//选择当前元素的父元素
$('li').parent().css('background','#ccc');
//选择当前元素的父元素及祖先元素
$('li').parents().css('background', '#ccc');
//选择子元素含有 class 是 red 的元素
$('ul').has('.red').css('background', '#ccc');
//此方法获取每个匹配元素的前后所有的同辈元素
$(".li2").siblings().css("background","#FF0000");
//把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1");
attr() //设置/获取元素属性的值
html()
text()
append() //在被选元素的结尾插入内容
prepend() //在被选元素的开头插入内容
after() //在被选元素之后插入内容
before() //在被选元素之前插入内容
remove() //删除被选元素（及其子元素）
empty() //从被选元素中删除子元素
siblings() //返回被选元素的所有同胞元素
next() //返回被选元素的下一个同胞元素
nextAll() //返回被选元素的所有跟随的同胞元素
$("h2").nextUntil("h6"); //返回介于两个给定参数之间的所有跟随的同胞元素
first() //方法返回被选元素的首个元素
last() //方法返回被选元素的最后一个元素
常规选择器
document.getElementById('box') // 获取id为box的对象
$('#box').get(0) //ID 元素的第一个原生 DOM
$('#pox').get(0)或($('#pox')[0] //通过数组下标也可以获取 DOM 对象
alert($('#box').width()); //返回元素的宽
$('#box').height(); //返回元素的高
$('.box').size()； //返回class=box元素个数
$('#pox').length; //返回元素的数量
if(document.getElementById('pox')) { //先判断是否存在这个对象
document.getElementById('pox').style.color = 'red';
}
$('#box p').css('color', 'red'); //后代选择器
$('#box').find('p').css('color', 'red'); //和后代选择器等价
$('#box > p').css('color', 'red'); //子选择器，孙子后失明
$('#box').children('p').css('color', 'red'); //和子选择器等价
<div class="box1"></div>
<p>我们是兄弟</p>
$(".box1").nextAll('p').css('color', 'red'); //下一个同级节点
$('#box').prev('p').css('color', 'red'); //同级上一个元素
过滤器
$('div[id=box]').css('color','pink');
$('li:first').css('background', '#ccc'); //第一个元素
$('li:last).css('background', '#ccc'); //最后一个元素
$('li:not(.red)).css('background', '#ccc'); //非 class 为 red 的元素
$('li:even').css('background', '#ccc'); //索引为偶数的元素
$('li:odd).css('background', '#ccc'); //索引为奇数的元素
$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素
$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素
$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //页面所有 h1 ~ h6 元素
事件
click() 单击点击事件被触发时会调用一个函数。
dblclick() 鼠标双击发生
mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。
mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
focus() 当元素获得焦点时，发生 focus 事件。
blur() 当元素失去焦点时，发生 blur 事件。
$("#file").trigger("click");[模拟点击事件]
$("#file").click(); [模拟点击事件]
$('#file').off('click') [解绑事件]
[例子]
$('input').bind('mouseout mouseover', function () { //移入和移出分别执行一次
$('div').html(function (index, value) {
return value + '1';
});
});
$("input[type='text']").blur(function(){
if(!$(this).val())
alert('用户名不能为空！')
});
[背景移入移出切换效果]
$('div').hover(function () {
$(this).css('background', 'black'); //mouseenter 效果
}, function () {
$(this).css('background', 'red'); //mouseleave 效果，可省略
});
[通过对象键值对绑定多个参数]
$('input').bind({ //传递一个对象
'mouseout' : function () { //事件名的引号可以省略
alert('移出');
},
'mouseover' : function () {
alert('移入');
}
});
get、post、ajax方法
GET - 从指定的资源请求数据（四个参数）
POST - 向指定的资源提交要处理的数据
$.get(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
可选的 type 服务器返回的内容格式：包括 xml、 html、 script、 json、 jsonp 和 text
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
get与post的区别：
1.GET 请求是通过 URL 提交的，而 POST 请求则是 HTTP 消息实体提交的；
2.GET 提交有大小限制（2KB），而 POST 方式不受限制；
3.GET 方式会被缓存下来，可能有安全性问题，而 POST 没有这个问题；
4.GET 方式通过$_GET[]获取， POST 方式通过$_POST[]获取。
【例子】
[使用 $.get() 方法从服务器上的一个文件中取回数据]
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "
状态: " + status);
});
[$.post() 方法通过 HTTP POST 请求从服务器上请求数据]
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "
Status: " + status);
});
});
[ajax]
var username=null;
$.ajax({
type:"post",
url:"a.action",
data: {},
dataType: 'text',
async : false, 设置为同步操作就可以给全局变量赋值成功
success:function(data){
usersname = data; usersname为前面声明的全局变量
}
});
[ajax说明]
参数 类型 说明
url String 发送请求的地址
type String 请求方式： POST 或 GET，默认 GET
timeout Number 设置请求超时的时间（毫秒）
data Object或String 发送到服务器的数据，键值对字符串或对象
dataType String 返回的数据类型，比如 html、 xml、 json 等
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数
complete Function 请求完成后调用的回调函数
success Function 请求成功后调用的回调函数
error Function 请求失败时调用的回调函数
global Boolean 默认为 true，表示是否触发全局 Ajax
cache Boolean 设置浏览器缓存响应， 默认为 true。如果dataType类型为script或jsonp，则为 false。
content DOM 指定某个元素为与这个请求相关的所有回调函数的上下文。
contentType String 指定请求内容的类型。默认为application/x-www-form-urlencoded。
async Boolean 是否异步处理。默认为 true,false 为同步处理
processData Boolean 默认为 true，数据被处理为 URL 编码格式。如果为 false，则阻止将传入的数据处理为 URL 编码的格式。
dataFilter Function 用来筛选响应数据的回调函数。
ifModified Boolean 默认为 false， 不进行头检测。如果为 true，进行头检测， 当相应内容与上次请求改变时， 请求被认为是成功的。
jsonp String 指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback。
username String 在 HTTP 认证请求中使用的用户名
password String 在 HTTP 认证请求中使用的密码
scriptCharset String 当远程和本地内容使用不同的字符集时， 用来设置 script 和 jsonp 请求所使用的字符集。
xhr Function 用来提供 XHR 实例自定义实现的回调函数
traditional Boolean 默认为 false，不使用传统风格的参数序列化。如为 true，则使用。
表单
$('input').val(); 元素名定位，默认获取第一个input标签元素的值
$('input').eq(1).val(); 获取第二个input标签元素的值
$('input[type=password]').val(); 选择 type 为 password 的字段
$('input[name=user]').val(); 选择 name 为 user 的字段
$(':input').size(); 获取所有表单字段元素
$(':text).size(); 获取单行文本框元素
$(':text[name=user]).size(); 获取单行文本框 name=user 的元素
$(':password').size(); 获取密码栏元素
$(':enabled').size(); 获取可用元素
$(':disabled).size(); 获取不可用元素
$(':checked).size(); 获取单选、复选框中被选中的元素
$(':selected).size(); 获取下拉列表中被选中的元素
$("input[id^='code']"); id属性以code开始的所有input标签
$("input[id$='code']"); id属性以code结束的所有input标签
$("input[id*='code']"); id属性包含code的所有input标签