jQuery常用API

---

前言

有前面的基础,敲就完事了.

---

一、代码示例

  //常用选择器
  $("#div1")
  $("span")
  $("p span")//后代节点
  $("p>span")//子代节点
  $(".red")
  $("*")
  $("div,span,p.cls")//选择所有div,span及class为p的一级元素

  //基本选择器
  $("span:first")
  $("span:last")
  $("td:even")//偶数节点
  $("td:odd")//奇数节点
  $("td:eq(1)")//索引节点
  $("td:gt(0)")//大于索引节点
  $("td:lt(2)")//小于索引节点
  $(":focus")//获取焦点节点
  $(":animated")//动画节点

  // 内容选择器:
  $("div:contains('hello')")//包含hello文本的节点
  $("td:empty")//空节点
  $("div:has(p)")//含有选择器匹配的节点
  $("td:parent")//含有子节点或文本的节点,与empty相反

  //表单选择器:
  $("input:checked")//掺选中节点
  $("select option:selected")//所有选中的option节点
  $(":input")//匹配所有input节点
  $(":text")//所有文本框
  $(":password")//所有密码框
  $(":radio")//所有单选按钮
  $(":checkbox")//所有复选框
  $(":submit")//所有提交按钮
  $(":reset")//所有重置按键
  $(":button")//所有button按钮
  $(":file")//所有文件域

  //查找
  $("p").eq(0)
  $("li").first()
  $("li").last()
  $(this).hasClass("node")//节点是否有特定类,返回布尔值
  $("li").has('ul')
  $("div").children()//div第一层的每个子节点
  $("div").find("span")//查找div下所有span节点
  $("p").next()//p节点后兄弟节点
  $("p").nextAll()//p节点后所有兄弟节点
  $("#node").nextUntil("$node2")//#node节点与#node2节点之间所有兄弟节点
  $("p").prev()//p节点前兄弟节点
  $("p").prevAll()
  $("#node").prevUntil(#node2)
  $("p").parent()//所有p节点的父节点
  $("p").parents()//所有p节点的所有父节点(会遍历所有上级直至body,html)
  $("#node").parentsUntil("#node2")
  $("div").siblings()//所有兄弟节点

  //属性操作:
  $("img").attr("src");
  $("img").attr("src","node.jpg");//设置所有图片src=node.jpg
  $("img").removeAttr("src");
  $("input[type='checkbox']").prop("checked",true)//选中复选框
  $("input[type='checkbox']").prop("checked",false)
  $("img").removeProp("src");

  //样式操作:
  $("p").addClass("selected");
  $("p").removeClass("selected");
  $("p").toggleClass("selected");//存在就删除,不存在就添加

  //内容操作:
  $("p").html();//返回p节点html内容
  $("p").html("Hello<b>hello</b>");//设置html内容
  $("p").text();
  $("p").text("Hello");
  $("input").val(); //获取文本框文本值
  $("input").val("hello");

  //css操作:
  $("p").css("color");
  $("p").css("color","red");
  $("p").css({"color":"red","background":"yellow"});

  //定位
  $("p").offset()//节点相对当前视口的偏移
  $("p").offset().top
  $("p").offset().left
  $("p").position()//节点相对于父节点的偏移,相当于offsetLeft,offsetTop
  $(window).scrollTop()
  $(window).scrollLeft()
  $(window).scrollTop("25")

  //尺寸
  $("p").height();
  $("p").width();
  $("p:first").innerHeight()//第一个P节点的内部高度,不包括border和margin
  $("p:first").innerWidth()
  $("p:first").outerHeight()//包括border
  $("p:first").outerWidth()
  $("p:first").outerHeight(true)//height+border+margin

  //Dom内部插入
  $("p").append("<b>hello</b>");//p节点内部后面插入
  $("p").appendTo("div")//p节点追加到div内后
  $("p").prepend("<b>Hello</b>");//p节点内部前面插入
  $("p").appendTo("div")//p节点追加到div内部前面

  //Dom外部插入
  $("p").after("<b>hello</b>");//p节点同级后插入
  $("p").before("<b>hello</b>");//p节点同级前插入
  $("p").insertAfter("#node");//p节点插入到#node的后面
  $("p").insertBefore("$node")

  //Dom替换
  $("p").replaceWith("<b>Hello</b>");//所有的p节点替换为html内容
  $("<b>hello</b>").replaceAll("p");//两个相反,一个换内容,一个换元素

  //Dom删除
  $("p").empty();//删除p节点内所有子节点
  $("p").remove();//删除整个p节点
  $("p").detach();//与remove类似,不同的是会保留绑定事件与附加数据(样式等)

  //Dom复制
  $("p").clone()//复制节点并选中副本
  $("p").clone(true)//是否复制

  //Dom加载完成
  $(document).ready(function(){
    //代码...
  });
  $(function(){
    //代码...
  });

  //绑定事件
  $("p").bind("click",function(){
    console.log("haha");
  });
  $("#div").bind({
    "mouseover":function(){
      $("#div").parent().removeClass("hide");//删除#div父节点的class = hide
    },"mouseout":function(){
      $("#div").parent().addClass("hide");
    }
  });//绑定多个事件
  $("#div").on("mouseover mouseout",function(){
    $("#div").parent().toggleClass("hide");
  });//与上面是相同效果
  $("p").one("click",function(){});//只执行一次
  $("p").unbind("click");//解除绑定事件
  $("p").delegate("click",function(){
    //代码...
  });//临时绑定
  $("p").undelegate();//删除
  $("p").undelegate("click")//只删除由delegate绑定的click事件

  $("p").click(function(){});
  $("p").dblclick(function(){});
  $("input[type=text]").focus(function(){});
  $("input[type=text]").blur(function(){});
  $("button").mouseup();//松开
  $("button").mousedown();//按下
  $("button").mousemove();//移动
  $("button").mouseover();//放上去
  $("button").mouseout();//拿下来
  $(window).keydown();
  $(window).keypress();
  $(window).keyup();
  $(window).scroll();
  $(window).resize();//调整浏览器大小触发事件
  $("input[type=text]").change();//文本框内容改变时
  $("input").select();
  $("form").submit();
  $(window).unload();//用户离开页面时

  //事件对象
  $("p").click(function(event){
    console.log(event.type);
  });
  // event的属性方法:
  event.pageX
  event.type
  event.pageY
  event.which
  event.data
  event.target
  event.data //传递事件处理函数的附加数据
  $("p").on("click","{name:'laowang'}",function(){
    console.log(event.data.name);
  });
  event.preventDefault()
  event.stopPropagation()

  //动态事件绑定:
  $("p").on("click","span",function(){});//当增加span时仍有效

  //动画效果:
  $("p").show()//显示隐藏
  $("p").show("slow");//$("p").show(1000)  $("p").show(1000,function(){});
  $("p").hide();
  $("p").toggle();
  $("p").slideDown("1000");//滑下
  $("p").slideUp("slow");//滑上
  $("p").slideToggle();
  $("p").fadeIn();//淡入
  $("p").fadeOut("fast");//淡出
  $("p").fadeToggle();
  $("p").fadeTo("slow",0.5);//慢速调整透明度到0.5
  $("p").animate({"css属性"},"speed",callback(){});
  $("p").stop()//第一个参数:是否清空当前动画序列(所有的动画);第二个参数:是否立即完成当前动画
  $("p").stop(false,false)//立即停止当前动画,后面的序列继续完成(到最后)然后结束
  $("p").stop(false,true)//立即完成当前动画(到最后),后面的序列继续完成(到最后)然后结束
  $("p").stop(true,true)//立即完成当前动画(到最后),后面的动画被清除(不执行了)
  $("p").stop(true,false)//立即停止当前动画,后面的动画也不执行了

  //工具方法
  $("form").serialize() //表格内容为字符串
  $("select,:radio").serializeArray();//返回json数据
  $.trim() //去除字符串两端空格
  $.each() //遍历一个数组或对象
  $.inArray()//返回一个值在数组中索引位置,不存在返回-1
  $.grep() //返回数组中符合标准的节点
  $.extend({a:1,b:2},{b:3,c:4},{c:5,d:6});//合并多个对象到第一个对象
  $.makeArray()//对象转化为数组
  $.type()//判断对象类型
  $.isArray()
  $.isEmptyObject()//判断对象是否为空(不含有任何属性)
  $.isFunction()
  $.isPlainObject()//判断是否为{}或new出来的对象
  $.support()//判断浏览器是否支持某个特性

  //Ajax
  //保存数据到服务器,成功返回信息
  $.ajax({
    type:"POST";
    url:"xxx.php";
    data:"name=laowang&pwd=123";
    success:function(msg){
      console.log(msg);
    }
  });
  $.get("xx.php",{name:"laowang",pwd:"123"});//get请求数据,忽略返回值
  $.post("xx.php",{name:"laowang",pwd:"123"},function(resText){
    console.log(resText);
  });
  $("#feeds").load("feeds.html");//加载文件内容