jquery学习笔记2
1.点击时文字消失,失去焦点时文字再出现
<input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">
2.鼠标移入移出时颜色变化
<input type="submit" value="找吧" name="B1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" class="button">
3.使窗口变成指定的大小 <script> window.resizeTo(300,283); </script>
4.使文字上下滚动 <marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()'
height=60> <!-- head_scrolltext --> <tr> <td> 共和国 </table> <!-- end head_scrolltext --> </marquee>
5.可以点击文字实现radio选项的选定 <input type="radio" name="regtype" value="A03" id="A03"> <label for="A03"> 情侣 : 一次注册两个帐户</label>
6.线型输入框 <input type="text" size="12" value="关键字" onFocus=this.select() onMouseOver=this.focus() class="line">
7.可以根据网页上的选项来确定class
<input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" class="style1">
8.可以直接写html语言 document.write("");
9.改变下拉框的颜色 <select name="classid"
onChange="changelocation(document.myform.classid.options[document.myform.classid.selectedIndex].value)"
size="1" style="color:#008080;font-size: 9pt">
10.转至目标URL window.location="http://guoguo"
转向指定网页 document.location="http://ww"或者document.location.assign("http://guoguo.com")
11.定时执行某段程序 setTimeout("change_color()",600);
12.双击网页自动跑 <SCRIPT LANGUAGE="JavaScript"> var currentpos,timer; function initialize() { timer=setInterval("scrollwindow()",1); } function sc() { clearInterval(timer); } function scrollwindow() { currentpos=document.body.scrollTop; window.scroll(0,++currentpos); if (currentpos != document.body.scrollTop) sc(); } document.onmousedown=sc document.ondblclick=initialize </SCRIPT>//
13.后退 <INPUT TYPE="button" onclick=window.history.back() value=back>
前进 <INPUT TYPE="button" onclick=window.history.forward() value=forward>
14.刷新 <INPUT TYPE="button" onclick=document.location.reload() value=reload>
15.在网页上显示实时时间 <SCRIPT LANGUAGE="JavaScript"> var clock_id; window.onload=function() { clock_id=setInterval("document.form1.txtclock.value=(new Date);",1000) } </SCRIPT>//
16.可以下载文件 document.location.href="目标文件地址"//
17.新建frame
<a href="javascript:newframe('http://www.163.net/help/a_little/index.html','http://www.163.net/help/a_little
/a_13.html')"><img alt=帮助 border=0 src="http://bjpic.163.net/images/mail/button-help.gif"></a>
18.同时按下CTRL和Q键 document.onkeydown=function() { if(event.ctrlKey&&event.keyCode==81) {alert(1)} }//
19.以下是一个完整的显示hint的代码,其思想是当鼠标停留是将div中的内容显示在鼠标出,当鼠标移出后在将该div隐藏掉
<style> #hint{ width:198px; border:1px solid #000000; background:#99ff33; position:absolute; z-index:9; padding:6px; line-height:17px; text-align:left; top: 1520px; } </style>
<SCRIPT LANGUAGE="JavaScript">
function showme() { var oSon=window.document.getElementById("hint"); if (oSon==null) return; with (oSon) { innerText=guoguo.value; style.display="block"; style.pixelLeft=window.event.clientX+window.document.body.scrollLeft+6; style.pixelTop=window.event.clientY+window.document.body.scrollTop+9; } }
function hidme() { var oSon=window.document.getElementById("hint"); if (oSon==null) return; oSon.style.display="none"; }
</SCRIPT>
<text id=guoguo value=ga> <a href=# onmouseover=showme() onmouseout=hidme() onmousemove=showme() son=hint>dfdfd</a> <div id=hint style="display:none"></div>
20.弹出窗口 方法一:<body onload="openwen()"> 浏览器读页面时弹出窗口; 方法二:<body onunload="openwen()"> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:<a href="#" onclick="openwin()">打开一个窗口</a> 方法四:用一个按钮调用:<input type="button" onclick="openwin()" value="打开窗口"> 何时装载script
21.vbsscript确定框 <script language="VBScript"> <!-- MsgBox "确定删除吗?", 4 //--> </script>//
23.最小化窗口 window.blur()//
24.文档的路径 document.URL//
25.设置为主页 function makeHome(){ netscape.security.PrivilegeManager.enablePrivilege("UniversalPreferencesWrite"); navigator.preference("browser.startup.homepage", location.href); }//
26.设置为收藏 function addFav(){ if(ie) window.external.AddFavorite(location.href,'WWW.OGRISH.COM : GROTESQUE MOVIES AND PICTURES'); if(ns) alert("Thanks for the bookmark!/n/nNetscape users click OK then press CTRL-D"); }//
27.显示有模式的有页面的弹出窗口 function setbgcolor_onclick() { var color = showModalDialog("/mailpage/compose/colorsel.html",0,"help=0"); if (color != null) { document.compose.bgcolor.value = color; } }//
28.事件禁止起泡 event.cancelBubble = true//
29.禁止在输入框打开输入法 <input style="ime-mode: disabled">//
30.屏蔽汉字和空格 <input name="txt"><input type="submit" onClick="alert(!/[^ -}]|/s/.test(txt.value))">//
31.用javascript判断文件是否存在 function Exists(filespec) { if (filespec) { var fso; fso = new ActiveXObject("Scripting.FileSystemObject"); alert(fso.FileExists(filespec)); } } 选择图片 <input type=file name=f1><p> <input type="submit" onClick="Exists(f1.value)">//
32.获得当前的文本框选中的文字 <input onmouseup="alert(document.selection.createRange().text)" value=123>//
33.获得当前的行是表格的第几行 <script> function getrow(obj) { if(event.srcElement.tagName=="TD"){ curRow=event.srcElement.parentElement; alert("这是第"+(curRow.rowIndex+1)+"行");} } </script>
34.删除表格某行,xx表示某行,下标从0开始计算 document.all.myTable.deleteRow(xx)//
35.动态的向表格中添加行 <table id="t1" border="1"> </table> <script language="JavaScript"> function add() { t1.insertRow().insertCell().innerHTML = '<input name="test'+t1.rows.length+'">'; }//
36.打开C盘 <form action="file:///c|/"><input type="submit" value="c:/ drive"></form>//
37.设置表格中的内容 tbl.rows[0].cells[1].innerText=document.form.text1.value;//
38.向新打开的网页上写内容 newwin=window.open('about:blank','','top=10'); newwin.document.write('');//
39.返回 javascript:history.go(-2);//
40.框架中调用父窗口的函数 <INPUT TYPE='button' onclick='parent.test();' value='调用parent窗口的函数'>//
41.交换节点 <table width=200 height=200 border> <tr><td id=c1>CELL_1</td></tr> <tr><td id=c2>CELL_2</td></tr> </table> <br> <input type="button" value="swap row" onclick="c1.swapNode(c2)">//
删除节点 <table width=200 height=200 border> <tr id=trall><td id=c1>CELL_1</td></tr> <tr><td id=c2>CELL_2</td></tr> </table> <br> <input type="button" value="swap row" onclick="trall.removeNode(c2)">//
添加节点 addNode()//
42.格式化数字 function format_number(str,digit) { if(isNaN(str)) { alert("您传入的值不是数字!"); return 0; } else if(Math.round(digit)!=digit) { alert("您输入的小数位数不是整数!"); return 0; } else return Math.round(parseFloat(str)*Math.pow(10,digit))/Math.pow(10,digit); }
43.回车按钮转化为tab按钮 if(event.keyCode==13) event.keyCode=9; //将
44.滚动条滚动 <button onclick="text1.scrollTop=text1.scrollHeight">Scroll</button><br> <textarea id="text1" cols=50 rows=10> 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </textarea>//
45.让下拉框自动下拉 <select onmouseover="javascript:this.size=this.length" onmouseout="javascript:this.size=1"> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> //
46.点击图片,图片停止 <a href="javascript:"><img src="http://www.51js.com/images/51js/red_forum.gif" border="0"></a>//
47.弹出鼠标所在处的链结地址 <body onmouseover="if (event.srcElement.tagName=='A')alert(event.srcElement.href)"><a
href="http://51js.com/viewthread.php?tid=13589" >dddd</a><input>//
48.创建具有某些属性的对象 var myObject = new Object(); myObject.name = "James"; myObject.age = "22"; myObject.phone = "555 1234";//
49.枚举(循环)对象的所有属性 for (var a in myObject) { // 显示 "The property 'name' is James",等等。 window.alert("The property '" + a + "' is " + myObject[a]); }//
50.判断一个数字是否是整数 var a=23.2; alert(a%1==1)//
51.根据标签获得一组对象 var coll = document.all.tags("DIV"); if (coll!=null) { for (i=0; i<coll.length; i++) ... }//
var lis=document.getElementById("res").getElementsByTagName("a");
for(var i=0;i<lis.length;i++){
lis[i].ondblclick=function(){
...
}
}
52.不通过form,直接通过名字引用对象 <INPUT TYPE="text" NAME="gg" value=aaaaa> <SCRIPT LANGUAGE="JavaScript"> <!-- alert(document.all.gg.value) //--> </SCRIPT>//
53.使鼠标滚轮失效 function document.onmousewheel() { return false; }//
54.向下拉框指定位置添加项目 var op = document.createElement("OPTION"); document.all.selected_items.children(index).insertAdjacentElement("BeforeBegin",op); op.text = document.all.all_items[i].text; op.value = document.all.all_items[i].value;//
55.判断一个窗口是否已经打开,如果已经打开,则关闭之 var a; if(a) a.close(); else a=window.open('','','');//
56.动态修改CSS的另一种方式 this.runtimeStyle.cssText = "color:#990000;border:1px solid #cccccc";//
57.显示带边框的集 <form><fieldset><legend>健康信息</legend> 身高:<input type="text" />体重:<input type="text" /></fieldset></form>
58.【工具栏】中的命令的实现
1)、〖前进〗命令的实现 [格式]history.go(1) 或 history.forward() [说明]浏览器打开后一个页面。 [举例]在<body></body>之间加入: <a href="###" onclick=history.go(1)>前进</a> 或加入: <a href="###" onclick=history.forward()>前进</a>
2)、〖后退〗命令的实现 [格式]:history.go(-1) 或 history.back() [说明]浏览器返回上一个已浏览的页面。 [举例]在<body></body>之间加入: <a href="###" onclick=history.go(-1)>后退</a> 或加入: <a href="###" onclick=history.back()>后退</a>
3)、〖刷新〗命令的实现 [格式]:document.reload() 或 history.go(0) [说明]浏览器重新打开本页。 [举例]在<body></body>之间加入: <a href="###" onclick=location.reload()>刷新</a> 或加入: <a href="###" onclick=history.go(0)>刷新</a>
4)、〖定时关闭本窗口〗命令的实现 [格式]:settimeout(window.close(),关闭的时间) [说明]将关闭本窗口。 [举例]在<body></body>之间加入: <a href="###" onclick=settimeout(window.close(),3000)>3秒关闭本窗口</a>
59.给下拉框分组 <SELECT> <OPTGROUP LABEL="碱性金属"> <OPTION>锂 (Li)</OPTION> <OPTION>纳 (Na)</OPTION> <OPTION>钾 (K)</OPTION> </OPTGROUP> <OPTGROUP LABEL="卤素"> <OPTION>氟 (F)</OPTION> <OPTION>氯 (Cl)</OPTION> <OPTION>溴 (Br)</OPTION> </OPTGROUP> </SELECT>//
60.模式窗口 父窗口 var url="aaa.jsp"; var data=showModalDialog(url,null,"dialogHeight:400px;dialogHeight:600px;center:yes;help:No;status:no;resizab
le:Yes;edge:sunken"); if(data) alert(data.value);
子窗口 var data=new Object(); data.value1="china"; window.returnValue=data; window.close();
61.打开新的窗口并将新打开的窗口设置为活动窗口 var newWin=window.open("xxxx"); newWin.focus();//
62.JS中的窗口重定向: window.navigate("http://www.sina.com.cn");//
63.判断字符是否匹配. string.match(regExpression)//
64.放置在页面的最右边 <input type="text" value='bu2' style="float:right">//
65.能输入的下拉框 <span> <input name="Department1" id="Department1" style=" border-right:0;width:130" autocomplete="off"> <span style="width:150;overflow:hidden"> <select style="width:150;margin-left:-130" onChange="Department1.value=value"> <option value=""></option> <option value="asdfasfadf">asdfasfadf</option> <option value="546546">546546</option></select> //
67.图片加载失败时重新加载图片 <img src="aa.gif" onerror="this.src='aa.gif'">//
68.自动关闭网页 <script LANGUAGE="javascript"> <!-- setTimeout('window.close();', 10000); //60秒后关闭 // --> </script> <p align="center">本页10秒后自动关闭,请注意刷新页面</p>