javascript

<script type="text/javascript">

window.alert("");
</script>

<script type="text/javascript" src="myjs.js"></script>

有浏览器，就有js
js跨平台 windows linux unix mac

document.write("");
window.alert("<span style=''></span>");

document是一个对象，对象有属性和方法，加括号就是方法，不加括号就是属性。

<img src="a.jpg" onclick="javascript:window.alert('')" /> //不需要;号

js用处：表单验证、横幅广告（动画效果）、tab标签（鼠标键盘动作）等

<script language="javascript">
var num1=1;
var num2=333;
var res=num1+num2;
window.alert('结果是：'+res); 【变量和字符串要分开】 js 用 + 连接 php 用 . 连接
window.alert(typeof num1);
alert(res); //可省略 window

变量是内存中来存储和运行的。
var name,age; //同时定义多个变量
变量区分大小写

NaN = not a number
Infinity = 无穷大
var s="abc";
alert(parseInt(s)); //NaN //parseInt() 把字符串转成int

var r=7/0; alert(r); //Infinity

isNaN(判断是不是一个数) isIninity
var s="000.000123";
if(isNaN(s)){
alert("不是数");
}else{
alert("是数");
}

基本数据类型：字符型(String)、数值型(Number)、布尔型(Boolean)、Undefined(未定义型)、Null(空型)
复合数据类型：数组(Array)、对象(Object)、函数(Function)

var num1=window.prompt("请输入一个数");


“+” +=如果它的前后有一个是字符串，则“+” +=的功能就是“连接”字符串功能；
“+” +=如果它的前后都是数值时，则“+” +=的功能就是“加法”运算的功能；
Var a = 100;
Var b = “100”;
Var c = a + b; //结果是：“100100”

Var d = 200;
Var result = a + d; //结果为：300

类型转换
var a="100";
a= Number(a); //测试用而已
a=parseInt(a);

parseInt(str)：在字符串中，从左到右提取整数，如遇到非数字数据，则停止提取；
例如：将一个<div>的宽度增加200px
var width = “100px;”
width = parseInt(width); //结果为100
width += 200; // 300
width = width + “px”; //结果为 “300px”
parseFloat(str)：在字符串中，从左到右提取浮点数(小数)，如遇到非数字数据，则停止提取；
parseFloat(“.3px”); // 0.3
paseFloat(“abc200”); // NaN
parseFloat(“123.09px”); // 123.09
注意：如果要提取的字符串的第一个字符是非数字的，则直接返回NaN。

var a=i++ 先赋值给a，i再加1

表格隔行变色 【项目应该不是这样】
var str = "<table width='500' border='1' style='border-collapse:collapse;'>";
str += "<tr><th>编号</th><th>新闻标题</th><th>发布时间</th></tr>";
for(var i=1;i<100;i++)
{
str += "<tr";
//如果是偶数行，则输出bgcolor属性
if(i%2==0) //【这个是重点】
{
str += " bgcolor='#cccccc'";
}
str += ">";
str += "<td>"+i+"</td><td>&nbsp;</td><td>&nbsp;</td>";
str += "</tr>";
}
str += "</table>";

//（3）输出结果
document.write(str);

最大值
var a=1;b=2;
var max=a>b?a:b;

= 赋值
== 两个数值相等，返回true
=== 值和类型同时相等

&& || ！与或非
<a href="javascript:void(0)">首页</a> 比#好，链接不会变色 <a href="#"></a>

var a="abc";
if(a){ //a 自动转换为true or false

}

switch(变量、表达式){
case 1（变量、表达式的值）:
xxx;
break;
}

while(条件){
循环体
i++;【变量更新！】
}

if和switch的主要区别：if的条件应该是一个范围，switch的条件应该是一个值。

//js的数组可动态增长
var a=[1,2];
a[2]=3;
alert(a.length);

数组的值可以是任意数据类型
delete arr[0]; //删除下标为0的数组元素
注意：用delete删除数组元素时，只是将内容清除，但所占空间还存在。

Var arr = new Array();
arr[0] = 10;
arr[1] = [10,20,40]
arr[2] = new Array(); //JS从严格意义上来说只支持一维数组，但它可实现数组元素是数组。不具备完整二维数组的特性，因此必须先创建一个空的数组，然后再添加元素
arr[2][0] = “abc”; //如果没有上边一行，在PHP中是支持的

//这样简单点
var arr = [
[1,2,3,4,5],
[10,20,30,40,50],
[100,200,300]
];

for in 找出数组中有效数据，无效为undefine
Var arr = [45,44,,,,,,32,,,,,,,,,,,,,,,21,333,,,,,,,,,,,432];
//使用for in遍历数组中有效个数
for(var i in arr)
{
document.write(arr[i]+" ");
}

break只能退出当前循环，不会多层循环。但在PHP中，break可以退出多层循环。
continue语句，结束本次循环，去开始下一次循环。

举例：循环1－100间所有的数，但大于50的就不再输出了。
for(var i=1;i<100;i++)
{
if(i>50)
{
break; //退出循环，直接跳转到for的结束大括号之后
}
document.write(i+”<br>”);
}

Var arr = [45,44,,,,,,32,,,,,,,,,,,,,,,21,333,,,,,,,,,,,432];
for(var j=0;j<arr.length;j++){
if(arr[j]== undefined){
continue; //继续，跳过这个 undefined 跳到for循环开始处，并将i+1,继续循环
}
}
document.write(arr[i]+" ");

求任意两个数值的最大值
//定义函数
function getMax(a,b)
{
var max = a>b ? a : b;
document.write(“最大值是：”+max);
}
//调用函数，函数一次定义可以多次调用
getMax(10,20);

【对任何对象的操作，以及数据库操作，都是“增删改查”。】
数组也是对象


匿名函数，函数没有函数名
（1）将一个匿名函数定义赋给一个变量
var a = function(a){ return a*a*a; }
document.write( a(10)) ; //调用函数

（2）将一个匿名函数的定义赋给一个数组元素
var arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = function(a){ return a*a*a; } //将函数的定义赋给数组元素，那么该元素就是一个函数了
//调用函数
var result = arr[2];
result(10);

全局变量 版本太多。。。
注意：任何地方省略var关键字，定义的变量都是“全局变量”，因此，一般情况下，不要省略var关键字。
【跟php不一样 】
全局变量：全局变量一般是在函数外定义的。全局变量可以在网页的【任何地方】使用(函数内和函数外)
局部变量：局部变量一般是在函数内定义的。局部变量只能在函数内来使用。函数执行完毕，局部就消失。


基本数据类型：基本数据类型是将变量名和变量值存储在“快速内存”“栈内存”中。 栈：小而快
修改一个变量的值，另一个变量的值不会发生改变。

复合数据类型：复合数据类型的数据存储分两个部分，一是变量名和数据的地址，
存在“快速内存”中；二是将实际的数据存在“慢速内存”“堆内存”中。堆：大而慢
(数组、对象、函数) 将一个引用的变量赋给另一个变量，它赋的是数据地址，而不是真正的数据。
【数据共享】

========================js 对象=======================
js本身是一种弱类型语言，本身是没有类class和对象这个概念
，但是我可以通过js代码去模拟实现这个过程，所以我们说js也可以说是面向对象的。

（1）使用new关键字和Object()构造函数来创建
var obj = new Object(); //创建一个空对象
obj.name = “周更生”; //增加一个属性
obj.school = “北京理工大学”; //增加一个属性
//方法就是函数，方法在定义时不需要加括号，给方法赋的值，一定是一个函数。
obj.showInfo = function(){
var str = obj.name+“毕业于”+obj.school;
document.write( str );
}
//对象的使用
obj.name = “张立峰” //修改内容
obj.edu = “大专”; //增加一个属性
delete obj.school; //删除一个对象的属性
document.write( obj.name ); //输出一个对象的属性值
obj.showInfo( ); //对象方法的调用，加上小括号

（2）使用{ }来创建一个对象
var obj = {
name：“周更生”,
school：“北京理工大学”,
showInfo：getInfo //将一个普通函数传给对象属性，这里千万不要带( )。如果带()，表示将函数的执行结果赋给对象属性，这个执行结果是“基本数据类型”。
}
//定义一个普通函数
function getInfo()
{
var str = obj.name+“的毕业于”+obj.school
document.write( str );
}

//调用对象的方法
obj.showInfo(); //对象方法
getInfo(); //调用普通函数

//（2）将一个普通函数作为数据传给一个变量
var a = getInfo; //直接将函数名赋给一个变量，是将函数的地址传递给了另一个变量
a( ); //调用函数

//（3）将一个普通函数作为数据传给一个数组元素
var arr = new Array();
arr[0] = 100;
arr[1] = getInfo; //将一个函数的地址，传给了数组元素，所以arr[1]就成了函数了
arr[1]( ); //调用函数，相当于 getInfo();
=========================js 对象 结束===================
String对象方法

var str="abcdefg";
var b=str.charAt(3);
document.write(b);

charAt(index)     返回字符
indexOf(char)     返回字符位置    如果未找到，返回-1 
lastIndexOf(char)         //   var filename="xxx.jpg"    找 jpg文件
substr(startIndex[,length])   //截取字符串
substring(startIndex[,lastIndex])   //功能与上类似
split(字符串转数组)           // str.split(",");
toLowerCase() 转小写
toUpperCase() 转大写
localeCompare() 使用本地的排序规则(根据所使用的操作系统，简体中文操作系统)对中文进行排序

str1.localeCompare(str2)

比较的结果：

str1>str2  返回1的值

str1==str2  返回0的值

str1<str2   返回-1的值

 

Array对象
length
join(数组连成字符串)
shift() 删除数组第一个元素，将数组长度减一
pop() 删除数组最后个元素，将数组长度减一
unshift() 在数组的开头增加一个元素，并将数组的长度加一
push()：在数组的结尾增加一个元素，并将数组的长度加一

注意：shift()、pop()、unshift()、push()它们是直接在原数组进行操作，因此不需要再创建变量
说明：delete只能删除数组元素的值，而所占空间还存在；shift()和pop()删除数组元素后，所占空间不存在。

reverse() 反转数组元素的顺序
sort([sortby]) 数组默认按字母排序
//实例：按拼音的先后顺序排列
var arr = ["安庆市","安徽省","河南省","河北省","北京市"];
arr.sort(orderby2);
function orderby2(str1,str2)
{
return str1.localeCompare(str2);
}
document.write(arr);

//数字从小到大排序
function orderby(a,b)
{
return a-b; //对数值大小进行排序
}

当网页<body>加载完成后调用js函数 <body onload="test()">

Date对象

Math对象
Math.abs()，取绝对值
Math.ceil()，向上取整 例如：Math.ceil(4.3) = 5 ，Math.ceil(4.9)=5
Math.floor()，向下取整 例如： Math.floor(4.4)=4，Math.floor(4.9)=4
Math.round()，四舍五入
Math.sqrt()，求平方根
Math.random()，返回0-1之间的随机小数。0<=X<1

var max=100; min=10;
Math.floor(Math.random()*(max-min)+min);


window 是顶级对象 ，可以省略
innerWidth：指当前浏览器窗口的宽度，不含滚动条、菜单栏、地址栏、状态栏等。IE低版本不支持。
IE中要使用document.documentElement.clientWidth来代替；

value innerHTML区别
给表单元素加值 用 value , 其他如div 用 innerHTML

BOM 对象有 window document screen 等
DOM 对象有 <html> 所有元素对象


=====================节点操作==============

nodeName：节点的名称
nodeValue：节点的值
firstChild：第一个子节点（存在兼容性问题）
lastChild：最后一个子节点（存在兼容性问题）
childNodes：子节点列表，是一个数组

访问<html>节点的方法：
document.documentElement
访问<body>节点的方法：
document.body

注意：访问节点的操作，都是以document为起点的。

节点属性的修改
setAttribute(name,value)：给一个节点增加属性，name是属性名，value是属性值
removeAttribute(name)：删除节点的属性
getAttribute(name)：获取一个节点属性的值


【js使用节点，html标签必须无空格】

createElement(tagName)：创建一个指定的标记，如：document.createElement(“img”)，注意：标记不加尖括号
createTextNode(text)：创建一个文本节点。如：document.createTextNode(“年龄”)，注意：这里只能是纯文本
appendChild(node)：将一个节点，追加到某个父节点下。追到父节点的最后。
insertBefore(new,current)：将一个新节点，追加到当前节点之前。Current当前节点，是已经存在的节点。New是新节点，是刚刚创建的。
removeChild(node)：移除一个子节点。

document.body.removeChild(); 父节点删除子节点


节点的访问：firstChild、lastChild、childNodes、parentChild(父子节)
可以使用元素对象的方法进行代替：getElementById()、getElementsByTagName()

第一个单词全小写，后面的单词首字母大写，并且去掉中间的连接线（-）
举例：
background-color 转换后 obj.style.backgroundColor = “#FF0000”
font-size 转换后 obj.style.fontSize = “18px”

day13 5随机星星跳过 后期再玩


======================dom 简单法=====================
【不用 document.body.childNodes[0] 和 setAttribute() 】
【css dom】
var obj = document.getElementById("box");
//给id=box的对象增加样式
obj.style.width = "400px";

<body>
<div id="box">dfdfdf</div>
</body>

【html dom 】
<div id=”box”></div>
var obj = document.getElementById(“box”); //获取对象
var img = document.createElement(“img”); // 创建节点
img.src = “images/img01.jpg”; //使用元素对象的属性
obj.appendChild(img); //将img节点，追加到id=box中去

语法结构：var arrObj = document.getElementsByTagName(“li”)
功能描述：取得标记为<li>的一个数组(标记列表)。
举例：取得一个<ul>标记中的所有的<li>标记
//获取id=ul的对象
var ulObj = document.getElementById("ul");
//取得所有的li对象的一个数组
var arrLi = ulObj.getElementsByTagName("li");
//修改第二个和第四个li的样式
arrLi[1].style = "font-size:24px;color:#ff0000;"; //放两个style
arrLi[3].style.textDecoration = "underline";

========节点操作   html dom /css dom =====

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
 <script type="text/javascript">
function test(){
            var img1=document.createElement("img");   //添加节点
            img1.setAttribute("src","../img/2.jpg");  //设置属性
            document.body.appendChild(img1);          //追加节点
       }
        // html dom
        function test1(){
            var img1=document.createElement("img");
            img1.src="../img/2.jpg";
            var div1=document.getElementById("div1");
            div1.appendChild(img1);
        }
        // css dom
        function test2(){
            var div1=document.getElementById("div1");
            div1.style.border="1px solid #ccc";
            div1.style.width="300px";
            div1.style.height="300px";
            div1.style.backgroundColor="#456aaa";
        }
    </script>
</head>
<body onload="test1()"><div id="div1">123</div>
</body>
</html>

 

innerHTML：指标记对中的HTML文本(含有HTML标记的文本)，一般指双边标记；比如：<h2>二级标题</h2>

overflow:hidden; 超出部分隐藏
overflow:auto; 超出部分加滚动条

元素属性
offsetWidth：指元素的宽度，不含滚动条中的内容；
offsetHeight：指元素的高度，不含滚动条中的内容，【是只读属性；】
scrollWidth：指元素的总宽度，含滚动条中的内容；
scrollHeight：指元素的总高度，含滚动条中的内容；
scrollTop：指内容向上滚动进去的距离，如果没有滚动条，则值为0；
scrollLeft：指内容向左滚动过去的距离，如果没有滚动条，则值为0；

onscroll事件：当内容滚动时，发生的事件。

鼠标事件
onclick单击事件
ondbclick双击事件
onload网页加载完成，一般用于<body>元素
onchange：当内容发生改变时，一般用于选择上传文件
onscroll：当移动滚动条时(只要可能出现滚动都可以)
onmouseover：当鼠标放上时
onmouseout：当鼠标移开时
onsubmit：当单击“提交按钮”时（用于submit按钮）
onreset：当单击“重置按钮”时(用于reset按钮)
onfocus：当文本框获得焦点(鼠标光标在文本框中点击)
onblur：当文本框失去焦点(鼠标光标在文本框之外点击)
onselect：更改下拉列表中的内容时(用于select表单元素)


【第一种简单点】/【第二种可以绑定多个事件，如mouseover mouseout onclick】
（1）每个HTML标记都有事件句柄属性。onClick是HTML标记属性，不分大小写。
例如：<img src=“images/01.jpg” onClick=“init()” />
（2）HTML标记对应的元素对象也具有事件句柄属性，这个属性必须全小写，因JS区分大小写
obj.onclick = init; // init是一个函数的地址，而不能加小括号
function init(){
window.alert(“OK”);
}
注意：（1）元素对象绑定事件的名称必须全小写；（2）元素对象的事件必须调用一个函数，可以是普通函数，也可以是匿名函数。


事件返回值，对有些事件，会影响默认动作的执行。如：onclick和onsubmit

=================== event ======================
DOM中event对象的属性
clientX：获取当前事件距离窗口左边的距离；
clientY：当前事件发生时距离窗口顶端的距离；
pageX：当前事件所在网页中的x坐标
pageY：当前事件所在网页中的y坐标；
screenX：当前事件所在屏幕中的x坐标；
screenY：当前事件所在屏幕中的y坐标；
type：当前事件的类型

event事件 ，firefox 需要 event参数，ie不需要，兼容性问题

IE模型中，事件对象，采用如下语法：
window.event

在W3C模型中，采用如下语法：
dom对象.事件 = function(event) {
event.
}


=================== event 结束 ==================

obj.className = “box”;

表单提交的三种方法
submit按钮结合onsubmit事件，实现表单提交(最常用)

表单验证
一、常用的属性
Name：元素的名称
Value：元素的值
Size：文本框的宽度
Maxlength：最多存放多少个字符
Readonly：只读
Disabled：禁用
……
二、常用的事件
Onfocus：当获得焦点时；
Onblur：当失去焦点时；
三、常用方法
Select()：选中内容
Focus()：定位光标
Blur()：让光标从某个元素上移走


Select对象的常用属性
options[]：返回所有option组成的一个数组；
name：名称
value：option的value的值
length：设置或读取option的个数
selectedIndex：当前选中的option的索引号
……
option对象的常用属性

text：指<option></option>中的文本
value：指option对象的value属性
index：指每个option对象的索引号
selected：当前option是否选中
……

 

======== javascript(5)+ajax(2)+jquery(3)=========
javascript(5) 扯太深远了

20141004(面向对象1) 20141005(面向对象2) 20141007(正则)

//自调用匿名函数
// ( 匿名函数 )();
(function(){alert('a')})();
//自调用匿名函数，可加参数 name
(function(name){alert('a '+name)})('小明');

this php和js 都表示，谁调用，this就指谁


=========== 事件监听 =================
问题：我们可不可以对同一对象的同一事件绑定多个处理程序？
dom.onclick = function fn1() {}
dom.onclick = function fn2() {}

答：可以，采用事件监听的方式

浏览器：
IE
attachEvent
detachEvent
W3C(firefox chrome )
addEventListener
removeEventListener

冒泡模型
1、基本语法
addEventListener(type,callback,capture)
capture:true false
false : 冒泡模型 【默认】
ture：捕捉模型
目前IE浏览器只支持冒泡模型

响应式设计（电脑+平板+手机）听说在微信开发里面有介绍。。。
==============jquery===============

jquery 就是 javascript框架 extjs 现在没优势了。。

==================== jquery dom ====================
jQuery对象本身就是一个数组

dom对象只能调用dom方法
jQuery对象只能调用jQuery方法

1）jQuery对象转dom对象

语法：

jQuery[0]
或
jQuery.get(0)

2）dom对象转jQuery对象

语法：

$(dom) 内置方法 理论上，把字符串 dom 等传入 $()就变成了 jquery对象！牛逼吧！

var a=document.getElementById("content");
$(a).html("123"); //$(a) 转换为 jquery对象


建议：我们在写程序时，对于jQuery对象的变量尽量加$
var $a=$(':checkbox');

json格式
var a={"name":"小明",
"age":"8"};


dom window.onload=function(){} 载入所有 html标签
jquery $(document).ready(function(){}); 载入需要的 html标签就可以了,快