标签：
<script>
//文档中第三个图像:document.images[2]
//文档中名为‘aa‘的表单:document.form[‘aa‘]
//层只有唯一 的id:document.layers[id]
//微软的层id:docment.all[id]
//如果想找到id的left位置并把它赋值给变量bs，在其他浏览器中是这样操作的:document.layers[id].left;
//统一标准的dom是这样的:bs=document.getElementByid(id).style.left;
//w3c对dom定义：一个与系统平台和编程语言无关的接口，程序和一可能这个接口动态的地访问和修改文档和内容，结构和样式
//js一些语法（我因为看过视频，所以大致回顾下JS基础知识）
//一行 或者 多行
var a=‘123‘;var b=‘345‘;//不建议
//建议使用下面的的
var a=‘123‘;
var b=‘345‘;
//变量
var a=‘你好‘;
var b=123;
var c=1.23;
//警告
//alert(a)
//多行声明
var a, b,c//
//单行声明
var a;
var b;
var c;
//数组
var arr=Array();
var arr1=Array(4);//这样表示长度为4
//获取数组下标
//arr1[index]=element;
arr1[0]=‘abcd‘;
alert(arr1);
//或者和py类似的操作
var arr=Array(1,2,3,4,5,6);//括号里面可以是变量：数字，布尔，数组等
alert(‘第一个下标是:‘+arr[0])
//或者使用以下方式创建
arr=[-1,2,3,4,5]
alert(‘第一个下标是:‘+arr[0])
//数组还可以是变量
name=‘刘德华‘
arr[1]=name
alert(arr[1])
//数组赋值
arr[0]=arr[1]
alert(‘第一个下标是:‘+arr[0])
//数组中包含其他数组
a=[‘python‘]
arr1[0]=a
alert(‘第一个下标是:‘+arr1[0])
//这边的规则和python里面的规则类似
//如python a[0][1],js也可以这样操作
//创建对象
obj=Object();
obj.name=‘python‘;//自定义属性
obj.sex=‘男‘;
alert(‘名字是:‘+obj.name+‘ ‘+‘性别是:‘+obj.sex)
//高效创建对象方法：键值对{keys:values}
keyvalue={key:123,‘python‘:‘c++‘}
alert(keyvalue.key)
//i++:表示先给i赋值之后+1:i=i+1
//++i表示先加1之后赋值如
//语句体
if(exr){
}else{
}
while(exr){
}
do{
}while(1);
for(i;i<0;i++){}
//逻辑操作
// && and || or ! not
//函数
function func([]){}
</script>
<head>
<title>验证信息</title>
<!--<link href="css.css" type="text/css" rel="stylesheet"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--<link rel="shortcut icon" href="../image/web1.ico" type="images/x-icon"/>-->
<!--<script language="JavaScript" src="js1.js" ></script>-->
<script>
function text(){
with (document.all)//用法：with (<对象>) <语句>;作用：简化代码量
//例子:with (Math) { x = cos(3 * PI) + sin(LN10);/ y = tan(14 * E);}
if(pass1.value!=pass2.value ){
alert(‘两次密码不相同‘)
pass1.value=‘‘;
pass2.value=‘‘;
}
else{ document.forms[0].submit()}//获取当前页面的第一个表单
}
</script>
</head>
<body>
<form action="#" method="post">
密码1:<input type="password" id="pass1">
密码2:<input type="password" id="pass2">
<input type="button" value="提交" onclick="text()">
</form>
</body>
</html>
<head>
<title>无刷新评论</title>
<!--<link href="css.css" type="text/css" rel="stylesheet"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--<link rel="shortcut icon" href="../image/web1.ico" type="images/x-icon"/>-->
<!--<script language="JavaScript" src="js1.js" ></script>-->
<script type="text/javascript">
function pl() {
var nickname = document.getElementById("nickname").value;
var input = document.getElementById("comm").value;
var table = document.getElementById("table"); //创建表格
var tr = document.createElement("tr"); //创建新行
var Nickname = document.createElement("td"); //创建昵称单元格
Nickname.innerText = nickname;
tr.appendChild(Nickname); //添加到新行
var Comm = document.createElement("td"); //创建评论单元格
Comm.innerText = input;
tr.appendChild(Comm); //添加到新行
table.tBodies[0].appendChild(tr); //将新行添加到表格中的tbody中，tBodies：一个表格允许有多个tbody。
}
</script>
</head>
<body>
<table id="table">
<tbody>
</tbody>
</table>
昵称：<input id="nickname" type="text"/><br />
<textarea id="comm"></textarea>
<input id="input" type="button" value="评论" onclick="pl()"/>
</body>
</html>
js dom基础第三章dom学习
dom(文档对象模型)
自定义对象:这个是程序员自己定义的
内建对象:在js语言里面的对象，比如array,object,data,math等;
宿主对象:浏览器提供的对象
bom(浏览器对象模型)或者叫（wom:窗口对象模型）
dom它可以看成一个树
如图:
html是父节点
head body是html子节点，但又是兄弟节点
head下面分title ; body 下面分a,a下面分span等
元素节点:element node
html里面的标记，如:head,body p h1-h6 span div等
文本节点
包含在html标记里面的文本（可以是中文的，也可以英文的，还可以是乱码）,如<p>你好</p>这里在的你好，就是文本节点
注意:文本节点必须包含在元素节点内部使用,但是并不是所有的元素节点都包含文本节点，如:ul img等
属性节点:对元素做出具体的描述，比如<p tilte=‘tiltes‘>这是属性节点</p>
tilte=‘tiltes‘这样就表示属性节点
为了区别一个或者某个与其他元素的方法，可以使用.class #id属性来操作;
class 可以是多个，而id在页面是最好出现一次,如下:
<span class=‘txt‘></span>
<span id=‘txt1‘></span>
css里面操作(class 与id操作一样方式),如下:
#txt1{};//这样是id属性
.txt();//这样是class属性
id属性的作用：是给页面的某个元素加上独一无二的标识符，如下
<div id=‘div1‘>
<ul>
<li></li>
</ul>
</div>;
css部分
#div1{}
还可以利用id属性为包含在特定元素中的其他元素定义样式
#div1 li{}
------------------------------------
获取dom元素
3种：通过id,标签名字和类名字
1:getElementByid(id)
如下:
getElementByid(‘div1‘);//这样就获取到一个独一无二的id元素div,那个元素告诉html id属性是div1,可以通过typeof来验证它是否是什么（数字，字符，对象等）
例子
如图:
<h1>dom基础学习</h1>
<p title="id1">dom基础学习</p>
<ul id="dom1id">
<li>你好</li>
<l1 class="l11">你好</l1>
<l1 class="l11">你好</l1>
</ul>
<script>
var doc=document.getElementById(‘dom1id‘);
alert(doc)
</script>
2:getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档中有给定标签的一个元素，类似getElementById方法，它的参数是标签的名字
getElementsByTagName(‘li‘),这样调用 将返回一个对象数组，每个对象分别对应着document对象中一个列表项元素，与其他任何数组一样，可以利用length属性来查看这个数组的个数
，也可以通过遍历来查看个数 ，如下
for(var i=0;i<=document.getElementsByTagName(‘html标记‘).length;i++){
alert(typeofgetElementsByTagName(‘html标记‘)[i]};
3:getElementsByClassName(类名)
使用下面的方式 可以对新老浏览器
<script>
function gets(_class,name){
if(_class.getElementsByClassName){
//使用现在的方法
return _class.getElementsByClassName(name)
}else{
var result=new Array();
var elem=_class.getElementsByName(‘*‘);
var i=0;
for(i;i<=elem.length;i++){
if(elem[i].className.indexOf(name)!=-1){
result[result.length]=elem[i]
}
}
return result;
}
}
</script>
前面3个dom的对象方法可以设置和获取属性
（简单描述下）
pass=getElementsByTagName(‘p‘);//获取属性
pass.getAttribute(attribute),也可以通过for来获取
var i=0
for(i;i<=pass.length;i++){
pass[i].
getAttribute(attribute)
}
设置属性:setAttribute(attribute,value)
js基础练习之文本从左到右移动效果
<script>
var msg=‘欢迎浏览我的网站,谢谢!‘;
var intervar=100;
var subLen=1;
function Scoll(){
len=msg.length;//长度
window.status=msg.substring(0,subLen);//sublen参数值+1
subLen++;//判断子字符串长度是否已经等于整个状态栏字符串长度
if(subLen>len){
//当子字符串长度等于整个字符串长度时
subLen=1;//参数复位为1
window.status=‘‘;//状态栏内容为空
window.setTimeout(‘Scoll()‘,intervar);//重新开始循环
}
else //当子字符串长度不等于整个字符长度，即小于时
window.setTimeout(‘Scoll()‘,intervar)
}
Scoll()
</script>
</body>
</html>
js基础练习之文本从左到右移动效果(单行)
<script>
var msg=‘欢迎浏览我的网站,谢谢!‘;
var intervar=100;
var subLen=1;
function text(){
len=msg.length
dy.dytext.value=msg.substring(0,subLen);
subLen++;
if(subLen>len){
subLen=1;
dy.dytext.value=‘‘;
window.setTimeout(‘text()‘,intervar)
}else
window.setTimeout(‘text()‘,intervar)
}
</script>
<form id="dy">
<input type="text" id="dytext" size="40" value="">
</form>
js基础练习之实现下拉的效果
如图:
<script>
function select2(){
sel=document.getElementById(‘select1‘);//获取文档中下拉列表
txt=sel.options[sel.options.selectedIndex].text;
valu=sel.options[sel.options.selectedIndex].value;//获取下拉框值
alert(‘选择的是:‘+valu)
}
</script>
<select id="select1" ondblclick="select2()" size="10">
<option value="中国杭州" >中国杭州</option>
<option value="中国北京">中国北京</option>
</select>
html代码
<div class="box">
<ul class="menu">
<li class="x1">
<a href="#">标题1</a>
<ul class="x2">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
</li>
<li class="x1">
<a href="#">标题2</a>
<ul class="x2">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
</li>
<li class="x1">
<a href="#">标题3</a>
<ul class="x2">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
</ul>
</li>
</ul>
</div>
jq代码
$(document).ready(function(){
$(‘.x1 >a‘).click(function(){
$(this).addClass(‘current‘).next().show()
.parent().siblings().children(‘a‘).removeClass(‘current‘)
.next().hide();
return false;
});});
js dom基础案例学习：js图片库
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jq/jquery.js"></script>
<script src="js1.js"></script>
<!--<link href="css.css" type="text/css" rel="stylesheet"/>-->
</head>
<body>
<ul>
<li>
<a href="img/a.jpg" title="display1" onclick="updates(this);return false">第一张</a><!--x放在这边-->
</li>
<li>
<a href="img/c.jpg" title="display2"onclick="updates(this);return false">第二张</a>
</li>
</ul>
<img id="tupian" src="img/a.jpg" alt="第一张图">
<script>
//最终函数代码形式
function showImage(img){
//img代表着一个元素的节点，也就是一个指向某个图片<a>元素，需要把图片路径进行分解，还可以通过img元素上调用getAttribute得到，只要把href作为参数传递给getAttribute就行了
//img.getAttribute(‘href‘)
//将这个路径存入一个变量为path的名称;
var path=img.getAttribute(‘href‘)
//接下来，还需要获取占位符图片，对getElementByid(id)是有用处的
var tp=document.getElementById(‘tupian‘);
//现在已经声明和赋值2个变量，通过setAttribute元素的src属性进行刷新
tp.setAttribute(‘src‘,path)
//比下面的代码方便很多，如下:
//document.getElementById(‘tp‘).setAttribute(‘src‘,img.getAttribute(‘href‘))
//非dom解决方法
//其实 可以不使用setAttribute()方法也可以改变src属性
//比如想修改某个元素的value属性，可以使用如下方法:
//element.value=‘str‘
//与下面这句话相同
//element.setAttribute(‘value‘,‘str‘)
//类似的方法也可以改变图片的src属性，如下
//img.src=path
//setAttribute特点是：在于它可以修改文档中任何一个元素的任何一个属性
//第一级dom的另一个特点是：可移植性好
//记住另一个是：dom用于多种环境和多种程序设计比语言通用型api
}
window.onload=function getBodyLength(){
//var getbody=document.getElementsByTagName(‘body‘)[0]
var getbody=document.body;
//alert(‘长度是‘+getbody.nodeType)
//alert(‘长度是‘+getbody.childNodes.length)
}
function updates(img){
var path=img.getAttribute(‘href‘);
var path2=document.getElementById(‘tupian‘);
path2.setAttribute(‘src‘,path)
//1
var text=img.getAttribute(‘title‘);
//接下来通过id为text1引用，创建一个新变量
//2
var text1=document.getElementById(‘png‘)//tx
//3
text1.firstChild.nodeValue=text;
//上面的3句含义:
//第1句:当图片库页面上某个图片链接被点击，这个链接title属性值将被提取并保存到text变量中
//第2句，得到id的png的<p>元素，并把它保存到变量text1里面
//第3句把text1对象的第一个子节点nodeValue属性值设置为变量text的值
//alert(text1.nodeValue)显示为null
}
//首先我需要在updates()函数增加一条语句来获取img对象的title属性值，我将这个值存入text变量，通过getAttribute来获取
</script>
<!--事件处理--:使用func(this)方式有效可以处理这样的信息,this在这里的含义是<这个对象>,也就是<a>元素节点>
<!--onlick()语法event=func(this)-->
<!--事件处理工作机制:在给某个函数添加了事件处理函数后，一旦事件发生，相反的js代码就会得到执行,
被调用js代码返回<true and false>,当链接被点击时，js就被认为触发事件，返回布尔true，
反之false,所以需要以下方式处理，-->
<a href="http://www.qq.com" onclick="return false">腾讯<!--(测试false是否点击之后出现其他操作)--></a>
<!--同理可以使用以下方式来处理:onlick=event(this) return false-->
<!--对此函数进行扩展-->
<!--上面a元素里面有个title属性，可以把这个title属性和它对应的图片一同显示在页面上，title属性可以通过getAttribute方法获取,var text=img.getAttribute(‘href‘)-->
<!---获取节点树方法:childNodes:作用：可以用来获取页面中任何一个元素所有子元，它是一个包含这个元素全部子元素数组:element.childNonds->
例如页面中查找body元素全体子元素检索出来，首先使用getElementsBuTagName得到body元素，因为每个文档中只有一个body元素,所以它将是
getElementsByTagName(‘body‘)方法所返回的数组中第一个（也是唯一一个）元素;
var getbody=getElementsByTagName(‘body‘)[0]
通过getbody可以获取body元素下面的所有子元素集
getbody.childNodes
比下面的方式写的方便:getElementsByTagName(‘body‘).childNodes
查看指定元素个数（length）
getbody.childNodes.length
下面写一个名为:getBodyLength(chiLlength)，代码请看上面
getBodyLength(chiLlength)在这个函数中加入一个名为widow.onload=function可以在页面加载时被执行
nodeType属性：获取节点语法:node.nodeType
使用它方式:alert(‘长度是‘+getbody.nodeType)打印之后，返回竟然是长度为1，nodeType属性共有12种可取值
有3种仅有实用价值
元素节点为1
属性节点为2
文本节点为3
也就是可以让函数只对特定的类型节点进行处理
-->
<!--在标记中增加一段描述-->
<p id="png">这是图片</p>
<!--通过js来修改这个描述--代码上面--updates()-->
<!--nodeValue属性:修改一个文本节点值（得到和修改一个节点的值）:
node.nodeValue,这边有一个细节是:nodeValue属性获取text1对象的值，得到并不是包含在这个段落的文本，通过alert(text1.nodeValue)来验证-->
<!--这样调用会返回一个null值<p>元素本身的nodeValue属性是一个空值，而真正需要的是<p>元素所包含文本的值
包含在<p>元素里面的文本是另一个节点，它是<p>元素的第一个子节点，所以只要得到它第一个子节点即可
通过text1.childNodes[0].nodeValue来获取-->
<!--firsChild：第一个属性和lastChild：最后一个属性;
语法获取第一个:nod.firsChild相当于node.childNodes[0]
获取最后一个:node.lastChild相当于node.childNodes[node.childNodes.length-1]-->
<!--利用nodeValue属性进行刷新指定信息
回到函数updates(img)，将刷新id（png）等于path2的<p>元素所包含的文本节点的nodeValue属性
具体到这个id等于path2的<p>元素，因为它只有一个子节点，所以使用path2.firstChild属性和使用
path2.lastChild属性效果是一样的，使用以下方式:alert(path2.firstChild.nodeValue)
;
nodeValue它还可以用来检索节点的值，也可以设置节点的值（这种当前是需要的），所以(tx看上面 ):
path2.firstChild.nodeValue=text-->
注意:想美化和下载上面的代码和图片的朋友请上<a href="http://friendsofed.com">素材和代码</a>进行下载!
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>最佳实现</title>
<!--<link href="css.css" type="text/css" rel="stylesheet"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--<link rel="shortcut icon" href="../image/web1.ico" type="images/x-icon"/>-->
<!--<script language="JavaScript" src="js1.js" ></script>-->
<script >
function show(url){
//url=‘http://www.qq.com‘
//name=‘腾讯qq‘
//"features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明 "
open(url,‘页面显示‘,‘widht=320,heigth=480‘)
}
//注意：调用show()函数体，它有一个伪协议:pseudo-protocol
// 真协议用来在互联网上计算机之间传输数据包，如httl ftp等
// 伪协议是一种非标准化协议，如下*
</script>
</head>
<body>
*<a href="javascript:popUp(‘http://www.qq.com/‘)">伪协议</a><!--这样操作对html不好友-->
<!--内嵌事件处理函数,如下:-->
<a href="#" onclick="popUp(‘http://www.qq.com‘); return false">本地腾讯qq</a><!--同上面-->
<!--使用popUp()函数，使用以下方式，来处理-->
<a href="http://www.qq.com" onclick="popUp(‘http://www.qq.com‘); return false">远程腾讯qq</a>
<!--上面的代码有点冗余，通过关键字this可以来代表任何一个当前元素-->
<a href="http://www.qq.com" onclick="popUp(‘this.href‘); return false">远程腾讯</a><!--建议使用这种方式-->
</body>
</html>
js基础知识
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!--<link href="css.css" type="text/css" rel="stylesheet"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--<link rel="shortcut icon" href="../image/web1.ico" type="images/x-icon"/>-->
<!--<script language="JavaScript" src="js1.js" ></script>-->
<!--<script ></script>-->
</head>
<body>
js有关知识（基础：闭包）
<script>
//创建内部函数:就是定义在另一个函数内部的函数
function func0(){
function func1(){
//语句体
}
//语句体
}
//注意:func0()在func1()内部使用是合法的，而func1()在func0()是非法的
//例如：错误
function A(){
console.log(‘在B()函数体外‘)
function B (){
console.log(‘在B()函数体内‘)
}
}
console.log(‘在A()函数体外‘)
B()
//例子：正确
function A(){
console.log(‘在B()函数体外‘)
function B (){
console.log(‘在B()函数体内‘)
}
}
console.log(‘在A()函数体外‘)
A()//一般用在小型，单用途函数，比如递归
//在任何地方调用内部函数体
//1:使用全局变量
var globVar;
function A1(){
console.log(‘全局变量‘)
function B1(){
console.log(‘全局变量‘)
}
globVar=B1();//在A1()中调用B1()函数体
}console.log(‘在函数A1（）调用‘)
A1();
console.log(‘调用A1()‘)
globVar()
//注意：在定义函数之后，B1()会修改全局变量globVar,此时它引用了B1（），也就是后面调用globVal()的操作就等于调用B1()一样，会输出B1()语句体
//也可以通过在父函数中返回值，来营救出内部函数引用
function C1(){
console.log(‘C1()‘)
function C2(){
console.log(‘C2()‘)
}return C2;
}
console.log(‘var func1=C1();‘)
var func2=C1();
console.log(‘C1()成功‘)
func2();
//这边没有在C1()内部修改全局变量，而是从C1()中返回了一个对C2()的斜塔，通过调用C1()能够取得这个引用，而且这个引用可以保存在变量中，也可以自己调用自己，从而得出结果;
//这个即使离开函数作用域的情况下仍然能够通过引用调用内部函数的事实，意味着只要存在调用这些内部函数的可能，JS就需要保留被引用的函数，而且JS运行时需要跟踪引用这个内部函数所有变量，直到最后一个变量被废弃
//js的垃圾收集器(gc)才能出面翻译相应的内存空间
//理解变量作用域
function non(){
function non1(){
var a=0;
a++;
console.log(‘a=‘+a);
}return a
}var b=non();
b();b();
var b1=non();
b1();b1()
//每当通过引用或者其他方式调用这个内部函数，都会创建一个新的a变量，然后第增，内部函数可以像其他函数一样引用全局变量
var a=0;
function non(){
function non1(){
a++;
console.log(‘a=‘+a);
}return a
}var b=non();
b();b();
var b1=non();
b1();b1()//这样，每次调用内部函数都会持续地递增这个全局变量的值，这样会怎么样的，因为内部函数会继承父函数的作用域，所以内部函数也可以引用这个
function non(){
var a=0;
function non1(){
a++;
console.log(‘a=‘+a);
}return a
}var b=non();
b();b();
var b1=non();
b1();b1()
</script>
</body>
</html>
----------
jq基础知识点
准确获取和检查文档元素
$(‘div.content‘).find(‘p‘)//div.content表示div下面id为content
mysql正则
使用正则表达式进行查询
语法: 属性名 regexp ‘匹配方式‘
常用的正则表达式的如下
^ 匹配开始
$匹配结束
.匹配任意一个字符，包括回车和换行
[字符集合]
[^字符集合]匹配除了字符集合以外的
s1|s2任意一个
*至少多个 包括0和1
+至少1或者多次包括0
{n}匹配n次
{n,m}匹配n到m次
查询特定的或者字符串开头记录
查询以^张开头的记录
select*from exr1 where name regexp ‘^张‘;
查询特定的或者字符串结束记录
查询以张$结束的记录
select*from exr1 where name like ‘李%‘ or name regexp ‘三$‘;
匹配指定字符串中一个
select*from exr1 where name regexp ‘[a-z0-9A-Z]‘;
+*
select*from exr1 where name regexp ‘[a-z0-9A-Z]*‘;
select*from exr1 where name regexp ‘[a-z0-9A-Z]+‘;
{m}
{n,m}
select*from exr1 where name regexp ‘[a-z0-9A-Z]{1}‘;
select*from exr1 where name regexp ‘[a-z0-9A-Z]{1,4}‘;
匹配以外指定字符
select*from exr1 where name regexp ‘[^a-z0-9A-Z]‘;
匹配指定字符
select*from exr1 where name regexp ‘[a-z｜0－9]‘;
javascript(js)基础 dom基础（js语法）未来会删除此博客
标签：
原文地址：http://www.cnblogs.com/mhxy13867806343/p/4440396.html
