jQuery常用的一些知识点总结

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

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"
复制代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值