jquery 学习笔记 传智博客佟老师附详细注释

jQuery 学习笔记攻略

概述

"jQuery 学习笔记 传智博客佟老师附详细注释" 是一篇帮助初学者快速上手 jQuery 的文章。jQuery 是一个非常流行且实用的 JavaScript 库，广泛应用于网页开发中的交互效果、动画效果等方面。该文章详细介绍了 jQuery 的基本语法，常用方法以及实例操作，适合初学者系统地学习 jQuery。

内容

该文章主要分为以下几个部分：

1. 引入 jQuery 库
2. jQuery 语法
3. jQuery 常用方法
4. jQuery 实例操作

1. 引入 jQuery 库

在使用 jQuery 前，需要在 HTML 中引入 jQuery 库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. jQuery 语法

• 选取元素

通过选择器选取一个或多个元素，语法如下：

$(selector)

其中，selector 是一个 CSS 选择器。

• 操作元素

通过 jQuery 方法来操作选取的元素，语法如下：

$(selector).action()

其中，action 是对选取元素进行的操作，比如修改元素的属性、添加、删除元素等。

• document 加载完成后执行函数

当 document 加载完毕后执行 jQuery 函数，语法如下：

$(document).ready(function(){
  // jQuery 函数
});

3. jQuery 常用方法

• 修改 HTML 内容

通过 jQuery 的 .html() 方法，可以修改 HTML 元素的内容，语法如下：

$(selector).html(content)

• 修改元素属性

通过 jQuery 的 .attr() 方法，可以修改 HTML 元素的属性，语法如下：

$(selector).attr(attribute, value)

• 隐藏/显示元素

可以通过 jQuery 的 .hide() 和 .show() 方法来隐藏或显示元素，语法如下：

$(selector).hide()
$(selector).show()

• 动画效果

对选取的元素进行动画效果，比如渐隐、渐显等，可以使用 jQuery 的 .fadeIn() 和 .fadeOut() 方法，语法如下：

$(selector).fadeIn()
$(selector).fadeOut()

4. jQuery 实例操作

以下是两个 jQuery 实例操作的示例：

示例 1：通过文本框传值

<button>传值</button>
<input type="text" id="name">
<p></p>

<script>
  $(document).ready(function(){
     $("button").click(function(){
       var name = $("#name").val();
       $("p").text(name);
     });
  });
</script>

当点击按钮时，获取文本框中的值，并将其输出到一个 <p> 标签中。

示例 2：鼠标滑过图片时添加阴影效果

<img src="image.jpg" alt="" width="300px" height="300px">

<script>
  $(document).ready(function(){
     $("img").hover(function(){
       $(this).css("box-shadow", "5px 5px 5px #666");
     }, function(){
       $(this).css("box-shadow", "none");
     });
  });
</script>

当鼠标滑过图片时，给图片添加阴影效果，当鼠标移开时，去掉阴影效果。

总结

"jQuery 学习笔记 传智博客佟老师附详细注释" 是一篇非常好的 jQuery 学习入门资料，详细介绍了 jQuery 的基本语法、方法以及实例操作。掌握和应用 jQuery，可以为网站的交互效果、动画效果带来不少惊喜。