AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

原生javascript常用方法

2021-08-31 207
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原生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"

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($.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.*?>[\s\S]*?<\/script>|\s+on[a-zA-Z]{3,16}\s?=\s?"[\s\S]*?"|\s+on[a-zA-Z]{3,16}\s?=\s?'[\s\S]*?'|\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("\r\n").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('');
    $('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);

});

  1. \"\'()\<\>[] ↩
  2. \"\'()\<\>[] ↩
文章标签：
JavaScript
PHP
前端开发
iOS开发
移动开发
Web App开发
数据格式
JSON
关键词：
JavaScript方法
JavaScript原生
JavaScript常用方法
原生JavaScript方法
游客oswqzne4argyi
目录
相关文章
theMuseCatcher
|
14天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组，使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历；对于对象，则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构，如数组、字符串等，而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
theMuseCatcher
33 1
JavaScript遍历数组和对象常用方法总结
尹正杰
|
9天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
尹正杰
13 2
JavaScript基础知识-方法
尹正杰
|
8天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
尹正杰
9 1
JavaScript基础知识-数组的常用方法
theMuseCatcher
|
13天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作，包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
theMuseCatcher
17 2
JS算法必备之String常用操作方法
theMuseCatcher
|
13天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等，提供了数组操作的全面指南。
theMuseCatcher
14 2
JS算法必备之Array常用操作方法
游客zi3qmblbcdexu
|
6天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
游客zi3qmblbcdexu
23 7
theMuseCatcher
|
14天前
|
JavaScript 前端开发 索引
JS中常用的数组迭代方法（filter，forEach，map，every，some，find，findIndex）
这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数：`item`（数组项的值）、`index`（项的位置，可选）和`array`（数组本身，可选）。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。
theMuseCatcher
17 0
JS中常用的数组迭代方法（filter，forEach，map，every，some，find，findIndex）
土木林森
|
11天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅：如何在云端部署JSF应用，让你的Web应用如虎添翼？
【8月更文挑战第31天】在云计算蓬勃发展的今天，AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF（JavaServer Faces）应用的方法，这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务，如EC2、RDS 和 S3，开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例，并讨论了使用AWS可能遇到的挑战及应对策略，帮助开发者更好地利用AWS的强大功能，提升Web应用开发效率。
土木林森
35 0
土木林森
|
11天前
|
Devops 持续交付 测试技术
JSF遇上DevOps：开发流程将迎巨变？一篇文章带你领略高效协同的魅力！
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces（JSF）开发中融入DevOps文化，通过持续集成与部署、自动化测试、监控与日志记录及反馈机制，提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法，并强调了持续改进的重要性。
土木林森
22 0
土木林森
|
11天前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略：HTML5属性与JavaScript方法的无缝对接，让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法，利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证，并借助JavaScript处理复杂逻辑，如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证，同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
土木林森
19 0

热门文章

最新文章

  • 1
    JavaScript基本数据类型分析
  • 2
    Node.js之Express、路由、中间件、接口跨域解决方案详解（附实例）
  • 3
    JS: 关于元素大小和距离的有关的属性总结
  • 4
    扩展JavaScript的时候，千万要保留其原来的所有功能
  • 5
    Javascript函数节流
  • 6
    JavaScript：String 对象
  • 7
    JavaScript 中的12种循环遍历方法
  • 8
    react.js:3640 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `UserList`. See https://fb.me/re
  • 9
    JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
  • 10
    javaScript系列 [03]-javaScript原型对象
  • 1
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    56
  • 2
    Vue.js 中父组件调用子组件的方法
    95
  • 3
    Vue.js 中子组件向父组件传值的方法
    55
  • 4
    使用JavaScript和XLSX.js将数据导出为Excel文件
    253
  • 5
    AngularJS是一款由Google收购的JavaScript结构框架
    53
  • 6
    JavaScript 关键字
    39
  • 7
    【Web 前端】什么是JS变量提升？
    82
  • 8
    <body> 中的JavaScript函数
    27
  • 9
    <head> 中的JavaScript 函数
    27
  • 10
    【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
    124

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    对象存储 OSS 如何创建 bucket|学习笔记