jquery备忘录

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()

扫描二维码关注公众号，回复： 4752577 查看本文章

　　　　　　$('.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()