1选择器随意组合，混合使用
// 多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素 $("#uid span"); // 选择id为"uid"的元素的所有后代span元素 $("p > span"); // 选择p元素的所有子代span元素 $("div + p"); // 选择div元素后面紧邻的同辈p元素 $("div p span"); // 选择div元素的所有后代p元素的后代span元素 // 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素 $("p#uid"); // 选择id属性为"uid"的p元素 $("div.foo"); // 选择所有带有CSS类名"foo"的div元素 $(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素 $("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素特有的选择器
// jQuery特有的选择器，当然也可以和其他选择器任意组合使用
// jQuery特有的选择器，当然也可以和其他选择器任意组合使用 $(":checkbox"); // 选取所有的checkbox元素 $(":text"); // 选取所有type为text的input元素 $(":password"); // 选取所有type为password的input元素 $(":checked"); // 选取所有选中的radio、checkbox、option元素 $(":selected"); // 选取所有选中的option元素 $(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)
$( ); // 不传入任何参数，返回空的jQuery对象(不匹配任何元素)
2
元素筛选
// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素 $("ul li").last(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素 $("div").find("p"); // 选取所有div元素的所有后代p元素 $("div").children(); // 选取所有div元素的所有子代元素 $("div").children("p"); // 选取所有div元素的所有子代p元素 $("span").parent(); // 选取所有span元素的父元素 $("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素 $("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素 $("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素
// jQuery的链式编程风格 $("div").find("ul").addClass("menu").children().css("margin", 0).hide();("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性设置所有匹配元素的多个样式属性 // 以下是上述代码的分解描述 $("div") // 返回一个匹配所有div元素的jQuery对象 .find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象 .addClass("menu") // 为这些ul元素添加CSS类名"menu"，并返回当前对象本身 .children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象 .css("margin", 0) // 为这些子代元素设置css样式"margin: 0"，并返回当前对象本身 .hide(); // 隐藏这些子代元素，并返回当前对象本身
$("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性设置所有匹配元素的多个样式属
// selector 表示具体的选择器
$("selector").val(); // 获取第一个匹配元素的value值(一般用于表单控件)
$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"
$("selector").html(); // 获取第一个匹配元素的innerHTML值
$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"
$("selector").text(); // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理)
$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"
$("selector").attr("class"); // 获取第一个匹配元素class属性
$("selector").attr("class", "code"); // 设置所有匹配元素的class属性为"code"
$("selector").removeAttr("class"); // 移除所有匹配元素的class属性
$("selector").prop("checked"); // 获取第一个匹配元素的checked属性值
$("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)
$("selector").removeProp("className"); // 移除所有匹配元素的className属性jQuery核心：事件处理
$("selector").bind( "dblclick", handler ); $("selector").bind( "keyup", handler ); $("selector").bind( "mouseout", handler ); // bind()等事件方法均支持为多个事件(以空格隔开)绑定同一个处理函数 $("selector").bind( "mouseenter mouseleve", function(event){ if(event.type == "mouseenter"){ // mouseenter事件的执行代码 }else if(event.type == "mouseleve"){ // mouseleve事件的执行代码 } } ); // 事件名称可以带有命名空间 $("selector").bind( "mouseout.foo", handler );
3动画效果
$("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果 $("selector").show( 400 ); // 显示隐藏的元素，带有400毫秒的过渡动画效果 $("selector").show( "fast" ); // 显示隐藏的元素，带有200毫秒的过渡动画效果 $("selector").show( "slow" ); // 显示隐藏的元素，带有600毫秒的过渡动画效果 $("selector").hide(); // 隐藏显示的元素，其用法与show()相同 $("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似 /* 下面的slide*、fade*系列方法与上面的show()、hide()、toggle()等方法作用相同， * 用法也类似，只是带有不同的动画效果 */ $("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果 $("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果 $("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果 $("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果 $("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果 $("selector").fadeToggle(); // 隐藏显示的元素，带有淡出的过渡动画效果
此外，jQuery还支持自定义基于CSS样式的动画效果。你可以使用animate()方法设置CSS样式，并执行一个从当前样式到指定样式的过渡动画效果。
// 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果 // 动画的执行时间为 1000 毫秒 $("selector").animate( { width: "200px", height: "100px" }, 1000 );
$.ajax()是是jQuery中Ajax的底层实现，其它Ajax请求方法都是基于该方法实现的。
// 以GET方式发送Ajax请求 $.get("ajax.php", { username: "hello", password: "123456" }, function(data){ // 这是Ajax请求成功后执行的回调函数，就是上面$.ajax中的success选项 }); // 以POST方式发送Ajax请求 $.post("ajax.php", { username: "hello", password: "123456" }, function(data){ // 这是Ajax请求成功后执行的回调函数，就是上面$.ajax中的success选项 });
jQuery辅助工具方法
// 去除字符串两端的空白字符 var str1 = $.trim( " abc d " ); // "abc d" var str2 = $.trim( null ); // "" // 判断是否是数组 var isArray1 = $.isArray( [] ); // true var isArray2 = $.isArray( new Array() ); // true // 判断是否是函数 var result1 = $.isFunction( function(){} ); // true var result2 = $.isFunction( new Function() ); // true // 检索数组中是否存在指定值，并返回其第一次出现的索引 var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3 var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1) // 将JSON字符串转为对应的JS对象 var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' ); var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );
DOM元素和jQuery对象的相互转换
var p = $("p"); // 返回一个包含所有p元素的jQuery对象 p[0]; // 第1个p元素 p[0].id ; // 返回第1个p元素的id p[1]; // 第2个p元素 p[2]; // 第3个p元素 p.length; // p元素的个数
此外，jQuery还给我们提供了一个get()方法，用于获取对应索引的DOM元素。
var p = $("p"); // 返回一个包含所有p元素的jQuery对象 p.get(0); // 第1个p元素 p.get(1); // 第2个p元素 p.get(2); // 第3个p元素 p.get( ); // 不传入任何参数，将以数组形式返回包含的所有p元素