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 > 浏览器读页面时弹出窗口; 方法二:<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>

时间: 2024-09-29 23:31:16

jquery学习笔记2的相关文章

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习笔记--JqGrid相关操作 方法列表(上)

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

jQuery学习笔记之过滤器三(向上查找兄弟元素、向下查找兄弟元素)

向上查找兄弟元素的方法:prev方法.prevAll方法.prevUntil方法 向下查找兄弟元素:next方法.nextAll方法.nextUntil方法 向上查找兄弟元素 1.prev方法 2.prevAll方法 3.prevUntil方法 向下查找兄弟元素 1.next方法 2.nextAll方法 3.nextUntil方法 jQuery学习笔记之过滤器三(向上查找兄弟元素.向下查找兄弟元素)

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

jQuery学习笔记(2014年8月3日)事件委派

jQuery中的事件委托是通过 closest() 来完成的. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 参考资料: jQuery 遍历 - closest() 方法http://www.w3school.com.cn/jquery/traversing_closest.asp jQuery学习笔记(2014年8月3日)事件委派

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery 学习笔记

jQuery 学习笔记 position()是相对父元素的,有top.left两个属性. offset()是相对于document的当前坐标. offsetParent()是获取离元素最近的有定位的父元素. .closet() 获取最近的匹配选择器的父元素. off()移除一个事件处理函数,要删除委托事件需提供对应的选择器. detch()和remove()一样,但是不会移除绑定数据,以便以后添加.empty()是清空该元素的所有子元素.

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ