我已经看到了四种不同的方法来告诉jQuery在文档准备好时执行一个函数.这些都是等价的吗?
$(document).ready(function () {
alert('$(document).ready()');
});
$().ready(function () {
alert('$().ready()');
});
$(function () {
alert('$()');
});
jQuery(function ($) {
alert('jQuery()');
});
Run Code Online (Sandbox Code Playgroud) 我正在使用jquery mobile,我想重现这段代码:
$(document).ready(function () {
$.mobile.loading('show');
});
Run Code Online (Sandbox Code Playgroud)
它显示了微调器,直到我决定使用其他函数隐藏它
$.mobile.loading( 'hide' );
Run Code Online (Sandbox Code Playgroud)
现在我看到document.ready()在jquery mobile 1.2中已被弃用,所以他们建议用它替换它 $(document).on('pageinit')
但如果我用建议的代码替换我的代码微调器自动隐藏......为什么?这是新代码:
$(document).on('pageinit',function(){
$.mobile.loading( 'show' );
});
Run Code Online (Sandbox Code Playgroud) 我有一个奇怪的问题可能与jQuery文档准备好有关.下面是一个包含常用社交网络脚本的html和脚本块.下面的Javascript块dd_outer在body div的左边缘显示div,当浏览器窗口缩小时,div淡出并且dd_footerdiv被淡入.两个div之间的淡入淡出和淡出效果正常.
问题有两个:一个问题是当浏览器窗口是全宽(1200px +)时,Facebook脚本将无法加载并始终显示; 它有时会出现,有时则不会出现,有时会在页面重新加载后出现,有时则不会出现.(不涉及浏览器或.htaccess缓存).只有Facebook的份额不能始终如一地显示; 所有其他服务显示确定.
第二个问题是,当浏览器窗口很窄时 - 650 px左右,当dd_outerdiv没有显示且dd_footerdiv为 - 页脚div将不会显示在页面重新加载,直到浏览器窗口移动最小量.然后div将显示,Facebook分享和所有.对于移动设备,这是一个问题,因为浏览器窗口将开始变窄并且不应该被"轻推"以进行dd_footerdiv显示.
这个问题可能已经发挥作用,因为我已经从WordPress插件中调整了这个代码,该插件使用选项来设置dd_outerdiv 的位置和滚动高度.这就是文档就绪调用之上的变量的原因.
这是一个似乎是文档准备问题的问题吗?
如何将变量集成到脚本本身?它们是否被硬编码并不重要; 我可以在需要时更换它们.
我会把它扔进一个jsfiddle来演示但是div不会在窗口调整大小的情况下实际浮动.
为清晰起见,我没有包含CSS.
这是html和社交脚本块:
<div class='dd_outer'><div class='dd_inner'><div id='dd_ajax_float'>
<div class="sbutton"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class="sbutton">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="" data-count="vertical" data-via="#">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class="sbutton"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class="sbutton"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></div>
</div></div></div>
Run Code Online (Sandbox Code Playgroud)
在页脚中 <div id="dd_footer">that contains the same social scripts as above</div> ,并且通过以下脚本淡入淡出: …
假设一个HTML文档中的内联Javascript代码(例如正文),这个Javascript代码总是在JQuery文档就绪代码之前执行吗?
例如,以下安全吗?
...
<body>
<script type="text/javascript">
var myVar = 2;
</script>
...
</body>
...
$(document).ready(function() {
alert('My Var = ' + myVar);
}
Run Code Online (Sandbox Code Playgroud)
如果没有,我怎样才能确保安全知道myVar在内联/块代码中定义?
我想知道jQuery的$(document).ready()函数是否总是等待异步加载的脚本:
HTML
<script async src="...">
Run Code Online (Sandbox Code Playgroud)
JavaScript的
$(document).ready(function(){
//is the script always loaded at this point?
});
Run Code Online (Sandbox Code Playgroud)
我在jQuery文档中找不到任何对此假设的确认.是否存在明确规定的来源?
我正在尝试使用HMTL加载一个放在单独的html中的组件.问题是,只要在浏览器中加载页面就会调用它.
以下是我的模态代码:
<div class="modal fade borderColorC0C0C0 borderRadiusOverride" id="termsAndConditionsPopover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" ng-include="'components/popover/termsAndConditions/termsAndConditions.html'">
</div>
Run Code Online (Sandbox Code Playgroud)
组件代码在这里:
termsAndConditions.html
<div class="modal-dialog borderRadiusOverride">
<div class="modal-content borderRadiusOverride">
<div class="termsAndConditionsHeaderColor borderRadiusOverride divHeight50 paddingTop15 paddingLeft15 paddingBottom15 borderBottomColorC0C0C0">
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>-->
<h5 class="modal-title marginBottom15 fontColorTileSteps" id="myModalLabel">Cisco's GSA shipping Policy</h5>
</div>
<div class="modal-body borderRadiusOverride fontColorTileSteps">
This policy outlines the requirements of shipping Internationally including but not limited to:
<ul>
<li>All members of the Cisco workforce are responsible to adhere to this policy</li>
<li>AST is …Run Code Online (Sandbox Code Playgroud) javascript jquery document-ready angularjs angularjs-ng-include
我知道jQuery中对$(function(){})的调用是按照定义的顺序执行的,但是我想知道你是否可以控制队列的顺序?
例如,是否可以在"Hello World 1"之前调用"Hello World 2":
$(function(){ alert('Hello World 1') });
$(function(){ alert('Hello World 2') });
Run Code Online (Sandbox Code Playgroud)
问题是它是否可能......我已经知道它违背了最佳做法;)
我在Site.Master页面中定义了一个$(document).ready()事件,我还想在我的一个局部视图中定义另一个$(document).ready()(用于显示msgs和错误消息) ,我在所有页面和所有局部视图中调用此局部视图...
局部视图显示在页面中,也使用模态弹出窗口...所以我尝试了这个但是部分视图中的ready事件没有触发
我有几件事要问:
如果有些身体可以提供一些例子......
我查看了很多相关的问题,我必须要求这完全不同,因为我只看到了一些似乎有关的问题.我正在通过JQuery Ajax调用加载整个中间div,我只是希望能够在新的区域上执行一些自动JQuery,如$(document).ready允许在加载DOM时.我读到livequery会这样做,但我认为会有一种内置方式.我正在尝试将日期选择器添加到开头的输入字段.
这是将要求后端内容的内容,然后将提取某些特定部分.
$.post("ReportingWizard",$("#wizard_form").serialize(), function (data) { setData(data); });
function setData(data) {
divElement.innerHTML = data;
$(activeTab).fadeIn(); //Fade in the active content
$(".wizardBody").fadeIn();
}
Run Code Online (Sandbox Code Playgroud)
在该divElement中放置的文件内部将有一个需要运行的JQuery方法来更改其中的html.
我创建了一个显示问题的 Codepen:https ://codepen.io/samuelg0rd0n/pen/ExVGQEV
在 Chrome 中,它在窗口 onload 事件之前正确触发 DOMContentLoaded 事件和 jQuery 文档就绪事件。然而,在 Firefox 中,顺序是:
DOMContentLoaded
window.onload
$(window).on('load', function() { ... });
$(document).ready();
$(function() { ... });
Run Code Online (Sandbox Code Playgroud)
window.onload 和 jQuery 窗口 onLoad 都会在 jQuery 文档就绪事件之前触发。我很确定这一定是 jQuery 或 Firefox 中的某种错误。谁可以给我解释一下这个?谢谢。
Chrome版本:81.0.4044.138
火狐版本:75.0
在 macOS 和 Linux 上都尝试过,结果相同。
firefox jquery document-ready domcontentloaded jquery-events
document-ready ×10
jquery ×10
javascript ×3
domready ×2
html ×2
ajax ×1
angularjs ×1
asp.net-mvc ×1
asynchronous ×1
dom ×1
firefox ×1
function ×1