JS基础

浏览数：25 / 时间：2015年06月09日

1.php
header(‘content-type:text/xml;charset=utf-8;‘); ---- 输出xml到ajax里与html之间建立联系
$str=‘<?xml version=1.0 encoding=utf-8?>‘;

echo $str;

---------------------------js-03-----------------------------------------------------------------------

str=‘hello‘;
str+=‘nihao‘; ---- +=也可以是字符串运算 +可以相当于php中的.

var op=new Option(c1[0],c1[0]);//文本,值
cl.options.add(op); ------>2级别联动
<script>
var c1=[‘省A‘,‘省B‘,省C‘,省D‘];
var c2=[
[‘市A1‘,‘市A2‘,‘市A3‘,‘市A4‘,],
[‘市B1‘,‘市B2‘,‘市B3‘,‘市B4‘,],
[‘市C1‘,‘市C2‘,‘市C3‘,‘市C4‘,]
];

---->2级别联动 new Option(‘text222‘,‘value1‘);
<select id=‘select1‘ name=‘select1‘>
<option value=‘1‘>woadfadfad1</option>
</select>

var input = document.createElement(input); ---- 创建input元素
input.setAttribute(type, text);
input.setAttribute(name, q);
input.setAttribute(class,bordercss);

php操作的时候可以创建createElement(‘aaa‘,‘值‘);//<aaa>值</aaa>

dom
dom core html dom css dom ---- css dom

var d=document.getElementById(‘div1‘);
d.style.width=‘100px‘;
d.style.backgroundColor=‘red‘;

im.src=‘../image/1.jpg‘;
im.setAttribute(‘src‘,‘../image/2.jpg‘);

html dom
div1.innerHtml="<img src=‘../image/3.jpg‘ />";

dom core
var im=document.createElement(‘img‘);
im.setAttribute(‘src‘,‘../image/4.jpg‘);
div1.appendChild(im);

var d1=document.getElementById(‘a1‘);
var im=document.createElement(‘img‘);
d1.appendChild(im);

getElementsByName(‘proID[]‘);
<input type=‘checkBox‘ name=‘proID[]‘ value=‘101‘>

var proID=document.getElementByName(‘proID[]‘);
for(var i=0;i<proID.length;i++){
proID[i].checked=true; ---- checked=true;

}

if(isset($_POST[‘submit‘])){
$proID=$_POST[‘proID‘];
$where=implode(‘,‘,$proID);
$str="delete from product where id in (".$where.")"; ---- 接受数组拼接字符串删除id对应的产品
echo $str;
}

xml dom 了解
<?xml version=‘1.0‘ encoding=‘utf-8‘?>
<persons>
<person>
<name>zhangsan</name>
<age>30</age>
</person>
<person>
<name>zhangsan</name>
<age>30</age>
</person>
<persons>
<script language=‘javascript‘>
var xmldom=CreateXmlDom(‘demo);
document.write(xmldom.document.lastChild
.firstChild.firstChild.nodeValue ---- 了解即可 xmldom 解析要多一步
);
</script>

function getCode(evt){ ---- onclick等(传入 evt) 函数内 window.event 相当于 evt ||| evt需要传入 window.event不需要传入
if(window.event){
return window.event.keyCode;
}else{
return evt.keyCode;
}
}

window.onload=function(){}
document.getElementById(‘content‘).onkeyup=function(evt){
alert(getCode(evt));
};
}

window.setTimeOut("alert(‘hello‘)",3000);

--->改变样式

window.moveTo(Math.random()*1024,Math.random()*768);
setTimeout(‘fn‘,10);

host
port
href
pathname:路径以后的信息除了localhost
protocol:协议
search:查询字符串
assign(url):实现页面跳转

window.location.host//localhost
window.location.protocol //http
window.location.pathname // /les/01.html
window.location.search // ?id=10
--->screen对象 ----了解即可 screen对象
availHeight 可用高度
availWidth 可用高度
colorDepth
height
width

--->表单对象获取属性
<from id=‘frm‘ name=‘frm‘ method=‘post‘ action=‘1.php‘>
用户名:<input type=‘text‘ name=‘abc‘>

<input type=‘submit‘ name=‘submit‘ value=‘注册‘ id=‘btnOk‘>
</form>
<script>
window.onload=function(){

---- prototype的用法
Array.prototype.find=function(){ ---- 数组prototype增加方法了解即可
for(var i=0;i<this.length;i++){
if(this[i]==number){
return i;
}
}
return -1;
};
var arr=new Array(
100,99,11,22,33
);
alert(arr.find(99));

Number.prototype.jia=function(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum=sum + arguments[i];
}
return sum+this;
}
var aa=10;
alert(aa.jia(10,12));

----对象静态属性
function Person(p_name){ ---- 设置对象属性this.name 静态方法 Person.getCount=function(){}
this.name=p_name;
//设置静态属性
Person.counter++;
//设置静态方法
Person.getCount=function(){
alert(‘共有‘+Person.counter+‘人‘);
}
}
//设置静态方法
Person.counter=0;
var p1=new Person(‘zhangsan‘);
var p2=new Person(‘lisi‘);
var p3=new Person(‘wangwu‘);
Person.getCount();

window.onload=function(){
document.getElementById(‘div1‘).onclick=function(){
this.style.backgroundColor=‘blue‘;
}
}

<div id=‘div1‘>测试</div>
---- 函数返回函数首地址 (闭包)
function fn1(){
var i=10; ---- 变量i被引用不回收
function fn2(){
alert(i++);
}
return fn2;
}
var test=fn1(); ---- test指向fn2 fn2被引用不回收
test();
test();

----对象操作
function counter(){
this.first=f;
this.second=s;
}
function display(obj){
obj.jia=obj.first+obj.second;
obj.jian=obj.first-obj.second;
}
var c=new counter(10080,999);
display(c);
alert(c.jia);
alert(c.jian);

function say(a,b){
alert(this.name+a+b);
}
function Person(p_name){
this.name=p_name;
}
var p1=new Person(‘zhangsan‘);
var p2=new Person(‘lisi‘);
p1.speak=say; ---- 了解即可对象属性=方法名
p1.speak();

say.call(p1); ---- 了解即可方法call对象来指向
say.call(p1,30,‘aggggg‘); //say call p1 来执行并传递参数给say
say.apply(p1,[‘20‘,‘[email protected]‘]);//于上面类似

---- js以多层来访问 form1.password.value 可以用php dom方式来操作 op=new Option(‘name‘,‘value‘); select1.options.add(op)

遍历对象属性和方法名 ---- 遍历html select等元素的属性值和方法名确定该元素对应的html dom属性和方法
for(key in object){
alert(object[key]); ---- 对象当数组来用
}

function abc(){
this.name=‘11111‘;
}
var aa=new abc();
alert(aa[‘name‘]);

01---
divO=document.getElementById(‘div1‘); ----div里 createElement appendChild的用法 (select 不能直接appendChild option 只能用add方法)
var div1=document.createElement(‘div‘);
div1.innerHTML=‘DIV111‘;
divO.appendChild(div1);

02---
var text1=document.createElement(‘input‘);
text1.value=‘aaaaaaaa‘;
divO.appendChild(text1);

---js 模拟继承
function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.say=function(){
alert(this.name+this.age);
}
}
function Student(p_no){
this.no=p_no;
this.speak=function(){
alert(this.no+this.age);
}
}
Object.prototype.exx=function(Obj){
for(var key in Obj){
this[key]=Obj[key];//key是属性名 ---- 对象prototype (传递对象,属性交给当前对象)
}
}
var s1=new Student(3);
s1.ext(new Person(‘zhangsan‘,30));
s1.say();
s1.speak();

function PP(a,b){

}
PP.call(obj,‘aaa‘,‘bbb‘);

--js try catch ---- js try catch 好处出错了后面代码还可以继续运行

try{
var i=10;
alert(j);//异常错误j未定义
}catch(e){
//不提示错误
alert(e.message);
}
alert(‘hello‘);
-->new xmldom
function create(){}
var xmldom;
try{
xmldom=new ActiveXObject(‘Microsoft.XMLDOM‘);
return xmldom;
}catch(e){

}
try{
xmldom=document.implementation.createDocument(‘‘,‘‘,null);
return xmldom;
}catch(e){

}

}

------------js07---------------------------------------
--RegExp下的方法调用
var str=‘hello,my age is 22‘;
//或者隐式创建var reg=/8/gi;
var reg=new RegExp(‘\\d‘,‘gi‘);
alert(reg.test(str)); ---- 正则test字符串true false
reg.exec(str); //默认只执行一次需要//gi ---- 正则exec字符串返回匹配到的字符串或null
typeof reg
reg.constructor
reg instanceof RegExp

--string下的方法调用
str.search(reg);//返回位置
str.match(reg);//将匹配内容放到一个数组里
str.replace(reg);//匹配替换返回替换后的字符串
str.split(reg);//匹配分割返回数组
var str=$(‘tel‘).val();
var reg=/^\1\d{10}$/gi;

g:全局
i:忽略大小写

str.replace(reg,‘***‘);

reg.index
reg.lastIndex
reg.input
reg.leftContent
reg.rightContent

reg.global //g
reg.ignoreCase //i
reg.lastIndex //标志开始下一次匹配的字符位置
reg.multiLine//m
reg.source//正则表达式源文本

次数
* //0-多
+ //1到多
？//0或1
{n}//几次
{n,}//最少n次
{n,m}//n到m次

字符匹配代名词出现任意一个
[a-z]
[A-Z]
[0-9]
[0-9][A-Z][a-z]
[abc]

[^a-z] //caret 除掉这些的任意一个
[^0-9]
[^abcd]//除a b c d意外的任意一个

简写一个
\d 任意一个数字
\D 任意一个非数字
\w 任意一个字符包括_
\W 任意一个非字符
\s 任意一个空白
\S 任意一个非空白字符
. 任意一个字符除‘\n‘ 如果要包括需要[.\n]

^开始
&结束
\b 匹配以一个单词边界
\B 匹配非一个单词边界

var reg=/(he|php)ab/gi;//(匹配he或php)连上ab

var str=‘hello,love,you‘;
var reg=/o\b/gi;
alert(str.match(reg));//o
alert(RegExp.index);

-->转义匹配一些特殊的字符
转义 var reg=/\[/gi;