有没有快速检查对象是jQuery对象还是本机JavaScript对象的方法？
例:
var o = {};
var e = $('#element');
function doStuff(o) {
if (o.selector) {
console.log('object is jQuery');
}
}
doStuff(o);
doStuff(e);
显然,上面的代码有效,但不安全.您可以向o对象添加选择器键并获得相同的结果.有没有更好的方法来确保对象实际上是一个jQuery对象？
符合的东西 (typeof obj == 'jquery')
转换的最佳方式是什么:
['a','b','c']
至:
{
0: 'a',
1: 'b',
2: 'c'
}
是否可以在jQuery中创建一个可以绑定到任何样式更改的事件侦听器？例如,如果我想在元素更改维度时"执行"某些操作,或者我可以执行样式属性中的任何其他更改:
$('div').bind('style', function() {
console.log($(this).css('height'));
});
$('div').height(100); // yields '100'
这将非常有用.
有任何想法吗？
UPDATE
很抱歉自己回答这个问题,但我写了一个可能适合其他人的简洁解决方案:
(function() {
var ev = new $.Event('style'),
orig = $.fn.css;
$.fn.css = function() {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
})();
这将临时覆盖内部prototype.css方法,并在最后用触发器重新定义它.它的工作原理如下:
$('p').bind('style', function(e) {
console.log( $(this).attr('style') );
});
$('p').width(100);
$('p').css('color','red');
如何在不添加jQuery值的情况下设置数据属性？我要这个:
<body data-body>
我试过了:
$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything
其他所有东西似乎都将第二个参数添加为字符串.是否可以只设置一个没有值的属性？
是否有可能删除哈希window.location而不会导致页面跳转到顶部？我需要能够修改哈希而不会引起任何跳转.
我有这个:
$('<a href="#123">').text('link').click(function(e) {
e.preventDefault();
window.location.hash = this.hash;
}).appendTo('body');
$('<a href="#">').text('unlink').click(function(e) {
e.preventDefault();
window.location.hash = '';
}).appendTo('body');
在这里查看实例:http://jsbin.com/asobi
当用户单击" 链接 "时,修改的哈希标记没有任何页面跳转,因此工作正常.
但是当用户点击" 取消链接 "时,删除了has标记,页面滚动跳转到顶部.我需要删除没有这种副作用的哈希.
有可能将几个jQuery DOM对象合并到一个数组中并在所有数组上调用jQuery方法吗？
F.ex:
<button>one</button>
<h3>two</h3>
<script>
var btn = $('button');
var h3 = $('h3');
$([btn,h3]).hide();
</script>
这不起作用.我知道我可以使用'button,h3'选择器,但在某些情况下我已经有几个jQuery DOM元素,我需要合并它们,所以我可以在所有这些上调用jQuery原型.
就像是:
$.merge([btn,h3]).hide();
会工作.有任何想法吗？
更新:
解决了它.你可以这样做:
$.fn.add.call(btn,h3);
我将接受这个add()建议,指出我正确的方向.
我以前一直试图问这个,没有任何运气解释/证明一个错误发生的工作示例.所以这是另一个尝试:
我试图在一个可信的DIV上复制一个占位符效应.核心概念很简单:
<div contenteditable><em>Edit me</em></div>
<script>
$('div').focus(function() {
$(this).empty();
});
</script>
这可能有些工作,但如果占位符包含HTML,或者正在进行其他处理,则可删除可编辑DIV的文本插入符,并且用户必须重新单击可编辑的DIV才能开始键入(即使它是仍然是焦点):
示例:http://jsfiddle.net/hHLXr/6/
我不能在处理程序中使用焦点触发器,因为它将创建一个事件循环.所以我需要一种方法来重新设置可编辑DIV中的插入符光标,或者以其他方式重新聚焦.
我正在尝试使用webpack(http://webpack.github.io/)并且它看起来非常好,但是我有点被困在这里.
假设我正在使用CDN作为库,f.ex jQuery.然后在我的代码中,我希望require('jquery')自动指向全局jquery实例,而不是尝试从我的模块中包含它.
我尝试过使用类似的插件IgnorePlugin:
new webpack.IgnorePlugin(new RegExp("^(jquery|react)$"))
这适用于忽略库,但它仍然表示当我运行webpacker时所需的模块"丢失".
不知怎的,我需要告诉webpack jquery应该从全局上下文中获取.看起来像一个常见的用例,所以我很惊讶文档没有具体针对这一点.
反正有没有听一个<link>元素的onload事件？
F.ex:
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
link.onload = link.onreadystatechange = function(e) {
console.log(e);
};
这适用于<script>元素,但不适用<link>.还有另外一种方法吗？我只需要知道外部样式表中的样式何时应用于DOM.
更新:
注入一个隐藏的<iframe>,添加<link>到头部并window.onload在iframe中监听事件是不是一个想法？它应该在加载css时触发,但它可能无法保证它被加载到顶部窗口中......
如果我正在做多个动画,那么添加多个requestAnimationFrame回调在性能方面是否正常？F.ex:
function anim1() {
// animate element 1
}
function anim2() {
// animate element 2
}
function anim3() {
// animate element 3
}
requestAnimationFrame(anim1);
requestAnimationFrame(anim2);
requestAnimationFrame(anim3);
或者它被证明比使用单个回调更糟糕:
(function anim() {
requestAnimationFrame(anim);
anim1();
anim2();
anim3();
}());
我问,因为我真的不知道幕后发生了什么,requestAnimationFrame当你多次调用它时排队回调？
javascript performance jquery animation requestanimationframe
javascript ×9
jquery ×7
animation ×1
arrays ×1
attr ×1
attributes ×1
caret ×1
commonjs ×1
css ×1
dom ×1
dom-events ×1
focus ×1
hyperlink ×1
node.js ×1
object ×1
performance ×1
require ×1
webpack ×1