Asp.net 函数及常用方法总结 分享贴 --陆续补充。。。
--------------------编程问答-------------------- 一、课前说明内容:使用JavaScript操作Dom进行 DHTML开发
目标:能够使用JavaScript操作Dom实现常见的DHTML效果
二、DOM入门
DOM就是HTML页面的模型，将每个标签都作为一个对象，JavaScript通过调用
DOM中的属性方法就可以对网页中的文本框、层等元素进行编程
JavaScript->Dom就是C#->.Net Framwork
DOM 也像WinForm一样，通过事件、属性、方法进行编程
CSS+Javascript+Dom=DHTML
三、事件 （点击body时触发onmousedown事件,调用bodymousedown()方法）
<html>
<script type="text/javascript">
function bodymousedown(){
alert('bie dianwo');
alert('jiu dian ni ');
}
</script>
<body onmousedown="bodymousedown()">
</body>
</html>
四、动态设置事件
<html>
<script type="text/javascript">
function bodymousedown(){
alert('bie dianwo');
alert('jiu dian ni ');
}
function f1(){
alert('我是f1');
}
function f2(){
alert('我是f2');
}
</script>
<body onmousedown="bodymousedown1()">
<input type="button" onclick="document.ondblclick=f1" value="关联事件1"/>
<input type="button" onclick="document.ondblclick=f2" value="关联事件2"/>
</body>
</html>
五、Windows对象
windows对象代表当前浏览器窗口,使用window对象的属性或方法
可以省略window,例如window.alert('a')
1、alert('弹出对话框');
2、confirm方法,显示确定、取消对话框
3、重新导航到制定的网址 navigate("")
4、setInterval 每隔一段时间执行一次
第一个参数为代码字符串
第二个参数为间隔时间毫秒
5、clearInterval(id)
6、setTimeout("alert('5秒执行我')",5000); 多长时间后执行什么事件
7、clearTimeout
8、案例 标题栏走马灯效果--考虑向左向右
--走马灯效果
<script type="text/javascript">
function scroll(){
var title=document.title;
var firstch=title.charAt(0);
var leftstr=title.substring(1,title.length);
document.title=leftstr+firstch;
}
scroll();
setInterval("scroll()",1000);
</script>
9、定时器越跑越快是因为没有停止以前的就触发了个新的
10、将setInterval的返回值存到全局变量然后赋值给clearInterval
--定时器实例
<html>
<head>
<script type="text/javascript">
var intervalId;
function startInterval(){
intervalId=setInterval("alert('11')",2000);
}
</script>
</head>
<body>
<input type="button" value="开启" onclick="startInterval()"/>
<input type="button" value="停止" onclick="clearInterval(intervalId)"/>
</body>
</html>
八、body document对象的事件
1、body的 onload事件是网页加载完毕的时候触发
2、元素的 onload事件是元素加载完毕的时候触发
3、onunload: 网页关闭(后者离开)后触发
4、onbeforeunload:在网页准备关闭时候触发
5、window.event.returnValue (要显示警告的消息窗口)
6、ondblclick 双击
7、onkeydown 按键按下事件等
十、window对象属性
1、location.href 设置或者获取 设置相当于navigate方法
2、window.location.reload() 刷新
3、window.event 是非常重要的属性。用来获得事件时的信息，事件不局限于
window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
类似于winfrom中的e(eventArg)
altKey属性 表示发生事件时Alt键是否按下
ctrlKey shiftKey
clientX clientY 客户坐标
screenX screenY 屏幕坐标
offsetX offsetY 发生事件时鼠标相对于事件源(比如点击按钮时出发onclick)的坐标
returnValue属性 如果将returnValue设置为false,就会取消默认事件处理
(例如:在超链接的onclick事件、禁止提交等)
srcElement 获得事件的源对象
keyCode 发生时间时的案件值
十三、window对象属性2
1、screen对象 屏幕信息 screen.width 和 screen.height
2、clipboardData对象
clearData("Text")清空粘贴板
getData("Text") 获取粘贴板内容
setData("Text") 设置粘贴板
--实例用button调用
function msg()
{
var url='网址:'+location.href;
clipboardData.setData('Text',url);
alert('已经将地址放到粘贴板中,赶紧粘贴告诉好友吧'); --------------------编程问答-------------------- 是我总结的不好么 大顶贴术
--------------------编程问答-------------------- --------------------编程问答-------------------- 多谢分享 --------------------编程问答-------------------- 多谢分享 既然你在学习 请参照我的2篇推荐帖子
这是关于asp.net
http://topic.csdn.net/u/20120104/16/ffcef791-c455-4fd5-b76b-a0dc54acafb5.html
这是关于Js的
http://topic.csdn.net/u/20120308/11/d892adc8-d667-4c15-af4c-2d6f022e7693.html
另外 留Q加好友331768317
--------------------编程问答--------------------
--------------------编程问答--------------------
谢谢分享
--------------------编程问答--------------------
十四、 粘贴板处理1、oncopy 复制事件 例如: <body oncopy="alert('禁止复制'); return false;">
2、onpaste 粘贴事件 例如: <input type="text" value="" onpaste="alert('请手动输入'); return false;" />
3、oncopy="setTimeout('modifyClipboard()',100)" 用户复制动作发生0.1秒以后在去修改粘贴板中的内容
//修改剪切板中的内容 使得复制的时候添加自己的内容
function modifyClipboard() {
var txt = clipboardData.getData('Text');
clipboardData.setData('Text', clipboardData.getData('Text') + '本文来自liyangfd的博客' + location.href);
}
十五、前进后退导航
1、window.history.back() 后退 或者window.history.go(-1);
2、window.history.forward() 前进 或者window.history.go(1);
十六、Document 属性
1、document是window对象的一个属性
2、write: 想文档中写内容 必须在页面加载的时候write才会与原有的内容融合在一起,经常在广告代码、整合资源代码中使用
内容联盟、广告代码 不需要主页面的站长去维护内容，只要被嵌入的js内容提供商修改 显示的内容就改变了
3、writeIn:比write多了个回车
十七、document 方法
1、控件ID.value 这个控件不能在form中 在form中的必须为 form1.控件ID.value 因此引出
2、document.getElementById("txt1").value 取出控件的值 无论在不在form中
3、document.getElementsByName("").value 根据名字取出对象 由于RadioButton名字一致所以返回是一个数组
4、document.getElementsByTagName("").value
二十一、 parseInt 将字符串转换为数字 参数为 字符串 ,基数
二十六、Dom的动态创建
1、document.write 只能在页面加载过程中才能动态创建
2、document.createElement("input"); 参看 dom_26_Dom动态创建.aspx
二十七、innerText innerHtml (几乎所有的)
1、innerText 元素标签内容的文本表示形式
2、innerHTML 元素标签内容的 Html源代码 （可以通过innerHtml替换某个标签内的控件）
二十八、动态创建超链接
二十九、动态创建表格
1、这个程序有点问题 IE6显示不出来表格 appendChild 在IE6 和IE7不支持 在table中添加tbody
2、浏览器兼容的例子 IE6和IE7对table.appenChild("tr") 的支持和IE8不一样 所以用 insertRow 解决问题
3、FF不支持InnerText
三十三、练习无刷新评论 --------------------编程问答-------------------- 能学习，能得分，这样的好事，顶！
必须地。。。。。。 --------------------编程问答-------------------- 非常好 啊
--------------------编程问答-------------------- --------------------编程问答-------------------- 我自己顶 晚上更新内容 --------------------编程问答-------------------- --------------------编程问答-------------------- 三十八、Dom修改样式
1、文本框样式修改 失去焦点时候 body onload="initEvent()"
function initEvent(){
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
{
var input=inputs[i];
//设置inputOnBlur函数为input元素的onblur事件的响应函数
input.onblur=inputOnBlur;
}
}
function inputOnBlur(){
//inputOnBlur是onblur的响应函数，而不是被响应的调用函数
//所以用this来取得发生事件控件的对象
if(this.value.length<=0) //焦点失去的时候检查数据
this.style.background="red";
else
this.style.background="white";
}
三十九、评分控件练习
<script type="text/javascript">
function msg(){
alert('a');
}
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if (arr[i]==element)
return i;
}
return -1;
}
function initEvent(){
//alert(indexOf([1,2,3],3)); //检查indexOf函数
//给所用td添加oncick事件
var tbRating=document.getElementById("tbRating");
var tds=tbRating.getElementsByTagName("td");
for(var i=0;i<tds.length;i++)
{
var td=tds[i];
td.onclick=TdOnClick;
td.style.cursor="pointer";//鼠标变成手的样子
}
}
function TdOnClick(){
var tbRating=document.getElementById("tbRating");
var tds=tbRating.getElementsByTagName("td"); //相当于获得兄弟节点
var index=indexOf(tds,this);
for (var i=0;i<=index;i++){
var td=tds[i];
td.style.background="red";
}
for (var i=index+1;i<tds.length;i++){
var td=tds[i];
td.style.background="white";
}
}
</script>
四十一、练习
1、尽量不用全局变量,可以放到一个函数中
2、获取焦点事件 onfocus
四十二、编程控制层
1、显示隐藏层 checkbox 只有失去焦点时才触发
function toggleDiv(cb){
var div1=document.getElementById("div1");
if (cb.checked){
div1.style.display=''; //display没有值就是显示
}
else{
div1.style.display='none'; //none 为不显示
}
}
2、鼠标到超链接显示图片提示
onmouseout 鼠标离开的时候,
function divover(){
document.getElementById("baidudiv").style.display='';
}
function divout(){
document.getElementById("baidudiv").style.display='none';
}
<a href="http://baidu.com" onmouseover="divover()"
onmouseout="divout()">百度</a>
四十五、body事件范围
1、如果body不满页，则再最后一个元素的后面是没有响应的
(如果横向有内容，则横向有响应)
2、解决这个问题可以动态的添加document的事件
四十六、元素单位
1、width:20px 如果不写px在FF中识别出问题
2、parseInt 将字符串转化为数字 注意他会自动识别
例如 123aaa parseInt('123aaa',10)的结果是123
3、DIV自动加宽 div的ID为 div1
function incWidth(){
var oldwidth=document.getElementById("div1").style.width;
var newwidth=parseInt(oldwidth)+50;
document.getElementById("div1").style.width=newwidth+'px';
}
四十八、元素的编程定位
1、元素的position样式值:
static(无定位,显示在默认位置)
absolute 绝对定位
fixed (相对于窗口的固定定位,位置不会随浏览器的滚动而变化,IE6不支持)
relative (相对元素默认位置的定位)
如果要通过代码修改元素的位置一般使用absolute，修改top left
2、onmousemove 一边移动一边触发
function bodyonmousemove(){
var x=window.event.clientX;
var y=window.event.clientY;
var divFly=document.getElementById("divFly");
if (!divFly){
return;
}
divFly.style.left=x;
divFly.style.top=y;
}
doucument.onmousemove=bodyonmousemove;
//body中添加onmousemove="bodyonmousemove()
<div id="divFly" style="position:absolute">
<img src="xiyangyang.gif">
<br/>
喜洋洋
</div>
3、匿名方法格式
document.onclick=function(){
alert('a');
}
4、document.body.removeChild(div); 删除图层
动态创建的Div如果每次都隐藏造成内存溢出 所以用删除图层
动态创建的图层可以添加样式或ID通过样式或ID可以查找到刚才
添加的图层
--------------------编程问答--------------------
--------------------编程问答--------------------
--------------------编程问答--------------------
五十一、编程控制层的大小1、div中英文字母连续单词不会再中间自动换行
五十二、编程控制层常见错误
1、易错:不要写成div1.style.width=80px 无意义的 div1.style.width="80px" 80px必须为字符串
2、修改元素样式不能是this.style="background-color:red".（即使成功,也会把其他样式冲掉） 应该单独修改 div.style.background='red'
3、background-color 在这里应该写成什么?
(1)、查找手册
(2)、在页面放入一个DIV 然后在JS中用. 查找
4、input 的innerHTML没有意义
5、createElement两种用法
1、先创建在写样式
function createDiv() {
var div = document.createElement("input");
div.type = "button";
div.value = "动态按钮";
div.onclick = function() { alert('动态的按钮'); };
document.body.appendChild(div);
}
2、 直接写多个参数
var input = document.createElement("<input type='button' value='hello' onclick=alert('a') />");
document.body.appendChild(input);
注意:这个如果是A的话必须在后面加入
var link = document.createElement("<a href='http://www.baidu.com'>必读</a>");
link.innerText = "kk";
document.body.appendChild(link);
6、给关键字熟悉赋值 label.for 有问题
var label = document.createElement("label");
label.setAttribute("for", "username");
label.innerText = "用户名:";
document.body.appendChild(label);
五十四、编程控制层练习
1、网站上的登录窗口用的是个层 只不过把层隐藏了 点击登录后 把层给显示出来了
2、图片移到小图看大图 也是显示图层，只是把新图层放到鼠标的位置了 window.event.ClientX 图片的路径有相对变为绝对路径 所以先
用label.setAttribute("a1", "path"); 存起来 然后用this.getAttribute("a1")取出来
--------------------编程问答-------------------- 谢楼主分享 --------------------编程问答-------------------- 五十六、编程控制层练习点评
关键代码
<script type="text/javascript">
function IndexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element)
return i;
}
return -1;
}
function initEvent() {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = "pointer";
td.onmouseover = function() {
//不用担心和initEvent中的ration 冲突 因为是不同的函数 只是写在一起了
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
var index = IndexOf(tds, this);
for (var i = 0; i <=index; i++) {
tds[i].innerText = "★";
}
for (var i = index+1; i < tds.length; i++) {
tds[i].innerText = "☆";
}
};
}
}
</script>
五十七、编程控制层案例
//设置文本框为搜索框 （如果没有ID可以再控件中传入this）
var txt1 = document.getElementById("txt1");
txt1.value = "输入搜索关键字";
txt1.style.color = "Gray";
txt1.onfocus = function() {
if (txt1.value == '输入搜索关键字') {
txt1.value = "";
txt1.style.color = "Black";
}
};
txt1.onblur = function() {
if (txt1.value == '') {
txt1.value = '输入搜索关键字';
txt1.style.color = "Gray";
}
};
五十九、编程操作表单
1、form对象时表单的Dom对象
2、方法 submit 提交表单
3、自动提交表单 onblur="document.getElementById('form1').submit()"
应用场景为:选择 北京、天津 等进入分站 后者选择山西 立即提交出现市
4、提交时候可以做个校验 ,如果不正确 return false; 则不提交
<form id="form1" runat="server" action="ok.aspx" onsubmit="if(document.getElementById('username').value=='') {alert('姓名不能为空');return false;}">
<div>
<input type="text" id="username" />
<input type="submit" />
<%-- 下面这种方式不会触发onsubmit事件--%>
<input type="button" value="button 提交" onclick="document.getElementById('form1').submit()" />
<input type="button" value="按钮1" onclick="alert('点我,我是button1')" id="btn1" />
<input type="button" value="按钮2" onclick="document.getElementById('btn1').click()" />
</div>
</form>
六十、不同浏览器的差异(*)
1、不同浏览器对DOM支持的方法不一样
(1)、获取网页中哪个元素使用了哪个事件,IE是srcElement,在fireFox 使用targer
(2)、使用DOM获取网页标签元素内文本 IE是innerText ,在fireFox 使用textContent
(3)、动态为网页或元素绑定事件 IE是attachEvent, fireFox 使用addEventListener
2、不同的浏览器对CSS支持也不一样的 哀悼网页使用的CSS只有IE支持 FF不支持
3、JQuery之类的框架进行了封装,将不同的浏览器差异帮开发人员处理了,开发人员只要调用JQuery的方法
JQuery会帮助在不同浏览器中进行翻译
六十一、JS中的正则表达式
1、JavaScript 中创建正则表达式类的方法
var regex=new RegExp("\\d{5}") \d 代表数字 {5} 代表5个数字
或者 var regex=/\d{5}/ 连个斜线加正则表达式 类似C# @
2、RegExp对象方法
(1)、test(str)判断str是否满足正则表达式,相当于IsMatch
var regex=/.+@.+/; //.代表任意字符 + 代表1到多个字符
(2)、exec(str) 进行搜索匹配 返回值为匹配结果
(3)、compile编译表达式、提高运行速度
3、string 的正则表达式方法
String对象中提供了一些与正则表达式相关的方法,相当于对于RegExp类的包装,简化调用
match(regexp),相当于调用exec
var s = "liyangfd@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + "服务器:"+RegExp.$2);
六十二、回车实现Tab跳转
1、响应文本框的onKeyDown事件
2、window.event.keyCode获得用户点击的keyCode
3、由于事件冒泡 所以可以监听外层的onKeyDown事件
4、if(window.event.keyCode==13) {window.event.keyCode=9} 只有少数的键可以替换，大部分不行有权限问题
keyCode
ascii码说明
8 退格键 46 delete
37-40 方向键
48-57 小键盘的数字
96-105 主键盘的数字
110、190小键盘区和主键盘区的小数点
189、109小键盘区和主键盘区的负号
9 tab键
13 回车
5、财务软件要求
金额框不能使用中文输入法 style="ime-mode:disabled" IE有效 禁用输入法
不能输入非数字 监听onKeyDown
((k == 9) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k == 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
焦点在文本框中时文本框左对齐，离开后使用右对齐 this.style.textAlign='left'
6、replace 只能替换第一个符合的值
例如
var str = "123,345,456,789";
alert(str.replace(',', '')); 结果为123345,456,789
用正则可以喜欢全部 /,/代表替换的是, g表示替换所有
var str = "123,345,456,789";
alert(str.replace( /,/g, '')); 结果为123345,456,789
关键代码
function isVaildNum(ch) {
var k = ch;
return ((k == 9) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 110) || (k == 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
}
function numKeyDown() {
var k = window.event.keyCode;
//判断K 是否是合法的ascii
return isVaildNum(k);
}
function numPaste() {
var text = clipboardData.getData('Text');
for (var i = 0; i < text.length; i++) {
var asc = text.charAt(); //"3" charCodeAt 去到得是AscII码
asc = text.charCodeAt(i);
if (isVaildNum(asc)) {
}
else {
return false;
}
}
return true;
}
<input type="text" id="txtMoney" style="ime-mode:disabled" onkeydown= "return numKeyDown()" onpaste="return numPaste()" />
六十六、练习省市
multiple="multiple" size="10" 多选和listBox风格
option 的selected属性判断是否选中
<script type="text/javascript">
var data = { '山西': ['太原', '运城', '临汾'], "河南": ["郑州", "洛阳", "三门峡"], "山东": ["济南", "青岛", "廊坊"] };
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
//alert(city.childNodes.length);
//方法1 清除旧的列表 如果从前往后删除 每次都有漏网之鱼
for (var i = 0; i < city.childNodes.length; i++) {
var option = city.childNodes[i];
city.removeChild(option);
i--;
}
for (var i = city.childNodes.length - 1; i >= 0; i--) {
var option = city.childNodes[i];
city.removeChild(option);
}
//可以清除
//city.options.length = 0;
//也可以每次都删除第0个
var provName = prov.value;
if (provName == "none")
return;
var citys = data[provName]; //取出来的呢荣 ['太原', '运城', '临汾']
for (var i = 0; i < citys.length; i++) {
var option = document.createElement("option");
option.value = citys[i];
option.innerText = citys[i];
city.appendChild(option);
}
}
</script>
<div>
<label for="prov">
省</label>
<select id="prov" onchange="provChange()">
<option value="none">请选择省 </option>
</select>
<br />
<label for="city">
市</label>
<select id="city">
</select>
</div>
六十七、歌曲全选 不选 反选
<script type="text/javascript">
//flag 传入checked 全选 ''全不选 3 反选
function selAll(flag) {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input;
input = inputs[i];
//说明是反选
if (flag == 3) {
input.checked = !input.checked;
}
else {
if (input.type == "checkbox") {
input.checked = flag;
}
}
}
}
</script>
权限选择实例
function moveSelected(selectSrc, selectDest) {
//便利源
for (var i = 0; i < selectSrc.childNodes.length; i++) {
var option = selectSrc.childNodes[i];
if (option.selected == true) {
option.selected = false;
selectSrc.removeChild(option);
selectDest.appendChild(option);
}
}
}
布局最好用CSS float --------------------编程问答-------------------- 好多朋友都这样做，自己学习新东西的时候，写成日志，一来是为了备忘，而来学习的时候有心得什么的与大家分享，好习惯。 --------------------编程问答-------------------- 支持一下.... --------------------编程问答-------------------- 顶起 直接下载省好多的事 --------------------编程问答-------------------- 感谢分享。
收藏学习！ --------------------编程问答-------------------- 好长呀，整理个目录吧！ --------------------编程问答-------------------- 顶一个，很有用 --------------------编程问答--------------------
//楼主，你至少应该把代码放到code section里
补充：.NET技术 , ASP.NET
