本篇文章给大家带来的内容是关于js中传递参数的方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
1.隐式创建 html 标签
<input type="hidden" name="tc_id" value="{{tc_id}}">
这种方法一般配合ajax,上面的value使用了模板引擎
2.window['data']
window['name'] = "the window object";
3.使用localStorage,cookie等存储
window.localStorage.setItem("name", "xiaoyueyue"); window.localStorage.getItem("name")
特点
1、localStorage 是持久存储,不主动删除 一直存在 sessionStorage 是临时存储,关闭浏览器数据就没了 2、localStorage 可以多窗口共享 sessionStorage 不能多窗口共享数据
4.获取地址栏方法
自己封装的方法
function parseParam(url) { var paramArr = decodeURI(url).split("?")[1].split("&"), obj = {}; for (var i = 0; i < paramArr.length; i++) { var item = paramArr[i]; if (item.indexOf("=") != -1) { var tmp = item.split("="); obj[tmp[0]] = tmp[1]; } else { obj[item] = true; } } return obj; }
2.正则表达式方法
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }
5.标签绑定函数传参
<!--base--> <button id="test1" onclick="alert(id)">test1</button> <!--高级--> <button id="test" name="123" yue="xiaoyueyue" friend="heizi" onclick="console.log(this.getAttribute('yue'),this.getAttribute('friend'))">test</button>
this拓展
使用this传参,在使用art-template中琢磨出来的,再也不用只传递一个id拼接成好几个参数了!happy!
var box = document.createElement("p"); box.innerHTML = "<button id='1' data-name='xiaoyueyue' data-age='25' data-friend='heizi' onclick='alertInfo(this)'>点击</button>"; document.body.appendChild(box); // name,age,friend function alertInfo(val) { console.log(val); alert('大家好,我是' + val.dataset.name + ', 我今年' + val.dataset.age + '岁了,我的好朋友是' + val.dataset.friend + ' !') }
event
既然可以使用this,那么在事件当中event.target
方法也是可以的:
根据 class 获取当前的索引值,参数可以为 event对象
var getIndexByClass = function (param) { var element = param.classname ? param : param.target; var className = element.classname; var domArr = Array.prototype.slice.call(document.querySelectorAll('.' + className)); for (var index = 0; index < domArr.length; index++) { if (domArr[index] === element) { return index; } } return -1; },
6.HTML5 data-* 自定义属性
<button data-name="xiaoyueyue">点击</button>
var btn = document.querySelector("button") btn.onclick = function () { alert(this.dataset.name) }
7.字符串传参
单个参数
var name = 'xiaoyueyue', age = 25; var box = document.createElement("p"); box.innerHTML = '<button onclick="alertInfo(\'' + name + '\')">点击</button>'; console.log(box) document.body.appendChild(box); // name, age function alertInfo(name, age, home, friend) { alert("我是" + name) }
多参传递
var name = 'xiaoyueyue', age = '25', home = 'shanxi', friend = 'heizi'; var params = """ + name + "","" + age + "","" + home + "","" + friend + """; var box = document.createElement("p"); box.innerHTML = "<button onclick='alertInfo(" + params + ")'>点击</button>"; console.log(box) document.body.appendChild(box); // name, age,home,friend function alertInfo(name, age, home, friend) { alert("我是" + name + ',' + "我今年" + age + "岁了!") }
复杂传参
var data = [ { "name": "xiaoyueyue", "age": "25", "home": "shanxi", "friend": "heizi" } ] var box = document.createElement("p"); for (var i = 0; i < data.length; i++) { box.innerHTML = "<button id='btn' onclick='alertInfo(id,\"" + data[i].name + "\",\"" + data[i].age + "\",\"" + data[i].home + "\",\"" + data[i].friend + "\")'>点击</button>"; } document.body.appendChild(box); function alertInfo(id, name, age, home, friend) { alert("我是" + name + "," + friend + "是我的好朋友") }
8.arguments
arguments
对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。它是一个类数组的对象。
<button onclick="fenpei('f233c7a290ae11e8a0f00050568b2fdd','100','0号 车用柴油(Ⅴ)')">分配</button>
function fenpei() { var args = Array.prototype.slice.call(arguments); alert("我是" + args[2] + "油品,数量为 " + args[1] + " 吨, id为 " + args[0]) }
相关推荐:
以上是js中传递参数的方法总结(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。

如何在Quartz中提前发送任务通知在使用Quartz定时器进行任务调度时,任务的执行时间是由cron表达式设定的。现�...

在JavaScript中如何获取原型链上函数的参数在JavaScript编程中,理解和操作原型链上的函数参数是常见且重要的任�...

在微信小程序web-view中使用Vue.js动态style位移失效的原因分析在使用Vue.js...


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

Atom编辑器mac版下载
最流行的的开源编辑器

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3汉化版
中文版,非常好用