当前栏目
原生javascript常用方法
JS函数修改html的元素内容,及修改属性内容
document.getElementById(“aid”).innerHTML=”World”;
document.getElementById(“aid”).href=”http://www.jikexueyuan.com”;
document.getElementById(“aid”).style=”width:120px”;
document.getElementById(“aid”).style.color=”blue”;
document.getElementById(“aid”).setAttribute(“class”, “abc”);
document.getElementById(“aid”).className =”abc”;
JS操作自定义属性
获取自定义属性值:
document.getElementById(“txtBox”).getAttribute(“displayName”);
document.getElementById(“txtInput”).attributes[“displayName”].nodeValue
设置自定义属性值:
document.all.txtBox.setAttribute(“displayName “,”123456”);
document.getElementById(“txtInput”).attributes[“displayName”].nodeValue = “123456”
(福利推荐:阿里云、腾讯云、华为云服务器最新限时优惠活动,云服务器1核2G仅88元/年、2核4G仅698元/3年,点击这里立即抢购>>>)
JS动态添加html元素,以及属性的简单实例
function test(){
//创建节点div
var lswt_2=document.createElement(“div”);
//设置节点id
lswt_2.id=’lswtColse’;
//设置节点属性
lswt_2.style.width=’11px’;
lswt_2.style.height=’10px’;
lswt_2.style.top=’0px’;
lswt_2.style.right=’0px’;
lswt_2.style.position=’absolute’;
lswt_2.style.background=’url(7.gif)’;
lswt_2.style.backgroundRepeat=’no-repeat’;
//为这个节点添加点击事件
lswt_4.addEventListener(“click”,loc,false);
//把这个节点放到那里?放到id为lswt的元素下
var element_2=document.getElementById(“lswt”);
//插入这个节点
element_2.appendChild(lswt_2);
}
JS操作cookie
$.cookie(‘productid’, $(this).attr(“pid”)); 写入
$(“.country-selectinput”).html?userCode=wrvvs1rm($.cookie(‘productname’)); 读取
JS把返回的json字符串转换成json数组
var serData = $.parseJSON(data);
JS判断是否Touch屏幕
function isTouchScreen(){
return (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
}
JS获取移动设备初始化大小
function getInitZoom(){
if(!this._initZoom){ var screenWidth = Math.min(screen.height, screen.width); if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){ screenWidth = screenWidth/window.devicePixelRatio; } this._initZoom = screenWidth /document.body.offsetWidth; } return this._initZoom;
}
JS获取cookie值
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) return unescape(arr[2]); return null
}
JS设置cookie值
function setCookie(name, value, Hours) {
var d = new Date(); var offset = 8; var utc = d.getTime() + (d.getTimezoneOffset() * 60000); var nd = utc + (3600000 * offset); var exp = new Date(nd); exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000); document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
}
JS判断鼠标滚轮向上向下滚动
var initTop = $(window).scrollTop();
$(window).scroll(function () {
var scrollTop = $(document).scrollTop(); if(scrollTop > initTop){ //向下滚动 } else { //向上滚动 } initTop = scrollTop;
})
JS按样式表名称搜索getElementsByClassName
function getElementsByClassName(name) {
var tags = document.getElementsByTagName('*') || document.all; var els = []; for (var i = 0; i < tags.length; i++) { if (tags.className) { var cs = tags.className.split(' '); for (var j = 0; j < cs.length; j++) { if (name == cs[j]) { els.push(tags); break } } } } return els
}
JS清除html代码中的脚本
function clear_script(){
K1.value=K1.value.replace(/<script.*?>[sS]*?</script>|s+on[a-zA-Z]{3,16}s?=s?"[sS]*?"|s+on[a-zA-Z]{3,16}s?=s?'[sS]*?'|s+on[a-zA-Z]{3,16}s?=[^ >]+/ig,"");
}
动态执行JavaScript脚本
function javascript(){
try{ eval(K1.value); }catch(e){ alert(e.message); }
}
JS实现base64解码
function base64_decode(data){
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,ac = 0,dec = "",tmp_arr = []; if (!data) { return data; } data += ''; do { h1 = b64.indexOf(data.charAt(i++)); h2 = b64.indexOf(data.charAt(i++)); h3 = b64.indexOf(data.charAt(i++)); h4 = b64.indexOf(data.charAt(i++)); bits = h1 << 18 | h2 << 12 | h3 << 6 | h4; o1 = bits >> 16 & 0xff; o2 = bits >> 8 & 0xff; o3 = bits & 0xff; if (h3 == 64) { tmp_arr[ac++] = String.fromCharCode(o1); } else if (h4 == 64) { tmp_arr[ac++] = String.fromCharCode(o1, o2); } else { tmp_arr[ac++] = String.fromCharCode(o1, o2, o3); } } while (i < data.length); dec = tmp_arr.join(''); dec = utf8_decode(dec); return dec;
}
JS实现utf8解码
function utf8_decode(str_data){
var tmp_arr = [],i = 0,ac = 0,c1 = 0,c2 = 0,c3 = 0;str_data += ''; while (i < str_data.length) { c1 = str_data.charCodeAt(i); if (c1 < 128) { tmp_arr[ac++] = String.fromCharCode(c1); i++; } else if (c1 > 191 && c1 < 224) { c2 = str_data.charCodeAt(i + 1); tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = str_data.charCodeAt(i + 1); c3 = str_data.charCodeAt(i + 2); tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return tmp_arr.join('');
}
JS获取窗体可见范围的宽与高
function getViewSize(){
var de=document.documentElement; var db=document.body; var viewW=de.clientWidth==0 ? db.clientWidth : de.clientWidth; var viewH=de.clientHeight==0 ? db.clientHeight : de.clientHeight; return Array(viewW ,viewH);
}
JS阻止浏览器默认事件
function stopDefault( ev ) {
//阻止默认浏览器动作(W3C) if ( ev && ev.preventDefault ) ev.preventDefault(); //IE中阻止函数器默认动作的方式 else window.event.returnValue = false; return false;
};
JS提取页面代码中所有网址
var aa = document.documentElement.outerHTML.match(/(url(|src=|href=)[“‘](1+)[“‘)]|(http://[w-.]+2+)/ig).join(“rn”).replace(/^(src=|href=|url()[“‘]|[“‘>) ]$/igm,””);
alert(aa);
JS返回顶部的通用方法
function backTop(btnId) {
var btn = document.getElementById(btnId); var d = document.documentElement; var b = document.body; window.onscroll = set; btn.style.display = "none"; btn.onclick = function() { btn.style.display = "none"; window.onscroll = null; this.timer = setInterval(function() { d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set); }, 10); }; function set() { btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none" }
};
backTop(‘goTop’);
JS获得URL中GET参数值
// 用法:如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得:GET[“t1”], GET[“t2”], GET[“t3”]
function get_get(){
querystr = window.location.href.split("?") if(querystr[1]){ GETs = querystr[1].split("&"); GET = []; for(i=0;i<GETs.length;i++){ tmp_arr = GETs.split("=") key=tmp_arr[0] GET[key] = tmp_arr[1] } } return querystr[1];
}
JS判断浏览器种类(IE firefox chrome opera safari)
function isBrowser(){
var Sys={}; var ua=navigator.userAgent.toLowerCase(); var s; (s=ua.match(/msie ([d.]+)/))?Sys.ie=s[1]: (s=ua.match(/firefox/([d.]+)/))?Sys.firefox=s[1]: (s=ua.match(/chrome/([d.]+)/))?Sys.chrome=s[1]: (s=ua.match(/opera.([d.]+)/))?Sys.opera=s[1]: (s=ua.match(/version/([d.]+).*safari/))?Sys.safari=s[1]:0; if(Sys.ie){//Js判断为IE浏览器 alert('http://www.phpernote.com'+Sys.ie); if(Sys.ie=='9.0'){//Js判断为IE 9 }else if(Sys.ie=='8.0'){//Js判断为IE 8 }else{ } } if(Sys.firefox){//Js判断为火狐(firefox)浏览器 alert('http://www.phpernote.com'+Sys.firefox); } if(Sys.chrome){//Js判断为谷歌chrome浏览器 alert('http://www.phpernote.com'+Sys.chrome); } if(Sys.opera){//Js判断为opera浏览器 alert('http://www.phpernote.com'+Sys.opera); } if(Sys.safari){//Js判断为苹果safari浏览器 alert('http://www.phpernote.com'+Sys.safari); }
}
Jquery中$.post和$.ajax的用法
$.ajax({
type:'get', url:'http://www.www.phpernote.com/rss', beforeSend:function(XMLHttpRequest){ //ShowLoading(); }, success:function(data,textStatus){ $('.ajax.ajaxResult').html?userCode=wrvvs1rm(''); $('item',data).each(function(i,domEle){ $('.ajax.ajaxResult').append('<li>'+$(domEle).children('title').text()+'</li>'); }); }, complete:function(XMLHttpRequest,textStatus){ //HideLoading(); }, error:function(){ //请求出错处理 }
});
JS固定在网页顶部不随浏览滚动而消失的DIV层
/*
*滚动条滑动,位置不变的DIV层
*div_id:DIV的ID属性值,必填参数
*offsetTop:滚动条滑动时DIV层距顶部的高度,可选参数
*/
function fixDiv(div_id,offsetTop){
var Obj=$('#'+div_id); if(Obj.length!=1){return false;} var offsetTop=arguments[1]?arguments[1]:0; var ObjTop=Obj.offset().top; var isIE6=$.browser.msie && $.browser.version == '6.0'; if(isIE6){ $(window).scroll(function(){ if($(window).scrollTop()<=ObjTop){ Obj.css({ 'position':'relative', 'top':0 }); }else{ Obj.css({ 'position':'absolute', 'top':$(window).scrollTop()+offsetTop+'px', 'z-index':1 }); } }); }else{ $(window).scroll(function(){ if($(window).scrollTop()<=ObjTop){ Obj.css({ 'position':'relative', 'top':0 }); }else{ Obj.css({ 'position':'fixed', 'top':0+offsetTop+'px', 'z-index':1 }); } }); }
}
jquery 获取checkbox的选中值(一组和单个)
var id_array=new Array();
$(‘input[name=”id”]:checked’).each(function(){
id_array.push($(this).val());//向数组中添加元素
});
var idstr=id_array.join(‘,’);//将数组元素连接起来以构建一个字符串
alert(idstr);
JQuery获取iframe对象
$(window.frames[“frame1”].document); //获取iframe对象
//例如
$(window.frames[“xxxxx”].document).find(‘#xxx’).val();
JS产生一段随机字符串
function(size) randomString {
size = size || 6; var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // 62个字符 maxNum = chars.length, ret = ''; while (size > 0) { ret += chars.charAt(Math.floor(Math.random() * maxNum)); size--; } return ret;
}
JS页面跳转
onClick=”location.href=’http://www.ddhbb.com/'”
JS确认对话框
javascript:drop_confirm(‘你确定要结束活动吗,结束后不可再开启本活动!’, ‘http://baidu.com’);
if(confirm(“确认要将用户移动到分组”+group+”?”)){
}else{ event.returnValue = false; }
JS把php输出的时间戳转换为日期(解决出现NaN的问题)
var s = ‘1379934802’; //php time()函数输出的时间戳
var d = new Date(parseInt(s) * 1000); //必须乘以1000,否则出现NaN
var dateStr = d.getFullYear()+’-‘+(d.getMonth()+1)+’-‘+d.getDate();
alert(dateStr);
JS控制各行换色
$(‘div:odd’).css(“background-color”, “#F4F4F8”);
$(‘div:even’).css(“background-color”, “#EFF1F1”);
JS网页打印内容
javascript:window.print();
Jquery 获取一组checkbox元素 并获取选中的个数
var items = $(“input[name=’check’]:checked”); //获取name为check的一组元素,然后选取它们中选中(checked)的。
alert( “选中的个数为:”+items.length );
JS实现表格隔行背景色加深
var item = document.getElementById("tb"); //获取id为tb的元素(table) var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素 var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素 for(var i=0;i < trs.length;i++){//循环tr元素 if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1) trs[i].style.backgroundColor = "#AAA"; // 改变 符合条件的tr元素 的背景色. } }
}
jQuery无刷新访问ajax post方法
$.post(“test.php”, { “func”: “getNameAndTime” },
function(data){
alert(data.name); alert(data.time);
}, “json”);
jQuery无刷新访问ajax get方法
$.get(“test.jsp”, { name: “John”, time: “2pm” },
function(data){
alert("Data Loaded: " + data);
});
- “‘()<>[] ↩
- “‘()<>[] ↩
你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧:
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项