jQuery常用的一些知识点总结

  前段时间在看锋利的JQuery时看到一下有用的知识点，当时就总结了下来，以便将来不记得的时候再来看，同时也将一些工作中常用的jquery知识点记录下来。写得不对的地方，还烦请大神们指出。

• 1、jQuery对象和dom对象的互换
• 2、判断check复选框是否被勾选
• 3、判断dom元素是否存在
• 4、过滤选择器
• 5、删除节点
• 6、复制节点换
• 7、替换节点换
• 8、包裹节点选
• 9、属性和样式操作
• 10、设置和获取HTML、文本和值换
• 11、遍历节点
• 12、元素定位
• 13、合成事件
• 14、事件冒泡
• 15、事件对象属性
• 16、模拟操作
• 17、动画
• 18、ajax
• 19、序列化元素

1、jQuery对象和dom对象的互换

将jquey对象转换为dom对象

var $cr=$("#cr");//jquery对象
var cr=$cr[0];//dom对象
复制代码

将dom对象那个转换为jquery对象

var cr=document.getElementById("cr");//dom对象
var $cr=$(cr)//jquery对象
复制代码

2、判断check复选框是否被勾选

  dom方式判断是否选中，以属性的形式进行判断

    var cr=document.getElementById("cr");//dom对象
    if(cr.checked)
复制代码

  jQuery方式判断是否选中

    var $cr=$("#cr")
    if($cr.is(":checked"))
复制代码

3、判断dom元素是否存在

    if($("#tt")){}//不推荐
    if($("#tt").length>0){}//推荐
    if($("#tt")[0]){}//推荐
复制代码

4、过滤选择器

 4.1、基本过滤选择器

  $("div:first")、$("div:last")//获取第一个/最后一个div元素
  $("div:not(.myclass)");//选取class不是myClass的div元素
  $("div:even")、$("div:odd")、$("div:gt/lt/eq(index)"):查找自然顺序为奇数(索引值为偶数)的div标签、或者(大于、小于、等于)索引值的标签。
  $(":header")；//获取所有的标题元素
  $(":animated")//获取当前正在执行动画的元素
  $(":focus")//选取当前具有焦点的元素
复制代码

 4.2、内容过滤选择器

  $("div:contains('我')")//文本中含有我的元素
  $("div:empty")//选取不含子元素（包括文本元素）的div元素
  $("div:has('p')")//选取含有p元素的div元素
  $("tbody>tr:has(':checked')").addClass("selected")：表格中单/复选框被选中的话变颜色。
  $("div:has('.p')")//选取class为p的div元素
  $("div:parent")//选取含有子元素（包括文本元素）的div元素
复制代码

 4.3、可见性过滤选择器

  $("div:hidden")、$("div:visible"):获取显示或隐藏的div元素
复制代码

 4.4、属性过滤选择器

  $("div[title=test]")//获取title=test的div元素
复制代码

 4.5、子元素过滤选择器

  $("li:nth-child(2n)")://表示索引值为2的倍数的li标签，如第2、4...
复制代码

 4.6、表单对象属性过滤选择器

  $("input:enabled"),获取所有可用元素；
  $("input:disabled"),获取所有不可用元素。
  $("input:checked")：获取所有被选中的元素（单选框、复选框）
  $("select option:selected")获取所有被选中的元素（下拉列表）
  //注意：选择器空格与不空格的区别
  $("form:enabled")//表示可用的form元素
  $("form :enabled")//表示form中可用的子元素
复制代码

 4.7、表单选择器

  $(":input")//包括textarea，selection等元素
  $(":text")、$(":radio")、$(":image")、$(":reset")、$(":button")、$(":file")
复制代码

5、删除节点

  remove():该节点包含的左右的后代节点也会被删除，$("#div").remove()返回的是被删除的该元素
  detach():与remove不一样的是：所有绑定的事件，附加的数据都会被保存下来。
  empty():清空该元素的所有后代节点。
复制代码

6、复制节点

  clone()：生成被选元素的副本，包含子节点、文本和属性。
  clone(true):参数true的目的是为了在复制元素的同时也复制元素所绑定的事件，因此该元素的副本也有复制的功能。
复制代码

7、替换节点

  replaceWith()、replaceAll();      
  注意：元素被替换元素绑定的事件也需要重新绑定。
复制代码

8、包裹节点

  wrap():$("p").wrap("b")用b标签把p标签包裹起来。只包裹一个
  wrapAll():$("p").wrapAll("b")包裹所有的p元素。
  wrapInner():$("p").wrapInner("b")p标签里的内容被b标签包裹起来了。
复制代码

9、属性和样式操作

  1、设置和删除属性：
  $("div").attr(),$("div").removeAttr();
  2、切换样式
  toggleClass("class")://没有class类时则添加，有时则删除。
  hasClass()，removeClass()
复制代码

10、设置和获取HTML、文本和值

    html()、text()、val()
复制代码

11、遍历节点

  children():获取子节点（不包括空节点和注释和文本节点）
  next():后面紧邻的同辈元素。
  prev():前面紧邻的同辈元素。
  siblings():前后所有的同辈元素。
  closest():获取最近的匹配元素。
  $("div").height()/width()获取的是高度值/宽度值，css("height")获取的是带有单位的数据。
复制代码

12、元素定位

  offset():获取的是元素在当前视窗的相对偏移。返回的对象包含两个属性left和top属性。
  position():获取的是元素相对最近一个position样式是relative或者absolute的祖父节点的偏移。将所有的祖先元素偏移加起来的值
  scrollTop(),scrollLeft():获取元素距顶端和左边的距离。
复制代码

13、合成事件

  hover():用于模拟光标悬停事件hover(mouseenter,mouseleave)
  toggle():模拟鼠标连续单击事件。切换元素的可见状态。
复制代码

14、事件冒泡

  停止事件冒泡：event.stopPropagation()
  阻止默认行为：event.preventDefault()
  return false;具有上面两种方法的功能。
复制代码

15、事件对象属性

    event.typ、event.target、event.which(获取鼠标左中右键)、event.pageX、event.pageY、event.clientX、event.clientY
复制代码

16、模拟操作

  $("#btn").trigger("click")=$("#btn").click():当页面加载完毕后，就会立即出发click事件。
  触发自定义事件：
  $("#btn").bind("myclick",function(event，msg1，msg2){});//绑定事件
  $("#btn").trigger("myclick",["s1","s2"])//触发事件，还可以传递数据
复制代码

17、动画

  show()、hide():先记住display的值，在改变display的值。//改变元素的显示还是隐藏。
  fadeIn():透明度渐渐变为1；fadeOut():透明度渐渐变为0。//改变元素的透明度。fadeToggle()
  slideUp(),slideDown():改变元素的高度。//slideToggle()
  累加、累减动画：$("panel").click(function(){
    $(this).animate({left:"+=500px"},300)
    $(this).animate({left:"100px",height:"200px"},3000)
  })
  停止动画：stop():停止正在进行的动画。
  延迟动画：delay(1000)
复制代码

18、ajax

  load(url,data,callback):远程载入html代码并加载到dom中.$("#test").load("test.html"):将test.html加载到$("#test")中。
  load("test.html .para"):加载text.html中class为para的内容
  load(url,{"a":1,"b":2},function(){})//post请求方式
  getScript(),getJson()//加载json文件
  $.ajax()//是jquery最底层的Ajax实现
复制代码

19、序列化元素

  1、serialize():作用于一个jquery对象，将dom元素内容序列化为字符串。$("#form1").serialize(),将表单中的单选框和复选框序列化时，
  只会将他们的值序列化。
  2、serializeArray():作用于一个jquery对象，将dom元素内容序列化为json。
  3、$.param():是serialize()的核心，将数组或对象按照key/value进行序列化。
     var obj={"a":1,"b":2};
     var k=$.param(obj);
     console.log(k)///输出："a=1&b=2"
复制代码