jquery备忘录

本文详细介绍jQuery的选择器筛选、表单及方法选择器等核心功能,并覆盖节点操作、样式内容修改、动画效果、位置大小获取等多个方面。此外,还介绍了jQuery与DOM对象间的转换方法及$.each和$().each的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jquery 是一个js库

 

    1)选择器筛选 

       $('.box li:first')   //last

       $('.box li:eq(2))

        $('.box li:gt(2)')  索引比2大的li元素   //小于 -- lt()

       $('.box li:even')  //odd

    2)表单选择器  $('.box  input:radio')   表单中是radio的input

    3)方法选择器: 

      $('.box').eq(1)

      $('.box').first()

      $('.box').parent()  父元素

      $('.box').children('li')

      $('.box').find('li')

      $('.box').siblings('li')

      $('.box').prev()  上一个元素   //.next()

      $('.box').prevAll()

 

    4)节点操作

      empty()   remove()  clone()  replace() 

      after()     before()   

      append()   appendTo()   prepend()

      创建元素: var aObj = $('<a href="javascript: void(0)">+i+</a>');

           $('#box').prepend(aObj);

    5)修改样式和内容

      addClass('')   removeClass('')  toggleClass('')

      .html()  .text()  .val()

      .css({'backgroundColor' : 'red' , 'color': 'green'})

    6) 设置和获取自定义属性

      .attr()    .removeAttr()   

      .prop('属性名', '属性值') (用于获取类似于checked的属性)

    7)动画效果

       slideToggle()   fadeToggle()  show()   hide()

       stop()  delay()

       自定义动画 animate({'width: 200px'}, speed(1000/slow), easing(linear/swing), callback)

    8)位置大小获取

      .offset().top/left

      .scrollTop()   scrollLeft()

      .width()   .height()

      .pageX  .pageY

    9)jquery 和 dom 对象转换

      转为dom元素: $('#box').get(0)      $('#box')[0]

      转为jq元素:  $(btn)  

    10) $().each方法 和 $.each() 

      $('#box').each(function(index, item) {

        item.css('opacity', 1)

      })

      $.each($('input:checkbox'), function(index, item) {

        

      })  

 

    11)阻止冒泡

      return false; 

      stopPropagation()

 

  

      

          

转载于:https://www.cnblogs.com/noraZhang/p/10193116.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值