JavaScript与JQuery框架基础入门教程

2023年5月18日上午12:57 • JavaScript

JavaScript与JQuery框架基础入门教程

什么是JavaScript？

JavaScript 是一种编程语言，通常用于在网页上添加交互性和动态性。不像 HTML 和 CSS，JavaScript 是一种脚本语言，它需要通过浏览器来解释和执行。JavaScript 是一种非常流行的编程语言，它的使用广泛，可用于开发网页、移动应用、游戏等。

JavaScript 基础语法

JavaScript 有几种不同的语法结构，用于实现不同的编程功能。下面是一些基础语法：

变量

JavaScript 使用 var 语句来声明变量。变量是用于存储数据的容器。例如，下面是声明变量和赋值的语法：

var x = 5;

此时，变量 x 的值为 5。

函数

函数是一组可重复使用的语句，用于执行特定任务。例如，下面是一个简单的函数，它将两个数字相加并返回结果：

function add(a, b) {
  return a + b;
}

事件处理程序

事件处理程序是 JavaScript 中最常用的一种语法结构之一。它们是一些代码块，用于在事件发生时执行操作。例如，下面是一个简单的点击事件处理程序：

document.getElementById("myButton").onclick = function() {
  alert("Hello, world!");
};

以上代码会在点击 id 为 myButton 的按钮时弹出一个警告。

JQuery 框架

jQuery 是一个广泛使用的 JavaScript 库，它被设计用于简化 HTML 文档树遍历和操作、事件处理、动画和 Ajax 等操作。jQuery 的基本语法是：

$(selector).action();

$：定义 jQuery
selector：用于选择 HTML 元素的表达式
action()：jQuery 方法，用于执行操作

jQuery 例子

下面是两个 jQuery 的例子：

隐藏和显示 HTML 元素

hide() 和 show() 方法用于做出元素消失或重新显示的效果，它们是 jQuery 中最常用的方法之一。

下面的代码片段使用 hide() 和 show() 来隐藏和显示 p 元素：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <p>这是一个段落。</p>
  <button>隐藏/显示</button>

<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").toggle();
    });
  });
</script>

</body>
</html>

操作 HTML 元素

使用 jQuery，可以直接操作 HTML 元素的 CSS 属性、内容和属性。下面的代码演示了如何使用 jQuery 设置文本框的值和背景颜色：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <input type="text" id="myInput" value="默认文本">
  <p>点击按钮以更改文本框值</p>
  <button>更改文本框值</button>

<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#myInput").val("新文本");
      $("#myInput").css("background-color", "yellow");
    });
  });
</script>

</body>
</html>

以上代码在文本框内设置了新的文本并将其颜色更改为黄色。