Blank

JavaScript基础论述

JavaScript

入门介绍

前端网页技术，还有一个JSP（本质上是一个servlet）

技术	作用
HTML	创建网页的结构
CSS	网页的美化
JavaScript	用于网页的交互，让网页变得更加生动，提高用户的体验

组成部分	作用
ECMA Script	所有脚本语言规范，构成了JavaScript语法基础（不用）
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象
DOM	Document Object Model 文档对象模型，用来操作网页中各种元素

主要概述

注释：单行// 多行/**/
输入输出语句：prompt()、alert()、console.log()、document.write()
变量和常量：let、var、const
数据类型：boolean、null、undefined、number、string、Object
typeof 关键字：用于判断变量的数据类型
运算符：算数、赋值、逻辑、比较、三元运算符
流程控制和循环语句：if、switch、for、while
数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
函数：类似方法，抽取代码，提高复用性

script标签说明

1.可以使用外部文件（后缀为.js）导入，实现解耦

2.可以直接在html中使用JavaScrept


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的初体验title>
head>
<body>

<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        //在文档上写东西，整个网页就是一个文档document
        document.write("Hello World!
");
    }
script>


<script src="js/out.js" type="text/javascript">script>
body>
html>

注意：在工作中主要是使用外部文件导入的方式对html进行解耦。

四种输出方式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的三种输出方式title>
head>
<body>
<script type="text/javascript">
    // 1.输出到浏览器的控制台
    console.log("你好，我是JavaScript");
    //2. 输出到文档网页上
    document.write("输出到网页上");
    //3. 弹出信息框
    alert("这是一个信息框");
    //4. 询问输入框
    promp("您要输入的内容") 
script>
body>
html>

JavaScript的注释

单行注释 //

多行注释 /**/

变量的定义

ES 6中有三个定义变量的关键字：

var 以前使用比较多的一个关键字，用来定义变量（全局变量）
let 6以后多出来的定义变量的关键字（局部变量）
const 定义常量，类似于java final关键字（出生即赋值）


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var和let的区别title>
head>
<body>
<script type="text/javascript">
    //1.作用域不同：var定义的变量在代码块中不受{}限制，let定义的变量是受限制
    {
        var x = 5;
    }
    document.write(x + "
");  //可以输出，不受{}限制

    {
        let y = 6;
    }
    //document.write(y + "
");  //找不到y的值，出错

    //2.重新定义变量区别：var可以修改变量的值
    var a = 10;
    {
        var a = 2;
    }
    document.write(a + "
");  //2

    let b = 5;
    {
        let b = 3;  //不可见
    }
    document.write(b + "
");  //5

    //3.const关键字，如果是对象，它的属性可以修改
    const person = {"name": "NewBoy", "age": 18};
    document.write(person.name + "
");
    document.write(person.age + "
");
    //person = {};  //不行的
    person.age = 19;
    document.write(person.age + "
");
script>
body>
html>

注意事项

字符串可以使用‘“ ”，’ ‘，`三种方式定义

//1. 关于弱类型？
/* 同一个变量可以赋值为不同的数据类型 */
var num = 666;  //整数
num = true;  //布尔
num = "abc";   //字符串类型，注：js中没有字符类型，只有字符串
document.write(num + "
");

//2. 在JS中的字符和字符串引号？
//JS中字符串既可以使用单引号 ' ，也可以使用双引号 " ，还可以使用反引号 ` (Esc下面：波浪线)
let s1 = 'abcd';
let s2 = "xyz";
let s3 = `hello`;
document.write(s1 + s2 + s3 + "
");

五种数据类型

关键字	说明
number	数值型，包括整数和浮点数
boolean	布尔类型，true或false
string	字符串类型，可以使用单引号，双引号，反引号
object	对象类型
undefined	未定义的类型

问：有没有字符和字符串的区别？

没有字符类型，只有字符串，字符串使用：" ’ `包裹

typeof操作符

作用：判断一个变量的数据类型

写法：

typeof 变量名
typeof(变量名)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五种数据类型title>
head>
<body>
<script type="text/javascript">
    //分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型
    let i = 5;
    document.write(typeof(i)+ "
");  //number

    let f = 3.4;
    document.write(typeof(f) + "
");  //number

    let c = 'a';
    document.write(typeof(c) + "
");  //string

    let s = "abc";
    document.write(typeof(s) + "
");  //string

    let b = true;
    document.write(typeof(b) + "
");  //boolean

    let u;
    document.write(typeof(u) + "
");  //undefined

    let n = {name: "jack", age: 18};
    document.write(typeof(n) + "
");  //object

    /**
     * 注：null和undefined的区别
     * 1. null本质上是一个对象类型，只是这个对象没有值
     * 2. undefined 未知的类型
     */
    let x = null;
    document.write(typeof(x) + "
");   //object
script>
body>
html>

小结

null与undefined的区别	说明
null	null本质上是一个对象类型（Object），只是这个对象没有值
undefined	未知的类型，没有初始化

常用的运算符

算术运算符

弱语言，忽视数据类型进行运算（前提是要是数字）
赋值运算符
比较运算符

== 比较值

=== 比较值和数据类型

数字也可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较

![逻辑运算符](D:\Java总结文档\图解\JS\逻辑运算符.png)
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符title>
head>
<body>
<script type="text/javascript">
    let s1 = 5;
    let s2 = "5";
    document.write((s1 == s2) + "
");  //true 比较值是否相等
    document.write((s1 === s2) + "
");  //恒等于，既比较值，又比较类型

    document.write((s1!=s2) + "
");  //false
    document.write((s1!==s2) + "
");  //恒不等于 true
script>
body>
html>

4.逻辑运算符

5.三元运算符

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4HzCQMxR-1593321243330)(D:\Java总结文档\图解\JS\三目运算符.png)]$

流程控制

if 语句

建议判断条件还是使用boolean类型比较好,利于可读性

if (条件表达式) {
     //代码块;
 }
 else if(条件表达式) {
     //代码块;
 }
 else {
     //代码块;
 }


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if语句title>
head>
<body>
<script type="text/javascript">
    /*
    1. Java中判断条件必须是布尔类型的值
    2. 在JS中可以使用非布尔类型的表达式
                    真       假
        number      非0      0
        string      非空串   空串 ""
        object      非空     null
        undefined            永远为假
        NaN (Not a Number)   永远为假
    3. 建议判断条件还是使用boolean类型比较好
     */
    /*
    if(0) {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
     */

    /*
    if("") {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
     */

    /*
    var person = {};  //创建一个对象
    if(null) {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
     */

    let u;   //undefined
    if(u) {
        document.write("真" + "
");
    }
    else {
        document.write("假" + "
");
    }
script>
body>
html>

状态的判定

数据类型	为真	为假
number	非0	0
string	非空串	“”
undefined		为假
NaN(Not a Number)		为假
object	非空	null

switch语句

两种语法
1.switch（真）

switch后面一定要是真才可以进入执行体
每个条件都可以使用表达式

如果上面所有的表达式都不匹配，就执行default

switch(true) {  //这里的变量名写成true
   case 表达式:     //如：n > 5
     break;
   case 表达式:
     break;
   default:
     break;
 }

2.switch （变量名）
如果变量名等于某个分支的常量值，就执行这个代码段。如果所有的条件都不满足就执行default代码。

switch(变量名) {
   case 常量值:
      break;
   case 常量值：
      break;
   default:
       break;
 }

while语句

当指定的条件为 true 时循环执行代码，也支持非boolean类型的条件

while (条件表达式) {
     需要执行的代码;
}

do-while语句

最少执行1次循环

do {
     需要执行的代码;
 }
 while (条件表达式)

for 语句

循环指定次数

for (var i=0; i<10; i++) {
     需要执行的代码;
 }

break和continue，return关键字

break: 结束整个循环
continue：跳过本次循环，执行下一次循环
return : 结束本方法

案例：

打印99乘法表


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘法表title>
    <style>
        table {
            /*使用细边框样式*/
            border-collapse: collapse;
        }

        td {
            /*设置每个单元格的内间距*/
            padding: 3px;
        }
    style>
head>
<body>
<script type="text/javascript">
    let num = prompt("请输入乘法表的数：","9");  //字符串类型
    //放在表格中
    document.write("");//如果字符串中有双引号，必须使用\"进行转义//固定的行和列：9for(let i =1; i <= num; i++){//外循环控制多少行
        document.write("");//表示一行for(let j =1; j <= i; j++){//内循环控制多少列
            document.write("");}//每输出一行就换行
        document.write("");}
    document.write("   
    
           
             ");
            document.write(j + "×" + i + "=" + (i * j));     //×表示乘法符号
            document.write("
        
        
    
");
script>
body>
html>

命名函数和匿名函数

函数的概述

什么是函数

一个代码块，给代码块起个名字，以后可以通过名字来调用它，实现重用的功能。类似于Java中方法
两种函数：
- 命名函数：有名字的函数，可以通过名字来多次调用
- 匿名函数：没有名字的函数，不可重用，只能使用一次。但可以通过一个变量来指向它，实现重用。

命名函数的格式

function 函数名(参数列表) {
  //代码块
  return 返回值;  //可选：如果这个函数有返回值，使用return，没有就不使用
}

注意事项：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于函数的重载title>
head>
<body>
<script type="text/javascript">
    /*
    1. 在JS中没有函数的重载，后面出现的同名函数会覆盖前面的同名函数
    2. 实参个数与形参的个数无关，只会按函数名字去调用
    3. 在每个函数的内部都有一个隐藏的数组，名字叫arguments
     */
    //定义了一个函数
    function sum(a,b) {
        alert(2);
    }

    function sum(a) {
        alert(1);
    }

    function sum(a,b,c) {  //形参
        alert(3);
    }
    //调用
    sum(3, 5);  //实参
script>
body>
html>

匿名函数的格式

应用场景

后期很多的事件处理函数都使用匿名函数，一般不重用。
也可以定义一个变量让匿名函数可以重用，这种情况使用比较少

var 变量名 = function(参数列表) {
   //函数体
   return 返回值;  //可选
}

后期可以通过变量名来调用函数

注意

js中没有函数重载，如果出现同名函数，后面的替换前面的。
函数的三种状态
- 有参有返回值
- 无参有返回值
- 无参无返回值
使用时需要区分值传递和调用函数

当函数有返回值的时候，假如用一个变量a来存储是不会调用函数的，仅仅是值传递

当使用a()的时候才是将该方法进行执行

//定义匿名函数，由a存储
let a = function(){
    document.write("hello
")
}
//传入a变量到show方法中
function show(a){
    a();
}
//再次对a变量进行值传递
let b=a;
//分别对输出a,b变量的值进行执行，即最初的匿名函数
a()
b()
// document.write(a())  错误执行
show(b)  //由于a传递给了b 所以正常执行show方法

数组规则

定义函数时所设置的形参，当被调用的时候传递的形参多余或者少于时，在内部会有一个隐藏的数组进行管理。

多出来的值，函数中不会被定义到。少的值会以undefined类补齐。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏的数组title>
head>
<body>
<script type="text/javascript">
    /*
    在函数内部输出隐藏数组的长度和元素
     */
    function sum(a,b) {
        //输出隐藏数组的长度
        let length = arguments.length;
        document.write("隐藏数组的长度是：" + length + "
");
        //输出数组中每个元素，模板代码：itar
        for (let i = 0; i < arguments.length; i++) {
            document.write("i=" + i + "元素的值：" + arguments[i] + "
");
        }
        document.write("
");
        //输出形参的值
        document.write("a=" + a + "
");
        document.write("b=" + b + "
");
    }

    //调用函数
    //sum(3, 7, 1);  //实参 > 形参
    sum(3);   //实参 < 形参
script>
body>
html>

事件

什么是事件

用户在操作网页的过程中，会有各种操作，每种操作都会产生事件。我们可以通过JS来监听这些事件，对这些事件编写函数进行处理，来实现与用户的交互。

设置事件的两种方式

1.在各个标签中定义

2.在Script标签体函数中调用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的处理方式title>
head>
<body>


<input type="button" value="命名函数" id="b1" onclick="clickMe()">
<input type="button" value="匿名函数" id="b2">

<script type="text/javascript">
    /*
    有两个按钮，点第1个弹出一个信息框，点第2个弹出另一个信息框。分别使用两种不同的方式激活事件
    1. 使用命名函数的处理方式：
       在标签上直接使用 on事件名="处理函数()/处理函数"

    2. 使用匿名函数的处理方式：
        元素对象.on事件名 = function() {
        }
     */
    function clickMe() {
        alert("命名函数");
    }

    //得到按钮2这个对象
    document.getElementById("b2").onclick = function () {
        alert("匿名函数");
    }
script>
body>
html>

事件介绍

onload：页面加载完毕以后，才执行相应的JS代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的处理方式title>
head>
<body>

<script type="text/javascript">
    //让整个页面全部加载完毕以后执行
    window.onload = function() {
        //得到按钮2这个对象，此处依然是点击事件，未被触发。
        document.getElementById("b2").onclick = function () {
            alert("匿名函数");
        }
    }
script>
body>
html>

onclick/ondblclick：单击/双击


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单击和双击title>
    <style>
        input {
            /*外边距*/
            margin: 5px;
        }
    style>
head>
<body>
姓名：<input type="text" id="t1"/> <br/>
姓名：<input type="text" id="t2" /> <br/>
<input type="button" value="单击复制/双击清除" id="b1">

<script type="text/javascript">
    /*
    单击复制文本内容，双击清除文本内容
     */
    //得到按钮对象，设置单击事件
    document.getElementById("b1").onclick = function () {
        //复制文本：把t1的value属性值，赋值给t2的value
        document.getElementById("t2").value = document.getElementById("t1").value;
    }

    //得到按钮对象，设置双击事件
    document.getElementById("b1").ondblclick = function () {
        //将2个value都设置成空串
        document.getElementById("t1").value = "";
        document.getElementById("t2").value = "";
    }
script>
body>
html>

onfcous、onblur：获得焦点，失去焦点

案例：当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点title>
head>
<body>
用户名：
<input type="text" id="user"> <span id="info" style="color: red">span>
<script type="text/javascript">
    /*
    当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失
    如果span中有字，就会显示，没有字就不显示。
    修改span中文字内容，使用属性：innerText
     */
    //设置user对象获得焦点的事件
    document.getElementById("user").onfocus = function () {
        document.getElementById("info").innerText = "";
    }

    //设置user对象失去焦点的事件
    document.getElementById("user").onblur = function () {
        //span元素
        document.getElementById("info").innerText = "用户名不能为空";
    }
script>
body>
html>

onchange：当发生任何改变的时候做出响应

案例：一个下拉菜单的改变事件和一个输入框的改变事件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变事件title>
head>
<body>
城市：
<select id="city">
    <option value="广州">广州option>
    <option value="上海">上海option>
    <option value="南京">南京option>
select>
<hr/>
英文：
<input type="text" id="eng">

<script type="text/javascript">
    /*
    选中不同的城市，出现一个信息框显示选中城市的值
    this对象表示当前激活的对象
     */
    document.getElementById("city").onchange=function () {
        //当前元素选中那一项的值
        alert(this.value);
    }

    //用户输入英文字母以后，文本框的字母全部变成大写
    document.getElementById("eng").onchange=function () {
        //得到当前元素中value值
        this.value = this.value.toUpperCase();   //转成大写的函数 字符串转换为大写
    }
script>
body>
html>

其他事件
1. onKeyDown/Press/Up 键盘按下/按住或按下/松开的事件
2. onMouseDown/Up 鼠标按下/松开的事件
3. onMouseOver/Out 鼠标指针移入/移出的事件

案例：鼠标移动到img上显示图片，移出则显示另一张图片。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移上和移出事件title>
head>
<body>


<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">
<script type="text/javascript">
    /*
    将鼠标移动到img上显示图片，移出则显示另一张图片。图片设置边框，宽500px
    分析：如果要换图片，只要修改src属性即可
     */
    document.getElementById("pic").onmouseover = function () {
        //this代表当前被激活的元素
        this.src = "img/2.jpg";
    }
    
	//此处注释是为了显示标签中的移除事件。
    /*document.getElementById("pic").onmouseout = function () {
        this.src = "img/0.jpg";
    }*/

    /**
     * obj相当于img对象
     */
    function changePic(obj) {
        obj.src = "img/3.jpg";
    }
script>
body>
html>

onSubmit 提交事件

注意：

1.onSubmit =“return False/True” 是以F/T来判断是否可以执行提交"return 方法（）"

每次提交订单并不是立即提交，如果是得到返回布尔值是T才会提交，是F不提交，如果没有返回值默认提交。

2.最终是由form标签来提交的，看Method=GET/POST


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验title>
    <link rel="stylesheet" href="css/style.css">link>
head>
<body>
    <div class="login-form-wrap">
        <h1>黑马程序员h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            label>
            <input type="submit" value="注册">
        form>
    div>
body>
<script>
  document.getElementById("regist").onsubmit=function(){
      let regName = new RegExp("^[0-9a-zA-Z_]{6}$");
    // let regName = /^[0-9a-zA-Z]{0,6}$/;
      let regPass = new RegExp("^[\d]{1,4}$");
        //   let regPass = /^[0-9]{2,6}$/
      let us = document.getElementById("username").value;
      let ps = document.getElementById("password").value;
      if(regName.test(us)||regPass.test(ps)){
          return true;
      }else{
        alert("错误");
          return false
          };
  };

script>
html>

this关键字的作用

均用于表示对应的标签对象。

出现在元素的事件方法中：

<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">

出现在匿名函数的代码中：

  document.getElementById("pic").onmouseout = function () {
    this.src = "img/0.jpg";
  }

其他零散知识点

a标签中，属性值href使用#和使用JavaScript:void(0);的区别

  做页面时，如果想做一个链接，点击后不做任何事情，或者响应点击完成其他事情，可以设置其属性 href = "#"，但是，这样会有一个问题，就是当页面有滚动条时，点击后会返回到页面顶端，用户体验不好。所以就会使用javascript;void（0）不让a做任何操作

在css中，style有隐藏属性。

  display   1.none 不显示  
  	
  	 			   2. block 显示

  	```css
  	
  	```

进阶介绍

innerHTML和innerText的区别，与value

结论：

平时使用input表单项的时候，仅使用表单项中的内容，所以用value获取，也可以获取innerXXX的值，只是不需要使用。

普通项多数是没有value属性的，一般只需要使用标签体的内容，所以是使用innerXXX来获取，因为是弱语言，所以在标签体中也是可以使用value赋值的，但是没有效果，如果是使用代码的value关键字进行赋值，那么可以赋值成功，并且可以输出，同理一般也是不用的。

故：需要用值，表单项使用VALUE，普通项使用innerXXX

在JS中，改变属性值，只可以像：对象.disable=true 这样的方式修改。

改变属性的属性值，可以像 document.getElementById(“ad_big”).style.display=“block”;


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerText和innerHTML的区别title>
head>
<body>
<input type="button" value="改内容" id="btn">
<select id="province">
    <option>--请选择省份--option>
select>
<select id="city">
    <option id="default">--请选择城市--option>
select>
<hr/>
<span id="content">span>

<script type="text/javascript">
     document.getElementById("btn").onclick = function () {
         //innerText：修改是纯文本的内容，如果内容中有标签，标签是不起作用
         //document.getElementById("content").innerText = "幸福来敲门
";
         //innerHTML：修改是HTML的内容，标签是起作用
         document.getElementById("content").innerHTML = "幸福来敲门
";
     }
 以下是测试！！！   
    
//表单项的
    document.getElementById("btn").value //获取该表单项的值
    document.write(document.getElementById("btn").value);   //输出表单项中的值 ‘改内容’

    document.getElementById("btn").innerText= "测试一下"       //没有效果
    console.log(document.getElementById("btn").innerText);  //控制台输出。不会有任何输出，也不会报错
    document.write(document.getElementById("btn").innerText); //不会有任何输出，也不会报错

 //普通项的
    document.getElementById("content").value = "不能修改内容"  // 不是表单项，使用value赋值不会显示在标签体中，但是有值，用于传递。
    document.write(document.getElementById("content").value); //正常输出该值："不能修改内容" 
    document.getElementById("content").innerText="测试一下下";  //输出第一次
    document.write(document.getElementById("content").innerText);  //输出第二次
    document.write(document.getElementById("content").value);   // 

    document.getElementById("content").innerText = "不能修改内容"  //不是表单项，可以使用inner显示在标签体中


    // 结论：
    // 每个普通项都有value和InnerXXX的属性。在普通项中，value仅仅是内部的值，用于传递，不会显示在标签体中。
    // 标签体中的值由innerXXX提供和修改
    // 每个表单项理论上也是有value和InnerXXX属性，但是经过测试innerXXX不会报错，但是也不会输出。
    // value是可以输出并且传递的。
    // 故:使用表单项（input）时，赋值和获取和显示都使用value
    //   使用普通项时，赋值和获取用value，显示用innerXXX


script>
body>
html>

内置对象

字符串对象（含插值运算`${}`）

插值运算


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置对象：字符串对象title>
head>
<body>
<script type="text/javascript">
    let a = 3;
    let b = 4;
    let c = a + b;
    //字符串的拼接操作（太恶心，还容易出错）
    let s1 = a + "+" + b + "=" + c;
    document.write(s1 + "
");
    //反引号：${} 占位符，会被真实的变量代替 ，插值运算
    let s2 = `${a} + ${b} = ${c}`;
    document.write(s2 + "
");
script>
body>
html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>string对象的函数title>
head>
<body>
<script type="text/javascript">
    let s1 = "我是中国人，我爱我的国家";
    //取子字符串：开始位置，结束位置 (索引从0开始)，包头不包尾
    let s = s1.substring(6, 9);
    document.write(s + "
");

    //取子字符串：开始位置，取多长
    let s2 = s1.substr(6, 3);
    document.write(s2 + "
");

    //将这个字符使用指定的分隔符，分割成一个字符串数组
    let s3 = "a-b-c-xyz-hello";
    let arr = s3.split("-");
    for (let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "
");
    }

    document.write("
");
    //转成大写
    document.write("abc".toUpperCase() + "
");

    //转成小写
    document.write("XYZ".toLowerCase() + "
");

    //去掉字符串前后的空格
    let s4 = "   hello world      ";
    document.write("长度：" + s4.length + "
");  //原长度
    document.write(s4 + "
");   //原字符串
    document.write(s4.trim() + "
");  //去掉前后空格
    document.write("去掉空格长度：" + s4.trim().length + "
");  //去掉前后空格的长度
script>
body>
html>

方法名	作用
substring(startIndex,endIndex)	取子字符串，包头不包尾，索引从0开始。参数是起始位置
substr(startIndex, length)	取子字符串，起始位置，长度
split(delimiter)	把一个字符串使用指定的分隔符，切割成一个数组
toLowerCase()	变成小写
toUpperCase()	变成大写
trim()	去掉前后的空格

数学对象


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置对象：数学对象title>
head>
<body>
<script type="text/javascript">
    //四舍五入保留到整数
    let n1 = Math.round(123.5);
    document.write(n1 + "
");

    //向下取整
    let n2 = Math.floor(123.45);
    document.write(n2 + "
");

    //向上取整
    let n3 = Math.ceil(123.45);
    document.write(n3 + "
");

    //产生随机数，0~1之间的小数，不等于1  [0,1)
    let n4 = Math.random();
    document.write(n4 + "
");
    
    //在点名系统中的一个知识点  随机选取数组中的索引数
    Math.floor(Math.random()*arr.length);
script>
body>
html>

方法名	作用
round(x)	四舍五入保留到整数
floor(x)	向下取整
ceil(x)	向上取整
random()	随机生成0~1之间的小数，不等于1
pow(x,y)	求幂 x的y次方
isNAN	判断（）中的值是否数字,不是数字为true 如： isNAN(“3”) —> true

Number对象（含转换函数parse）

是Number的一个方法，但是可以直接使用

parse的使用：使用数学运算之前必用，否则默认以字符串形式项链

将一个字符串转成整数，从一开始向后去查找，碰到第一个不能转换的就停止了


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局函数title>
head>
<body>
<script type="text/javascript">
    /*
    //计算2个数的和
    let n1 = prompt("请输入第1个数","0");
    let n2 = prompt("请输入第2个数","0");
    //拼接2个字符串
    let n3 = n1 + n2;
    document.write("它们的和是：" + n3 + "
");
     */

    /*
    将一个字符串转成整数，从一开始向后去查找，碰到第一个不能转换的就停止了
    第一个一来就不是数字就停止。
     */
    let n4 = parseInt("2") + parseInt("3");
    document.write(n4 + "
");

    document.write(parseInt("abc") + "
");  //NaN = Not a Number 不是一个数
    document.write(parseInt("12abc") + "
");  //12 转换成功

    //将一个字符串转成小数，转换方式同上
    let n5 = parseFloat("2.3") + parseFloat("3.1");
    document.write(n5 + "
");

    let order = "明天晚上偷袭珍珠港";
    document.write(order + "
");
    //对汉字使用URI编码进行转换
    let s1 = encodeURI(order);
    document.write(s1 + "
");

    //对已经编码的字符串进行解码
    let s2 = decodeURI(s1);
    document.write(s2 + "
");

    //执行字符串中js代码
    let s3 = "alert('Hello 你好！')";
    eval(s3);
    
    //isNaN(字符串)
    document.write(isNaN("3"));  //输出true   
script>
body>
html>

字符串转为数字	说明
parseInt(字符串)	转成整数，如果转换失败，返回NaN
parseFloat(字符串)	转成小数
isNaN(字符串)	在转换前判断是否为非数字，非数字返回true，数字为false

编码和解码	说明
encodeURI(字符串)	对汉字进行URI编码（字母，数字，特殊字符不做编码）
decodeURI(字符串)	对URI编码后的

执行字符串	说明
eval(字符串)	执行脚本

数组对象

创建数组的四种方式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组title>
head>
<body>
<script type="text/javascript">
    //创建数组四种方式：
    let a1 = new Array();  //创建一个长度为0的数组
    document.write(a1.length + "
");

    let a2 = new Array(5);  //创建一个长度为5的数组
    document.write(a2.length + "
");
    document.write(a2 + "
");

    let a3 = new Array(2, 5, 6, 8);  //指定每个元素，创建数组
    document.write(a3.length + "
");
    document.write(a3 + "
");

    let a4 = [4, 7, 10, 45];   //使用中括号创建数组，指定每个元素
    document.write(a4 + "
");
    
        /*
    1. 元素类型：因为JS是弱类型，数组中每个元素类型是可以不同的
    2. 长度是可变的，动态的增加或减少长度
    3. 数组中还有不少方法
     */
    let a5 = ["abc", true, 50, 3.6];
    document.write(a5 + "
");
    a5[5] = "xyz";  //增加长度

    //循环输出每个元素
    for (let i = 0; i < a5.length; i++) {
        document.write(a5[i] + "
");
    }

    document.write("
");
    a5.length = 2;  //长度变成2
    for (let i = 0; i < a5.length; i++) {
        document.write(a5[i] + "
");
    }
script>
body>
html>

注意：

  支持在创建之后继续增长长度，或者缩短。

方法演练


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的方法title>
head>
<body>
<script type="text/javascript">
    //两个或两个以上数组的拼接
    let a1 = [1, 1, 1];
    let a2 = [2, 2, 2];
    let a3 = a1.concat(a2, 99);
    document.write(a3 + "
");

    //对数组反转
    let a4 = [4, 1, 8, 9];
    a4.reverse();
    document.write(a4 + "
");

    //将一个数组通过分隔符拼接成一个字符串，与字符串中split函数功能相反
    let a5 = [4, 1, 8, 9];
    let str = a5.join("=");   //这是一个字符串
    document.write(str + "
");

    /*
    对字符串进行排序
    1. 按字符的ASCII码值进行比较
    2. 两个字符串比较，先比较第1个，如果谁大谁就大，后面不再比较。如果相同则继续比较第2个。
    3. 小写字母 > 大写字母 > 数字
    如：
     */
    document.write(("ac" > "abcdefgh") + "
");
    document.write(("x" > "ABCDE") + "
");

    //默认按字符串排序
    let strArr = ["Jack", "tom","Newboy", "rose"];
    document.write("排序前：" + strArr + "
");
    strArr.sort();
    document.write("排序后：" + strArr + "
");

    let a6 = [40, 100, 28, 9];   //默认是按字符的大小来排序
    document.write("排序前：" + a6 + "
");
    a6.sort(function (a, b) {
        return a - b;
    });  //如果按数字排序，指定比较器
    document.write("排序后：" + a6 + "
");

    //删除数组中最后一个元素
    let a7 = [2, 6, 7];
    a7.pop();  //返回最后这个元素
    document.write(a7 + "
");

    //向数组最后添加一个或多个元素
    a7.push(4, 90);
    document.write(a7 + "
");
script>
body>
html>

数组的运算符 …

下面是用途展示


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组title>
head>
<body>
    
body>
<script>
    //定义数组
    let arr = [10,20,30];
    //arr[3] = 40;  js中的数组长度可变
    //遍历数组
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "
");
    }
    document.write("==============
");

    // 数组高级运算符 ...
    //复制数组 将数组1的值完全复制到数组2中
    let arr2 = [...arr];
    //遍历数组
    for(let i = 0; i < arr2.length; i++) {
        document.write(arr2[i] + "
");
    }
    document.write("==============
");

    //合并数组
    let arr3 = [40,50,60];
    let arr4 = [...arr2 , ...arr3];
    //遍历数组
    for(let i = 0; i < arr4.length; i++) {
        document.write(arr4[i] + "
");
    }
    document.write("==============
");

    //将字符串转成数组
    let arr5 = [..."heima"];
    //遍历数组
    for(let i = 0; i < arr5.length; i++) {
        document.write(arr5[i] + "
");
    }
script>
html>

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	将数组接拼接成一个字符串
sort()	排序
pop()	删除最后一个元素
push()	添加元素

日期对象

new Date() 创建当前时间的日期对象


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象title>
head>
<body>
<script type="text/javascript">
    let date = new Date();
    document.write("现在的时间是：" + date + "
");
    document.write("年份：" + date.getFullYear() + "
");
    //0-6: 0表示周日，1~6表示周一到周六
    document.write("周几：" + date.getDay() + "
");
    //得到1970-1-1到现在相差的毫秒数
    document.write("毫秒数：" + date.getTime() + "
");
    //得到本地格式的时间，类似于Java中：SimpleDateFormat
    document.write(date.toLocaleString() + "
");
script>
body>
html>

正则表达式对象

正则表达式的规则

注意：正则为弱匹配，如果不使用/^…$/ 开头结尾，则不会精确匹配

符号	作用
[a-z]	中括号表示1个字符，a-z中任意一个字符
[xyz]	x或y或z，三个字符一个
[^xyz]	除了xyz之外的任意字符
\d	数字
\w	单词，相当于[a-zA-Z0-9_]
.	任意字符，如果要匹配点号需要转义 \.
()	分组
{n}	前面的字符出现n次
{n,}	前面的字符出现大于等于n次
{n,m}	前面的字符出现n次到m之间的次数，包头包尾
+	前面的字符出现1~n次
*	前面的字符出现0~n次
?	前面的字符出现0~1次
\|	多组字符串选择1个
^	匹配开头
$	匹配结尾

使用正则表达式

两种方式的区别

方式一：正则表达式是做为字符串参数出现的，可以定义成变量，可以进行字符串拼接，相对更加灵活。但\等字符需要转义。
方式二：本身是一个正则表达式对象，\等字符不需要转义。

正则表达式的检验方法： test()


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式title>
head>
<body>
<script type="text/javascript">
    /**
     * 创建正则表达式的2种方式：
     * 1. new RegExp("正则表达式")
     * 2. /正则表达式/
     *
     * 判断正则表达式是否匹配字符串的方法：
     * boolean 正则表达式对象.test(字符串) 如果匹配返回true，否则返回false
     * 与Java不同，Java默认是精确匹配。JS默认是模糊匹配，只要包含这个正则表达式的内容就可以
     * 结论：如果要在JS中精确匹配，必须以^开头，以$结尾
     */
    var reg = new RegExp("\\d{3}");
    document.write(reg.test("123") + "
");  //true
    document.write(reg.test("abc") + "
");  //false
    document.write(reg.test("a123b") + "
");  //true
    document.write("
");

    var reg = new RegExp("^\\d{3}");  //匹配3个数字开头
    document.write(reg.test("a123b") + "
");  //false
    document.write(reg.test("123b") + "
");  //true

    document.write("
");
    var reg = new RegExp("\\d{3}$");  //匹配3个数字结尾
    document.write(reg.test("a123") + "
");  //true

    document.write("
");
    var reg = new RegExp("^\\d{3}$");  //精确匹配，必须匹配3个数字
    document.write(reg.test("123abc123") + "
");  //false
    document.write(reg.test("456") + "
");  //true

    /*
    使用第2种写法
     */
    var reg = /^\d{3}$/;
    document.write(reg.test("456") + "
");  //true
script>
body>
html>

正则匹配模式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式匹配模式title>
head>
<body>
<script type="text/javascript">
    /*
    i 忽略大小写比较
    1. new RegExp("正则表达式","匹配模式")
    2. /正则表达式/匹配模式
     */
    var reg = new RegExp("cat","i");
    document.write(reg.test("cat") + "
");  //true
    document.write(reg.test("CAT") + "
");  //true
    document.write("
");

    var reg = /cat/i;
    document.write(reg.test("cat") + "
");  //true
    document.write(reg.test("CAT") + "
");  //true
script>
body>
html>

DOM树的API方法

DOM: Document Object Model 文档对象模型

作用：操作网页中各种元素，可能通过修改DOM树来实现修改网页结构的目的

查找节点和获取属性的方法

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素数组
document.getElementsByName(“name”)	通过name属性得到一组元素数组
document.getElementsByClassName(“类名”)	通过类名得到一组元素数组
setAtrribute(属性名, 属性值)	设置属性
getAtrribute(属性名)	根据属性名获取属性值
removeAtrribute(属性名)	根据属性名移除指定的属性
style属性（元素.stye.样式名=样式值）	为元素添加样式一句一个样式添加
aClass （元素.className=类名）	为元素添加样式调用style{}中的css样式必须是类选择器多处添加

注意：style 和 aclss的修改在浏览器运行时才生效。并且需要激活对应的事件。

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过css选择器获取一个元素
document.querySelectorAll(CSS选择器)	通过css选择器获取一组元素数组如："#id" “.类名” “标签名”

案例

点第1个按钮，给所有tr奇数行和偶数行添加不同的背景色
点击第2个按钮，选中所有商品
点击第3个按钮给所有的a链接添加href属性。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM：查找元素的方法title>
    <style>
        table {
            /*细边框样式*/
            border-collapse: collapse;
            width: 500px;
        }
    style>
head>
<body>
<input type="button" value="(通过标签名)给表格奇偶行添加不同的背景色" id="b1">
<hr/>
<table border="1">
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
    <tr>
        <td>100td>
        <td>100td>
        <td>100td>
    tr>
table>

<script type="text/javascript">
    //0.按钮的点击事件
    document.getElementById("b1").onclick=function () {
        //1.获取所有的tr
        //let trs = document.getElementsByTagName("tr");   //传统的写法
        let trs = document.querySelectorAll("tr");   //新的写法, css的标签选择器
        //2.遍历tr集合，判断是奇数还是偶数，遍历快捷键：itar, iter
        for (let i = 0; i < trs.length; i++) {
            let tr = trs[i];  //得到每个tr
            //3.设置不同的背景色
            if (i % 2 == 0) {  //偶数
                tr.style.backgroundColor = "lightgreen";
            }
            else {  //奇数
                tr.style.backgroundColor = "lightyellow";
            }
        }
    }
script>

<hr/>
<input type="button" value="(通过name属性)选中所有的商品" id="b2"/>
<hr/>

<input type="checkbox" name="product">自行车
<input type="checkbox" name="product">电视机
<input type="checkbox" name="product">洗衣机

<script type="text/javascript">
    //通过css的#id选择器来选中元素
    document.querySelector("#b2").onclick=function () {
        //1.得到所有的复选框
        let products = document.getElementsByName("product");
        //2.遍历集合，将每一项checked=true
        for (let product of products) {  //每个元素是一个checkbox
            product.checked = true;
        }
    }
script>
<hr/>

<input type="button" value="(通过类名)给a添加链接" id="b3"/>
<hr/>
<a class="company">传智播客a>
<a class="company">传智播客a>
<a class="company">传智播客a>

<script type="text/javascript">
    document.getElementById("b3").onclick=function () {
        //1.通过类名得到所有的a标签
        let companies = document.getElementsByClassName("company");
        //2.遍历集合，给每个a标签添加href属性
        for (let company of companies) {
            company.href = "http://www.itcast.cn";
        }
    }
script>
body>
html>

创建元素的方法

创建元素的方法	作用
document.createElement(“标签名”)	创建一个元素

修改DOM树的方法

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	将元素追加成最后一个子元素
父元素.removeChild(子元素)	通过父元素删除子元素(他杀)
元素.remove()	删除自己(自杀) 慎用，有浏览器不支持
父.replaceChild(新元素，旧元素)	用新标签替换标签体中的旧标签
元素.parentElement	获取父元素，此处的parentElement是一个属性。可链式调用找到某一层父元素

BOM的API方法

什么是BOM？

BOM：Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象。

BOM的功能

BOM常用对象	作用
window	浏览器窗口，已经学过的方法： prompt(), alert(), setInterval() confirm() 确定框，有2个选择按钮(确定，取消)
location	代表浏览器的地址栏
history	浏览的历史记录

Windows

windows的前缀是可以省区的。

setInterval/setTimeOut 是俗称的定时器。

提供方法：

方法	属性
prompt（”提示信息“，“框中默认值”）	弹出对话框
alert（”提示信息”）	弹框显示信息
confirm（“确认信息”）	弹出确认框，确认返回true/取消返回false
setInterval(函数名()，时间)/clearInterval(set的返回值)	调用某函数，每过多久调用一次。持续循环/取消
setTimeOut(函数名()，时间)/clearTimeOut(set的返回值)	调用某函数，过多久调用一次。单次调用/取消
onload	当页面加载完成时，再执行刷新

多个onload方法只执行一次且最后面的代码覆盖前面的。

JQ中的入口函数是每个入口函数都执行一次。

 window.onload = function(){	
            let div = document.getElementById("div");
            alert(div);
        }

案例：点名器


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名系统title>
    <script src="jquery-3.3.1.min.js">script>
head>
<style>
        table{
            font-size: 18px;
            text-align: center;
            margin: auto;
            padding: 50px;
    
        }
        /* 选中所有的表格设置颜色为绿色 */
        td{
            background-color: green;
        }

        #div{
            text-align: center;
            color: red;
        }

        input{
            margin: auto;
            text-align: center;
        }
style>
<body>
    <div id="div">随机点名系统div>
    <table id="td" border="5" width="1000">table>
    <input type="button" value="开始" id="start" >
    <input type="button" value="结束" id="end" disabled=true >
body>
<script>
    //定义数组
    let arr =[1,2,3,4,5,6,7,8,9,10,11,12,13];
    //获取table标签
   let td =document.getElementById("td")
   let numExra = arr.length%5; //求余，看多出来几个
    let num = Math.floor(arr.length/5); //五个格子一行，判断数组有多少行
    let count = 0;
    //循环创建表格，需要嵌套
    for(let i = 0 ; i<num;i++){
        //创建一行
        let tr = document.createElement("tr");
        //定义循环
        for(let j = 0; j < 5 ;j++){
         //创建单元格
           let td = document.createElement("td");
           //设置td的内容
           td.innerText=arr[count];
           td.id=count;
           count++;
         //连接单元格
           tr.appendChild(td);
        }
        //把这一行挂上td
        td.appendChild(tr);
    }
        //重新创建一行
        let trExtra = document.createElement("tr");
        //在此处循环，继续创建多出来的表格，挂上树。
        for(let k = 0; k < numExra ;k++){
         //创建单元格
        let td = document.createElement("td");
        //设置td的内容
        td.innerText=arr[count];
        td.id=count;  //为每一个单元格设置唯一表示id 从1 开始
        count++;
         //连接单元格
         trExtra.appendChild(td);
        }
        //把这一行挂上td
        td.appendChild(trExtra);


        //定义变量接受函数定时器的返回值
        let countor = 0;
        //定义计数器的循环时间
        let timer = 100;
        document.getElementById("start").onclick=function(){
            this.disabled=true;  //开始按键不可用
            document.getElementById("end").disabled=false;  //结束按键可用

            //调用间隔函数，开始找人
           countor = setInterval(findPerson(),timer);
        };

        document.getElementById("end").onclick=function(){
            this.disabled=true;//结束按键不可用
            document.getElementById("start").disabled=false; //开始按键可用
            //结束定时器
            clearInterval(countor);
        };

        //定义函数
        function findPerson(){
            //开始之前全部设为绿色
            $("td").css("background","green")
            //从数组中获取一个随机数
            let rand = Math.floor( Math.random() *arr.length );
            //从数组中获取出对应的值
            let arrNum = arr[rand];
            //按照整个值的id 找到td对象,设置颜色为红色
            $("#"+arrNum+"").css("background","red");
        }
   
script>
html>

Location

作用：代表浏览器上地址栏对象，主要用于页面的跳转

属性	功能
href	1. 获取属性值，得到当前访问的地址 2. 设置属性值，跳转到指定的页面
search	获取?后面的参数字符串 GET方法提交表单的时候，参数会显示在地址栏上

location常用方法

location的方法	描述
reload()	重载加载当前的页面，类似于刷新

onload与reload的区别：onload只是当页面中的其他语句执行完之后再进行，不刷新。reload要刷新。

在标签体的onclick事件中，支持一行代码的语句如：“onlick=location.reload();"


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM：location对象title>
head>
<body>


<input type="button" onclick="location.reload()" value="刷新">

<script type="text/javascript">
    //1. 获取属性值，得到当前访问的地址
    //document.write(location.href + "
");
    //2. 设置属性值，跳转到指定的页面
    //location.href = "http://www.itcast.cn";

    //获取?后面的参数字符串
    //document.write(location.search + "
");

    //显示现在的时候
    document.write(new Date().toLocaleString() + "
");
script>
body>
html>

与window对象关系

location对象是window对象的一个属性，完整写法：window.location
location对象默认的属性是href

History

作用:访问历史记录中页面

方法	作用
forward()	相当于浏览器上前进按钮，如果浏览器上前进按钮不可用，这个方法也不起作用
back()	相当于浏览器上后退按钮
go(正数或负数)	go(1)相当于前进，go(-1)相当于后退

注：浏览器上的前进和后退按钮可以点的时候，这个代码才起作用。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM：历史记录对象title>
head>
<body>
<a href="demo04_location.html">跳转到demo04a>

<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="前进" onclick="history.go(1)">     //go(+/- 1)
body>
html>

JavaScript 面向对象

JavaScript 里面也是可以直接定义类的

类定义

有三种方式可以定义类，只要第二种最常用。

第一种


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的定义和使用title>
head>
<body>
    
body>
<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //show方法
        show(){
            document.write(this.name + "," + this.age + "
");
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //使用Person类
    let p = new Person("张三",23);
    p.show();
    p.eat();
script>
html>

第二种（字面量）

什么是字面量？

字面量是作为一种通用的，跨平台的数据交互格式。在程序界是公认的事实。

在计算机科学中，字面量是用于表达源代码中一个固定值的表示法。几乎所有计算机变成语言都具有对基本只的字面量表示


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字面量定义类和使用title>
head>
<body>
    
body>
<script>
    //定义person
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],

        eat : function() {
            document.write("吃饭...");
        }
    };

    //使用person
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "
");
    person.eat();
script>
html>

第三种

继承（几乎不用）


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承title>
head>
<body>
    
body>
<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //定义Worker类继承Person
    class Worker extends Person{
        constructor(name,age,salary){
            super(name,age);
            this.salary = salary;
        }

        show(){
            document.write(this.name + "," + this.age + "," + this.salary + "
");
        }
    }

    //使用Worker
    let w = new Worker("张三",23,10000);
    w.show();
    w.eat();
script>
html>

封装

在JS中，可以将HTML中的代码，封装到.js的文件中存储。使用的时候要导包。

如下代码是举例，将方法简化封装。

function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}

//以上是js外部文件
//以下是html




    
    
    封装


    div1
    div2

  //导入js外部文件

案例：省市级联

注意：

select标签的值就是对应被选中的下拉菜单的option标签的value值

加载事件（onload）的定义：当整个页面都加载完成之后才会对这个事件进行加载


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>省市联动title>
head>
<body>
<select id="province">
    <option>--请选择省份--option>
select>
<select id="city">
    <option>--请选择城市--option>
select>
body>

<script>
    // 省份数据
    var provinces= ["广东省","湖南省","广西省"];
    // 城市数据，数据是一个二维数组，一维中每个元素是一个数组
    var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];

    /*
    在页面加载完毕以后读取所有的省份，并且填充到#province中
    分析：动态创建option对象，并且设置  这个value就是它对应的城市数组索引
     */
    //加载事件的定义：当整个页面都加载完成之后才会对这个事件进行加载
    window.onload = function () {
        //1.得到省份这个select对象
        let selectProvince = document.getElementById("province");
        //遍历省份这个数组
        for (let i = 0; i < provinces.length; i++) {
            let province = provinces[i];  //i=0  province=广东省
            //2.创建option对象
            let optionElement = document.createElement("option");
            //3.设置value和文本
            optionElement.value = i;
            optionElement.innerText = province;
            //4.添加到select的最后一个子元素: 父元素.appendChild(子元素)
            selectProvince.appendChild(optionElement);
        }
    }

    /**
     * 省份下拉列表的改变事件
     */
    document.getElementById("province").onchange = function () {
        //alert(this.value);  //value就是它的索引
        var arr = cities[this.value];  //得到相应城市的数组
        //得到城市下拉select对象
        let city = document.getElementById("city");  //city下拉列表对象
        //修改city中innerHTML
        city.innerHTML = "";  //覆盖原来的HTML子元素
        //向城市下拉列表添加option
        //1. 遍历城市数组
        for (let i = 0; i < arr.length; i++) {
            let arrElement = arr[i];  //每个城市字符串
            //2. 创建option对象 
            let optionElement = document.createElement("option");
            //3. 设置文本
            optionElement.innerText = arrElement;
            //4. 添加到select的最后一个子元素: 父元素.appendChild(子元素)
            city.appendChild(optionElement);
        }
    }
script>
html>

总结

在进行.js外部文件导入的时候，要在最前面导入
在拼接字符串的时候，要使用，插值运算符更有利于拼接而不是用字符串串联
字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较。

数字之间运算的时候要先用parse转换为数字，否则默认字符串拼接
区别值调用和函数调用， function也是一种类型。
数组长度可变
submit事件是按照返回值的T/F进行提交表单，默认TRUE。区别标签调用函数和标签体调用两种格式的不同
需要用值，表单项使用VALUE（value属性为值），普通项使用innerXXX(文本为值)
使用时间函数要使用toLocaleString()转为中文日期
正则的精确查找： /^ XXXX $/
获取元素对象 document.getElementById(“id”)

元素属性设置/修改 setAtrribute(属性名, 属性值)
select标签的值就是对应被选中的下拉菜单的option标签的value值
在为属性赋值的时候，可以使用setAttribute方法，也可以**“对象.属性=值”**
使用定时器的方法的时候，调用方法要使用“ ” 引起来，否则有时候会无效化。如果不想引起来就直接写方法名不加（）；
在使用js输出的时候，涉及网页中的值作为变量循环时，不能在页面中打印。自动覆盖。导致直接挂掉且不出错。在控制台输出
```
       //此处有5个tr标签
    let trs = document.getElementsByTagName("tr");
     for(let i = 0 ; i
```
//1.得到省份这个select对象 let selectProvince = document.getElementById(“province”); //遍历省份这个数组 for (let i = 0; i < provinces.length; i++) { let province = provinces[i]; //i=0 province=广东省 //2.创建option对象 let optionElement = document.createElement(“option”); //3.设置value和文本 optionElement.value = i; optionElement.innerText = province; //4.添加到select的最后一个子元素: 父元素.appendChild(子元素) selectProvince.appendChild(optionElement); } } /** 省份下拉列表的改变事件 */ document.getElementById(“province”).onchange = function () { //alert(this.value); //value就是它的索引 var arr = cities[this.value]; //得到相应城市的数组 //得到城市下拉select对象 let city = document.getElementById(“city”); //city下拉列表对象 //修改city中innerHTML city.innerHTML = “–请选择城市–”; //覆盖原来的HTML子元素 //向城市下拉列表添加option //1. 遍历城市数组 for (let i = 0; i < arr.length; i++) { let arrElement = arr[i]; //每个城市字符串 //2. 创建option对象广州市 let optionElement = document.createElement(“option”); //3. 设置文本 optionElement.innerText = arrElement; //4. 添加到select的最后一个子元素: 父元素.appendChild(子元素) city.appendChild(optionElement); } }

 ``` 
  总结 
   
    在进行.js外部文件导入的时候，要在最前面导入
  
    在拼接字符串的时候，要使用，插值运算符更有利于拼接而不是用字符串串联
  
    字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较。
 数字之间运算的时候要先用parse转换为数字，否则默认字符串拼接
  
    区别值调用和函数调用， function也是一种类型。
  
    数组长度可变
  
    submit事件是按照返回值的T/F进行提交表单，默认TRUE。区别标签调用函数和标签体调用两种格式的不同
  
    需要用值，表单项使用VALUE（value属性为值），普通项使用innerXXX(文本为值)
  
    使用时间函数 要使用toLocaleString()转为中文日期
  
    正则的精确查找： /^ XXXX $/
  
    获取元素对象 document.getElementById(“id”)
 元素属性设置/修改 setAtrribute(属性名, 属性值)
  
    select标签的值就是对应被选中的下拉菜单的option标签的value值
  
    在为属性赋值的时候，可以使用setAttribute方法，也可以**“对象.属性=值”**
  
    使用定时器的方法的时候，调用方法要使用“ ” 引起来，否则有时候会无效化。 如果不想引起来就直接写方法名不加（）；
  
    在使用js输出的时候，涉及网页中的值作为变量循环时，不能在页面中打印。自动覆盖。导致直接挂掉且不出错。在控制台输出
        //此处有5个tr标签
    let trs = document.getElementsByTagName("tr");
     for(let i = 0 ; i

JavaScript 基础 - 第15天 +码农快讯+ JavaScript学习笔记 javascript 前端开发语言
文章目录JavaScript基础-第15天深浅拷贝浅拷贝深拷贝通过JSON序列化实现js库lodash实现深拷贝通过递归实现深拷贝异常处理throwtry...catchdebugger处理this改变thiscallapplybindthis指向性能优化防抖（debounce）手写防抖函数节流（throttle）手写节流函数JavaScript基础-第15天深浅拷贝浅拷贝浅拷贝：把对象拷贝给一个
JavaScript 基础 - 第13天 +码农快讯+ JavaScript学习笔记 javascript 开发语言 ecmascript
文章目录JavaScript基础-第13天深入对象创建对象三种方式构造函数new实例化过程实例成员&静态成员实例成员静态成员一切皆对象内置构造函数ObjectArrayStringNumberJavaScript基础-第13天了解面向对象编程的基础概念及构造函数的作用，体会JavaScript一切皆对象的语言特征，掌握常见的对象属性和方法的使用。深入对象内置构造函数综合案例深入对象了解面向对象的基
java 动态多态性_Java语言中动态多态性的实现及应用阿野与阿厉 java 动态多态性
科技信息1.引言多态性(polymorphism)一词来源于拉丁语poly(表示多的意思)和mor-phos(意为形态)，其字面的含义是多种形态。在面向对象系统中，多态性是其核心内容之一，反映了人们在求解问题时，对相似性问题的一种求解方法。Java语言实现了两种多态性：静态多态性和动态多态性。本文重点论述其采用重写机制实现动态多态性的原理，并结合实例讲解动态多态性的应用。2.关于多态的概念2.1继
前端入门：JavaScript基础介绍虞锦雯
一、JavaScript介绍Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协
史上最短却是关于人脉最精辟的论述 90后的微笑
人脉是什么？人脉并不是你认识多少人，而是在你需要帮助的时候，有多少人真的能帮助你。试想？你会把一个，总是求你帮忙的人作为个人脉么！我们总是想寻求能力比自己强、关系比自己广的人，作为自己的人脉，从来没有把总是找自己帮忙的人做为人脉。既然这样的话，那些能力比你强很多的人，为什么要认识你？所以，不是因为有人脉，你做事才成功，而是因为你个人做事比较厉害，人人都愿意与强者结交，英雄总是惺惺相惜，然后才逐渐拥
让文章论述精彩的三要素小馋猫与大馋猫
1.观点：要有用户视角，用户思维，用户需要啥想看啥，怎样产生共鸣1）有价值：用户看完觉得有用2）产生共鸣：了解读者，替她们发声2.血肉：足够丰满主题论证1）摆事实讲道理：表达简单精炼：总结性和表达性。现在好多读者没有时间和耐心2）故事：讲短故事3.案例：足够说服力跟观点和主题有重大要关联完美匹配1）案例积累：看书文章听课，思考这些案例用在什么地方，该怎么用2）创造案例3）搜索案例打磨观点时，思考价
9种体质可听音乐调理身体哇听
国医大师、北京中医药大学王琦教授把人的体质分为九种，分别是：平和、阳虚、阴虚、痰湿、湿热、气郁、气虚、血瘀、特禀。其中比较健康的平和体质仅占32.75%，其他8种偏颇体质占到了67.25%。古琴五音入五脏，可调理气血和脏腑阴阳平衡，明白自己的体质有针对性的多听相应的调理琴曲，对改善偏颇体质很有帮助。下面为您介绍几种体质特性及调理曲目。平和质的人身体基本健康，暂不论述。气虚体质气虚是指由于元气不足引
《干就对了》感悟分享羽西随笔
参加了一个激情讲书活动，第一本书是俞朝翎的《干就对了》，这本书是阿里巴巴销售团队创建过程以及取得业绩的经验总结。怎么管理团队，怎么提升业绩，在这本书里有详细的论述，总结一个字“干”就对了，按照既有的方向和方法论专心致志去实现目标是每个公司都可以拿来用的。在这本书里，讲了如何学心法，定目标，搭班子，选人才，做激励，出业绩，育强将，建团队，炼文化。学心法让人印象深刻，了解心法心力脑力体力三方面要做的事
2019.5.6感赏85春风浩荡苇絮轻扬
今天是儿子二模的日子，投射他在考场上头脑清醒，能量满满，灵感喷薄，收获丰盛。对作文审题清晰，论述深入，观点明确；对阅读理解透彻，表达完备，对选择明察秋毫，准确抉择。对数学题更是思路清晰，运算正确，有勇有谋，从容应对。今天的风好大，感赏先生将儿子送到学校，顺便买回了桑葚，希望能缓解孩子眼睛疲劳。降温了，我又穿上了毛衣，乖乖地系上丝巾，我的脖子可不能再受凉了。二模的日子，儿子将按照高考的作息来进行练习
每日学经典 |《黄帝阴符经》神仙抱一演道章（五）知创快讯
《阴符经》《黄帝阴符经》，道教经典，简称《阴符经》。共三百余字，分上、中、下三篇，上篇主要内容是阐述天道与人事的关系，中篇主要内容是论述富国安民的道理，下篇主要内容是论兵法战术的。唐代道士李筌在嵩山得此宝经，又在骊山得到骊山老母的指点做出注释传世。图片发自App《黄帝阴符经》神仙抱一演道章观天之道，执天之行，尽矣。天有五贼，见之者昌。五贼在心，施行于天。宇宙在乎手，万化生乎身。天性，人也。人心，机
透彻读书关——第一章开放式思考1 木棉咕噜
1、请从人生金三角论述，什么是快乐而有成效的人生，以及大部分人的不幸之源是什么？如果能结合自己或身边的案例来阐述更好。（必写）2、学完本书第一章第一节，如果你有什么令你触动的反思或收获，请分享给我们。（自愿写）心理学家说，幸福的人生就是在自己热爱的领域努力地玩。“热爱、努力、玩耍”这三个条件缺一不可，而大部分人不幸的根源正是因为他们丢了其中一个条件。如果只是在自己热爱的领域努力，而不敢像一个孩子那
毕业论文答辩用代码堆砌发际线
毕业论文答辩是一种有组织、有准备、有计划、有鉴定的比较正规的审查论文的重要形式。为了搞好毕业论文答辩，在举行答辩会前，校方、答辩委员会、答辩者(撰写毕业论文的作者)三方都要作好充分的准备。论文答辩的目的，对于组织者——校方，和答辩者——论文作者是不同的。校方组织论文答辩的目的简单说是为了进一步审查论文，即进一步考查和验证论文作者对所著论文论述到的论题的认识程度和当场论证论题的能力;进一步考察论文作
全面推进乡村振兴加快建设农业强国庄生晓梦L
“强国必先强农，农强方能国强”，21世纪以来第20个指导“三农”工作的中央一号文件于2月13日发布。文件指出全面建设社会主义现代化国家必须坚持不懈把解决好“三农”问题作为全党工作重中之重，举全党全社会之力全面推进乡村振兴，加快农业农村现代化。作为一名乡镇组工干部，应深入贯彻落实习近平总书记关于“三农”工作的重要论述，党建引领助推乡村振兴不断取得新进展，铆足干劲推动建设农业强国开好局起好步。仓廪实，
如何提高英语听力 PoissonDor
相信英语听力一直是大家所困扰的问题，无论是对于学生，即将备考四六级，还是雅思托福的考生来说；还是热爱观看英美剧的同学来说，英语听力一直是个大难题。文章将从以下3方面展开论述：是什么造成了听不懂？I.为什么会听不懂？听不懂的原因是3个，分别是语音，语法和词汇。请看下图首先，语音又可细分为音标和连读弱读等。音标，也就是，是否自己的发音与英美人的发音相一致，是否认识音标并能读准确。在英语中，不同词性的单
Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南陈马登Morden
本文还有配套的精品资源，点击获取简介：Dojo-CodeLab是一个提供学习和实践JavaScript及其Dojo框架的项目，专注于为初学者提供无需特定环境限制的编程平台。通过开发一个简单的计算器应用，学习者将掌握JavaScript基础语法和Dojo工具集的使用，涵盖变量、数据类型、控制结构、函数、对象、数学运算、事件处理和DOM操作等关键概念。本项目通过实际编码练习帮助学习者加深对前端开发的理
2023 下半年信息安全工程师考试真题答案 rockmelodies 安全网络安全
一、单项选择如下有关信息安全管理员职责旳论述，不对旳旳是（）A.信息安全管理员应当对网络旳总体安全布局进行规划B.信息安全管理员应当对信息系统安全事件进行处理C.信息安全管理员应当负责为顾客编写安全应用程序D.信息安全管理员应当对安全设备进行优化配置国家密码管理局于2023年公布了“无线局域网产品须使用旳系列密码算法”，其中规定密钥协商算法应使用旳是（）A.DHB.ECDSAC.ECDHD.CPK
不可不读的书-《博弈论》搬砖人1314
为什么这本书不可不读呢？《博弈论》从字面意思理解一人对一人、一人对多人、多人对多人之间为了某件事情或者物品或者观点的辩论，论述：博弈是一种神奇的智慧游戏。一个成功的人，需要掌握人生必知的博弈智慧，洞悉人性、圆润通达，善于运用能赢得人心的方式去应对人和事，唯有此，才能在人生的磨砺中游刃有余，挥洒自如。泛化的说：我们日常的工作和生活就是不停的博弈决策的过程。例如：今天我要去上班，几点去呢，我是开车去还
论基于架构的软件设计方法及应用 zju3080103798 软考 java big data
论基于架构的软件设计方法及应用摘要：2020年4月，本人所在的某市金融投资集团启动了集团综合管理系统建设，该项目实现基金、融资租赁、资金管理、转贷、融资担保、保理等金融业务信息化及人力资源、智能办公、法务管理等内部管理功能。在此项目中，我担任了架构师，负责项目总体架构设计工作。本文以该综合管理系统为例，主要论述了基于架构的软件设计方法及应用。在架构需求阶段，以系统的商业需求及质量需求出发标识系统构
JavaScript基础不蒸馒头曾口气 Vue javascript 开发语言前端学习笔记
1JavaScript介绍1.1JS简介1.JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2.作用——网页特效（监听用户的一些行为，让网页作出对应的反馈，如轮播图、下拉菜单等）——表单验证（针对表单数据的合法性进行判断，如输入邮箱的判断）——数据交互（后台的数据，渲染到前端）——服务端编程（node.js）3.JavaScript的组成ECMAScript:(js的
100天阅读挑战--Day56 之葤
《读〈见识〉，长见识》七月用十天时间和百余人共同读了吴军老师的《见识》一书，想和你分享。001.《见识》一书该书是由吴军博士根据他在得到APP上的《硅谷来信》内容中大家最关心的话题，在原来的基础上进一步补充材料、展开论述、重新创作而成。该书课分为两个部分：一、把握未来发现的命脉002.区分幸福和成功如若把人生比作一条河，长、宽、深这三个维度，你目前拓展到了什么程度？找到对你而言最重要的那部分，00
《特立独行的华夏文明》65第四章千锤万凿出深山19 mamimima
我这里粗略地论述了欧洲日耳曼人的一些历史过往。笔者大致总结盎格鲁撒克逊人这个族群几个特殊的行为特点。野蛮在日耳曼人早期（大约公元前2世纪）与罗马帝国不断碰撞时期，日耳曼人连部落联盟都没有实现，导致日耳曼人对在于罗马帝国长期博弈过程中处于下风。在于罗马的长期战争中，日耳曼人逐渐认识到团结起来对付罗马军团的必要性。于是在公元9年，组成联盟的日耳曼联军在条顿堡森林同罗马军队交战，几乎全歼3万罗马。其后日
day82:《如何阅读一本书》懒兔少女
分析阅读的第二个阶段：诠释内容规则1.抓住关键字以达成共识；规则2.从重要句子中找到主旨；规则3.找出作者的论述，并细查其因果关系，明白作者的主张；规则4.找出作者已解决与未解决的问题，确认哪些是作者无法解决的问题。检验自己对主旨的吸收程度：1.转述主旨句子2.举一反三，用生活案例解释主旨阅读会有疑惑是正常的，这正是书籍给予我们新视野的所在，不要逃避疑惑，要正面解决掉它。
2019-05-15 吕小豆
论述商务礼仪修养与个人职业发展与事业成功，生活幸福的关系随着“文明礼仪”的宣传活动日益深入,人们对礼仪知识的认知也越来越多,对职业礼仪的需求也越来越强烈.而职业礼仪中重要的商务礼仪需求,也达到了空前的高涨.那么什么是商务礼仪?商务礼仪指的是人际交往艺术，商务人员的个人素质是一种个人修养及其表现，教养提现细节，细节展现素质。如在外人面前不吸烟、不在大庭广众前喧哗。有助于建立良好的人际沟通。商务礼仪在
2023-04-26 QQ_
以昂扬奋发的姿态做好“三农”工作中央农村工作领导小组办公室组织编写的《习近平关于“三农”工作的重要论述学习读本》一书，近日由人民出版社、中国农业出版社出版，在全国发行。党的十八大以来，以习近平同志为核心的党中央坚持把解决好“三农”问题作为全党工作的重中之重，重农强农持续响鼓重槌，推动农业农村取得历史性成就、发生历史性变革。习近平总书记关于“三农”工作的重要论述，是习近平新时代中国特色社会主义思想的
[倦怠社会]_积极生活嘿hey鱼
否定性的社会已经消失，取而代之的是充溢着积极性的社会。从这一范式转移出发，韩炳哲展示了当今社会的病理形态，其中包括抑郁症、注意力缺乏症、过劳症等精神疾病。它们不是传染病，而是梗阻症:不是由否定性的、免疫学上的他者导致，而是源于过量的肯定性。因此，一切免疫学式预防和抵抗措施都失效了。作者的论述终以一个社会愿景结束，他有意赋予其一个含有歧义的名称“倦怠社会”。其中，生命变成了生存，生存导向对健康的狂热
目标检测-YOLOv2 wydxry 深度学习目标检测 YOLO 人工智能
YOLOv2介绍YOLOv2（YouOnlyLookOnceversion2）是一种用于目标检测的深度学习模型，由JosephRedmon等人于2016年提出，并详细论述在其论文《YOLO9000:Better,Faster,Stronger》中。YOLOv2在保持高速检测的同时，显著提升了检测的精度和泛化能力，成为实时目标检测领域的重要算法之一。核心原理YOLOv2的核心原理是将目标检测问题转化
青年干部筑牢理想信念根基夕阳醉year
习近平总书记指出：“年轻干部接好班，最重要的是接好坚持马克思主义信仰、为共产主义远大理想和中国特色社会主义共同理想而奋斗的班。”“坚定理想信念不是一阵子而是一辈子的事，要常修常炼、常悟常进，无论顺境逆境都坚贞不渝，经得起大浪淘沙的考验。”习近平总书记的重要论述，深刻揭示了理想信念的极端重要性，精辟阐明了年轻干部成长为对党和人民忠诚可靠、堪当时代重任栋梁之才的努力方向和实践路径。坚持理论联系实际。列
道德经：人为什么需要节制私欲？问过蓝天
关于“人欲”，老子在《道德经》中也有非常精彩的论述，即：“罪莫大于可欲，祸莫大于不知足，咎莫大于欲得。故知足之足，常足矣”在老子看来，人生有罪、祸、咎的真正源头就是“人欲”，尤其是无限制地追求私欲，也就是说，当一个人无法节制自己的私欲时，一切困苦如罪、祸、咎就会接踵而至。那么，为什么不节制私欲就会有罪、祝、咎呢？我们先看老子讲的私欲是什么？所谓私欲，指的是个人的欲望，尤其是过度的个人欲望，而过度的
【读书】《历史研究》笔记牧牧与晴
温古知今止于至善——《历史研究》读书笔记“大学之道，在明明德，在新民，在止于至善”（《大学》），而温古知今，止于至善，是人类得以理解生命价值的人文情怀，亦是文明得以传承和发展的精神契机。英国历史学家阿诺德·汤因比所著《历史研究》一书围绕人们称之为文明的社会类型首次出现以来历史经验的性质与范式问题，展开了一以贯之的论述。从当代历史学家们所知晓的人类历史的各个方面广泛抽取例证，并在每个阶段上予以“证明
牢记习近平总书记嘱托走好山西现代化发展之路焕梧
习近平总书记关于中国式现代化道路的重要论述，深刻揭示了中国式现代化的本质和特征，明确了我国现代化建设的目标和方向。党的百年光辉历史充分证明，中国式现代化道路走得对、走得通、走得好，是实现中华民族伟大复兴的必由之路。新时代新征程上，我们要深刻认识“两个确立”的决定性意义，增强“四个意识”、坚定“四个自信”、做到“两个维护”，在以习近平同志为核心的党中央坚强领导下，在习近平新时代中国特色社会主义思想的
LeetCode[Math] - #66 Plus One Cwind java LeetCode 题解 Algorithm Math
原题链接：#66 Plus One 要求：给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9 难度：简单分析：题目比较简单，只须从数组
JQuery中$.ajax()方法参数详解 AILIKES JavaScript jsonp jquery Ajax json
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVM JConsole Webphere
JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
自定义annotation 120153216 annotation
Java annotation 自定义注释@interface的用法一、什么是注释说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
--缺失的索引 SELECT avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement , last_user_seek ,
Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
接上次的 spring mvc 注解的一些详细信息！其实也是一些个人的学习笔记呵呵！
替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java “\替换”
发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘... 在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常 public class Main { /*
POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
/* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词要求按照输入时候的排名输出题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScript array prototype
用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。实现代码如下： <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
UIWebView实现https双向认证请求 bewithme UIWebView https Objective-C
什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis 数据库 NoSQL
3.事务处理 Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
各数据库分页sql备忘 bingyingao oracle sql 分页
ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
【Scala七】Scala核心一：函数 bit1129 scala
1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如 def printWithValue(x: Int) : String= println(x); "ABC" 上面的代码报错，因为，printWithValue的方法
了解GHC的factorial编译过程 bookjovi haskell
GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。
读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
压暗面部高光 cherishLC PS
方法一、压暗高光&重新着色当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。下面讲一下我今天处理高光区域的心得：皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。如果想简化步骤，可以只进行着色（参看下面的步骤1
Java VisualVM监控远程JVM crabdave visualvm
Java VisualVM监控远程JVM JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).
Saiku去掉登录模块 daizj saiku 登录 olap BI
1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" /> <security:intercept-url pattern=&qu
浅析 Flex中的Focus dsjt html Flex Flash
关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件一、无焦点的困扰——组件监听不到键盘事件原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
Yii全局函数使用 dcj3sjt126com yii
由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式 volatile 乱序执行双重检验锁
在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
程序员从初级到高级的蜕变 gcq511120594 框架工作 PHP android html5
软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。现在我们把淫浸代码时间超过3年的开发人员称为
Reverse Linked List hcx2013 list
Reverse a singly linked list. /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx） 2.C#位图处理 System.Drawing。 3.最新demo支持IE7,IE8,Fir
Java list三种遍历方法性能比较 pda158 java
从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo 商业与市场 IT资源免费资源
A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
localStorage、sessionStorage uule localStorage
W3School 例子 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不