您的位置: 首页  >  文章  >  【培训】DAY15 JavaScript基础

【培训】DAY15 JavaScript基础

分类: 文章 • 2025-03-09 22:35:40

JavaScript基础

函数和事件

<!DOCTYPE html>
<html>
<head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        function myFunction(val) {
            document.getElementById("demo").innerHTML = val;
        }
    </script>
</head>
<body>
    <p id="demo">默认段落</p>
    <button type="button" "myFunction('段落已修改')">点击这里</button>
</body>
</html>

< script>< /script>中就是JS脚本

上述代码指在点击时触发myFunction函数

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
使用函数时，可以发送任意多的参数，由逗号 (,) 分隔：myFunction(argument1,argument2)
声明函数时，请把参数作为变量来声明，变量和参数必须以一致的顺序出现。

可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。
我们通常的做法是把函数放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容

作用域

局部变量

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

全局变量

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}
  • 函数参数只在函数内起作用，是局部变量。
  • 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
  • 在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

变量

var x=5,y=6,z=x+y;

JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
变量可以以字母开头
变量也能以 $ 和 _ 符号开头（不推荐）
变量名称对大小写敏感（y 和 Y 是不同的变量）

数据类型

值类型（基本类型）：

  • 字符串（String）
  • 数字（Number）
  • 布尔（Boolean）
  • 对空（Null）
  • 未定义（Undefined）
  • Symbol（不常用）

引用数据类型：

  • 对象(Object)
  • 数组(Array)
  • 函数(Function)

JavaScript 动态类型

	var x;              // x 为 undefined
	x = 5;              // 现在 x 为数字
    x = "John";         // 现在 x 为字符串
    x = 5 + "John";     // 现在 x 为字符串

对象：var person = {firstname:“John”, lastname:“Doe”, id:5566};
var name=person.lastname;
var name=person[“lastname”];

数组：var persons=[“Saab”,“Volvo”,“BMW”];

	var persons=[
           {firstname:"John", lastname:"Doe", id:5566},
           {firstname:"tom", lastname:"Doe", id:5577}
    ];

    var family={
        firstnames:["Saab","Volvo","BMW"],
        lastname:"Doe"
    };

数组创建

var BAT = ['Alibaba', 'Tencent', 'Baidu'];
var students = [{name : 'Bosn', age : 27}, {name : 'Nunnly', age : 3}];
var arr = ['Nunnly', 'is', 'big', 'keng', 'B', 123, true, null];
var arrInArr = [[1, 2], [3, 4, 5]];
var commasArr1 = [1, , 2]; 				// 1, undefined, 2
var commasArr2 = [,,];	 				// undefined * 3
var arr = new Array(); 
var arrWithLength = new Array(100); 	// undefined * 100
var arrLikesLiteral = new Array(true, false, null, 1, 2, "hi");		// 等价于[true, false, null, 1, 2, "hi"];

数组读写

var arr = [1, 2, 3, 4, 5];
arr[1]; 		// 2
arr.length; 	// 5
arr[5] = 6;
arr.length; 	// 6
delete arr[0];
arr[0]; 		// undefined

数组的length属性

var arr = [1, 2, 3, 4, 5]
arr.length = 2;
arr; 		// [1, 2];

数组元素增删

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr.push(3);
arr; 					// [1, 2, 3]

arr[arr.length] = 4; 	// equal to arr.push(4);
arr; 					// [1, 2, 3, 4]

arr.unshift(0);
arr; 					// [0, 1, 2, 3, 4];
delete arr[2];
arr; 					// [0, 1, undefined, 3, 4]
arr.length; 			// 5
2 in arr; 				// false

arr.length -= 1;
arr; 					// [0, 1, undefined, 3, 4],  4 is removed

arr.pop(); 				// 3 returned by pop
arr; 					// [0, 1, undefined], 3 is removed

arr.shift(); 			// 0 returned by shift
arr; 					// [1, undefined]

数组迭代

var i = 0, n = 10;
var arr = [1, 2, 3, 4, 5];
for (; i < n; i++) {
    console.log(arr[i]); 		// 1, 2, 3, 4, 5
}

for(i in arr) {
    console.log(arr[i]); 		// 1, 2, 3, 4, 5
}

Array.prototype.x = 'inherited';

for(i in arr) {
    console.log(arr[i]); 		// 1, 2, 3, 4, 5, inherited
}

for(i in arr) {
    if (arr.hasOwnProperty(i)) {
        console.log(arr[i]); 	// 1, 2, 3, 4, 5
    }
}

二维数组

var arr = [[0, 1], [2, 3], [4, 5]];
for (var i = 0; i < arr.length; i++) {
     var row = arr[i];
     console.log('下标为 ' + i);
     for (var j = 0; j < row.length; j++) {
          console.log(row[j]);
     }
}

结果：

下标为 0
0
1
下标为 1
2
3
下标为 2
4
5

数组方法介绍

Array.prototype.join
Array.prototype.reverse
Array.prototype.sort
Array.prototype.concat
Array.prototype.slice
Array.prototype.splice
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.every
Array.prototype.some
Array.prototype.reduce/reduceRight
Array.prototype.indexOf/lastIndexOf
Array.isArray

详细请看

事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

下面是一些常见的HTML事件的列表:

事件 类型
onchange HTML元素改变
onclick 用户点击HTML元素
onmouseover 用在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

jQuery

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
【培训】DAY15 JavaScript基础

语法 描述
$("*") 选取所有元素
$(this) 选取当前HTML元素
$(“p.intro”) 选取class为intro的< p>元素
$(“p:first”) 选取第一个< p>元素
$(“ul li:first”) 选取第一个< ul>元素的第一个< li>元素
$("ul li:first-child”) 选取每个< ul>元素的第一个< li>元素
$("[href]") 选取带有href属性的元素
$(“a[target=’_blank’]”) 选取所有target属性等于’_blank’的< a>元素
$(“a[target!=’_blank’]”) 选取所有target属性不等于’_blank’的< a>元素
$(":button") 选取所有type="button"的< inpet>元素和< button>元素
$(“tr:even”) 选取偶数位置的< tr>元素
$(“tr:odd”) 选取奇数位置的< tr>元素

jQuery事件函数

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪时间（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

为了易于维护，一般我们将 jQuery 函数放到独立的自定义 .js 文件中，但页面要引入js函数文件，一定
要先引入jquery插件，如下：
< script type=“text/javascript” src=“jquery.js”>< /script>
< script type=“text/javascript” src=“my_jquery_functions.js”>< /script>

jQuery效果

隐藏和显示
淡入淡出
滑动
动画
停止动画
Callback 函数
Chaining

jQuery AJAX

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML
或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

以下列出了几种常用的 jQuery AJAX 方法：

方法 描述
$.ajax() 执行异步 AJAX 请求
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据

HTTP 请求：GET / POST 两种在客户端和服务器端进行请求-响应的常用方法

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据
  • GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
  • POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.ajax({
            type: "GET",
            url: "test.json",
            data: { username: $("#username").val(), content: $("#content").val() },
            dataType: "json",
            success: function (data) {
                $('#resText').empty();   //清空resText里面的所有内容
                var html = '';
                $.each(data, function (commentIndex, comment) {
                    html += '<div class="comment"><h6>' + comment['username'] + ':</h6>
                        < p class="para"' + comment['content'] + '</p ></div > ';
                });
                $('#resText').html(html);
            }
        });

$.get("test.json",
    {
        username:$("#username").val(),
        content:$("#content").val()
    },function(data,status,xhr){
        //data - 包含来自请求的结果数据
        //status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
    },"json")

jQuery手册

相关推荐