jQuery常用方法总结

仅总结一些平时中常用的，方便自己看

一. 选择器

元素选择器

1.$("#myid") //选择id为myid的所有元素
2.$(".myclass") // 选择class为myclass的所有元素
3.$("li:eq(3)") //选择索引为3的li元素
4.$("ul li>p") //选择ul下面的所有li下面的所有p标签

属性选择器

1.$("select [option='selected']") //选择select下拉框中选中的元素
2.$("li[class]").css("background","red");//选择带有class属性的li

父子选择器

1.$(".myclass").children() //选择class为myclass下面的所有直接子元素
2.$(".myclass").parent() //选择class为myclass的第一个父元素
3.$(".myclass").siblings() //选择class为myclass的同级所有元素
4.$(".second").parents().css("background","red");//选择class为second的所有上级元素

二. 事件

//当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
$(document).ready(function(){
	...
});

//bind() 方法将事件和函数绑定到元素，在用append动态添加元素到页面时，如果要设置点击事件，用这种方法，
$("button").bind("click",function(){
  $("p").slideToggle();
});


//传统的点击事件无法触发动态添加的button
$("button").click(function(){
  $("p").slideToggle();
});

//当输入框的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 
//和 select 元素。
$("input").change(function(){
  $(this).css("background-color","#FFFFCC");
});

//当输入框获得焦点时，改变它的背景色：
$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

//当按下按键时，改变文本域的颜色：
$("input").keydown(function(){
  $("input").css("background-color","#FFFFCC");
});

//which 属性指示按了哪个键或按钮。
$("input").keydown(function(event){
  $("div").html("Key: " + event.which);
});

//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
//与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
$("button").mousedown(function(){
  $("p").slideToggle();
});

//当鼠标指针穿过元素时，会发生 mouseenter 事件。
//该事件大多数时候会与 mouseleave 事件一起使用
$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

//当鼠标指针离开元素时，改变元素的背景色.与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发
//mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

//当鼠标从元素上移开时，改变元素的背景色
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

//当鼠标指针位于元素上方时时，改变元素的背景色,与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其
//他子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

//toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

//trigger() 方法触发被选元素的指定事件类型。触发 input 元素的 select 事件。
$("button").click(function(){
  $("input").trigger("select");
});

三. 效果

//animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS
//属性值是逐渐改变的，这样就可以创建动画效果。
$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

//如果被选的元素已被显示，则隐藏该元素。
$(".btn1").click(function(){
  $("p").hide();
});

//如果被选元素已被隐藏，则显示这些元素：
$(".btn2").click(function(){
  $("p").show();
});

//slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些
//元素，如果被选元素是隐藏的，则显示这些元素。
$(".btn1").click(function(){
  $("p").slideToggle();
});

四. 操作HTML

//addClass() 方法向被选元素添加一个或多个类。
$("button").click(function(){
  $("p:first").addClass("intro");
});

//removeClass() 方法从被选元素移除一个或多个类。
$("button").click(function(){
  $("p:first").removeClass("intro");
});

//append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});

//prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
$(".btn1").click(function(){
  $("p").prepend("<b>Hello world!</b>");
});

//remove() 方法移除被选元素，包括所有文本和子节点。
$("button").click(function(){
  $("p").remove();
});

//empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
$(".btn1").click(function(){
  $("p").empty();
});

//attr() 方法设置或返回被选元素的属性值。不写属性值为得到值，写了为设置值。
$("button").click(function(){
  $("img").attr("width","180");
});

//removeAttr() 方法从被选元素中移除属性
$("button").click(function(){
  $("p").removeAttr("id");
});

//text() 方法方法设置或返回被选元素的文本内容。当该方法用于返回一个值时，它会返回所有匹配元素的组合
//的文本内容（会删除 HTML 标记）。当该方法用于设置值时，它会覆盖被选元素的所有内容。
$(".btn1").click(function(){
  $("p").text("Hello <b>world</b>!");
});

//val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
//如果该方法未设置参数，则返回被选元素的当前值。
$("button").click(function(){
  $(":text").val("Hello World");
});

五.遍历

//children() 方法返回返回被选元素的所有直接子元素。
$("div").children(".selected").css("color", "blue");

//each() 方法规定为每个匹配元素规定运行的函数。提示：返回 false 可用于及早停止循环。index为从开始的索引,element为当前遍历的对象
$("button").click(function(){
  $("li").each(function(index,element){
    alert($(this).text())
  });
});

//parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
$("p").parent(".selected")

//parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。
$("b").parents()

六.Ajax

//完整请求
$.ajax({
 	url : "/xxx/xxx",//请求的 URL地址
 	type : "post",//请求类型   
    data: {a:1,b:2},//请求的参数
    dataType : "json",//返回的数据类型
    async : false,//表示请求是否异步处理
    beforeSend: function () {//在发送请求之前调用
       $.modal.loading("正在处理中，请稍后...");
    },
    success: function (data) {//请求成功之后的处理
   	   console.log(data); 
    },
    error:function (data) {//请求失败的处理
       alert(data.result);
    }
 });
 
//简写get请求，其它属性使用默认值	，参数url,成功后执行的函数，请求格式
$.get("http://localhost:8080/xxx",function (data) {
  console.log(data); 
},"json")

//简写post请求，其它属性使用默认值，参数url，请求参数,成功后执行的函数，请求格式	
$.post("http://localhost:8080/xxx",{a:1,b:2},function (data) {
  console.log(data); 
},"json")