@hx 2018-01-11T11:22:24.000000Z 字数 5652 阅读 1115

jQuery

前端

选择器

语法	描述
`$("p")`	选取所有`<p>`元素
`$("#test")`	选取id为`test`元素
`$(".test")`	选取class为`test`元素
`$("*")`	选取所有元素
`$(this)`	选取当前 HTML 元素
`$("p.intro")`	选取 class 为 intro 的`<p>`元素
`$("p:first")`	选取第一个 `<p>`元素
`$("ul li:first")`	选取第一个 `<ul>`元素的第一个`<li>` 元素
`$("ul li:first-child")`	选取每个`<ul>`元素的第一个`<li>`元素
`$("[href]")`	选取带有`href`属性的元素
`$("a[target='_blank']")`	选取所有`target`属性值等于 `"_blank"` 的`<a>` 元素
`$("a[target!='_blank']")`	选取所有`target`属性值不等于`"_blank"`的 `<a>`元素
`$(":button")`	选取所有`type="button"`的`<input>`元素和`<button>`元素
`$("tr:even")`	选取偶数位置的`<tr>` 元素
`$("tr:odd")`	选取奇数位置的 `<tr>` 元素

事件

方法	描述
`$(document).ready()`	在文档完全加载完后执行函数
`click()`	当元素点击事件被触发时会调用一个函数
`dblclick()`	当双击元素时，会发生 dblclick 事件
`mouseenter()`	当鼠标指针穿过元素时，会发生 mouseenter 事件
`mouseleave()`	当鼠标指针离开元素时，会发生 mouseleave 事件
`mousedown()`	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
`mouseup()`	当在元素上松开鼠标按钮时，会发生 mouseup 事件
`hover()`	hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
`focus()`	当元素获得焦点时，发生 focus 事件
`blur()`	当元素失去焦点时，发生 blur 事件

更多事件

效果

显示、隐藏

hide() 和 show()

toggle(speed,callback) //切换 hide() 和 show() 方法。
//speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

淡入淡出

方法	描述
`fadeIn()`	用于淡入已隐藏的元素
`fadeOut()`	用于淡出可见元素
`fadeToggle()`	在 fadeIn() 与 fadeOut() 方法之间进行切换
`fadeTo()`	允许渐变为给定的不透明度（值介于 0 与 1 之间）

滑动

slideDown() 和 slideUp()
slideToggle() // 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

动画

animate()方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的params参数定义形成动画的 CSS 属性。
可选的speed参数规定效果的时长。它可以取以下值：slow、fast 或毫秒。
可选的callback参数是动画完成后所执行的函数名称。

使用相对值。如：height:'+=150px',;

使用预定义的值。如：height:'toggle' // "show"、"hide" 或 "toggle";

使用队列功能。如：
var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow");

stop()方法用于停止动画或效果，在它们完成之前。
语法：
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

HTML

获取内容

text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容（包括 HTML 标记）
val()设置或返回表单字段的值

获取属性

attr()方法用于获取属性值

// 如何获得链接中 href 属性的值
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

设置内容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html()以及val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});

设置属性

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

也允许您同时设置多个属性

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

回调函数

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

添加元素

append()：在被选元素的结尾插入内容
prepend()：在被选元素的开头插入内容
after()：在被选元素之后插入内容
before()：在被选元素之前插入内容

能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

删除元素

remove()：删除被选元素（及其子元素）
empty()：从被选元素中删除子元素

remove()方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。

获取并设置CSS类

addClass()：向被选元素添加一个或多个类
removeClass()：从被选元素删除一个或多个类
toggleClass()：对被选元素进行添加/删除类的切换操作
hasClass()：是否有Class
css()：设置或返回样式属性

返回CSS属性
css("propertyname");
例：$("p").css("background-color");
设置 CSS 属性
css("propertyname","value");
例：$("p").css("background-color","yellow");
// 设置多个CSS 属性 css({"propertyname":"value","propertyname":"value",...});

尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

遍历

祖先

parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

后代

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

同胞

siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

prev(),prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

过滤

first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq(index) 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。

Ajax

jQuery AJAX 方法

jQuery load()方法是简单但强大的 AJAX 方法。
load()方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：
$(selector).load(URL,data,callback);
必需的URL参数规定您希望加载的 URL。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。
可选的callback参数是 load() 方法完成后所执行的函数名称。
也可以把 jQuery 选择器添加到 URL 参数。

可选的 callback 参数规定当load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态（success | error）
xhr- 包含 XMLHttpRequest 对象

GET
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的URL参数规定您希望请求的 URL。
可选的callback参数是请求成功后所执行的函数名。
POST
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法:
$.post(URL,data,callback);
必需的URL参数规定您希望请求的 URL。
可选的data参数规定连同请求发送的数据。
可选的callback参数是请求成功后所执行的函数名。
JSONP

$.ajax({
           type: "get",
           async: false,
           url: "...",
           dataType: "jsonp",
           jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
           jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
           success: function(json){
               alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
           },
           error: function(){
               alert('fail');
           }
         });

其它

noConflict()
$.noConflict() 方法会释放会$标识符的控制，这样其他脚本就可以使用它了。
当然，仍然可以通过全名jQuery替代简写的方式使用jQuery。

或者var jq = $.noConflict();，noConflict()可返回对jQuery的引用，您可以把它存入变量，以供稍后使用。

如果你的 jQuery 代码块使用$简写，并且您不愿意改变这个快捷方式，那么您可以把$符号作为变量传递给ready方法。这样就可以在函数内使用$符号了，而在函数外，依旧不得不使用 "jQuery"。
如：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});