重拾jQuery

Posted 2021-02-13 ownerblog

　　最近经常被分配一些切图的工作，于是乎我就不能愉快的用vue这些数据驱动的框架了，那就让我们愉快的继续使用jQuery吧！

　　一、jQuery选择器

　　$(this)

　　$(‘p‘)

　　$(‘#xxx‘)

　　$(‘.xxx‘)

　　$(‘li:first‘)

　　$(‘[href="#"]‘)

　　二、jQuery使用注意

　　命名冲突：var xxx=jQuery.noConflict()，

　　尽量将函数放在就绪的事件处理器中

　　三、jQuery常用方法

1. 获取/设置值
   .html() / .html(‘<p>xxx</p>‘)
   .val() / .val(‘xxx‘)
   .text() / .text(‘xxx‘)
   .attr(‘href‘) / .attr(‘href‘,‘###‘) 获取设置属性较为特殊，key-value
2. 有关css
   .css(‘background‘) / .css({‘background‘:‘blue‘;‘height‘:‘100%‘})
   .addClass(‘xxx‘) //xxx:类名
   .removeClass(‘xxx‘) //xxx:类名
   .toggleClass(‘xxx‘) //class切换操作
3. 遍历
   xxx祖先：
   $(‘xxx‘).parent() //直接父元素
   $(‘xxx‘).parents(‘xxx‘) //所有
   $(‘xxx‘).parentUntil(‘xxx‘) //xxx-xxx之间的父元素
   xxx后代：
   $(‘xxx‘).childern() //直接子元素
   $(‘xxx‘).find() //所有子元素
   xxx同辈：
   .siblings()
   .next() 
   .nextAll()
   .nextUntil()
   .prev()
   .prevAll()
   .prevUntil()
   过滤：
   .first()
   .last()
   .eq(0) //索引
   .filter()
   .not()
4. 添加:
   .append() //在被选元素的结尾添加
   .prepend()
   .after() //在元素后添加
   .before()
   删除:
   .remove() //移除它本身及其子元素
   .empty() //只移除它的子元素
5. 尺寸：
   width()
   height()