JavaScript基础 – HTML DOM元素

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

1.查找 HTML 元素

(1)通过 id 查找 HTML 元素

document.getElementById(“id”);

(2)通过标签名查找 HTML 元素

document.getElementsByTagName(“p”);  注意这里是Elements,跟id不同

(3)通过类名查找 HTML 元素

document.getElementByClassName(“class”);

注意:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

<div class="c" id="id1">
	<p>这是第一段内容</p>
	<p>这是第二段内容</p>
</div>
		
<script type="text/javascript">
//通过ID查找元素
var x = document.getElementById("id1");
x.style.color = "blue";
//通过class查找元素,注意得到的是一个数组,即使只找到一个元素也是数组
var y = document.getElementsByClassName("c");
var z = y[0].getElementsByTagName("p");	//通过标签名查找元素,得到的也是个数组
z[0].style.color = "red";
</script>

2.改变 HTML 输出流

使用 document.write() 直接向 HTML 输出流写内容

3.改变 HTML 内容

最简单的办法使用 innerHTML 属性。

<div class="c" id="id1">
	<p>这是第一段内容</p>
	<p>这是第二段内容</p>
</div>
		
<script type="text/javascript">
var x = document.getElementById("id1");
x.innerHTML = "<p>更换新内容</p>";
</script>

4.改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value
<img id="image" src="abc.jpg">
		
<script type="text/javascript">
var x = document.getElementById("image");
x.src = "123.jpg";
</script>

5.改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

相关的style属性可以参考 http://www.w3school.com.cn/jsref/dom_obj_style.asp

6.HTML 事件属性

<button onclick="displayDate()">点击这里</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

7.使用 HTML DOM 来分配事件

<button id="myBtn">点击这里</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

8.onload 和 onunload事件

<body onload="test()">

<script>
function test(){
alert("测试");
}
</script>
</body>

onunload貌似不起作用,可能跟浏览器兼容问题有关

9.onchange 事件

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>

</body>
</html>

10.onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

11.onmousedown、onmouseup 以及 onclick 事件

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

</body>
</html>

12.onfocus

13.onmouseover 和 onmouseout

<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">
请把鼠标移到这段文本上
</h1>

 

JavaScript基础 – 异常处理try catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

与PHP类似

try
{
	aaaa("12243");
}catch(err){
	document.write(err.message);	//输出 aaaa is not defined
}

可以使用throw抛出异常

try
{
	var a = 10;
	if(a<100) throw "var erro";
}catch(err){
	document.write(err);	//输出 var erro
}

 

JavaScript基础 – 流程控制if switch

一、if语句

if 语句 – 只有当指定条件为 true 时,使用该语句来执行代码

if…else 语句 – 当条件为 true 时执行代码,当条件为 false 时执行其他代码

if…else if….else 语句 – 使用该语句来选择多个代码块之一来执行

特别注意:else if 之间要空开,这点与PHP不同。

二、switch语句

switch 语句 – 使用该语句来选择多个代码块之一来执行

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

用法与PHP中的一致。

三、for循环

1.for循环

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }

用法与PHP一致

2.for/in循环

遍历数组或对象的属性

var person={fname:"John",lname:"Doe",age:25};
var txt = new String();
for (x in person)
{
txt=txt + person[x];
}
document.write(txt);

3.while 和 do..while循环

与PHP类似

4.break 和 continue

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

 

JavaScript基础 – 函数和运算符

一、函数

使用function定义函数,函数参数不能设置默认值。

function myfun(var1,var2){
	$str = "My name is "+var1+", my age is "+var2;
	console.log($str);
}
myfun("zhangsan",12);

可以使用return 返回值

function myfun(var1,var2){
	var str = "My name is "+var1+", my age is "+var2;
	return str;
}
var result = myfun("zhangsan",12);
alert(result);

提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

二、运算符

1.算术运算符

+ 加  – 减  * 乘  / 除  % 求余数  ++ 递增  — 递减

2.赋值运算符

= += -= *= /= %=

3.字符串运算符

+ 运算符是将两个字符串连接起来。

var str1 = "China";
var str2 = "BeiJing";
var str = str1+str2;
document.write(str);  //输出ChinaBeiJing

4.对字符串和数字进行加法运算

x=5+5;  结果是10

x=5+”5″;  结果是55

字符串和数字相加,会直接当做字符串连接起来。

如果向让5+”5″的结果是10,需要对字符串进行转数字。

字符串转数字有两种方法:

(1)使用转换函数:parseInt()转为整数  parseFloat()转为浮点数

(2)强制类型转换:Number()转为数字(可以是整数或浮点数),还有其他两种强制类型转换 Boolean()转为boolean值  String()转为字符串。

5.比较运算符

== 等于   === 全等于(值和类型都相等)  != 不等于  > 大于  < 小于  >= 大于等于  <= 小于等于

6.逻辑运算符

&& 逻辑与   || 逻辑或  ! 逻辑非

7.条件运算符

variablename=(condition)?value1:value2

var a = 5;
var b = 8;
var d = a>b ? "a大于b" : "a小于b";
document.write(d);

类似于PHP的三元运算符。

 

JavaScript基础 – 变量和数据类型

一、变量

1.声明变量

变量必须以字母开头,也能以 $ 或 _ 符号开头;

变量名称对大小写敏感;

使用 var 关键字声明变量;

可以在一条语句中声明多个变量;

var a=1,b=2,c=3;  //可以一次声明多个变量

未使用值来声明的变量,值是 undefined;

如果重新声明 javascript 变量,该变量的值不会丢失;

var a = 12;
var a;
alert(a);  //值仍是12

2.全局变量和局部变量

函数内部声明的变量(使用var)是局部变量,只在函数内有效

在函数外部声明的变量是全局变量,所有脚本和函数都能访问它。(与php不同)

注意:如果函数内的变量与全局变量重名,函数内使用全局变量需要用 this

var a = 100;
function fun(){
	var a = 200;
	alert(this.a); //输出 100
}
fun();

二、数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

1.字符串

字符串可以是引号中的任意文本,可以用单引号或双引号

var a = "aaaa";
var b = 'bbbbb';
var c = "this is 'c'";
var d = 'this is "d"';
var e = "this is \"e\"";
var f = 'this is \'f\'';

双引号与单引号的区别:

(1)只使用字符的字符串,单引号和双引号没有区别

(2)在单引号包括的字符串中可以直接用双引号,在双引号包括的字符串中可以直接用单引号

(3)如果在双引号包括的字符串中用双引号,需要用反斜杠转义,注意是”\”   ;同样在单引号包括的字符串中用单引号,也需要转义

(4)如果要用反斜杠,则输入‘\\’

2.数字

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

var a = 3.14;
var b = 5;

3.布尔

布尔(逻辑)只能有两个值:true 或 false。

var a = true;
var b = false;

4.数组

数组有两种定义方式:[]、Array()

//使用[]定义数组
var arr1 = ["car","house","money"];
//使用Array,注意区分大小写
var arr2 = new Array();
arr2[0] = "car";
arr2[1] = "house";
arr2[2] = "money";	//特别注意不能用arr2[]定义,它不会自动分配下标
var arr3 = new Array("car","house","money");
//获取某个值用arr[1],下标从0开始
alert(arr3[1]);

可以定义关联数组,由于js的一切都是对象,因此关联数组本质上是给数组增加了属性,因此使用关联数组并不是一个好习惯,我们可以使用对象,其实对象也就是关联数组。

var arr = new Array();
arr["a"] = "aaaa";
arr["b"] = "bbbb";

注意:常规数组是可以通过数组的length属性获得数组长度,比如 arr.length。但是关联数组无法使用length获取长度。

5.对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

var person={firstname:"Bill", lastname:"Gates", id:5566};
alert(person.lastname);
alert(person['lastname']);

注意:虽然关联数组和对象非常相似,但是关联数组不能使用 person.lastname 这种方式获取其值。

也可以使用下面的方式定义

var student = new Object();
student.name = "zhangsan";
student.age = 12;
student.sex = "boy";
alert(student.name);

6.Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

var a = 12;
a = null;

7.声明变量类型

当您声明新变量时,可以使用关键词 “new” 来声明其类型:

var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;

 

 

 

 

select2组件-一款功能强大的jquery表单处理插件

select2是一款很好用的jquery插件。功能貌似很多很强大。这里我只简单介绍我使用它最基础的功能-在select标签中搜索options。

有这样一个需求:在<select>标签中有非常多的<option>,如果我们想找到自己需要的某个选项,是非常耗时的。select2插件提供一个简单的可以搜索的功能,如下图

这样我们直接搜索自己的选项,就会非常方便。

下面介绍下具体如何引入select2插件,以及启用:

1.在文件中引入select2的js和css资源

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

上面是他的CDN远程库,也可以下载到本地引用,可以点击这里下载 SELECT2资源下载

2.启用它很简单

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

这样就可以了。

当然这是select2插件最简单的应用实例,更多方法可以参考select2官方说明

select2官网 https://select2.org/

其他作者介绍 http://www.cnblogs.com/wuhuacong/p/4761637.html

js实现点击加减数量

一般在商城网站,下单商品时,商品数量可以点击加减符号对数量进行增加和减少。这个用js可以实现,下面介绍下:

代码如下

<div class="item">
	购买数量:
	<div class="buynum">
		<a href="javascript:void(0);" class="jx">-</a>
		<input id="age" name="buynum" min="1" max="10" size="3" step="1" value="1" type="text">
		<a href="javascript:void(0);" class="zd">+</a>
	</div>
</div>

<script src="js/jquery.js"></script>
<script>
	$(".zd").click(function(){
		var buynum = $(this).parent().find('input');
		var newnum = parseInt(buynum.val())+1;
		buynum.val(newnum);
	});
	$(".jx").click(function(){
		var buynum = $(this).parent().find('input');
		var newnum = parseInt(buynum.val())-1;
		if(newnum < 1){
			newnum = 1;
		}
		buynum.val(newnum);
	});
</script>

注意:parseInt()函数是将字符串转为整型数字。

 

js实现省市区三级联动

有时我们在制作表单时会需要客户填写地址,比如淘宝的收货地址,这里一般会有省市区的选择,并且是在某个省时市的选项会跟着变化,也就是三级联动。这个用js可以实现,不过自己写起来比较麻烦,下面介绍下使用distpicker如何制作三级联动:

1.页面引用 distpicker.js 和 jquery.js

<script src="js/jquery.js"></script>
<script src="js/distpicker.js"></script>

2.在需要显示的地方添加以下代码

<div data-toggle="distpicker">
  <select name="addr_sheng" data-province="-- 选择省 --"></select>
  <select name="addr_shi" data-city="-- 选择市 --"></select>
  <select name="addr_qu" data-district="-- 选择区 --"></select>
</div>

里面的name值可以根据需要修改。

3.制作完成后如图

上面的js文件下载:js下载

 

CSS强制不换行、超出部分显示省略号

最近在制作列表使用<li>标签,默认li标签内的内容是自动换行的。由于样式需要,要求li标签的内容不换行。

默认自动换行状态如图:

这样是很不美观的,我们需要给li标签做以下css修饰:

li {
  overflow: hidden; 
  white-space: nowrap;
  text-overflow:ellipsis;
}

注意:overflow是隐藏超出内容,white-space是强制不换行,在一行内显示,text-overflow是超出部分显示省略号。

修改后的样式如图

 

HTML5中viewport概念:device-width与width区别与联系

一直以来对HTML5页面在手机端的显示有些疑惑,今天刚好看到了CSS中的媒体查询方面的介绍。随便就了解到了 viewport(视口)这个概念。

在HTML5页面头部,我们一般会看到下面的这段声明代码:

<meta name="viewport" content="width=device-width, initial-scale=1">

以上代码也是主要为了网页能在手机端能很好的适应。现在我们就了解下这句话如何作用网页的,以及这里的 viewport 是什么含义?

在了解这些之前,我们首先看下 CSS pixels 和 device pixels 的概念:

CSS pixels可以理解为css像素,是浏览器使用的抽象单位,主要用来在网页上绘制内容。也可以说css px是专门为web开发者提出的一个抽象概念,也只跟我们平时写的css样式有关,与分辨率(比如720px*1280px)里的px没关系。

device pixels可以理解为是设备像素,官方的解释是:显示屏幕的最小物理单位,每个dp包含自己的颜色、高宽等。

在PC端,浏览器缩放比例为100%,也即默认情况下,1 CSS pixel = 1 device pixel 。

但是这手机端,情况却就复杂的多!

Viewport起源于苹果,但现在已经被大多数浏览器支持。关于viewport有两个概念visual viewport跟layout viewport。这里visual viewport也就是视觉上的窗口,可以理解为设备自己的宽度。这时,如果你有一个长960的页面,有一个元素是20%(实际解析出来就是192px)。但如果我用宽为320px的屏幕打开呢,这个元素就成了64px,但是这个时候我设置的字体大小是12px,在320px的屏幕上就只能显示64/12个字了~

鉴于这个问题,苹果找到一种解决方法,在移动版的safari中定义了viewport meta标签,它的作用就是创建一个虚拟的窗口(viewport),这个虚拟的窗口就是layout viewport分辨率接近桌面显示器,apple将其定位为980px。在手机上,可以通过document.documentElement.clientWidth来获取。

其他浏览器厂商也有不同的解决办法,例如UCweb是使用的中间技术。

另外据说,不同浏览器厂商对于layout viewport的大小都有自己的定义。但是,我用手上不多的几个手机(小米2s、SONY、金立、ipad)测试的结果,都是980px。其中在小米2s上测试了小米自带浏览器、QQ浏览器、UC浏览器、谷歌浏览器,还有opera浏览器,结果都一样;其他的手机上面不管装了什么浏览器,都测试了,结果都是980px。但是这个值对于我们web开发来说,好像也没有什么用处。

因为大多数情况下,<meta name=”viewport” content=”width=device-width” /> 这个标签对我们来说是最给力的,可以让我们的页面里的图文显示的是正常的,很大程度上提高了页面的可读性。而这一meta标签的功能就是设置layout viewport为device-width的宽度。但是device-width具体是什么呢?

第一代iphone的时候,分辨率为320*480,屏幕尺寸为3.5寸(注意,这个3.5寸说的是屏幕的对角线宽),这时候device-width就是320px,也是手机的分辨率宽,此时device-width就是设备宽。但第二代的iphone分辨率提高为了480*960,屏幕尺寸为依然为3.5寸,如果device-width还是设备宽,那么同样是320px的页面放480*960的手机屏上,图文就会变得比较小,又会影响其可读性。因此iphone的device-width一直维持在320px,ipad一直维持在1024px。这个时候,device-width就不是设备宽了(也就不是分辨率的宽了),是一个中间层。Android采用的也是这一概念,其device-width值以360居多,但也不乏有像540px和600px这样的奇葩。在设置了<meta />标签以后,device-width值可以用window.innerWidth来获取device-width值。

这是iphone设备的viewport尺寸

  • iPhone4~iPhone5S: 320*480px
  • iPhone6~iPhone6S: 375*627px
  • iPhone6 Plus~iPhone6S Plus: 414*736px

综上所述,一般我们在制作手机端的页面时,应该在页面头部声明那句代码,另外要注意设备的 viewport ,在制作页面时要注意控制网页的宽度问题。