JS常用コードブロック
9267 ワード
1.お気に入りコードの追加
ページの可視領域の幅:Dcument.body.clientWidthページの可視領域の高さ:document.body.clientHeightページの可視領域の幅:document.body.offset Widthページの可視領域の高さ:document.body.offset Height(境界線の幅を含む)document.body.scrollwidthホームページの全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowowows.screenpです.window.screen.widthスクリーンの利用可能ワークエリアの高さ:window.screen.availHeight画面の利用可能ワークエリアの幅:window.screen.avail Width HTMLの正確な位置付け:scrollLeft、scrollwidth、clientwidth、offset Width scrollight:オブジェクトのスクロールの高さを取得します.scrollLeft:オブジェクトの左端とウィンドウの左端の間にある距離scrollTopを設定または取得する:オブジェクトの最上端とウィンドウに見えるコンテンツの最上端の間の距離scrollwidthを設定または取得する:オブジェクトのスクロール幅offsetHeightを取得する:レイアウトまたは親座標offsetPart属性によって指定された親座標に対するオブジェクトの高さoffset Left:レイアウトまたはoffset Part属性で指定された親座標に対するオブジェクトの計算左位置offset Top:レイアウトまたはoffset Top属性で指定された親座標に対するオブジェクトの計算先端位置event.client X相対文書の水平座標event.client.lientに対する文書の垂直座標event.offsetX相対容器の水平座標event.offsetxtコンテナの垂直座標document.documentElement.scrollTop垂直方向にスクロールする値event.client X+document.documentElement.scrollTopは、ドキュメントの水平座標+垂直方向スクロールの量に対して
4.jsは対象文字列を取得し、必要な桁数の内容を切り取ります.
a.iframeサブページで現在のiframeのid(firefox可)を取得する
1.http headerアクセスをno-cacheに設定した:
a.window.locations.href=「login.jsp?backurl=」+window.location.href;b.window.history.back(-1)//c.window.navigate(top.jsp)に戻ります.IEに対するd.self.location="top.httm"e.top.location="xx.jsp"不正アクセス
12.js css属性値を取得する
<script type="text/javascript">
function AddFavorite(sURL,sTitle){
try{
window.external.addFavorite(sURL, sTitle);
}catch (e){
try{
window.sidebar.addPanel(sTitle, sURL, "");
}catch (e){
alert(" , Ctrl+D ");
}
}
}
</script>
<a href=”javascript:favorite(‘ ’,’http://blog.csdn.net/ligang2585116’)”> </a>
2.任意のレイヤーにイベントを追加してオブジェクト層を呼び出す内容を設定します.function showid(idname){
var newBox=document.getElementById(idname);
console.log(newBox)
}
// :
<a href="#none" onClick="showid('box')"> </a>
<div id="box"> </div>
3.js取得ドキュメントの高さページの可視領域の幅:Dcument.body.clientWidthページの可視領域の高さ:document.body.clientHeightページの可視領域の幅:document.body.offset Widthページの可視領域の高さ:document.body.offset Height(境界線の幅を含む)document.body.scrollwidthホームページの全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowowows.screenpです.window.screen.widthスクリーンの利用可能ワークエリアの高さ:window.screen.availHeight画面の利用可能ワークエリアの幅:window.screen.avail Width HTMLの正確な位置付け:scrollLeft、scrollwidth、clientwidth、offset Width scrollight:オブジェクトのスクロールの高さを取得します.scrollLeft:オブジェクトの左端とウィンドウの左端の間にある距離scrollTopを設定または取得する:オブジェクトの最上端とウィンドウに見えるコンテンツの最上端の間の距離scrollwidthを設定または取得する:オブジェクトのスクロール幅offsetHeightを取得する:レイアウトまたは親座標offsetPart属性によって指定された親座標に対するオブジェクトの高さoffset Left:レイアウトまたはoffset Part属性で指定された親座標に対するオブジェクトの計算左位置offset Top:レイアウトまたはoffset Top属性で指定された親座標に対するオブジェクトの計算先端位置event.client X相対文書の水平座標event.client.lientに対する文書の垂直座標event.offsetX相対容器の水平座標event.offsetxtコンテナの垂直座標document.documentElement.scrollTop垂直方向にスクロールする値event.client X+document.documentElement.scrollTopは、ドキュメントの水平座標+垂直方向スクロールの量に対して
4.jsは対象文字列を取得し、必要な桁数の内容を切り取ります.
var data = $('a').text();
data = data.length > 20 ? (data.substring(0,20)+"…") : data;
5.Javascriptアドレスバーのパラメータを取得する3つの方法// :
<script type="text/javascript">
String.prototype.getQuery = function(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null)
return unescape(r[2]);
return null;
}
var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc";
console.log(strHref.getQuery("a"));
console.log(strHref.getQuery("b"));
console.log(strHref.getQuery("c"));
</script>
// :
<script type="text/javascript">
function getUrlPara(paraName){
var sUrl = location.href;
var sReg = "(?:\\?|&){1}"+paraName+"=([^&]*)";
var re=new RegExp(sReg,"gi");
re.exec(sUrl);
return RegExp.$1;
}
// :test_para.html?a=11&b=22&c=33
console.log(getUrlPara("a"));
console.log(getUrlPara("b"));
</script>
// :
<script type="text/javascript">
function Request(strName){
var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc";
var intPos = strHref.indexOf("?");
var strRight = strHref.substr(intPos + 1);
var arrTmp = strRight.split("&");
for(var i = 0; i < arrTmp.length; i++) {
var arrTemp = arrTmp[i].split("=");
if(arrTemp[0].toUpperCase() == strName.toUpperCase())
return arrTemp[1];
}
return "";
}
console.log(Request("a"));
console.log(Request("b"));
console.log(Request("c"));
</script>
6.divはもう一つのクラスの値があります.sはもう一つのクラスの値を追加します.document.getElementById("comn").className+=" comn";
7.iframe操作a.iframeサブページで現在のiframeのid(firefox可)を取得する
var frameId = window.frameElement && window.frameElement.id || '';
は親ページのすべてのiframeを巡回してIDを出力します.function iframeID(){
var fs = window.parent.window.frames;
for(var i = 0; i < fs.length; i++){
if (window == fs[i]){
console.log(window.parent.document.getElementsByTagName("iframe")[i].id)
return window.parent.document.getElementsByTagName("iframe")[i].id;
}
}
};
b.jsはiframeがロード完了したかどうかを判断する.var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
alert("Local iframe is now loaded.");
});
} else {
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
}
c.jsはiframeがロード成功かそれともローディング失敗かを判断します.url = document.getElementById('iframe1').src;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",url,true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if (xmlhttp.status == 200){
alert(" !");
} else {
alert(" !");
}
}
}
var oFrm = document.getElementById("ifrm");
oFrm.onload = oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState != 'complete')
return;
else {
onComplete();
}
}
d iframeをロードしてキャッシュを無効にします.1.http headerアクセスをno-cacheに設定した:
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
2.web siteの後ろにランダムパラメータを追加し、同じurlをバイパスしてcache問題を読み出す.iframeObj.src = "http://www.example.com/page/myframe.html?random=" + (new Date()).getTime() + Math.floor(Math.random() * 1000000);
8.メールアドレスのフォーマットが正しいか確認するfunction chkEmail(strEmail) {
if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {
return false;
}
else {
return true;
}
}
9.判断機器はPCまたは携帯端末//
isPCByPlat = function(){
var platForm = navigator.platform.toLowerCase();
var isWin = (platForm=="win32")||(platForm=="win64")||(platForm=="windows")||(platForm.indexOf("win") > -1);
if(isWin)
return "windows";
var isMac = (platForm=="mac68k")||(platForm=="macppc")||(platForm=="macintosh")||(platForm=="macintel");
if(isMac)
return "mac";
return false;
};
// UA
isPCByOSList = function(uaArg){
var pcOS = ["AIX","Amiga","BeOS","DragonFly","FreeBSD","GNU","Haiku","HP-UX","IRIX","Joli","Java","Macintosh","Minix","MorphOS","NetBSD","OpenBSD","PClinuxOS","QNX x86pc","SunOS","Ubuntu","Mint","Red Hat","Slackware","SUSE","PCLinuxOS","Debian","Fedora","CentOS","Vine","Arch Linux","Gentoo","Kanotix","Mandriva"];
for (var i = 0; i < pcOS.length; i++){
if(uaArg.indexOf(pcOS[i]) > -1){
return true;
}
};
return false;
};
if(isPCByPlat() || isPCByOSList(navigator.userAgent)){
console.log("PC");
} else {
console.log("Mobile");
};
10.ダイナミック挿入jsfunction loadScript(url, callback) {
// script
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
//
if(script.readyState) { //for IE
script.onreadystatechange = function() {
if(script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
if(callback){
callback();
}
}
};
}else { //for Others
script.onload = function() {
if(callback){callback();}
};
}
}
// script
loadScript("http://www.ueder.net/testhtml/jquery/jquery.js");
11.jsページジャンプを実現するいくつかの方法a.window.locations.href=「login.jsp?backurl=」+window.location.href;b.window.history.back(-1)//c.window.navigate(top.jsp)に戻ります.IEに対するd.self.location="top.httm"e.top.location="xx.jsp"不正アクセス
12.js css属性値を取得する
/**
* GetCurrentStyle
*/
function GetCurrentStyle(obj, style){
if (obj.currentStyle) { //IE
return obj.currentStyle[style];
} else if (window.getComputedStyle) { //W3C
propprop = style.replace(/([A-Z])/g, "-$1");
propprop = style.toLowerCase();
return document.defaultView.getComputedStyle(obj, null)[propprop];
}
return null;
}; //GetCurrentStyle
var dd = document.getElementById("box");
console.log(GetCurrentStyle(dd, "display"));
13.日付変換値var d = +new Date();
14.きれいなランダムコードMath.random().toString(16).substring(2); //14
Math.random().toString(36).substring(2); //11
15.0で全桁を補完するfunction prefixInteger(num, length) {
return (num / Math.pow(10, length)).toFixed(length).substr(2);
};
prefixInteger(31, 4);//0031