use*_*179 12 javascript jquery
你如何在jQuery中创建一个函数,调用它,并将变量传递给它？这是Javascript风格:
<script type="text/javascript">
function popup(msg) {
alert(msg);
}
</script>
然后,您只需在HTML中包含该事件:
<html>
<input type="submit" onclick="popup('My Message')" />
</html>
什么是jQuery相当于这样做？从所有"新手"教程中,它们都是不接受变量的静态函数.例如:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function() {
alert('hello, world');
});
});
</script>
我希望能够动态地包含不同的消息.上面的代码会影响所有按钮并吐出"hello,world"的相同消息.
nzi*_*nab 16
如果您希望消息是动态的,那么您将要使用data-attributes:
<input class='message-button-' type="submit" data-message="My Message" />
然后在一个单独的JavaScript文件中:
// equivalent of $(document).ready(function(){...
$(function(){
// Functionality starts here
$('.message-button').on('click', function(e){
alert($(this).data('message'));
})
});
现在.message-button,只要单击带有类的按钮,该函数就会执行,并且它将使用自定义属性数据消息来显示消息.
希望这可以帮助!:)
更新:
请注意,最好的做法是不加思索地执行javascript.有人提到仍然onclick像你在你的例子中那样使用属性,不要这样做.像我在这里使用jquery的.on('click', function(){})方法一样绑定事件.
如果您的点击项是锚标记,<a>则可以使用以下命令阻止href被跟踪e.preventDefault:
$('a').on('click', function(e){
e.preventDefault()
})
如果你需要知道,$('.message-button')使用css选择器来获取dom元素.任何有效的CSS选择器通常都可以在那里工作.
一步步
首先,我们需要将所有代码包装在jQuery提供的函数中,该函数等待文档准备好处理javascript操作和dom操作.长格式版本,$(document).ready(function(){ /* CODE GOES HERE */ })但我使用的版本是一个快捷方式$(function({ /* CODE GOES HERE */ }):
$(function(){
})
接下来,我们需要将事件绑定到我们的按钮.既然我们已经给它了类.message-button,我们可以使用jQuery来获取该元素并将'click'事件绑定到它:
$(function(){
// Functionality starts here
$('.message-button').on('click', function(e){
// Code here executes when the input button is clicked
})
});
事件处理程序内部this被重新绑定,直接指向触发事件的HTML元素.包装$()使我们可以访问jquery方法.因此:$(this)经常使用.jQuery为我们提供了.data()访问data-*元素上任何方法的方法,并为我们提供了值,这就是它alert()正在做的事情.
$(function(){
// Functionality starts here
$('.message-button').on('click', function(e){
alert($(this).data('message'));
})
});
这是我最好的方式,就像javascript一样:
Run Code Online (Sandbox Code Playgroud)<script>$(document).ready(function(){ popup=function(msg){ alert(msg); }}); </script>
而且您不需要更改正文中的代码
Run Code Online (Sandbox Code Playgroud)<html> <input type="submit" onclick="popup('My Message')" /> </html>
以下是http://jsfiddle.net/PLnF3/的示例
Run Code Online (Sandbox Code Playgroud)<html> <input type="submit" onclick="alert('My Message')" /> </html>
您不需要任何javascript或jQuery来执行此操作,只需在按钮上使用alert("我的消息")即可.示例http://jsfiddle.net/PLnF3/1/
这里的示例http://howto.software-mirrors.com/2013/09/how-to-make-jquery-popup-window.html 这是代码:
Run Code Online (Sandbox Code Playgroud)<script> $(document).ready(function() { popup = function(msg) { $("<div>" + msg + "</div>").dialog(); } }); </script>
而且您无需更改身体上的html代码.
Run Code Online (Sandbox Code Playgroud)<html> <input type="submit" onclick="popup('My Message')" /> </html>
这里的例子http://jsfiddle.net/PLnF3/2/
请记住,为了能够使用jQuery对话框,您需要jquery.js,jquery-ui.js以及jquery.css主题.更多信息,请访问http://howto.software-mirrors.com/2013/09/how-to-make-jquery-popup-window.html
| 归档时间： |
|
| 查看次数： |
53892 次 |
| 最近记录： |