python基础学javascript_python学习笔记-javascript

一、javascript基础

引入方式

{#1 直接编写#}{#2 导入文件#}

变量

x=5

y=6

z=x+y

变量是弱类型的(很随便)；

声明变量时不用声明变量类型. 全都使用var关键字;

一行可以声明多个变量.并且可以是不同类型.

(了解) 声明变量时 可以不用var. 如果不用var 那么它是全局变量.

变量命名,首字符只能是字母,下划线,$美元符 三选一，且区分大小写，x与X是两个变量

规范

每行结束可以不加分号. 没有分号会以换行符作为每行的结束

注释 支持多行注释和单行注释. /* */  //

使用{}来封装代码块

常量和标识符

常量 ：直接在程序中出现的数据值

标识符：

由不以数字开头的字母、数字、下划线(_)、美元符号($)组成

常用于表示函数、变量等的名称

例如：_abc,$abc,abc,abc123是标识符，而1abc不是

JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符

数据类型

数字类型

字符串

布尔值

Null & Undefined

类型转换

JavaScript属于松散类型的程序语言

变量在声明的时候并不需要指定数据类型

变量只有在赋值的时候才会确定数据类型

表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串

数字 + 布尔值：true转换为1，false转换为0

字符串 + 布尔值：布尔值转换为字符串true或false

强制类型转化函数

函数parseInt： 强制转换成整数 例如parseInt("6.12")=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2")=1

函数parseFloat： 强制转换成浮点数 parseFloat("6.12")=6.12

函数eval： 将字符串强制转换为表达式并返回结果 eval("1+1")=2 ; eval("1<2")=true

类型查询函数(typeof)

console.log(typeof 123); //number

console.log(typeof "hello"); //string

console.log(typeof null); //object

console.log(typeof undefined); //undefined

二、运算符

算术运算符

加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样 例如：9/2=4.5，4*5=20，9%2=1

-除了可以表示减号还可以表示负号 例如：x=-y

+除了可以表示加法运算还可以用于字符串的连接 例如："abc"+"def"="abcdef"

递增(＋＋) 、递减(－－)

假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1

i++相当于i=i+1，i--相当于i=i-1

递增和递减运算符可以放在变量前也可以放在变量后：--i

var i=10;

i++;

console.log(i++); //11

console.log(++i); //13

console.log(i--); //13

console.log(--i); //11

一元加减法

var a=1;

var b=1;

a=-a; //a=-1

var c="10";

alert(typeof (c));//string

c=+c; //类型转换

alert(typeof (c));//number

var d="yuan";

d=+d;

alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据

alert(typeof(d));//Number

逻辑运算符

等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( =) 、小于等于(<=)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果某个运算数是 null，返回 null。

如果某个运算数是 NaN，返回 NaN。

如果某个运算数是 undefined，返回undefined。

逻辑 OR 运算符(||)与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值

等性运算符

执行类型转换的规则如下：

如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。

如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。

如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。

如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。

在比较时，该运算符还遵守下列规则：

值 null 和 undefined 相等。

在检查相等性时，不能把 null 和 undefined 转换成其他值。

如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。

如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。

关系运算符

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.

比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

事件传播

Title

width: 100px;

height: 100px;

background-color: fuchsia;

}

.outer{

width:300px;

height:300px;

background-color: indianred;

}

var ele=document.getElementsByClassName("inner")[0];

ele.οnclick=function(e){

alert("i am inner!");

e.stopPropagation();

}

八、节点的增删改查

增：

createElement(name)创建元素

appendChild();将元素添加删

删：

获得要删除的元素

获得它的父元素

使用removeChild()方法删除

改：

第一种方式:

使用上面增和删结合完成修改

第二中方式:

使用setAttribute();方法修改属性

使用innerHTML属性修改元素的内容

查：

例子：

Title

width:100px;

height:100px;

}

.div1{

background-color: indianred;

}

.div2{

background-color: chartreuse;

}

.div3{

background-color: aqua;

}

.div4{

background-color: yellow;

}

addhello div1

delhello div2

change

hello div3

hello div3

hello div4

ele.innerHTML="hello p";//ele.innerHTML=

hello p

innerHTML增加标签,innerText只能当成文本添加

ele.style.color="blue";

ele.style.fontSize="20px";//font-size这里使用时第二个字母大写

var father=document.getElementsByClassName("div1")[0];

father.appendChild(ele)

}

function del(){var father=document.getElementsByClassName("div1")[0];var son=father.getElementsByTagName("p")[0];

father.removeChild(son);

}

function change(){var img=document.createElement("img");

img.src="meinv.jpg";//img.setAttribute("sre","meinv.jpg") 第二种写法

var ele=document.getElementsByTagName("p")[0];var father=document.getElementsByClassName("div3")[0];

father.replaceChild(img,ele);

}//js的class属性

var ele=document.getElementsByClassName("div4")[0];

console.log(ele.className);

console.log(ele.classList[0]);

console.log(ele.classList[1]);

ele.classList.add("hide");

console.log(ele.className);

例子2：search

var ele=document.getElementById("search");

function f1(){if (ele.value=="请输入用户名"){

ele.value="";

}

}

function f2(){if (!ele.value.trim()){

ele.value="请输入用户名";

}

}

View Code

例子3：二级联动

请选择省份

请选择城市

ele.innerHTML=i;

pro_ele.appendChild(ele);

}

pro_ele.οnchange=function(){

console.log(this.selectedIndex);

console.log(this.options[this.selectedIndex]);var citys=data[this.options[this.selectedIndex].innerHTML];

city_ele.options.length=1;//初始化，清楚之前的option，保留一个

for (var i=0;i

ele.innerHTML=citys[i];

city_ele.appendChild(ele);

}

}

View Code

例子4：正反选

全选

取消

反选

---

	111	111	111
	222	222	222
	333	333	333

input.checked=true;

}

}

function cancel(){var inputs=document.getElementsByTagName("input");for (var i=0;i

input.checked=false;

}

}

function reverse() {var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++) {var input =inputs[i];if (input.checked){

input.checked=false;

}else{

input.checked=true;

}

}

}

View Code

例子5：模态对话框

Title

height: 1800px;

background-color: #5cb85c;

}

.shade{

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

background-color:whitesmoke;

opacity:0.8;

}

.model{

width:200px;

height:200px;

background-color:darkslateblue ;

position:absolute;

top:50%;

left:50%;

margin-top: -100px;

margin-left:-100px;

}

.hide{

display:none;

}

showhellohellohellohello

show del

ele_model.classList.remove("hide");

ele_shade.classList.remove("hide");

}

function cancel(){var ele_shade=document.getElementsByClassName("shade")[0];var ele_model=document.getElementsByClassName("model")[0];

ele_model.classList.add("hide");

ele_shade.classList.add("hide");

}

View Code

补充：js的面试题

//题目一：

varv=123;functionfoo(){varv=456;functioninner(){

console.log(v)

}returninner

}

result=foo();

console.log(result());//结果为：456

//undefine

//函数的作用域在定义的时候就确定了。

//题目二

Name='root';

Age=18;functionFoo(name,age){this.Name=name;this.Age=age;this.Func=function(){

console.log(this.Name,this.Age);

(function(){

console.log(this.Name,this.Age);

})();

}

}

obj=newFoo("jobs",666);

obj.Func();//结果为："jobs" 666

//"root" 18

//1、js面向对象

functionFunc(name,age){this.Name=name;this.Age=age;

}

obj=newFunc("root",18);//一般规范函数时名字是小写，类的首字母是大写，通过new实例化对象

//2、this关键字

//每个函数中都有this

//函数调用时，this=Window

//类new时，this=obj

functionfunc(){//当做函数调用函数时，this=Window

console.log(this)

}

func();functionFunc(){//当做类调用时，this=obj

console.log(this)

}

obj=newFunc();//3、js中无字典，只有对象

Name='job';

obj={

Name:'root',

Age:18,

Func:function(){//this=obj

console.log(this.Name);//root

functioninner(){//this=window

console.log(this.Name);//job

}

inner();

}

};//相当于new了个对象obj

obj.Func()

View Code