从零开始了解JS（补充一下前端基础知识）

最新推荐文章于 2024-07-25 09:24:40 发布

落雨青石街

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量151

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_43391574/article/details/110944846

版权

Java Script

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
具体页面元素对事件做出反应，能改变HTML内容，如以下代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

jQuery

jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程。
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。基础语法： $(selector).action()。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

注意到$(document).ready(function()是一个文档就绪事件，为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM（文档对象模型）加载完成后才可以对 DOM 进行操作。
jQuery 提供了多种遍历 DOM （家族树）的方法，遍历方法中最大的种类是树遍历（tree-traversal）。
jQuery支持AJAX交互，AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
出色的DOM操作封装，完善的ajax封装，可靠的事件处理机制是jQuery框架的优点

JSP

JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以‘<%’开头，以‘%>’结束。

<html>
    <head>
           <title>第一个 JSP 程序</title>
    </head>
    <body>
           <%
                  out.println("Hello World！");
           %>
    </body>
</html>

与JavaScript相比：虽然JavaScript可以在客户端动态生成HTML，但是很难与服务器交互，因此不能提供复杂的服务，比如访问数据库和图像处理等等。

JSTL-JSP Standard Tag Library

以下是JSLT常用的三个标签库

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法，类似 XML。

JSON 比 XML 更小、更快，更易解析。

{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
来自：菜鸟教程：https://www.runoob.com/json/json-tutorial.html?_t_t_t=0.3856193194561006

落雨青石街

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始了解JS（补充一下前端基础知识）

Java ScriptJavaScript 是 web 开发人员必须学习的 3 门语言中的一门：HTML 定义了网页的内容CSS 描述了网页的布局JavaScript 网页的行为具体页面元素对事件做出反应，能改变HTML内容，如以下代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </he
复制链接

扫一扫