Jquery 常用方法一览表(集合)

简介

JQuery 属于 JavaScript 的库，它的出现主要为了让JavaScript的代码更加简洁、易读、易于编写。 JQuery是当今最流行的JS库，简化了技术处理，让开发者更便捷地开发。在这里我们会列出 JQuery 常用的方法与实例。

JQuery 常用方法

选择器

• 通过 id 选择器选取元素

$('#idName')

• 通过 class 选择器选取元素

$('.className')

• 通过标签名选择器选取元素

$('tagName')

事件绑定

• click 事件绑定

$('button').click(function(){
  alert('clicked')
})

• hover 事件绑定

$('button').hover(function(){
  alert('hovered')
})

样式

• 设置 css 样式

$('button').css('background-color', 'red')

• 添加类样式

$('button').addClass('className')

DOM 操作

• 插入 DOM 元素

$('body').append($('<div/>').addClass('class'))

• 删除 DOM 元素

$('p').remove()

示例说明

案例一：Set/Get 元素 value 值

• 实现功能：点击按钮时修改 input / textarea 元素的 value 值

<input type="text" id="inputName" />
<button id="btn">点击修改 input 的 value</button>
<textarea id="textareaName"></textarea>
<button id="btn">点击修改 textarea 的 value</button>

// 修改 input 的 value
$('#btn').click(function(){
  $('#inputName').val('new value');
});

// 修改 textarea 的 value
$('#btn').click(function(){
  $('#textareaName').val('new value');
});

案例二：根据滚动条位置控制元素出现与消失

• 实现功能：当滚动条位置超过 100 像素时，控制按钮显示；否则隐藏按钮

<button id="btn" style="display:none;">回到顶部</button>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $(window).scroll(function(){
    if($(this).scrollTop() > 100){
        $('#btn').fadeIn();
    }else{
        $('#btn').fadeOut();
    }
  });

  $('#btn').click(function(){
    $('html ,body').animate({scrollTop: 0}, 300);
    return false;
  });
</script>

结束语

JQuery 常用的方法其实还有很多，本文只是列出了几个常见的方法，希望对读者有所帮助。.jquery()方法是所有jQuery操作的入口，我们可以通过这个方法获得一个jQuery对象，进而对文档中的元素进行操作。熟悉JQuery的语法和常用方法，能够提高我们开发效率，快速构建复杂的页面交互效果。