jQuery的方法

选择器

1. 奇偶选择器，：even; :odd;
   $("button:odd").css("color","pink");//奇数，下标，1、3、5、7、9
$("button:even").css("background-color","blue");//偶数，下标，0、2、4、6、8
2. 表单元素选择器，
   :input —— 所有的元素
   input:text —— type属性为“text”的元素
   input:password —— type属性为“password”的元素
   input:radio —— type属性为“radio”的元素
   input:checkbox —— type属性为“checkbox”的元素
   :submit —— type属性为“submit”的或元素
   $("input:password").css("font-size","20px");//选择type值为password的input框;
$("input:text").css("font-size","20px");//选择type值为text的input框;
3. 索引选择器 index eq
   $("ul li").index();//获取当前列表项的索引值(同级中的第几个元素);
$("ul li").eq(3);//获取当前列表的第4个元素(下标为3，实际是第四个);
4. 动画元素选择器 :animted
   $("p:animated").css("background-color","red");//给运动的p作色
5. 元素判断选择器 is()
   $("body *").each(function(){ var v = $(this).is("div,button"); console.log(v); })//当前的元素里有没有div，button这两个标签
6. 文本包含选择器 contains()
   $("div:contains('需要匹配的字符串')");//选择含有文本的div标签
7. 标签包含判断选择器 has
   $("div").has("p");//包含了p标签的所有div标签
8. 元素筛选选择器 filter
   $("p").filter(".selected");//匹配集合内class名称为“selected”的所有p标签
9. 非空元素选择器 ：parent
   $("div:parent");//返回作为一个父元素的div，即返回所有不为空的div元素
10. 空元素选择器 :empty
    $("td:empty");//匹配出所有空的td元素

DOM操作

操作DOM 的 jQuery 方法：不赋值就是查询，赋值就是修改
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr()/prop()- 设置或返回所选元素的属性值。
attr 和 prop 的区别介绍：
对于HTML元素本身就带有的固有属性，在处理时，两种方法都能使用，但是推荐使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，只能使用 attr 方法。
添加
append() 在被选元素里面的结尾插入内容（内部）
prepend() 在被选元素里面的开头插入内容（内部）
after() 在被选元素外面之后插入内容（外部）
before() 在被选元素外面之前插入内容（外部）
删除
remove() 删除被选元素本身（及其子元素）
empty() 从被选元素中删除所有子元素
css样式控制
addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对一个或多个类的切换操作
css() 设置或返回行内样式属性
宽高的获取与设置

1. 设置内容的宽高
   width() height()
2. 内容+padding
   innerWidth() innerHeight()
3. 内容+padding+border
   outerWidth() outerHeight()
4. 内容+padding+border+margin
   outerWidth(true) outerHeight(true)

查找

1. 查找祖先
   parent()
   parents()
   parentsUntil()
2. 查找后代
   children()
   find()
3. 查找同胞
   siblings()
   next()
   nextAll()
   nextUntil()
   prev()
   prevAll()
   prevUntil()
4. 过滤
   first()
   last()
   not()

效果

1. 隐藏 / 显示

   $("div").hide()//隐藏div
$("div").hide(2000,function(){ alert("已经成功的隐藏了")})//隐藏div 第一个参数是时间（毫秒）
$("div").show()//隐藏div
$("div").show(2000，function(){ alert("已经成功的显示了")})//显示div 第一个参数是时间（毫秒）
$("li").toggle(3000);//对显示或者隐藏进行切换
$("div").toggle(2000,function(){ alert("666")})//对显示或者隐藏进行切换 第一个参数是时间（毫秒）

2. 淡入 / 淡出

   $("div").fadeIn()//淡入
$("div").fadeIn(2000,function(){ })//淡入 第一个参数是时间（毫秒）
$("div").fadeOut()//淡出
$("div").fadeOut2000，function(){ })//淡出 第一个参数是时间（毫秒）
$("li").fadeToggle(3000);//对淡入/淡出进行切换
$("div").fadeTo(2000,0.7,function(){ })//对淡入/淡出进行切换 第一个参数是时间（毫秒） 第二个参数是透明度

3. 上下滑动（展开与收缩）

   $(selector).slideDown(3000,callback);//往下滑（展开）第一个参数是时间（毫秒）第二个参数是回调函数
$(selector).slideUp(3000,callback); //往上滑（收缩）第一个参数是时间（毫秒）第二个参数是回调函数
$(selector).slideToggle(3000,callback);//上下滑动切换 第一个参数是时间（毫秒）第二个参数是回调函数

4. 动画

   $(selector).animate({ height:'550px', width:'550px' },3000,function(){ });//第一个参数是形成动画的css(属性) 第二个参数是时间（毫秒）第三个是回掉函数

5. 停止JQ效果

   $(selector).stop(true,true);//第一个参数是否应该清除动画队列。 第二个参数是否立即完成当前动画 默认都为flase

6. 链式（Chaining ）调用
   $("#p1").css("color","red").slideUp(2000).slideDown(2000);

事件

事件方法

1. on(): 在选择元素上绑定一个或多个事件,能够通过事件代理给后来添加的元素绑定事
   语法 on(eve,[sel],[data],fn)

2. off(eve,[sel],[fn]) 给元素移出事件函数

3. one(eve,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
   function fn1(){ console.log(1111) };
function fn2(){ console.log(2222) };
$("#div").on("click","button",fn1)//绑定事件，执行函数fn1;
$("#div").on("click","button",fn2);//绑定事件，执行函数fn2
$("#div").off("click","button",fn1);//解除fn1函数
function fn3(){ console.log(3333) }//定义函数fn3
$("#div").one("click","button",fn3);//只执行一次

4. trigger(eve,[data])
   $("button").click(function(){ console.log("111") });
$("button").trigger("click");
$("button").triggerHandler("click");

Ajax

get请求

$.get("http://127.0.0.1:8082", function (data) {//get传参追加在地址后
            console.log("后端返回的数据", data);
        })

post请求

 $.post("http://127.0.0.1:8082", { username: "wxj", tele: "18596472191" }, function (data) {//post传参单独写
            console.log("后端返回的数据", data);
        })

Ajax

})
$.ajax({
   url:"http://127.0.0.1:8082",
   type:"get",
   data:{ username: "w", tele: "181" }, 
   success:function(result){
    console.log("后端返回的数据", result);
   }
})

设置Ajax默认值

$.ajaxSetup({
   beforeSend:function(xhr){
    console.log("发送请求前的xhr对象", xhr);
   }
})

对象转换成字符串

$.param({
  name:"lily",
  sex:"女",
  age:18
 })
 //"name=lily&sex=%E5%A5%B3&age=18"

数组转换成字符串

$.param([{
  name:"name",
  value:"lily"
 },
{
  name:"age",
  value:18
 },
{
  name:"sex",
  value:"girl"
 }])
 //"name=lily&age=18&sex=girl"