JavaScript 使用技巧

最新推荐文章于 2024-08-13 07:20:51 发布

延迟满足

最新推荐文章于 2024-08-13 07:20:51 发布

阅读量197

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/a1102325298/article/details/104043192

版权

javascript基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、JavaScript 介绍

JavaScript 是一种脚本语言，是一种解释型语言（就是说，代码执行不进行预编译）。JavaScript 被设计用来向 HTML 页面添加交互行为。

组成：

ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)
DOM：文档对象模型，包含(整个 html 页面的内容)
BOM：浏览器对象模型,包含(整个浏览器相关内容)

只能使用 var 定义，如果在函数的内容使用 var 定义，那么它是一个局部变量，如果没有使用 var 它是一个全局的。弱类型！

二、 Ajax

async 默认是 true，即为异步方式，$.ajax 执行后，会继续执行 ajax 后面的脚本，直到服务器端返回数据后，触发 $.ajax 里的 success 方法，这时候执行的是两个线程。
async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

var temp;
$.ajax({
    async: false,
    type : "post",
    url : defaultpostdata.url,
    datatype : 'json'，
    success : function(data) {
    temp=data;
}
});
alert(temp);

三、页面局部跳转

3.1 a 标签的target指向iframe实现页面局部刷新

<ul>
    <li><a href="M2.html" target="myFrame">培养目标</a></li> 
    <li><a href="M3.html" target="myFrame">培养目标</a></li>
</ul> 
<iframe width="600" height="300" name="myFrame"> </iframe>

3.2 vue 路由

b 站 vue-router 视频地址

四、常用操作

// 获取用户输入的数据
var uValue = document.getElementById("user").value;

// 设置定时操作
function init(){
  setInterval("changeImg()",3000);
}

// 清除定时操作
time = setInterval("showAd()",3000);
clearInterval(time);

//页面加载时执行
<body onload="init()"> 

//对于js少的代码，可以直接写在html标签里
<input type="button" value="" onclick="javascript:location.href='demo.html'"/>

<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
input的size属性可调整大小

五、jquery 教程

给按钮添加 click 事件：https://www.w3school.com.cn/jquery/event_click.asp

注意：要等全部 DOM 节点加载完成后，在给 DOM 添加 click 事件，否则 click 事件会不生效的。

错误姿势：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
  
  $("button").click(function(){
    $("p").slideToggle();
  });
  
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>

正确姿势：

 <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">

// $(document).ready(function a) 这个函数的意思就是等 DOM 节点加载完成后执行 function a 函数
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});

</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>