JS用法大全,细节采撷

2019-11-04 11:19 来源:未知

细节1………………………………………………………………………………

**1.document.write(""); 输出语句 **
**2.JS中的注释为// **
**3.守旧的HTML文书档案顺序是:document->html->(head,body) **
**4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) **
**5.获得表单1月素的称谓和值:document.getElementById("表单桐月素的ID号").name(或value) **
**6.二个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase(); **
**7.JS中的值类型:String,Number,Boolean,Null,Object,Function **
**8.JS中的字符型调换来数值型:parseInt(),parseFloat() **
**9.JS中的数字调换来字符型:(""+变量) **
**10.JS中的取字符串长度是:(length) **
**11.JS中的字符与字符相连接使用+号. **
**12.JS中的相比较操作符有:==等于,!=不等于,>,>=,<.<= **
**13.JS中注明变量使用:var来拓宽表明 **
**14.JS中的推断语句结构:if(condition){}else{} **
**15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop} **
**16.循环间断的通令是:break **
**17.JS中的函数定义:function functionName([parameter],...){statement[s]} **
**18.当文本中冒出三个form表单时.能够用document.forms[0],document.forms[1]来代替. **
**19.窗口:展开窗口window.open(), 关闭三个窗口:window.close(), 窗口本人:self **
**20.状态栏的装置:window.status="字符"; **
**21.弹出提醒新闻:window.alert("字符"); **
**22.弹出确认框:window.confirm(); **
**23.弹出输入提醒框:window.prompt(); **
**24.点名当前呈现链接的职责:window.location.href="UEscortL" **
**25.收取窗体中的全数表单的数额:document.forms.length **
**26.关闭文书档案的输出流:document.close(); **
**27.字符串追加连接符:+= **
**28.创办二个文书档案成分:document.createElement(),document.createTextNode() **
**29.得到成分的措施:document.getElementById() **
**30.装置表单中有着文本型的积极分子的值为空: **
**var form = window.document.forms[0] **
**for (var i = 0; i<form.elements.length;i++){ **
** if (form.elements.type == "text"){ **
** form.elements.value = ""; **
** } **
**} **
**31.复选按键在JS中剖断是还是不是选中:document.forms[0].checkThis.checked (checked属性代表为是还是不是选中再次回到TRUE或FALSE) **
**32.单选开关组(单选开关的称谓必需大器晚成律):取单选按键组的长度document.forms[0].groupName.length **
**33.单选按钮组判别是不是被选中也是用checked. **
**34.下拉列表框的值:document.forms[0].selectName.options[n].value (n临时用下拉列表框名称加上.selectedIndex来明确被选中的值) **
**35.字符串的定义:var myString = new String("This is lightsword"); **
**36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase(); **
**37.再次来到字符串2在字符串第11中学冒出的岗位:String1.indexOf("String2")!=-1则证明没找到. **
**38.取字符串中内定地点的叁个字符:StringA.charAt(9); **
**39.收取字符串中钦点起源和终点的子字符串:stringA.substring(2,6); **
*40.数学函数:Math.PI(重回圆周率),Math.SQRT2(重回开药方),Math.max(value1,value2)重返七个数中的最在值,Math.pow(value1,10)重回value1的十四回方,Math.round(value1)四舍五入函数,Math.floor(Math.random()(n+1))再次回到随机数 **
**41.定义日期型变量:var today = new Date(); **
**42.日期函数列表:dateObj.getTime()得届时间,dateObj.getYear()获得年份,dateObj.getFullYear()拿到叁人的年度,dateObj.getMonth()得到月份,dateObj.getDate()拿到日,dateObj.getDay()获得日期几,dateObj.getHours()获得小时,dateObj.getMinutes()获得分,dateObj.getSeconds()获得秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds(val)设置秒 [专心:此日期时间从0开始计] **
**43.FRAME的表示方法: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName **
**44.parent意味着阿爸对象,top代表顶部对象 **
**45.张开子窗口的父窗口为:opener **
**46.意味着近些日子所属的岗位:this **
**47.当在超链接中调用JS函数时用:(JavaScript :)来开端前面加函数名 **
**48.在老的浏览器中不推行此JS: **
**49.引用叁个文件式的JS:<script type="text/javascript" src="aaa.js"></script> **
**50.钦命在不援助脚本的浏览器显示的HTML:<noscript></noscript> **
**51.当超链和onCLICK事件都有的时候,则老版本的浏览器转向a.html,不然转向b.html.例:<a href="a.html" onclick="location.href=’b.html’;return false">dfsadf</a> **
**52.JS的内建指标有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,UPAJEROIError **
**53.JS中的换行:n **
**54.窗口全屏大小:<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script> **
**55.JS中的all代表其下层的上上下下要素 **
**56.JS中的主旨顺序:document.getElementByid("表单成分").tabIndex = 1 **
**57.innerHTML的值是表单元素的值:如<p id="para">"how are <em>you</em>"</p>,则innerHTML的值就是:how are <em>you</em> **
**58.innerTEXT的值和地点的同样,只不过不会把<em>这种标识呈现出来. **
**59.contentEditable可设置成分是还是不是可被改换,isContentEditable再次来到是不是可改革的状态. **
**60.isDisabled推断是不是为禁绝状态.disabled设置禁绝状态 **
**61.length得到长度,再次来到整型数值 **
**62.addBehavior()是生机勃勃种JS调用的外表函数文件其扩大名称为.htc **
**63.window.focus()使近些日子的窗口在颇负窗口以前. **
**64.blur()指失去宗旨.与FOCUS()相反. **
**65.select()指成分为当选状态. **
**66.幸免客商对文本框中输入文本:onfocus="this.blur()" **
**67.抽取该因素在页面中冒出的数额:document.all.tags("div(或任何HTML标志符)").length **
**68.JS中分为二种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless() **
**69.状态栏文字的装置:window.status=’文字’,暗许的事态栏文字设置:window.defaultStatus = ’文字.’; **
**70.增加到收藏夹:external.AddFavorite("http://www.dannyg.com";;,"jaskdlf"); **
**71.JS中蒙受脚本错误时不做任何操作:window.onerror = doNothing; 内定错误句柄的语法为:window.onerror = handleError; **
**72.JS中钦定当前打开窗口的父窗口:window.opener,襄助opener.opener...的万户千门继续. **
**73.JS中的self指的是时下的窗口 **
**74.JS中状态栏展现内容:window.status="内容" **
**75.JS中的top指的是框架聚集最顶层的框架 **
**76.JS中关闭当前的窗口:window.close(); **
**77.JS中建议是不是承认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");} **
**78.JS中的窗口重定向:window.navigate("http://www.sina.com.cn";;); **
**79.JS中的打字与印刷:window.print() **
**80.JS中的提示输入框:window.prompt("message","defaultReply"); **
**81.JS中的窗口滚动条:window.scroll(x,y) **
**82.JS中的窗口滚动到岗位:window.scrollby **
**83.JS中装置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout **
**84.JS中的模态显示在IE4+行,在NN中丰裕:showModalDialog("U牧马人L"[,arguments][,features]); **
**85.JS中的退出以前运用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.onbeforeunload=verifyClose; **
**86.当窗体第一遍调用时使用的文本句柄:onload() **
**87.当窗体关闭时调用的文书句柄:onunload() **
**88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname(,port(80),host(www.example.com:80),pathname()"/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的消息) **
**89.window.location.reload()刷新当前页面. **
**90.window.history.back()重临上意气风发页,window.history.forward()重回下风姿浪漫页,window.history.Go(重临第几页,也能够动用访谈过的UEnclaveL) **
**91.document.write()不换行的出口,document.writeln()换行输出 **
**92.document.body.noWrap=true;制止链接文字折行. **
**93.变量名.charAt(第肆个人),取该变量的第四个人的字符. **
**94."abc".charCodeAt(第多少个),重临第多少个字符的ASCii码值. **
**95.字符串连接:string.concat(string2),或用+=举办连接 **
**96.变量.indexOf("字符",发轫地方),重返第一个冒出之处(从0伊始思谋) **
**97.string.lastIndexOf(searchString[,startIndex])最终贰遍现身之处. **
**98.string.match(regExpression),推断字符是或不是相配. **
**99.string.replace(regExpression,replaceString)替换现存字符串. **
**100.string.split(分隔符)重回多个数组存款和储蓄值. **
**101.string.substr(start[,length])取从第二人到钦定长度的字符串. **
**102.string.toLowerCase()使字符串全部制校正成小写. **
**103.string.toUpperCase()使一切字符变为大写. **
**104.parseInt(string[,radix(代表进制)])强制调换来整型. **
**105.parseFloat(string[,radix])强制转变来浮点型. **
**106.isNaN(变量):测试是还是不是为数值型. **
107.定义常量的首要字:const,定义变量的首要字:var

意气风发、当文字与图片在风流浪漫行,供给将文字与图片底对齐,需求这么写:

108.getElementsByclassName,获取成分class名称.

JS之Window对象
后生可畏.表明:他是JS中最大的靶子,它描述的是四个浏览器窗口,经常要援引他的质量和办法时,不必要用“Window.XXX”这种格局,而是一贯选拔“XXX”。多个框架页面也是二个窗口。
二.Window窗口对象犹如下属性。
1.name 窗口的称谓,由张开它的三番五次(<a target="...">卡塔 尔(阿拉伯语:قطر‎或框架页(<frame name="...">卡塔尔或某三个窗口调用的 open() 方法(见下卡塔 尔(阿拉伯语:قطر‎决定。平日我们不会用那么些天性。
2.status 指窗口下方的“状态栏”所体现的剧情。通过对 status 赋值,能够校正状态栏的来得。
3.opener 用法:window.opener;再次回到展开本窗口的窗口对象。注意:重回的是叁个窗口对象。若是窗口不是由别的窗口展开的,在 Netscape 中那脾性子重返 null;在 IE 中回到“未定义”(undefined卡塔尔国。undefined 在一定水平上非常null。注意:undefined 不是 JavaScript 常数,就算你企图利用“undefined”,这就着实回到“未定义”了。 4.self 指窗口本人,它回到的指标跟 window 对象是一模二样的。最常用的是“self.close()”,放在<a>标识中:“<a href="javascript:self.close()">关闭窗口</a>”。 5.parent 再次回到窗口所属的框架页对象。
6.top 重临侵占整个浏览器窗口的最上部的框架页对象。
三.Window窗口对象有如下方法。
1.open(<UQashqaiL字符串>, <窗口名称字符串>, <参数字符串>);
说明:
<U传祺L字符串>:描述所张开的窗口张开哪叁个网页。倘若留空(''卡塔尔,则不张开放肆网页。 <窗口名称字符串>:描述被张开的窗口的名目(window.name卡塔尔国,能够使用'_top'、'_blank'等内建名称。这里的称号跟“<a href="..." target="...">”里的“target”属性是生龙活虎律的。 <参数字符串>:描述被张开的窗口的样貌。要是只要求开拓贰个普通窗口,该字符串留空(''卡塔尔国,假若要钦点样貌,就在字符串里写上生机勃勃到多少个参数,参数之间用逗号隔开分离。例:张开叁个400 x 100 的明窗净几的窗口:open('','_blank','width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no, scrollbars=yes,resizable=yes') open()的参数
top=# 窗口顶端离开荧屏顶端的像素数 left=# 窗口左端离开显示器左端的像素数 width=# 窗口的大幅度 height=# 窗口的莫斯中国科学技术大学学 menubar=... 窗口有未有菜单,取值yes或no toolbar=... 窗口有未有工具条,取值yes或no location=... 窗口有未有地址栏,取值yes或no directories=... 窗口有未有连接区,取值yes或no scrollbars=... 窗口有未有滚动条,取值yes或no status=... 窗口有未有状态栏,取值yes或no resizable=... 窗口给不给调度大小,取值yes或no 注意:open() 方法有重回值,再次回到的便是它展开的窗口对象。举例
var newWindow = open('','_blank');
这么把一个新窗口赋值到“newWindow”变量中,未来通过“newWindow”变量就可以垄断窗口了。close() 关闭三个已开拓的窗口。
blur() 使关节从窗口移走,窗口变为“非活动窗口”。 focus() 是窗口拿到核心,变为“活动窗口”。可是在 Windows 98,该方法只好使窗口的标题栏和职分栏上的相应按键闪烁,提醒客商该窗口正在试图拿走宗旨。 scrollTo() 用法:[<窗口对象>.]scrollTo(x, y);使窗口滚动,使文书档案从左上角数起的(x, y)点滚动到窗口的左上角。 scrollBy() 用法:[<窗口对象>.]scrollBy(deltaX, deltaY);使窗口向右滚动 deltaX 像素,向下滚动 deltaY 像素。借使取负值,则向相反的大势滚动。 resizeTo() 用法:[<窗口对象>.]resizeTo(width, height);使窗口调解大小到宽 width 像素,高 height 像素。 resizeBy() 用法:[<窗口对象>.]resizeBy(deltaWidth, deltaHeight);使窗口调解大小,宽增大 deltaWidth 像素,高增大 deltaHeight 像素。假诺取负值,则减少。 alert() 用法:alert(<字符串>);弹出多个只包括“分明”按键的对话框,呈现<字符串>的内容,整个文书档案的读取、Script 的周转都会停顿,直到客户按下“鲜明”。 confirm() 用法:confirm(<字符串>);弹出三个包蕴“鲜明”和“打消”按键的对话框,呈现<字符串>的开始和结果,供给顾客做出采用,整个文书档案的读取、Script 的运营都会搁浅。如若客商按下“明确”,则赶回 true 值,倘诺按下“撤消”,则赶回 false 值。 prompt() 用法:prompt(<字符串>[, <初始值>]);弹出多个饱含“确认”“撤消”和贰个文本框的对话框,展现<字符串>的剧情,供给客商在文本框输入一些数码,整个文书档案的读取、Script 的运维都会搁浅。固然顾客按下“确认”,则赶回文本框里本来就有个别内容,假如客商按下“废除”,则赶回 null 值。假使钦命<初叶值>,则文本框里会有暗许值。 四.Window窗口对象犹如下事件:window.onload;发生在文书档案全体下载完毕的时候。全体下载完成意味着不但 HTML 文件,况兼满含的图纸,插件,控件,小程序等全体内容都下载实现。工夫件是 window 的平地风波,可是在 HTML 中钦命事件管理程序的时候,大家是把它写在<body>标识中的。window.onunload;产生在客户退出文书档案(或许关闭窗口,可能到另二个页面去卡塔尔的时候。与 onload 同样,要写在 HTML 中就写到<body>标志里。

window.onresize;产生在窗口被调度大小的时候。 window.onblur;爆发在窗口失去核心的时候。 window.onfocus;发生在窗口获得难题的时候。 window.onerror;发生在错误产生的时候。它的事件管理程序平时就称为“错误管理程序”(Error Handler),用来管理错误。上边已经介绍过,要不经意任何错误,就利用: function ignoreError() { return true;}window.onerror = ignoreError;
****============================================================
js获取url参数值

主意大器晚成:正则解析法
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
调用:
alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

方法二:
<span style="font-size: 16px;"><Script language="javascript">
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
</Script></span>
这么调用:

<Script language="javascript">
var Request = new Object();
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request['参数1'];
参数2 = Request['参数2'];
参数3 = Request['参数3'];
参数N = Request['参数N'];

<li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li>

</Script>

JS获取显示屏尺寸

<html>
<script>
function a(){
document.write(
"显示器分辨率为:"+screen.width+""+screen.height
+"<br />"+
"荧屏可用大小:"+screen.availWidth+"
"+screen.availHeight
+"<br />"+
"网页可以知道区域宽:"+document.body.clientWidth
+"<br />"+
"网页可以知道区域高:"+document.body.clientHeight
+"<br />"+
"网页可知区域宽(包蕴边线的宽):"+document.body.offsetWidth
+"<br />"+
"网页可知区域高(包蕴边线的宽):"+document.body.offsetHeight
+"<br />"+
"网页正文全文宽:"+document.body.scrollWidth
+"<br />"+
"网页正文全文高:"+document.body.scrollHeight
+"<br />"+
"网页被卷去的高:"+document.body.scrollTop
+"<br />"+
"网页被卷去的左:"+document.body.scrollLeft
+"<br />"+
"网页正文部分上:"+window.screenTop
+"<br />"+
"网页正文部分左:"+window.screenLeft
+"<br />"+
"显示屏分辨率的高:"+window.screen.height
+"<br />"+
"屏幕分辨率的宽:"+window.screen.width
+"<br />"+
"显示器可用职业区中度:"+window.screen.availHeight
+"<br />"+
"显示器可用职业区宽度:"+window.screen.availWidth
);
}
</script>
<body onload="a()" >
</body>

二、当文字与图片在乎气风发行,须求将文字与图片居中对齐,供给这么写:

</html>

经文的选项卡原生js代码

<script type="text/javascript">
function setContentTab(name, curr, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var cont = document.getElementById("con_" + name + "_" + i);
menu.className = i == curr ? "current" : "";
if (i == curr) {
cont.style.display = "block";
} else {
cont.style.display = "none";
}
}
}
</script>

<style type="text/css">
/全局样式/
{font-size:12px;}
body{margin:0;padding:0;background-color:#FFFFFF;font-size:12px;color:#666666;font-family:"宋体",Arial, Helvetica, sans-serif;}
a{color:#5e5e5;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/
基本航菜单*/

<li>记住密码<img src="static/img/xyx.jpg" align="middle"/></li>

menu ul{padding:0;border:0;list-style:none;line-height:150%;margin-top:0;margin-right:0;margin-bottom:0;margin-left:15px;}

三、修改IE“查看源代码”菜单展开的编辑器

menu_out{width:966px;padding-left:4px;margin:50px auto;background:url(images/menu_left.gif) no-repeat left top;}

    张开注册表编辑器,在开始-运转中输入regedit
    找到以下职分: HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"改过暗中认可的数据为"D:"Program Files"Em艾德itor"EmEditor.exe"
    切换到IE中查看源代码就足以见到成效了。
    如若View Source Editor"Editor Name项未有,可以友善新建。

menu_in{background:url(images/menu_right.gif) no-repeat right top;padding-right:4px;}

四、自动最大化窗口,在 <body> 与 </body> 之间投入:

menu{background:url(images/menu_bg.gif) repeat-x;height:73px;}

.menu_line{background:url(images/menu_line.gif) no-repeat center top;width:8px;}
.menu_line2{background:url(images/menu_line2.gif) no-repeat center top;width:15px;}

<SCRIPT language="javascript">
setTimeout('top.moveTo(0,0)',5000);
setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000);
</script>

nav{padding-left:20px;}

五、window.opener 实际上尽管用window.open张开的窗体的父窗体。

nav li{float:left;height:35px;}

比方在父窗体parentForm里面 通过 window.open("subForm.html"),那么在subform.html中 window.opener

nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(images/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}

就代表parentForm,可以由此这种办法设置父窗体的值或许调用js方法。

nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(images/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#FFFFFF;text-decoration:none;}

1,window.opener.test(); ---调用父窗体中的test()方法;

nav li .current{background-position:left 100%;}

2,如果window.opener存在,设置parentForm中stockBox的值。

nav li .current span{background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}

/子栏目/

  if (window.opener && !window.opener.closed)

menu_con{text-align:left;padding-left:20px;clear:both;}

    {

menu_con li{float:left;height:22px;margin-top:8px;}

       window.opener.document.parentForm.stockBox.value = symbol;

menu_con li a{display:block;float:left;background:url(images/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}

    }

menu_con li a span{float:left;padding:6px 10px 4px 10px;line-height:12px;background:url(images/menu_on_right2.gif) no-repeat right top;}

六、刷新页面包车型客车法门

menu_con li a:hover{text-decoration:none;background:url(images/menu_on_left2.gif) no-repeat left bottom;}

Javascript刷新页面包车型地铁措施:
1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand('Refresh')
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href

menu_con li a:hover span{background:url(images/menu_on_right2.gif) no-repeat right bottom;}

</style>

<div id="menu_out">
<div id="menu_in">
<div id="menu">
<ul id="nav">
<li><a href="#" id="one1" onmouseover="setContentTab('one',1,6)" class="current"><span>首 页</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one2" onmouseover="setContentTab('one',2,6)"><span>jQuery 特效</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one3" onmouseover="setContentTab('one',3,6)"><span>javascript特效</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one4" onmouseover="setContentTab('one',4,6)"><span>flash特效</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one5" onmouseover="setContentTab('one',5,6)"><span>div+css教程</span></a></li>
<li class="menu_line"></li>
<li><a href="#" id="one6" onmouseover="setContentTab('one',6,6)"><span>HTML5教程</span></a></li>
</ul>
<div id="menu_con">
<div id="con_one_1" style="display:block">
<ul>
<li>jsfoot 网页特效首要有jquery 特效 js特效 flash特效 div+css教程 Html5教程</li>
</ul>
</div>
<div id="con_one_2" style="display:none">
<ul>
<li><a href="#"><span>jquery图片特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery导航菜单</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery选项Carter效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery文字特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery表单特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>jquery表格特效</span></a></li>
</ul>
</div>
<div id="con_one_3" style="display:none">
<ul>
<li><a href="#"><span>js图片特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js导航菜单</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js选项Carter效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js文字特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js表单特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>js表格特效</span></a></li>
</ul>
</div>
<div id="con_one_4" style="display:none">
<ul>
<li><a href="#"><span>flash图片特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>flash导航菜单</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>flash文字特效</span></a></li>
</ul>
</div>
<div id="con_one_5" style="display:none">
<ul>
<li><a href="#"><span>div+css布局</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>div+css菜单</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>CSS3教程</span></a></li>
</ul>
</div>
<div id="con_one_6" style="display:none">
<ul>
<li><a href="#"><span>html5特效</span></a></li>
<li class="menu_line2"></li>
<li><a href="#"><span>html5图表</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

http://hi.baidu.com/guiguziws/item/03c76e80dfbdd2be4714cf95

电动刷新页面包车型大巴不二秘技:
1.页面自动刷新:把<meta http-equiv="refresh" content="20">参加<head>区域中

2.页面活动跳转:把<meta http-equiv="refresh" content="20;url=

3.js自动刷新页面
<script language="JavaScript">
function myrefresh()
{
       window.location.reload();
}
set提姆eout('myrefresh()',1000); //钦赐1秒刷新二遍
</script>

4.JS刷新框架

a)刷新包涵该框架的页面用  
<script language=JavaScript>
   parent.location.reload();
</script>  

b)子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a>   )

c)刷新另五个框架的页面
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>

七、用过CSS hack应该知道,用下划线命名是大器晚成种hack,如运用“_style”那样的命名,能够让IE外的超过百分之五十浏览器忽视这几个样式的概念,所以利用“_”做为命名时的相间符是非僧非俗的。在做CSS检查时会现身谬误提醒。

八、IE条件注释写法

<!--[if !IE]>除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 独有IE5.0能够分辨 <![endif]-->

九、CSS HACK 写法

第一种:
.div {
background:orange;
*background:green !important;
*background:blue;
}
第二种:
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三种:
#div { color: #333; }
*+html #div { color: #999; }
* html #div { color: #666; }

细节2………………………………………………………………………………

豆蔻梢头、IE6及以下不识别a 标签外的:hover伪类,在火狐,IE7里能正确到达效果,解决办法:
#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
<li></li>

二、为因素设置hasLayout

不菲IE6(或IE7卡塔 尔(英语:State of Qatar)的主题材料得以用设置hasLayout值的不二等秘书诀来解决,最简便易行的给成分设置hasLayout值的情势是给加上CSS 的height或width(当然,zoom也能够用,但那不是CSS的风姿洒脱部分)。比方设置为height:1%。要是父成分未有安装中度,那么成分的概略中度并不会改换,但是,已经持有hasLayout属性。

三、IE6下字符重复现身

   确认保障浮动成分设置了 display:inline;

   在改动成分中利用 margin-right:-3px;

四、样式优先级

1,内联样式 [1.0.0.0]
2,ID选择器 [0.1.0.0]
3,类,属性,伪类 选择器 [0.0.1.0]
4,成分标签,伪成分 选取器 [0.0.0.1]

五、二个成分垂直居中的css写法

#exm{
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    width:200px;

    height:100px;
    margin-left:-100px;
    margin-top:-52px;
}

六、zoom : normal | number
设置或探求对象的缩放比例。设置或改造三个已被递交的靶子的此属性值将以致环绕对象的源委重新流动。就算此属性不可三番一遍,不过它会潜移暗化对象的全体子对象( children )。

七、图片跟文字并列排在一条线时, 要促成图片文字垂直居中:

1> 将line-height:设置成图片的可观,大概图片父成分的高度.
2> 再将图片的CSS设置vertical-align:middle;

八、li 成分中带有 a img 成分的时候,IE6下出现空白

解决方法 豆蔻梢头

使 li 浮动,并设置 img 为块级成分

杀鸡取蛋办法 二

设置 ul 的 font-size:0;

减轻情势 三

设置 img 的 vertical-align: bottom;

一网打尽办法 四

设置 img 的 margin-bottom: -5px;

细节3………………………………………………………………………………

生机勃勃、被点击访谈过的超链接样式不在具有hover和active

   解决措施:退换CSS属性的排列顺序: L-V-H-A

二、FF下接二连三长字段不能够自动换行

   解决方法:word-wrap:break-word;overflow:hidden;

三、FF下父容器中度不能够自适应

   消除办法:肃清子成分的生成

四、IE下图片下方发生空隙

    消除办法:定义img 为display:block,或vertical-align为top/bottom/middle/text-bottom

             定义父容器的字体大小为零,font-size:0

五、IE6下转移元素和它左近的非浮动成分之间有3px空当

    解除办法:相邻的非浮动成分也设置浮动;

             浮动成分绝对IE6定义_margin-right:-3px;

六、LI内容超长后以省略号展现

    消除办法: white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

七、文本不可能垂直居中

     清除办法:行高和容器中度相等line-height=height;

八、文本输入框和周围的公文不可能对齐

     解决办法:设置文本输入框vertical-align:middle;

九、IE设置滚动条样式

     解决办法:

body{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}

十、IE6无法定义中度为1px的容器

     消亡办法:overflow:hidden

              zoom:0.8

              line-height:1px

细节4………………………………………………………………………………

风姿洒脱、让层呈现在flash之上

    肃清办法:给FLASH设置透明<param name="wmode" value="transparent" />可能<param name="wmode" value="opaque" />

二、使四个层垂直居中浏览器中

    化解办法:使用百分比相对定位,与外补丁负值的法子。

    position:absolute;
    top:50%;
    left:50%;
    margin:-100px auto auto -100px;
    width:200px;
    height:200px;

三、参预收藏夹

   消除办法:<script type="text/javascript">
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if( window.opera && window.print ){
var mbm = document.create_r_rElement_x('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]>
</script>
<a href="javascript:bookmark()">参与收藏夹</a>

细节5………………………………………………………………………………

1.科学普及消息列表的写法:
<ul class="list">
<li><span>2006年6月6日 </span><a href=";
<li><span>2006年6月6日 </span><a href=";
<li><span>2006年6月6日 </span><a href=";
<li><span>2006年6月6日 </span><a href=";
</ul>

2.IE得以达成页面背景渐变(FF及chrome不扶植卡塔 尔(阿拉伯语:قطر‎
从上到下:
body{filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}
左上至右下:
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); background-color: skyblue;}
从左至右
body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);}
从上到下
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"

3.a hover的体裁实现八种职能,能够灵活运用
#outer a { border:1px solid #069;}
#outer a:hover {border:1px dashed #c00;}

4.border:none;与border:0区别
辩白上的属性差距:
border:0;把border设为“0”像素尽管在页面上看不见,但按border默许值掌握,浏览器依旧对border-width/border-color进行了渲染,即现已占有了内部存款和储蓄器值。border:none;把border设为“none”即未有,浏览器深入深入分析“none”时将不作出渲染动作,即不会费用内部存款和储蓄器值。
宽容性差距:
宽容性差别只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP核心下均会冒出此意况。当border为“none”时好似对IE6/7无效边框还是留存,当border为“0”时,认为比“none”更有效,全部浏览器都风流倜傥律把边框蒙蔽,
何以让border:none;达成全包容?只需求在相通接收符上增多背景属性就能够

5.css得以达成多列等高布局,正内边距与负外边距
给每种必要贯彻等高的列应用样式:.e{padding-bottom:32767px;margin-bottom:-32767px;}

6.position:relative;特殊用法????
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(***.gif) center center no-repeat;}
a:hover {color:#000;background:url(***.gif) 0 0 no-repeat;width:86px;position:relative;}

细节6………………………………………………………………………………

1。innerText:从最早地方到结束地点的内容,不带有标签     innerHTML
   outerHTML:包含 innerHTML和标签
     <div id="test"><span>test1</span>test2</div>
     test.innerText:test1 test2
     test.innerHTML:<span>test1</span>test2
      test.outerHTML:<div id="test"><span>test1</span>test2</div>
   
2。Number(卡塔 尔(阿拉伯语:قطر‎:任何带有非数字字符的字符串做参数时,结果为NaN
   parseInt():从左到右尽或然多低把字符串转变为数字,直到遇见三个非数字时停下
   isNaN():参数不是二个数字时,重回true;

3。a=23.50abc
   typeof(a)=String
   parseFloat(a)=23.5
   parseInt(a)=23
   Number(a)=NaN
   
4。JS变量名富含数字字母美金符下划线,不可能以数字起先

5。getElementsByTagName_r()需求等文档加载达成后技术取获得

6。nodeType:共12种,1象征成分节点,3代表文本节点
     nodeName:表示节点名称,假诺是文本节点,则象征#text
     nodeValue:表示节点的值
eg: 获取tagname为li的节点if(obj.nodeName.toLowerCase()=='li'){}
      改换P的文件内容  document.getElementsByTagName_r('p')[0].firstchild.nodeValue=''

7。父节点到子节点
     childNodes:成分全体第大器晚成层子节点列表,不满含向下越来越深档次的子节点
     obj.firstChild=obj.childNodes[0]
     obj.lastChild=obj.childNodes[obj.childNodes.length-1]
     hasChildNodes() 判别元素是不是有子节点,再次回到布尔值

7。子节点到父节点
     var parentElm=myLinkItem.parentNode;
     while(parentElm,className!=‘syna’&&parentElm!='document.body')
      parentElm=parentElm.parentNode

8。更改成分属性
   1卡塔尔国以目的属性的措施赢得或设置
var mainImage=document.getElementByIdx_x('nav').getElementsByTagName['img'][0];
    mainImage.src='';
    mainImage.alt='';
   2)用getAttribute()和setAttribute()方法

细节7………………………………………………………………………………

1。将数字转变为具有X位小数位的格局function roundTo(base,precision)
  { var m=Math.pow(10,precision);
    var a=Math.round(base*m)/m;
    return a;
}
var n=3.942487;
roundTo(n,3)=3.942
roundTo(n,0)=3

2。创制受束缚的随意数
function randomBetween(min,max)
{ return min+Math.floor(Math.random()*(max-min+1))}

3。数字调换为字符串
var a=10;
a=String(a);/a=a.toString();

4。对url的编码
var a="";
var b=escape(a);
var c=(b);

5。退换文书档案内成分的花色
p--->div
第大器晚成成立二个div成分,然后复制p的子节点到div中,最后再用div 替换p

6。一个函数要求有个别参数
function add(n1,n2){}
return num=add.length;

7。二个函数字传送入了多少参数
function add(n1,n2){
return arguments.length;}

细节8………………………………………………………………………………

1). display:inline-block;看名就会猜到其意义,就是在内联情形下的疙瘩,能够设定中度小幅。

.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}

2).清理浮动

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.clearfix {zoom:1;}

3).在地方栏加多自定义Logo

   首先,大家必要事先制作四个Logo文件,大小为16*16像素。文件扩充名叫ico,然后上传到对应目录中。在HTML源文件“<head></head>”之间加多如下代码:<Link Rel=”ICON NAME” href=”

4). 在IE6中安装display:block的空容器三个相当小高度时,如<p style=”height:1px;”></p>,会意识其入骨无法小于有个别值。解决方案:设置overflow:hidden。

5).文字用轻易号截断

div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

TAG标签:
版权声明:本文由澳门mgm官网发布于新闻,转载请注明出处:JS用法大全,细节采撷