jquery 代码示例

现如今，jQuery已成为最为流行的JavaScript库之一。它独特的简洁语法使得DOM操作变得轻松愉快。在此，我们将介绍一些最常用的jQuery代码示例，让您深入了解并掌握jQuery的基础用法。 首先，我们先来看一下使用jQuery选择元素的方式。jQuery选择器类似于CSS选择器，可以非常方便地选择任何元素。下面是一些常见的选择器示例：

// 选择ID为“wrapper”的div元素
$('#wrapper')

// 选择所有p元素
$('p')

// 选择类名为“intro”的所有元素
$('.intro')

// 选择所有拥有自定义属性data-price的元素
$('[data-price]')

接下来，我们来看一下如何修改元素的CSS样式。使用jQuery修改CSS样式非常简单，可以使用.css()方法来设置任何CSS属性。代码如下：

// 将所有p元素的字体颜色设置为红色
$('p').css('color', 'red');

// 将ID为“wrapper”的元素的背景色设置为蓝色
$('#wrapper').css('background-color', 'blue');

// 将类名为“intro”的所有元素的字体大小设置为20像素
$('.intro').css('font-size', '20px');

然后，我们继续看一下如何使用jQuery来操作文本。我们可以使用.text()方法来获取、设置元素的文本内容。另外，还可以使用.html()方法来获取、设置元素的HTML内容。代码如下：

// 获取ID为“title”的h1元素的文本内容
var text = $('#title').text();

// 将ID为“subtitle”的h2元素的HTML设置为“Welcome to my website”
$('#subtitle').html('Welcome to my website');

最后，我们来学习一下如何使用jQuery来动态添加元素。使用jQuery添加元素非常容易，我们只需要使用.append()、.prepend()、.before()、.after()等方法来实现。例如，下面的代码将添加一个新的列表项到ID为“list”的列表中：

var newItem = {'title': 'New Item', 'price': '$9.99'};
var li = $('
').addClass('item').appendTo('#list');
$('
').text(newItem.title).appendTo(li);
$('').addClass('price').text(newItem.price).appendTo(li);

以上代码使用$()方法来创建新的元素，并将它们添加到现有的列表中。通过类名添加样式将新添加的元素呈现在视觉上。 通过以上几个示例，您现在应该已经掌握了jQuery的基础用法。无论是DOM操作，还是CSS样式修改，都可以用jQuery简单地实现。学习这些基础知识后，您将有更多的自信和能力去完成更复杂的任务。