正文

掌握jQuery必备：50个实用函数解析与应用案例

/0 浏览量
0405

1. 选择器函数：$() 和 .

jQuery 的核心是选择器，通过选择器可以轻松地选取页面中的元素。以下是几个常用的选择器函数：

$()

  • 功能：这是 jQuery 的入口函数，用于获取页面上的元素。
  • 示例： 
    
var $div = $("div"); // 获取页面中所有的 div 元素

.

  • 功能：这是类选择器，用于选取具有特定类的元素。
  • 示例： 
    
var $classDiv = $(".myClass"); // 获取所有具有 myClass 类的 div 元素

2. 属性操作函数

属性操作函数可以用来获取或设置元素的属性。

.attr()

  • 功能：获取或设置元素的属性。
  • 示例： 
    
var $attr = $("#myId").attr("title"); // 获取 id 为 myId 的元素的 title 属性
$("#myId").attr("title", "Hello World!"); // 设置 id 为 myId 的元素的 title 属性为 Hello World!

.prop()

  • 功能：获取或设置元素的属性，与 .attr() 类似，但 .prop() 专门用于获取或设置 DOM 属性。
  • 示例： 
    
var $prop = $("#myId").prop("checked"); // 获取 id 为 myId 的元素的 checked 属性
$("#myId").prop("checked", true); // 设置 id 为 myId 的元素的 checked 属性为 true

3. 文本操作函数

文本操作函数可以用来获取或设置元素的文本内容。

.text()

  • 功能：获取或设置元素的文本内容。
  • 示例： 
    
var $text = $("#myId").text(); // 获取 id 为 myId 的元素的文本内容
$("#myId").text("Hello World!"); // 设置 id 为 myId 的元素的文本内容为 Hello World!

.html()

  • 功能：获取或设置元素的 HTML 内容。
  • 示例： 
    
var $html = $("#myId").html(); // 获取 id 为 myId 的元素的 HTML 内容
$("#myId").html("<p>Hello World!</p>"); // 设置 id 为 myId 的元素的 HTML 内容为 <p>Hello World!</p>

4. 事件处理函数

事件处理函数可以用来绑定或触发事件。

.on()

  • 功能：绑定事件处理函数。
  • 示例： 
    
$("#myId").on("click", function() {
alert("Hello World!");
});

.trigger()

  • 功能：触发事件。
  • 示例： 
    
$("#myId").trigger("click");

5. 动画函数

动画函数可以用来实现元素的动画效果。

.animate()

  • 功能：实现元素的动画效果。
  • 示例： 
    
$("#myId").animate({ left: "100px" }, 1000); // 将 id 为 myId 的元素水平移动到 100px 的位置，动画持续 1000 毫秒

6. 其他实用函数

以下是一些其他实用的 jQuery 函数：

.css()

  • 功能：获取或设置元素的 CSS 样式。
  • 示例： 
    
var $css = $("#myId").css("color"); // 获取 id 为 myId 的元素的字体颜色
$("#myId").css("color", "red"); // 设置 id 为 myId 的元素的字体颜色为红色

.val()

  • 功能：获取或设置表单元素的值。
  • 示例： 
    
var $val = $("#myId").val(); // 获取 id 为 myId 的表单元素的值
$("#myId").val("Hello World!"); // 设置 id 为 myId 的表单元素的值为 Hello World!

以上是 50 个实用的 jQuery 函数解析与应用案例，希望对您有所帮助。在实际开发中，您可以根据需要灵活运用这些函数，实现各种丰富的页面效果。

-- 展开阅读全文 --