之樾
之樾

JavaScript学习笔记

1 什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

1.2 历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript它可以解释为JavaScript的一个标准

最新版本已经到es6版本

但是浏览器还只停留在支持es5代码上

开发环境–线上环境，版本不一致

2 快速入门

2.1 引入JavaScript

  1. 内部标签
<script>
      alert('hello,world');
   script>
  1. 外部引入

qj.js

//,,,

test.html

 <script src="js/qj.js">script>

测试代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>







    <script src="js/qj.js">

    script>
head>
<body>

body>
html>

2.2 基本语法入门


    <script>
        // 1.定义变量  变量类型   变量名=变量值；
        var score=71;
        // alert(num);
        // 2.条件控制
        if (score>60 && score<70) {
      
            alert("60~70");
        }else if (score>70 && score<80) {
      
            alert("70~80");
        }else{
      
            alert("other");
        }


        //console.log(score) 在浏览器的控制台打印变量！
    script>

浏览器必备调试须知：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cZdQMmUu-1615870468732)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210312140401863.png)]

2.3 数据类型

数值、文本、图形、音频、视频……

2.3.1 变量

var 王者荣耀="倔强青铜"；

2.3.2 number

js不区分小数和整数，Number

123//整数123
123.3//浮点数123.1
1.12e3//科学计数法
-99//负数
NaN//not a number
Infinity//表示无限大

2.3.3 字符串

‘abc’“abc”

2.3.4 布尔值

true，false

2.3.5 逻辑运算

&& 两个都为真，结果为真

|| 一个为真，结果为真

! 真即假，假即真

2.3.6 比较运算符（重要）

=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个js的缺陷，坚持不要使用==比较

须知：

  1. NaN===NaN，这个与所有的数值都不相等，包括自己
  2. 只能通过isNaN（NaN)来判断这个数是否是NaN

浮点数问题：

 console.log((1/3)===(1-2/3) )

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

2.3.7 null和undefined

  1. null 空
  2. undefined 未定义

2.3.8 数值

Java中的数值必须是相同类型的对象，js不需要这样

var arr=[123,'heelo',null,ture]

取数组下标，如果越界，就会

undefined

2.3.9 对象

对象是大括号，数组是中括号，每个属性用逗号隔开,注意不要使用’=’，而是’:’!!!

var person={
name:"xiaoming",
age:3,
tags:['js','java','web','...']
}

取对象的值

person.age
>3
person.name
>"xiaoming"

2.4 严格检查模式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <script>
    'use strict';
        //全局变量
        let i=1;
        //ES6 
    script>
head>
<body>

body>
html>

3 数据类型

3.1 字符串

  1. 正常字符串我们使用单引号或者双引号包裹
  2. 注意转义字符\
\'
\n
\t
\u4e2d  \u### Unicode字符
\x41   Asc11字符
  1. 多行字符串编写
//tab 上面 esc下面
var msg=
`hello
world
你好ya
您好`
  1. 模板字符串
//tab 上面  esc下面
let name="sean";
let age=3;
let msg = `你好啊，${
       name}`
  1. 字符串长度
console.log(str.length)
  1. 字符串的可变性：不可变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-owYekI3D-1615870468733)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210313085251205.png)]

  1. 大小写转换
//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()
  1. student.indexOf(‘t’)
  2. substring
[)
 student.substring(1)//从第一个字符串截取到最后一个字符串
  student.substring(1,3)//[1,3)

3.2 数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6];//通过下标取值和赋值
arr[0]
arr[0]=1
  1. 长度
arr.length

注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

  1. indexOf，通过元素获得下标索引
arr.indexOf(2)
1

字符串的"1"和数字1是不同的

  1. slice()截取Array的一部分，返回一个新数组，类似于String中的substring
  2. push()，pop() 尾部
push：压入到尾部
pop：弹出尾部的一个元素
  1. unshift(),shift() 头部
unshift：压入到头部
shift：弹出头部的一个元素
  1. 排序sort()
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
  1. 元素反转 reverse()
(3)["A","B","C"]
arr. reverse()
(3)["C","B","A"]
  1. concat()
(3)["C","B","A"]
arr.concat([1,2,3])
(6)["C","B","A",1,2,3]
arr
(3)["C","B","A"]

注意：concat()并没有修改数组，只是会返回一个新的数组

  1. 连接符 join

打印拼接数组，使用特定的字符串连接

(3)["C","B","A"]
arr.join('-')
"C-B-A"
  1. 多维数组
arr=[[1,2],[3,4]["5","6"]];
arr[1][1]
4

数组：存储数据（如何存，如何取）

3.3 对象

若干个键值对

var 对象名={
     
属性名：属性值，
属性名：属性值，
属性名：属性值
}

//定义了一个person对象，它有四个属性！
var person={
     
    name:"sean",
    age:3,
    email:"[email protected]"
    score:0
    
}

js中对象，{…}表示一个对象，键值对描述属性 xxx:xxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！

  1. 对象赋值
person.name="guan"
"guan"
person.name
"guan"
  1. 使用一个不存在的对象属性，不会报错 undefined
person.haha
undefined
  1. 动态的删减属性，通过delete删除对象的属性
delete person.name
true
person
  1. 动态的添加，直接给新的属性添加值即可
person.haha="haha"
"haha"
person
  1. 判断属性值是否在这个对象中！ xxx in xx
'age'in person
true
//继承
'toSring' in person
true
  1. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toSring')
false
person.hasOwnProperty('age')
true

3.4 流程控制

if判断

var age=3;
if(age>3){
     //第一个判断
    alert("haha");
}else if(age<5){
     //第二个判断
   alert("kuwa");
}else{
     //否则
    alert("kuwa");
}

while循环，避免程序死循环

while(age<100){
     
    age=age+1;
    console.log(age)
}
do{
     
   age=age+1;
    console.log(age)
}while(age<100)

for循环

for(let i = 0;i < 100;i++){
     
    console.log(i)

forEach循环

5.1引入

var age=[12,3,12,3];

//函数
age.forEach(function (value){
     
    console.log(value)
})

for…in

//for(var index in object){}
for(var num in age){
     
    if(age.hasOwnProperty(num)){
     
         console.log("存在")
         console.log(age[num])
    }
}

3.5 Map和Set

Map：

//ES6 Map
//学生的成绩，学生的名字
//var names=["tom","jack","haha"];
//var scores=[100,90,80];

var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');//通过key获得value
map.set('admin',123456);
map.delete('tom');//删除

Set：无序不重复的集合

set.add(2);//添加！
set.delete(1);//删除！
console.log(set.has(3));//是否包含某个元素

3.6 iterator

作业：使用iterator来遍历迭代Map、Set！

//通过for of/for in 是迭代下标
var arr=[3,4,5]
for(var x of arr){
     
console.log(X)
}

遍历map

var map=new Map([['tom',100],['jack',90],['haha',80]]);
        for(let x of map){
     
console.log(x)
}

遍历set

var set=new Set([5,6,7]);
        for(let x of set){
     
console.log(x)
}

4 函数及面对对象

4.1 定义函数

定义方式一

绝对值函数

function abs(x){
     
    if(x>=0){
     
        return x;
    }else{
     
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs=function(x){
     
     if(x>=0){
     
        return x;
    }else{
     
        return -x;
    }
}

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

方式一与方式二等价！

调用函数

abs(10)//10
abs(-10)//10

参数问题：JavaScript可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题？

假设不存在参数，如何规避？

var abs=function(x){
     
    //手动抛出异常来判断
    if(typeof x!=='number'){
     
        throw 'Not a Number';
    }
     if(x>=0){
     
        return x;
    }else{
     
        return -x;
    }
}

arguments

arguments是一个js免费赠送的关键词：代表传递进来的所有的参数，是一个数组

var abs=function(x){
     
    console.log("x=>"+x);
    for(var i=0;i<arguments.lenth;i++){
     
        console.log(arguments[i]);
    }
     if(x>=0){
     
        return x;
    }else{
     
        return -x;
    }
}

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数~

rest

以前：

if(arguments.lenth>2){
     
     for(var i=2;i<arguments.lenth;i++){
     
         //....
     }
}

ES6引入的新特性，获取除了已经定义的参数之外

function aaa(a,b,...rest){
     
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);}

rest参数只能写在最后面，必须用…标识

4.2 变量的作用域

在JavaScript中,var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~（非要实现的话，可以使用闭包）

function qj(){
     
        var x =1;
        x=x+1;
    }
    x=x+2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突！

function qj(){
     
        var x =1;
        x=x+1;
    }
function qj2(){
     
        var x ='A';
        x=x+1;
    }

内部函数可以访问外部函数的的成员，反之则不行

function qj(){
     
        var x =1;
        //内部函数可以访问外部函数的的成员，反之则不行
        function qj2(){
     
        var y =x+1;
    }
    var z=y+1;//Uncaught ReferenceError: y is not defined
    }

假设，内部函数变量和外部函数的变量，重名！

function qj(){
     
        var x =1;

    function qj2(){
     
        var x ='A';
        console.log('inner'+x);//innerA
    }
console.log('outer'+x);//outer1
    qj2()
    }
qj()

假设在JavaScript中，函数查找变量从自身函数开始，由“内”向“外”查找。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

function qj(){
     
        var x ="x"+y;
        console.log(x);
    var y ='y';
    }

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

function qj2(){
     
        var y;
    var x ="x"+y;
        console.log(x);
    y ='y';
    }

这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

function qj2(){
     
    var x =1,
        y=x+1,
        z,i,a;//undefined
    
//之后随意用
    }

全局函数

//全局变量
x=1;
function f(){
     
console.log(X);
}
f();
console.log(X);

全局对象 window

var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window变量；

var x='xxx';

window.alert(x);
var old_alert=window.alert;
//old_alert(x);

window.alert= function(){
     

};
//发现alert()失效了
window.alert(123);

//恢复
window.alert= old_alert;
window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突->如果能够减少冲突？

//唯一全局变量
var KApp={
     };

//定义全局变量
KApp.name='sean';
KApp.add=function(a,b){
     
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

局部作用域 let

function aaa(){
     
    for (var i=0;i<100;i++){
     
        console.log(i)
    }
     console.log(i+1);//问题？ i 除了这个作用域还可以使用
}

ES6 let关键字，解决局部作用域冲突问题！

function aaa(){
     
    for (let i=0;i<100;i++){
     
        console.log(i)
    }
     console.log(i+1);//Uncaught ReferenceError: i is not defined
}

建议大家都使用let去定义局部作用域的变量

常量const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI='3.14';

console.log(PI);
PI='123';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字 const

const PI='3.14';//只读变量
console.log(PI);
PI='123';//TypeError: Assignment to constant variable
console.log(PI);

4.3 方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var sean={
     
        name:'xiaoming',
        birth:2000,
        //方法
        age:function(){
     
            //今年-出生的年
            var now=new Date().getFullYear();
            return now-this.birth;
        }
        }
//属性
sean.birth
//方法，一定要带()
sean.age()

this.代表什么？拆开上面的代码看看~

function getAge(){
     
            //今年-出生的年
            var now=new Date().getFullYear();
            return now-this.birth;
        }
var sean={
     
        name:'xiaoming',
        birth:2000,
    age:getAge}

this是无法指向的，是默认指向调用它的那个对象

apply

在js中可以控制this指向

function getAge(){
     
            //今年-出生的年
            var now=new Date().getFullYear();
            return now-this.birth;
        }
var sean={
     
        name:'xiaoming',
        birth:2000,
    age:getAge};

getAge.apply(sean,[]);//this，指向sean，参数为空

5 内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof[]
"object"
typeof{
     }
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1 Date

var now=new Date();//Mon Mar 15 2021 09:38:50 GMT+0800 (中国标准时间)
        now.getFullYear();//年
        now.getMonth();//月 0~11 代表月
        now.getDate();//日
        now.getDay();//星期
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒
        now.getTime();//时间戳 全世界统一

        console.log(new Date(1615772517778))//时间戳转为时间

转换

now=new Date(1615772517778)
Mon Mar 15 2021 09:41:57 GMT+0800 (中国标准时间)
now.toLocaleString//注意，调用是一个方法，不是一个属性！
ƒ toLocaleString() {
      [native code] }
now.toLocaleString()
"2021/3/15 上午9:49:54"
now.toGMTString()
"Mon, 15 Mar 2021 01:49:54 GMT"

5.2 JSON

JSON是什么

早期，所有数据传输习惯使用XML文件！

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示；number

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都是用 key:value

JSON字符串和js对象的转化

 var user={
     
        name:"sean",
        age:3,
        sex:'male'
    }

    //对象转化为json字符串 {"name":"sean","age":3,"sex":"male"}
    var jsonUser=JSON.stringify(user)

    //json字符串转化为对象,参数为json字符串
    var obj=JSON.parse('{"name":"sean","age":3,"sex":"male"}');

很多人搞不清楚，json和js对象的区别

var obj={
     a:'hello',b:'hellob'}
var json='{"a":"hello","b":"hellob"}'

5,3 Ajax

  • 原生的js写法 xhr异步请求
  • jQuey 封装好的方法 $("#name").ajax("")
  • axios 请求

6 面向对象编程

原型对象

JavaScript、Java、c##……面向对象；JavaScript有些区别！

类：模板 原型对象

对象：具体的实例

在JavaScript需要换一下思维方式

原型：

var Student={
     
    name:"sean",
    age:3,
    run:function(){
     
        console.log(this.name+"run……");
    }
    };

var xiaoming={
     
    name:"xiaoming"
};

//原型对象
//xiaoming.__proto__=Student;

var Bird={
     
    fly:function(){
     
        console.log(this.name+"fly……");
    }
};
//小明的原型是Student

xiaoming.__proto__=Bird;
}

function Student(name){
     
            this.name=name;
        }
        //给Student新增一个方法
        Student.prototype.hello=function(){
     
            alert('Hello')
        };

class继承

class关键字，是在es6引入的

  1. 定义一个类，属性，方法
//定义一个学生的类
        class Student{
     
            constructor(name){
     
                this.name=name;
            }
            hello(){
     
                alert('hello')
            }
        }
var xiaoming =new Student("xiaoming");
var xiaohong =new Student("xiaohong");
xiaohong.hello()
  1. 继承

        //定义一个学生的类
        class Student{
     
            constructor(name){
     
                this.name=name;
            }
            hello(){
     
                alert('hello')
            }
        }
        class XiaoStudent extends Student{
     
            constructor(name,grade){
     
                super(name);
                this.grade = grade;
            }
            myGrade(){
     
                alert('我是一名小学生')
            }
        }
        var xiaoming =new Student("xiaoming");
        var xiaohong =new XiaoStudent("xiaohong",1);

本质：查看对象原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8b6weGYi-1615870468735)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210315125214891.png)]

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x7iitgzx-1615870468738)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210315125708210.png)]

7 操作Bom对象(重点)

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

  • IE6~11
  • Chrome
  • Safari
  • FireFox
  • Opera

三方

  • QQ浏览器
  • 360浏览器

7.1 window（重要）

window 代表 浏览器窗口

window.alert(1)
undefined
window.innerHeight
530
window.innerWidth
150
window.outerHeight
530
window.outerWidth
956

7.2 Navigator

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3861.400 QQBrowser/10.7.4313.400"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3861.400 QQBrowser/10.7.4313.400"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

7.3 screen

代表屏幕尺寸

screen.width
1280
screen.height
720

7.4 location（重要）

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/?tn=98010089_dg"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://www.bilibili.com/')

7.5 document

document 代表当前的页面，HTML DOM文档树

document.title='地球已被占领'
"地球已被占领"

获取具体的文档树节点

<dl id="app">
    <dt>Javadt>
    <dd>JavaSEdd>
    <dd>JavaEEdd>
dl>
<script>
    var dl =document.getElementById('app')
script>

获取cookie

document.cookie
"PSTM=1612265856; BD_UPN=1a314753; BAIDUID=C94843485646361BB93F5DF82AC1EEF5:FG=1; BIDUPSID=4E1D152C14DAD63284C39C3DBA23E58B; BAIDUID_BFESS=C94843485646361BB93F5DF82AC1EEF5:FG=1; COOKIE_SESSION=150351_0_5_0_9_5_1_0_3_4_0_1_150343_0_4_0_1615255401_0_1615255397%7C9%237063978_15_1611537919%7C8; BDRCVFR[S_ukKV6dOkf]=mk3SLVN4HKm; BD_HOME=1; H_PS_PSSID=33637_33344_33689_33594_33570_33392_33590; delPer=0; BD_CK_SAM=1; PSINO=6; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; sug=3; sugstore=1; ORIGIN=0; bdime=0; H_PS_645EC=54b5fHFOi5z%2B0RtPN3drptoalzlwkKeziwYB0zQjPmLG8GagVBGAz8oNxdbpmG7PNV4; BA_HECTOR=0h81218k0l810080k61g4trpg0r"

劫持 cookie 原理

www.taobao.com

<script src="aa.js">script>

服务器端可以设置cookie：httpOnly

7.6 History

history代表浏览器的历史记录

history.back()//后退
history.forward()//前进

8 操作DOM对象（重点）

核心

浏览器网页就是一个DOM树形结构！

  • 更新：更新DOM节点

  • 遍历DOM节点：得到DOM节点

  • 删除：删除一个DOM节点

  • 添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获得DOM节点

//对应css 选择器
<script>
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');

    var childrens = father.children;//获取父节点下的所有子节点
    //father.firstChild
    //father.lastChild

这是原生代码，之后我们尽量都是用jQuery();

更新节点

<div id="id1">
    
div>
<script>
    var id1=document.getElementById('id1');
script>

操作文本

  • id1.innerText='123'修改文本的值
  • id1.innerHTML='123'可以解析HTML文本标签

操作css

id1.style.color='red';//属性使用 字符串 包裹
id1.style.fontSize='20px';//-转 驼峰命名问题
id1.style.padding='2em'

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一h1>
    <p id="p1">p1p>
    <p class="p2">p2p>
div>

<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(self)

    //删除是一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

插入节点

我们获取了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这个干了！会产生覆盖

追加

  <p id="js">
        JavaScript
    p>
<div id="list">
    <p id="se">JavaSEp>
    <p id="ee">JavaEEp>
    <p id="me">JavaMEp>
div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);//追加到后面
script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Kf5xG6X-1615870468739)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210315142826864.png)]

创建一个新的标签，实现插入

<script>
    var js=document.getElementById('js');//已存在的节点
    var list=document.getElementById('list');
    //通过js创建一个新的节点
    var newP=document.createElement('p');//创建一个p标签
    newP.id='newP';
    newP.innerText='hello';
    //创建一个标签节点
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    //可以创建一个style标签
    var myStyle=document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color: red;}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle)
script>

insert

 var ee=document.getElementById('ee');
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    //要包含的节点，insertBefore（newNode，targetNode）
    list.insertBefore(js,ee);

9 操作表单（验证）

表单是什么 form DOM树

  • 文本框 text
  • 下拉框
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏框 hidden
  • 密码框 password
  • ……

表单的目的：提交信息

获得要提交的信息

<form action="post"> 
    <p><span>用户名：span><input type="text" id="username">p>
    
    
    <p>
        <span>性别：span>
        男
        女
    p>
form>
<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value='123'

    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中~
    girl_radio.checked=true;//赋值
    
script>

提交表单。MD5加密密码，表单优化

   
<form action="https://www.baidu.com" method="post" onsubmit="return aaa()"> 
    <p><span>用户名：span><input type="text" id="username" name="username">p>

    <p>
        <span>密码：span>
        <input type="password" id="input-password" >
    p>

    <input type="hidden" id="md5-password" name="password">
    
    <button type="submit">提交button>
form>

<script>
    function aaa(){
      
        alert(1);
        var uname=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd=document.getElementById('md5-password');
        //pwd.value=md5(pwd.value);
        md5pwd.value=md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;
    }
script>

10 jQuery

JavaScript

jQuery库，里面存在大量的JavaScript函数

获取jQuery

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5AGE1Ww-1615870468740)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210316090809280.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!-- 
公式：$(selector).action()
 -->
 <a href="" id="test-jquery">点我</a>
 <script>
    
     document.getElementById('id');
     //选择器就是css的选择器
     $('#test-jquery').click(function(){
     
        alert('hello');
     })
 </script>
</body>
</html>

选择器

//原生js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName('');
    //id
    document.getElementsById('');
    //类
    document.getElementsByClassName('');

    //jQuery  css中的选择器它全部都能用！
    $('p').click()//标签选择器
    $('#id1').click()//id选择器
    $('.class1').click()//class选择器

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件、键盘事件、其他事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6LdRpwKm-1615870468741)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210316100127697.png)]


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="lib/jquery-3.6.0.js">script>
    <style>
        #divMove{
      
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    style>
head>
<body>
    
    mouse:<span id="mouseMove">span>
<div id="divMove">
    在这里移动鼠标试试
div>

<script>
    //当网页元素加载完毕之后，相应事件
    $(function(){
      
        $('#divMove').mousemove(function(e){
      
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    })
script>
body>
html>

操作DOM

节点文本操作

 $('#test-ul li[name=python]').text();//获得值
 $('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('123');//设置值

css的操作

$('#test-ul li[name=python]').css("color","red")

元素的显示与隐藏：本质 display：none；

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

小技巧

  1. 如果巩固js(看jQuery源码，看游戏源码！)
  2. 巩固HTML、css（扒网站，全部下载下来，然后对应修改看效果

Layer弹窗组件

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName(’’);
//id
document.getElementsById(’’);
//类
document.getElementsByClassName(’’);

//jQuery  css中的选择器它全部都能用！
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//class选择器


文档工具站：https://jquery.cuishifeng.cn/



>事件

鼠标事件、键盘事件、其他事件

[外链图片转存中...(img-6LdRpwKm-1615870468741)]

```html



    
    Title
    
    


    
    mouse:


    在这里移动鼠标试试

操作DOM

节点文本操作

 $('#test-ul li[name=python]').text();//获得值
 $('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('123');//设置值

css的操作

$('#test-ul li[name=python]').css("color","red")

元素的显示与隐藏：本质 display：none；

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

小技巧

  1. 如果巩固js(看jQuery源码，看游戏源码！)
  2. 巩固HTML、css（扒网站，全部下载下来，然后对应修改看效果

Layer弹窗组件

Element-ui

你可能感兴趣的:(javascript)

  • 深入理解 JSON.stringify：优雅输出 JSON 数据 天天进步2015 前端开发json
    在JavaScript开发中，JSON数据的处理是一项基础且关键的技能。JSON.stringify()方法作为将JavaScript对象转换为JSON字符串的标准工具，其功能远不止于简单的数据转换。本文将深入探讨JSON.stringify()的使用技巧、参数配置以及常见陷阱，帮助开发者更优雅地处理JSON数据输出。基础用法JSON.stringify()的基本语法如下：JSON.stringi
  • JavaScript的函数拦截技术详解 天天进步2015 前端开发javascript开发语言ecmascript
    引言在JavaScript的世界里，函数是一等公民。它们可以被赋值给变量，作为参数传递，甚至可以被动态修改。函数拦截（FunctionInterception）是一种强大的技术，允许开发者在不修改原始函数代码的情况下，拦截、监控和修改函数的行为。本文将深入探讨JavaScript函数拦截的各种技术、应用场景以及最佳实践。什么是函数拦截？函数拦截是指在函数执行前、执行中或执行后插入自定义逻辑的过程。
  • JavaScript常用函数测试demo sunny05296 JavaScriptjavascript开发语言ecmascript
    JavaScript常用函数测试demovimJavaScriptTestDemo.html内容如下：JavaScriptfunctionstestdemoEnterF12toviewtheconsoleoutputmessageofconsole.log()EnterF5torefresh//JavaScriptint2string/string2inttestfunctiontest01(){
  • nginx性能优化及使用方面技巧 智慧源点 nginx性能优化linux
    优化Nginx进程数量配置参数如下：代码语言：javascript复制worker_processes1;#指定Nginx要开启的进程数，结尾的数字就是进程的个数，可以为auto这个参数调整的是Nginx服务的worker进程数，Nginx有Master进程和worker进程之分，Master为管理进程、真正接待“顾客”的是worker进程。进程个数的策略：worker进程数可以设置为等于CPU的
  • 轻松帮你搞清楚Python爬虫数据可视化的流程 liuhaoran___ python
    Python爬虫数据可视化的流程主要是通过网络爬取所需的数据，并利用相关的库将数据分析结果以图形化的方式展示出来，帮助用户更直观地理解数据背后的信息。Python爬虫+数据可视化步骤1.获取目标网站的数据使用`requests`或者`selenium`库从网页上抓取信息。对于动态加载内容的页面可以考虑结合JavaScript渲染引擎。2.解析HTML内容提取有用信息常见工具如BeautifulSo
  • js在html有几种存在方式,JavaScript输出方式有哪些？ 王若琳 js在html有几种存在方式
    JavaScript输出方式有哪些？下面本篇文章给大家介绍一下JavaScript常见的输出方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.通过弹窗的形式来输出alert(需要输出的内容);alert("helloworld");confirm(需要输出的内容);confirm("你好吗?");prompt(需要输出的内容);prompt("请输入内容：");注意点:如果
  • 判断html标签是否存在,jquery怎么判断标签元素是否存在？ BugHunter666 判断html标签是否存在
    jquery怎么判断标签元素是否存在？下面本篇文章给大家介绍一下在jquery中判断页面标签元素是否存在的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。jquery判断页面标签元素是否存在在传统的Javascript里，当我们对某个页面元素进行某种操作前，最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。例如：document.getElementBy
  • JavaScript数组-遍历数组 咖啡の猫 javascript开发语言
    在JavaScript开发过程中，数组是一种非常常见且强大的数据结构，用于存储一系列有序的数据项。遍历数组是处理这些数据项的基础操作之一，无论是为了显示、转换还是过滤数据。本文将详细介绍几种常见的遍历数组的方法及其应用场景，帮助你选择最适合当前任务的方式。一、为什么需要遍历数组？遍历数组意味着逐一访问数组中的每个元素，以便执行特定的操作，如打印输出、修改值或基于条件筛选数据。不同的场景可能需要不同
  • Angular 编译前的脚本执行 t0_54manong 编程问题解决手册angular.js前端javascript个人开发
    在使用Angular开发项目时，有时候我们需要在每次编译之前执行特定的脚本或JavaScript函数。这在开发环境中非常有用，比如运行某些预处理、清理或其他自定义逻辑。今天我们将探讨如何在Angularv17结合esbuild实现这个功能。问题背景假设你正在使用Angularv17进行开发，并且已经配置了esbuild作为构建工具。现在你需要在每次Angular编译之前（特别是使用ngwatch时
  • JavaScript基础-API 和 Web API 難釋懷 前端javascript开发语言
    在现代Web开发中，API（应用程序接口）是连接不同软件组件或系统之间的桥梁。对于前端开发者来说，JavaScript与WebAPI的结合使用尤为重要，它使得我们可以访问浏览器提供的各种功能和服务，从而构建出交互性更强、用户体验更好的网页应用。本文将介绍API的基本概念，重点探讨WebAPI及其在JavaScript中的应用。一、什么是API？API全称为“ApplicationProgrammi
  • Vue相关面试题 努力的搬砖人. vue.js
    以下是150道Vue相关面试题及详细答案：Vue基础1.Vue.js是什么？Vue.js是一个用于构建用户界面的渐进式JavaScript框架，专注于视图层，允许开发者以声明式的方式构建用户界面，具有轻量、高效、易上手等特点。2.Vue实例的作用是什么？Vue实例是应用程序的核心，它管理数据、方法、生命周期钩子等，通过数据双向绑定将数据与视图层连接起来，实现数据驱动视图。3.如何创建一个Vue实例
  • 【概念】Node.js，Express.js MongoDB Mongoose Express-Validator Async Handler 一袋米扛几楼98 各类概念node.jsexpressjavascript
    1.Node.js定义：Node.js是一个基于ChromeV8引擎的JavaScript运行时环境，允许你在服务器端运行JavaScript代码。作用：它使得开发者可以使用JavaScript编写服务器端代码，从而实现前后端使用同一种语言。比喻：Node.js就像是“工厂的电力系统”，它为整个工厂（应用程序）提供动力（运行环境）。没有电力系统，工厂的机器（代码）就无法运转。特点：非阻塞I/O：N
  • JavaScript基础-DOM事件流 難釋懷 javascript开发语言
    在Web开发过程中，理解和掌握DOM事件流是实现高效交互的关键。DOM事件流描述了当一个事件发生时，它在文档树中的传播路径。了解事件流的概念有助于我们更精确地控制事件处理逻辑，避免不必要的行为，并提升用户体验。本文将深入探讨DOM事件流的基本概念，包括事件捕获、目标阶段和事件冒泡，并通过示例展示如何应用这些知识。一、什么是DOM事件流？DOM事件流是指事件在整个页面结构中传播的过程。根据W3C标准
  • jquery基础和导航栏 声声codeGrandMaster djangopython后端
    jquery基础和导航栏目录1jQuery基础2jQuery事件3jQuery影藏和显示4jQuery滑动5、区块属性6、导航栏1jQuery基础介绍jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。jQuery很容易学习。基础语法：$(selector).action()美元符号定义jQuery选择符（selector）“查询"和"查找”HTML元素jQ
  • .gitlab-ci.yml 配置文件详解 程序媛夏天 Gitgitlabci/cd.gitlab-ci.yml
    个人主页：不爱吃糖的程序媛‍♂️作者简介：前端领域新星创作者、CSDN内容合伙人，专注于前端各领域技术，成长的路上共同学习共同进步，一起加油呀！✨系列专栏：前端面试宝典、JavaScript进阶、vue实战资料领取：前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取git工具文档说明：https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.ht
  • 学习111 麋鹿叔叔 学习
    项目名称项目简介主要功能技术原理GitHub地址browser-use智能浏览器工具，让AI像人类一样操作浏览器，实现网页自动化网页浏览与操作、多标签页管理、视觉识别与内容提取、操作记录与重复执行、自定义动作支持、主流LLM模型支持为大语言模型服务的创新Python工具库GitHubEkoFellouAI推出的生产就绪型JavaScript框架，基于自然语言驱动创建智能代理支持所有平台，提供统一便
  • Javascript基础 GesLuck javascript开发语言ecmascript
    目录1.变量声明2.基本数据类型3.复杂数据类型4.字符串方法5.对象方法6.时间方法7.条件（if）8.循环（for/while）9.遍历（forin/of）10.多选（Switch）END1.变量声明const：除非变量需要重新赋值（优先使用）——consta=true;let：需要修改值时使用{大括号内用}（其次使用）——letb="hello"var：除非维护旧代码（避免使用）——varc
  • JavaScript 箭头函数使用总结及注意事项（适合新手到进阶） 我真聪明。 javascript开发语言ecmascript
    箭头函数（=>）是ES6的核心特性之一，它简化了函数写法并改变了this的指向逻辑，但在使用时需要明确其适用场景和限制。以下是详细总结：一、箭头函数核心特点简洁语法：//传统函数constadd=function(a,b){returna+b;};//箭头函数constadd=(a,b)=>a+b;//单行省略returnconstadd=(a,b)=>{returna+b;};//多行需显式re
  • 使用 React 和 Cypress 进行单元测试 pxr007 单元测试react.jsjunit
    每个开发人员都希望发布一个没有错误的生产应用程序。为了实现这一点，我们需要考虑如何将测试集成到我们的应用程序中。我们可以使用许多测试工具、框架和测试类型。Cypress是一个现代化的自动化测试套件。它是一个基于JavaScript的完全开源的测试框架，由Mocha和Chai等支持BDD和TDD断言样式的库构建。此外，如果您熟悉用JavaScript编写测试，那么使用Cypress会很容易。Cypr
  • 红宝书第十一讲：超易懂版「ES6类与继承」零基础教程：用现实例子+图解实现 kovlistudio 前端es6javascript开发语言前端学习
    红宝书第十一讲：超易懂版「ES6类与继承」零基础教程：用现实例子+图解实现资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、ES6类的核心语法：把事物抽象成“模板”想象你要设计一款「动物养成游戏」，需要创建多种动物对象。ES6的class就是一个代码模板：//基础类（Animal是模板，有名称和吃东西方法）classAnimal{constructor(name
  • 探索HTML5 Canvas的无限可能：一个丰富多彩的开源项目 黎情卉Desired
    探索HTML5Canvas的无限可能：一个丰富多彩的开源项目去发现同类优质开源项目:https://gitcode.com/在这个充满活力的数字时代，JavaScript、HTML和CSS已经成为构建互动式网页体验的核心技术。今天，我们向您推荐一个独特而有趣的开源项目，它将这些技术结合在一起，创造出一系列生动活泼的可视化元素，包括时钟、计时器、地图、国际象棋、温度计等，让您在学习和实践中感受HTM
  • 探索HTML5 Canvas：创造动态与交互性网页内容的强大工具 A-Kamen html5前端html
    探索HTML5Canvas：创造动态与交互性网页内容的强大工具引言在HTML5的众多新特性中，Canvas无疑是最引人注目的元素之一。它为网页设计师和开发者提供了一个通过JavaScript和HTML直接在网页上绘制图形、图像以及进行动画处理的画布。Canvas的灵活性和强大功能，使得它成为创造动态、交互性网页内容的首选工具。本文将深入探讨HTML5Canvas的基本用法、应用场景以及如何利用它来
  • 【JavaScript】11-JS高阶技巧 beibeibeiooo JavaScript【已完结】javascript前端ecmascriptes6
    本文介绍JS中的一些高阶技巧。目录1.深浅拷贝1.1浅拷贝1.2深拷贝1.2.1通过递归实现1.2.2lodash/cloneDeep1.2.3JSON.stringify()2.异常处理2.1throw抛异常2.2try/catch捕获异常2.3debugger3.处理this3.1this指向3.1.1普通函数this3.1.2箭头函数的this3.2改变this3.2.1call方法改变3.
  • 如何用PHP开发一个api数据接口 幽蓝计划 php
    对于一个iOS开发者来说，我一直觉得会写接口是一件很酷的事情，因为它可以实时修改前台数据，而不像App一样需要更新版本和接受审核。更重要的是，它意味着你的技术完成了一个闭环，可以独自完成一整个项目的开发。PHP是我接触的第一个脚本语言，使用之后更是感觉PHP功能强大，开发过程非常友好方便，虽然之后也学习过Python、JavaScript等语言，但现在还是习惯使用PHP，下面就来介绍一下如何用PH
  • COMP 315: Cloud Computing for E-Commerce 后端
    Assignment1:JavascriptCOMP315:CloudComputingforE-CommerceFebruary20251IntroductionAcommontaskwhenbackendprogrammingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorinco
  • 探究Three.js中模型移动与旋转的交互逻辑 Front_Yue 3D技术实践指南javascriptthree.js3d
    前言Three.js作为一个功能强大的JavaScript3D库，极大地简化了在网页上创建和展示3D图形的过程。它在游戏开发、产品展示、虚拟现实等众多领域都被广泛应用。通过Three.js，开发者能够轻松创建出复杂的三维场景和交互性强的3D应用，为用户带来沉浸式的体验。一、模型移动的交互逻辑实现（一）键盘控制模型移动利用键盘事件来控制模型在三维空间中的位置移动，是一种常见且便捷的交互方式。以下为具
  • 从零开始：使用原生JS打造简易飞机大战游戏 西域情歌
    本文还有配套的精品资源，点击获取简介：在本教程中，我们将探讨如何利用原生JavaScript的特性，包括事件处理、DOM操作、定时器和音频处理，来构建一个基础的“飞机大战”游戏。该游戏的核心元素包括玩家飞机、敌机、子弹和碰撞检测，它们通过HTML和CSS展现在页面上。通过编写JavaScript脚本，我们实现游戏对象的创建与状态管理，响应用户的键盘和点击事件，更新游戏内容，并通过定时器维护游戏循环
  • React 18 如何定义变量，及赋值 与渲染 痴心阿文 Reactreact.jsjavascript前端
    React18中，定义变量、赋值和渲染的方式因变量的用途和作用域不同而有所差异，下面为你详细介绍不同场景下的实现方法。1.函数组件内定义普通变量在函数组件里，你可以像在普通JavaScript函数中一样定义变量，并且这些变量会在每次组件重新渲染时重新创建。importReactfrom'react';constMyComponent=()=>{//定义普通变量并赋值constmessage='He
  • 使用Three.js渲染器创建炫酷3D场景 Front_Yue 3D技术实践指南javascriptthree.js3d
    引言在当今数字化的时代，3D图形技术正以其独特的魅力在各个领域掀起波澜。从影视制作到游戏开发，从虚拟现实到网页交互，3D场景以其强烈的视觉冲击力和沉浸式的体验，成为了吸引用户、传达信息的重要手段。而Three.js，作为一款功能强大且广受欢迎的JavaScript3D库，为我们提供了便捷、高效的途径来创建令人炫目的3D场景。本文将深入探讨使用Three.js渲染器创建炫酷3D场景的方方面面，带领读
  • 04.文本标签 龙哥带你学编程 #html前端
    一、文本简介1、页面组成元素1）以淘宝购物官网为例，分析网页：在淘宝购物官网的首页上，我们可以看到它是由超链接，文字，图片等元素构成。2）页面组成元素①一个静态页面绝大部分由以下四种元素组成：文本图片超链接音频和视频②思考：符合以下特点的网页是静态还是动态页面？带有音频和视频带有flash动画带有css动画带有JavaScript特效不是。动态页面和静态页面区别在于：是否用到了后端技术，以及是否与
  • jvm调优总结（从基本概念 到 深度优化） oloz javajvmjdk虚拟机应用服务器
    JVM参数详解：http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html   Java虚拟机中，数据类型可以分为两类：基本类型和引用类型。基本类型的变量保存原始值，即：他代表的值就是数值本身；而引用类型的变量保存引用值。“引用值”代表了某个对象的引用，而不是对象本身，对象本身存放在这个引用值所表示的地址的位置。
  • 【Scala十六】Scala核心十：柯里化函数 bit1129 scala
    本篇文章重点说明什么是函数柯里化，这个语法现象的背后动机是什么，有什么样的应用场景，以及与部分应用函数(Partial Applied Function)之间的联系   1. 什么是柯里化函数 A way to write functions with multiple parameter lists. For instance def f(x: Int)(y: Int) is a
  • HashMap dalan_123 java
    HashMap在java中对很多人来说都是熟的；基于hash表的map接口的非同步实现。允许使用null和null键；同时不能保证元素的顺序；也就是从来都不保证其中的元素的顺序恒久不变。 1、数据结构     在java中，最基本的数据结构无外乎：数组 和 引用（指针），所有的数据结构都可以用这两个来构造，HashMap也不例外，归根到底HashMap就是一个链表散列的数据
  • Java Swing如何实时刷新JTextArea，以显示刚才加append的内容 周凡杨 java更新swingJTextArea
    在代码中执行完textArea.append("message")后，如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新，我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。 问题是这个方法并不能有任何效果，textArea的内容没有任何变化，这或许是swing的一个bug，有一个笨拙的办法可以实现
  • servlet或struts的Action处理ajax请求 g21121 servlet
    其实处理ajax的请求非常简单，直接看代码就行了： //如果用的是struts //HttpServletResponse response = ServletActionContext.getResponse(); // 设置输出为文字流 response.setContentType("text/plain"); // 设置字符集 res
  • FineReport的公式编辑框的语法简介 老A不折腾 finereport公式总结
    FINEREPORT用到公式的地方非常多，单元格（以=开头的便被解析为公式），条件显示，数据字典，报表填报属性值定义，图表标题，轴定义，页眉页脚，甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。 简单的说下自己感觉的公式要注意的几个地方：   1.if语句语法刚接触感觉比较奇怪，if(条件式子,值1,值2)，if可以嵌套，if(条件式子1，值1，if(条件式子2，值2，值3)
  • linux mysql 数据库乱码的解决办法 墙头上一根草 linuxmysql数据库乱码
    linux 上mysql数据库区分大小写的配置 lower_case_table_names=1 1-不区分大小写 0-区分大小写   修改/etc/my.cnf 具体的修改内容如下:   [client] default-character-set=utf8   [mysqld] datadir=/var/lib/mysql socket=/va
  • 我的spring学习笔记6-ApplicationContext实例化的参数兼容思想 aijuans Spring 3
    ApplicationContext能读取多个Bean定义文件，方法是： ApplicationContext appContext = new ClassPathXmlApplicationContext（ new String[]｛“bean-config1.xml”，“bean-config2.xml”，“bean-config3.xml”，“bean-config4.xml
  • mysql 基准测试之sysbench annan211 基准测试mysql基准测试MySQL测试sysbench
    1 执行如下命令，安装sysbench-0.5： tar xzvf sysbench-0.5.tar.gz  cd sysbench-0.5  chmod +x autogen.sh  ./autogen.sh  ./configure --with-mysql --with-mysql-includes=/usr/local/mysql
  • sql的复杂查询使用案列与技巧 百合不是茶 oraclesql函数数据分页合并查询
      本片博客使用的数据库表是oracle中的scott用户表;          -------------------  自然连接查询           查询 smith 的上司(两种方法) &
  • 深入学习Thread类 bijian1013 javathread多线程java多线程
    一．             线程的名字 下面来看一下Thread类的name属性，它的类型是String。它其实就是线程的名字。在Thread类中，有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。 同时，Thr
  • JSON串转换成Map以及如何转换到对应的数据类型 bijian1013 javafastjsonnet.sf.json
            在实际开发中，难免会碰到JSON串转换成Map的情况，下面来看看这方面的实例。另外，由于fastjson只支持JDK1.5及以上版本，因此在JDK1.4的项目中可以采用net.sf.json来处理。 一.fastjson实例 JsonUtil.java package com.study; impor
  • 【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架 bit1129 spring
    HttpInvoker是Spring原生的RPC调用框架，HttpInvoker同Burlap和Hessian一样，提供了一致的服务Exporter以及客户端的服务代理工厂Bean，这篇文章主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成   在 【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中
  • 【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析 bit1129 Mahout
    #!/bin/bash # # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreements. See the NOTICE file distributed with # this work for additional information re
  • nginx三种获取用户真实ip的方法 ronin47
    随着nginx的迅速崛起，越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速，但是随之也遇到一个问题：nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>，如果是后端真实服务器是nginx，那么继续往下看。 实例环境： 用户IP 120.22.11.11
  • java-判断二叉树是不是平衡 bylijinnan java
    参考了 http://zhedahht.blog.163.com/blog/static/25411174201142733927831/ 但是用java来实现有一个问题。 由于Java无法像C那样“传递参数的地址，函数返回时能得到参数的值”，唯有新建一个辅助类：AuxClass import ljn.help.*; public class BalancedBTree {
  • BeanUtils.copyProperties VS PropertyUtils.copyProperties 诸葛不亮 PropertyUtilsBeanUtils
     BeanUtils.copyProperties VS  PropertyUtils.copyProperties  作为两个bean属性copy的工具类，他们被广泛使用，同时也很容易误用，给人造成困然；比如：昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时，没有考虑到会将null转换为0，而后面的业
  • [金融与信息安全]最简单的数据结构最安全 comsci 数据结构
          现在最流行的数据库的数据存储文件都具有复杂的文件头格式，用操作系统的记事本软件是无法正常浏览的，这样的情况会有什么问题呢？        从信息安全的角度来看，如果我们数据库系统仅仅把这种格式的数据文件做异地备份，如果相同版本的所有数据库管理系统都同时被攻击，那么
  • vi区段删除 Cwind linuxvi区段删除
    区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。   vi概述    引文中并未将末行模式单独列为一种模式。单不单列并不重要，能区分命令模式与末行模式即可。   vi区段删除步骤： 1. 在末行模式下使用:set nu显示行号 非必须，随光标移动vi右下角也会显示行号，能够正确找到并记录删除开始行
  • 清除tomcat缓存的方法总结 dashuaifu tomcat缓存
    用tomcat容器，大家可能会发现这样的问题，修改jsp文件后，但用IE打开 依然是以前的Jsp的页面。 出现这种现象的原因主要是tomcat缓存的原因。 解决办法如下: 在jsp文件头加上 <meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu
  • 不要盲目的在项目中使用LESS CSS dcj3sjt126com Webless
    　如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》 　　不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。 　　比如它的引用功能 ? .rounded_corners{     
  • [入门]更上一层楼 dcj3sjt126com PHPyii2
    更上一层楼 通篇阅读完整个“入门”部分，你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能，例如通过 HTML 表单从用户那获取数据，从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。 本章将介绍一些有助于更好使用 Yii 的资源：
  • Apache HttpClient使用详解 eksliang httpclienthttp协议
    Http协议的重要性相信不用我多说了，HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性（具体区别，日后我们再讨论），它不仅是客户端发送Http请求变得容易，而且也方便了开发人员测试接口（基于Http协议的），即提高了开发的效率，也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容，掌握HttpClient后，相信对于Http协议的了解会
  • zxing二维码扫描功能 gundumw100 androidzxing
    经常要用到二维码扫描功能 现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app.Activity; import an
  • 纯HTML+CSS带说明的黄色导航菜单 ini htmlWebhtml5csshovertree
    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航   在线体验效果：http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果：   <!DOCTYPE html > <html > <head> <title>HoverTree
  • fastjson初始化对性能的影响 kane_xie fastjson序列化
    之前在项目中序列化是用thrift，性能一般，而且需要用编译器生成新的类，在序列化和反序列化的时候感觉很繁琐，因此想转到json阵营。对比了jackson，gson等框架之后，决定用fastjson，为什么呢，因为看名字感觉很快。。。   网上的说法：   fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器，来自阿里巴巴的工程师开发。
  • 基于Mybatis封装的增删改查实现通用自动化sql mengqingyu DAO
    1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml，有效的提高开发速度。 2.支持自定义注解包括主键生成、列重复验证、列名、表名等 3.支持批量插入、批量更新、批量删除 <bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic
  • js控制input输入框的方法封装(数字，中文，字母，浮点数等) qifeifei javascript js
    在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。 /** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/     funct
  • java 计时器应用 tangqi609567707 javatimer
    mport java.util.TimerTask;   import java.util.Calendar;   public class MyTask extends TimerTask {        private static final int
  • erlang输出调用栈信息 wudixiaotie erlang
    在erlang otp的开发中，如果调用第三方的应用，会有有些错误会不打印栈信息，因为有可能第三方应用会catch然后输出自己的错误信息，所以对排查bug有很大的阻碍，这样就要求我们自己打印调用的栈信息。用这个函数：erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。 也可以用这个函数：erlang:get_s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他