每天10个前端知识点：jQuery(上)

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

1. jQuery && js

2. jQuery效果

• .hide() 隐藏
• .show() 显示
• .slideDown() 下滑
• .slideUp() 上滑
• .fadeIn() 淡入
• .fadeOut() 淡出

参数：time时间，easing运动方式，fn回调函数

• .animate(params, [speed], [easing], fn)

eg: .animate({width: '100px', opacity: 1}, 'slow', {duration: 1000, easing: 'linear', complete: function(){...}})

animate()函数记得先清除定时器
$('ul').stop().animate(...);

3. jQuery选择器

(1) 伪类选择器

• $('li:first') 第一个
• $('li:last') 最后一个
• $('li:eq(n)') 第n+1个
• $('li:odd') 第奇数个 (tips:记忆odd字母个数为奇数个)
• $('li:even') 第偶数个 (tips:记忆even字母个数为偶数个)
• $('li:contains(xxx)') 包含文本xxx的li标签
• $('li:has(p)') 包含p标签的li标签

(2) 属性选择器

• $('input[type==password]') 属性type为password的input标签

4. jQuery操作css属性

• 获取 .css('name');

• 设置

  • 单一样式 .css('name', 'value')
  • 多个样式 .css({'name': 'value', 'name2': 'value2'})
    eg: .css('background-color': 'red')或者.css('backgroundColor': 'red')

5. jQuery操作内容

• 非表单

  • 获取 .html() // innnerHTML
  • 设置 .html('xxx')

• 表单

  • 获取 .val() // value
  • 设置 .val('xxx')

• 文本

  • 获取 .text()
  • 设置 .text('xxx')

6. jQuery操作类名

• 添加 .addClass('xxx')
• 删除 .removeClass('xxx')
• 添加/删除 .toggleClass('xxx')

7. jQuery操作属性

• 获取 .attr(name)

• 设置

  • 单一属性 .attr('name', 'value')
  • 多个属性 .attr({'name': 'value', 'name2': 'value2'})

8. jQuery DOM

(1) 创建元素

$('<div>text</div>')

(2) 添加元素

• .append()
  parent.append(child); 父级添加子级至末尾
• .appendTo
  child.appendTo(parent); 子级追加至父级末尾

• .prepend()
  parent.prepend(child); 父级添加子级至最前
• .prependTo()
  child.prependTo(parent); 子级追加至父级最前

• .before()
  sib1.before(sib2); sib2添加至同级sib1前面
• .after()
  sib1.after(sib2); sib2添加至同级sib1后面

• .insertBefore()
  sib1.insertBefore(sib2); sib1添加至同级sib2前面
• .insertAfter()
  sib1.insertAfter(sib2); sib1添加至同级sib2后面

• .wrap()
  child.wrap(parent); 子元素被父元素包裹
• .unwrap()
  child.unwrap(); 子元素移出上级父元素

(3) 删除元素

• .remove()
  obj.remove(); 删除obj节点

• .empty()
  obj.empty(); 删除obj内所有子节点

• .detach()

  • $('p').detach(); 删除所有p标签及其中内容
  • $('p').detach('.hello'); 删除所有类为hello的p标签及其中内容

9. jQuery事件

jQuery中所有事件都是绑定的

• .ready() DOM完全加载时执行的函数

• .change()

• .click()

• .dblclick() 双击 注意是dbl

• .contextmenu() 右击

• .hover()
  hover(over, out) 可以绑定两个方法

<script>
    obj.hover(function() {
        // 移入
    }, function() {
        // 移出
    })
</script>

• .mouseover()
• .mouseout()
• .mousedown()
• .mouseup()
• .mousewheel 鼠标滚轮 jQuery没有封装这个函数，需用on事件绑定
• .keydown()
• .keypress()
• .keyup()

最好不用jQuery封装的事件，都用on事件绑定

• .on() 绑定

• .off() 解绑

• .bind() 绑定

• .unbind() 解绑

// live() die() jQuery 1.7+被删除

jQuery事件绑定on()、bind()与delegate() 方法详解

事件相关

• return false; 阻止默认事件、阻止冒泡
• ev.preventDefault(); 阻止默认事件
• ev.stopPropagation(); 阻止冒泡

事件委托

• 第一种方法
  .on(events, selector, callback)

<script>
    // $('table td').on('hover', function() {
    //  $(this).toggleClass('active');
    // })

    // =>

    $('table').on('hover', 'td', function() {
        #(this).toggleClass('active');
    })
</script>

• 第二种方法
  .delegate()

<script>
    $('table').delegate('td', 'hover', function() {
        $(this).toggleClass('active');
    })
</script>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。