分享15个大家都熟知的 JQuery 小技巧

JQuery 是目前最流行的 JavaScript 库之一，它可以让开发者更加轻松地操作 DOM 元素、处理事件、发送 Ajax 请求等。

在本文中，我将分享 15 个大家都熟知的 JQuery 小技巧，这些技巧可以让你更加高效地进行开发。

1. 简化 document.ready()

在 JQuery 中，我们通常使用 $(document).ready(function() {...}) 来在 DOM 加载完成后执行一些脚本。但是，我们可以简写为 $().ready(function() {...}) 或 $(function() {...})。

下面是一个简单的示例：

$().ready(function() {
  // ...
});

可以简写为：

$(function() {
  // ...
});

2. 链式操作

JQuery 的链式操作可以让我们更加方便地操作 DOM 元素。比如，在 JQuery 中，我们可以：

$('#myDiv').css('color', 'red').find('a').addClass('highlight');

以上代码会选中 ID 为 myDiv 的元素，并将其颜色设置为红色，然后再找到其中的所有 a 元素，并添加 highlight 类名。

3. 序列化表单数据

JQuery 提供了简单的方法来序列化表单数据，这可以让我们轻松地将表单数据转换成 URL 字符串。我们只需要使用 serialize() 方法即可：

var formData = $('#myForm').serialize();

4. 属性操作

JQuery 提供了一些简单的方法来操作 DOM 元素的属性。比如：

attr('name', 'value')：设置元素的属性值。
removeAttr('name')：移除元素的属性值。
prop('name', 'value')：设置元素的属性值（适用于 Boolean 类型属性）。
removeProp('name')：移除元素的属性值（适用于 Boolean 类型属性）。

以下是一个示例：

$('#myDiv').attr('title', 'My Title');
$('#myDiv').removeAttr('title');
$('#myCheckbox').prop('checked', true);
$('#myCheckbox').removeProp('checked');

5. class 操作

JQuery 提供了一些简单的方法来操作 DOM 元素的 class。比如：

addClass('className')：添加一个 class。
removeClass('className')：移除一个 class。
toggleClass('className')：在 addClass 和 removeClass 之间切换。

以下是一个示例：

$('.myElement').addClass('highlight');
$('.myElement').removeClass('highlight');
$('.myElement').toggleClass('highlight');

6. 内容操作

JQuery 提供了一些简单的方法来操作 DOM 元素的内容。比如：

html('content')：设置元素的 HTML 内容。
text('content')：设置元素的文本内容。
val('value')：设置元素的值。

以下是一个示例：

$('#myDiv').html('<p>My HTML content</p>');
$('#myDiv').text('My text content');
$('#myInput').val('My value');

7. 事件处理

JQuery 提供了一些简单的方法来处理 DOM 元素的事件。比如：

click(function)：点击事件。
dblclick(function)：双击事件。
hover(function1, function2)：悬停事件（鼠标进入和离开时触发）。
on(event, selector, function)：绑定事件（动态元素也可以使用）。

以下是一个示例：

$('#myButton').click(function() {
  // ...
});
$('#myLink').dblclick(function() {
  // ...
});
$('#myDiv').hover(function() {
  // 鼠标进入时触发
}, function() {
  // 鼠标离开时触发
});
$(document).on('click', '.myDynamicElement', function() {
  // ...
});

8. 动画效果

JQuery 提供了一些简单的方法来实现动画效果。比如：

hide(speed)：隐藏元素。
show(speed)：显示元素。
toggle(speed)：在隐藏和显示之间切换。
fadeOut(speed)：淡出元素。
fadeIn(speed)：淡入元素。
fadeToggle(speed)：在淡出和淡入之间切换。
slideUp(speed)：向上滑动元素。
slideDown(speed)：向下滑动元素。
slideToggle(speed)：在向上滑动和向下滑动之间切换。

以下是一个示例：

$('#myDiv').hide('slow');
$('#myDiv').show('slow');
$('#myDiv').toggle('slow');
$('#myDiv').fadeOut('slow');
$('#myDiv').fadeIn('slow');
$('#myDiv').fadeToggle('slow');
$('#myDiv').slideUp('slow');
$('#myDiv').slideDown('slow');
$('#myDiv').slideToggle('slow');

9. Ajax 请求

JQuery 提供了一些简单的方法来发送 Ajax 请求。比如：

$.get(url, data, success)：发送 GET 请求。
$.post(url, data, success)：发送 POST 请求。
$.ajax(options)：发送自定义请求。

以下是一个示例：

$.get('myPage.html', function(data) {
  $('#myDiv').html(data);
});
$.post('myPage.php', {name: 'John', email: 'john@example.com'}, function(data) {
  $('#myDiv').html(data);
});
$.ajax({
  type: 'POST',
  url: 'myPage.php',
  data: {name: 'John', email: 'john@example.com'},
  success: function(data) {
    $('#myDiv').html(data);
  }
});

10. 插件使用

JQuery 有许多强大的插件，可以让我们更加便于开发。比如：

jQuery UI：用户界面组件。
Slick：轮播组件。
FullCalendar：日历组件。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<div id="myDialog">My dialog content</div>

<script>
  $(function() {
    $('#myDialog').dialog();
  });
</script>

</body>
</html>

11. 扩展插件

除了使用现成的插件外，我们还可以自己编写 JQuery 插件。比如：

$.fn.myPlugin = function() {
  this.text('Hello world');
};

使用：

$('#myElement').myPlugin();

12. 级联选择器

JQuery 的级联选择器可以让我们更加方便地选中 DOM 元素。比如，我们可以使用以下选择器：

$('div p')：选中 div 元素内的 p 元素。
$('ul li')：选中 ul 元素内的所有 li 元素。
$('parent > child')：选中 parent 元素内作为 child 元素直接子元素的元素。

以下是一个示例：

$('div p').addClass('highlight');
$('ul > li').addClass('highlight');
$('div > p').addClass('highlight');

13. 查找元素

JQuery 的查找方法可以让我们更加快速地找到需要的 DOM 元素。比如：

$('#myDiv')：通过 ID 查找元素。
$('.myClass')：通过 class 查找元素。
$('input[type="text"]')：通过属性查找元素。
$('div:first')：通过位置查找元素。

以下是一个示例：

$('#myDiv').addClass('highlight');
$('.myClass').addClass('highlight');
$('input[type="text"]').addClass('highlight');
$('div:first').addClass('highlight');

14. 获取元素信息

JQuery 的一些方法可以让我们获取元素的信息。比如：

position()：获取元素相对父元素的位置。
offset()：获取元素相对于文档的位置。
height()：获取元素的高度（不包括 padding、border 和 margin）。
width()：获取元素的宽度（不包括 padding、border 和 margin）。

以下是一个示例：

var position = $('#myDiv').position();
var offset = $('#myDiv').offset();
var height = $('#myDiv').height();
var width = $('#myDiv').width();

15. 遍历元素

JQuery 的遍历方法可以让我们更加方便地遍历 DOM 元素。比如：

each(function)：遍历元素。
filter(selector)：过滤元素。
not(selector)：过滤掉符合 selector 的元素。

以下是一个示例：

$('#myDiv > p').each(function() {
  $(this).addClass('highlight');
});
$('#myDiv > p').filter('.myClass').addClass('highlight');
$('#myDiv > p').not('.myClass').addClass('highlight');

以上就是 15 个大家都熟知的 JQuery 技巧了，希望对你的开发有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：分享15个大家都熟知的jquery小技巧 - Python技术站

分享15个大家都熟知的jquery小技巧

分享15个大家都熟知的 JQuery 小技巧

1. 简化 document.ready()

2. 链式操作

3. 序列化表单数据

4. 属性操作

5. class 操作

6. 内容操作

7. 事件处理

8. 动画效果

9. Ajax 请求

10. 插件使用

11. 扩展插件

12. 级联选择器

13. 查找元素

14. 获取元素信息

15. 遍历元素

相关文章