首页 > 代码库 > JS基础
JS基础
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‘,]
];
function create1(){
var cl1=document.getElementById(‘city1‘);
for(var i=0;i<c1.length;i++){
var op=new Option[cl[i],cl[i]];
cl1.options.add(op);
}
}
function create2(){
var index=document.getElementById(‘city1‘).selectedIndex;
//alert(index);
}
</script>
<body>
<select id=‘city1‘ onchange=‘create2()‘>
---->2级别联动 new Option(‘text222‘,‘value1‘);
<select id=‘select1‘ name=‘select1‘>
<option value=http://www.mamicode.com/‘1‘>woadfadfad1
</select>
<script>
alert(‘a‘);
var a=new Option(‘woadfadfad1ssss‘,‘d‘); ---- 特殊的新建option html dom对象
var cl=document.getElementById(‘select1‘);
try
{
cl.add(a,null); // standards compliant
}
catch(ex)
{
cl.add(a); // IE only
}
</script>
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=http://www.mamicode.com/‘../image/1.jpg‘;
im.setAttribute(‘src‘,‘../image/2.jpg‘);
html dom
div1.innerHtml="<img src=http://www.mamicode.com/‘../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=http://www.mamicode.com/‘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 checkReset(){
return confirm(‘确认清空?‘);
}
function checkSubmit(){
if(document.getElementById(‘username‘).value=http://www.mamicode.com/=‘‘){
alert(‘用户名不能为空‘);
return false;
}
return true;
}
<form method=‘post‘ action=‘1.php‘ onsubmit="return checkReset();" onSubmit="return checkSubmit();"
<input type=‘text‘>
<input type=‘submit‘ value=http://www.mamicode.com/‘清空‘>
</form>
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);
function fn(){
alert(‘hello‘);
setTimeout(‘fn()‘,3000); ---- 函数3秒执行 setTimeout(‘fn()‘,3000);
}
fn();
-->时间设置到文本框里
function startTime(){
var date=new Date();
var str=date.getHours()+‘点‘+date.getMinutes()+‘分‘+date.getSeconds()+‘秒‘;
document.getElementById(‘txtTime‘).value=http://www.mamicode.com/str;
timer=setTimeout(‘startTime(),1000); ---- 变量保存定时器不加 timer=setTimetout(‘startTime()‘,1000);
}
window.onload=function(){
document.getElementById(‘btnStart‘).onclick=function(){
startTime();
};
document.getElementById(‘btnStop‘).onclick=function(){
clearTimeout(timer); --- 清楚定时器 clearTimeout(timer);
}
}
<input type=‘text‘ id=‘txtTime‘>
<input type=‘button‘ id=‘btnStart‘ value=http://www.mamicode.com/‘开始‘>
--->改变样式
<style>
div{
position:absolute;
}
</style>
<script>
var top=0;
var left=0;
fn(){
left++;
top++;
var di=document.getElementById(‘content‘);
di.style.left=left+‘px‘;
di.style.top=top+‘px‘;
setTimeout(‘fn()‘,10);
}
window.onload=function(){
fn();
}
</script>
<div id=‘content‘>
<img src=http://www.mamicode.com/‘../image/8.jpg‘>
</div>
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=http://www.mamicode.com/‘注册‘ id=‘btnOk‘>
</form>
<script>
window.onload=function(){
document.getElementById(‘frm‘).onsubmit=function(){---onsubmit=‘return getaa()‘ ---- 表单onsubmit值获取函数返回值的真假来确认提交与否
var flag=true;
if(document.frm.abc.value)==‘‘){----了解即可 表单对象获取属性(仅限表单对象) 特殊用法 了解即可 表单的input的值document.frm.abc.value
alert(‘用户名不能为空‘);//document.getElementById(‘span1‘).innerHTML=‘用户名不可空‘;
flag=false;
}
if(document.frm.abc.value.length<6){ ---- 字符串长度
}
if(document.frm.email.value.indexOf(‘8‘)<=0){
}
if(isNaN(document.frm.age.value) || document.frm.age.value=http://www.mamicode.com/‘‘){
alert(‘年龄格式不正确‘);
flag=false;
}
return flag;
}
}
</script>
---- 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 Person(){
this.name=‘xx‘;
this.age=30;
this.sex=‘男‘;
}
delete p1.sex; ---- 删除属性
p1.sex=null;
--对象遍历
for(var i in p1){ ---- js遍历对象for下标in对象
document
}
--数组遍历
for(var i=0;i<arr.length;i++){
}
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‘,‘caa@aa.com‘]);//于上面类似
---- 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=http://www.mamicode.com/‘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;
JS基础