<script src="jquery-1.12.4.js"></script> 
<!--本地引入--> 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
<!--CDN引入--> 
1.
2.
3.
4.

window.jQuery === window.$; //true 
jQuery === $;// true 
typeof($);// 'function' 
1.
2.
3.

jQuery.noConflict(); 
1.

$(function(){ 
//some code 
}); 
//这种方式的完整写法应该是： 
//$(document).ready(function(){some code}); 
1.
2.
3.
4.
5.

var box1 = $('div'); 
//接收css选择器字符串，可以拿到DOM tree中相应的DOM元素，并把它包装成jQuery对象 
var box2 = $('<div></div>'); 
//接收HTML代码片段，可以创建相应的DOM元素，并把它包装秤jQuery对象 
1.
2.
3.
4.

var box = document.getElementById('#box'); 
var jBox = $(box);//jQuery obj 
1.
2.

$.holdReady(true); 
$(function(){ 
//some code 
}); 
$.joldReady(false); 
//参数true，暂停ready方法的执行，参数false，恢复ready方法的执行 
1.
2.
3.
4.
5.
6.

$('p');//标签选择器 
$('.class');//类选择器 
$('#id');//id选择器 
$('[type=text]');//属性选择器 
$('input[type=email]');//组合选择器 
$(#id p);//后代选择器 
$(#id p:first-child);//筛选选择器 
//... 
1.
2.
3.
4.
5.
6.
7.
8.

var divList = $('div');//获取所有div 
var domDiv = divList.get(0);//获取第一个Dom元素，如果有的话 
var jqDiv = divList.eq(0);//获取第一个jq对象，如果有的话 
var another = $(domDiv);//把Dom元素转化成jq对象 
1.
2.
3.
4.

$('div').find('span');//查找div内部的span，等同于$('div span') 
$('li').first();//获取匹配的元素中的第一个 
$('li').last();//获取匹配的元素中的最后一个 
$('div').next();//获取所有匹配到的div的下一个兄弟元素的集合 
$('div').prev();//获取所欲匹配到的div的上一个兄弟元素的集合 
$('div').parent();//获取匹配到的div的共同父元素 
$('div').children();//获取div的子元素集合 
$('div').siblings();//获取div的兄弟元素集合 
//... 
1.
2.
3.
4.
5.
6.
7.
8.
9.

$('div').attr('name','test');//设置属性名：name，属性值：test 
$('div').attr('name');//获取属性name的值 
$('div').removeAttr('name');//删除属性name 
****************************** 
$('div').prop('name','test'); 
$('div').prop('name'); 
$('div').removeProp('name'); 
//prop的用法和attr一模一样，唯一不同的是prop既可以操作DOM元素的属性，也可以操作它的属性节点 
1.
2.
3.
4.
5.
6.
7.
8.

$('div').addClass('test');//添加类，如需添加多个类，使用空格隔开即可 
$('div').removeClass('test');//删除类，如需删除多个类，也用空格隔开即可 
$('div').toggleClass('test');//切换类，如果DOM元素已经有该类了，那么就删除，如果没有则添加 
1.
2.
3.

$('div').html();//获取第一个匹配到的div的内容 
$('div').html('<p>我是段落</p>');//设置所有匹配到的div的内容 
$('div').text();//获取所有匹配元素的文本内容 
$('div').text('hello');//设置所有匹配到的div的文本内容 
$('input').val();//获取匹配元素value值 
$('input').val('hello');//获取匹配元素value值 
1.
2.
3.
4.
5.
6.

$('div').css('background-color','red');//设置元素的单个css属性 
$('div').css({ 
width:'200px', 
height:'200px', 
background-color:'red' 
});//通过对象设置多个css属性 
1.
2.
3.
4.
5.
6.

$('div').width();//获取div的内容区宽度，可传参设置 
$('div').height();//获取div的内容区高度，可传参设置 
//innerWidth，innerHeight表示content+padding的宽高 
//outerWidth，outerHeight表示content+padding+border的宽高 
$('div').offset();//获取div相对视口的偏移量，返回值是一个包含top和left属性，且值为数字的对象 
$('div').position();//获取div相对父元素的偏移量，返回值是一个包含top和left属性，且值为数字的对象 
//offset和position都以像素计，并且只对可见的元素起作用 
1.
2.
3.
4.
5.
6.
7.

$("div").append("<p>Hello</p>");//在div内部的末尾插入元素 
$("div").prepend("<p>Hello</p>");//在div内部的开头插入元素 
$("div").after("<p>Hello</p>");//紧挨着div的后面插入元素 
$("div").before("<p>Hello</p>");//紧挨着div的前面插入元素 
$("div").remove();//删除div元素，但是会保留文本 
$("div").empty();//清空div中的所有内容 
1.
2.
3.
4.
5.
6.

$('div').onclick(function(){}); 
$('div').on('click',function(){}); 
//事件处理函数可以是匿名函数，也可以是函数引用，如果涉及到解除事件绑定，建议使用函数引用的方式 
1.
2.
3.

function test(){}; 
$('div').on('click',test); 
$('div').off();//移除div绑定的所有事件 
$('div').off('click');//移除div绑定的所有click事件 
$('div').off('click',test);//移除div绑定的具体事件 
1.
2.
3.
4.
5.

$('div').on('click',function(){ 
//some code 
e.stopPropagation(); 
}); 
//阻止事件冒泡 
$('a').on('click',function(){ 
//some code 
return false；//简单方式 
//e.preventDefault();//W3C标准方式 
}); 
//阻止默认行为 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

$('div').on('click',function(){ 
//some code 
}); 
//一般需要等到用户点击div，函数才会被执行 
$('div').triggerHandler('click'); 
//自动触发div的click事件，不用等到用户点击 
1.
2.
3.
4.
5.
6.

$('div').one('click',function(){ 
//some code 
}); 
//jQuery通过one方法绑定一个只会被触发一次的事件处理程序 
1.
2.
3.
4.

$("ul").delegate("li", "click", function(){  
$(this).toggleClass("test"); 
}); 
//把li的点击事件委托给ul，被委托元素一般是委托元素的父元素 
1.
2.
3.
4.

$('div').show(1000); 
//使div显示，1000表示整个过程持续时间，单位是ms 
$('div').hide(1000); 
//使div隐藏 
1.
2.
3.
4.

$("p").slideDown(1000); 
//展开，可以设置一个时间，表示整个过程持续时间，单位ms 
$("p").slideUp(1000); 
//收起 
$("p").slideToggle(1000); 
//切换 
1.
2.
3.
4.
5.
6.

$("div").fadeIn(1000); 
//淡入，可一接收一个数字作为参数，表示过程持续时间，单位ms 
$("div").fadeOut(1000); 
//淡出 
$("div").fadeTo(1000,0.5); 
//调整到指定值 
$("div").fadeToggle(1000); 
//切换 
1.
2.
3.
4.
5.
6.
7.
8.

$('div').animate({ 
width:500px, 
opacity:0.8 
},1000); 
//该方法接收一个对象，表示动画结束时元素的状态，第二参数是一个数字，表示持续时长，单位ms，也可以接收一个回调函数作为第三个参数 
1.
2.
3.
4.
5.

$('div').stop(); 
//立即停止当前动画，直接开始执行队列中后续的动画，如果有的话 
$('div').stop(true,true); 
//stop方法可以接收两个blloean值作为参数。第一个规定在停止当前动画的同时对否清除队列中的其他动画，第二个规定在停止当前动画的同时是否要直接完成队列中其他动画。 
1.
2.
3.
4.

$('div').stop(); 
$('div').animate({ 
//some code 
},1000); 
1.
2.
3.
4.

$('div').animate({ 
width:200px; 
height:200px; 
},1000).delay(1000).animate({ 
background-color:red; 
},1000); 
//在改变宽高后等待1000ms再改变背景颜色
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

 
1.

$.ajax({ 
type: "POST", 
url: "some.php", 
data: "name=ren&age=12", 
cache: false; 
dataType:"text", 
success: function(msg){ 
//some code 
}, 
error:function(msg){ 
//some code 
} 
 }); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

$.get( 
"url", 
{ name: "ren", age: "12" }, 
function(msg){ 
//some code 
}, 
"text" 
); 
1.
2.
3.
4.
5.
6.
7.
8.

$.post( 
"url", 
{ name: "ren", age: "12" }, 
function(msg){ 
//some code 
}, 
 "text" 
); 
1.
2.
3.
4.
5.
6.
7.
8.

$("div").load( 
"test.html", 
{name:"ren",age:"12"}, 
function(){//some code} 
); 
//载入一份新的html文档到div中，并向服务器发送了数据。 
1.
2.
3.
4.
5.
6.