我试图理解使用jQuery .on()方法的直接和委托事件处理程序之间的这种特殊区别.具体而言,本段最后一句:
当
selector被提供时,事件处理程序被称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.
"运行任何元素的处理程序"是什么意思?我做了一个测试页面来试验这个概念.但是以下两个结构导致了相同的行为:
$("div#target span.green").on("click", function() {
alert($(this).attr("class") + " is clicked");
});
Run Code Online (Sandbox Code Playgroud)
要么,
$("div#target").on("click", "span.green", function() {
alert($(this).attr("class") + " is clicked");
});
Run Code Online (Sandbox Code Playgroud)
也许有人可以参考一个不同的例子来澄清这一点?谢谢.
javascript jquery event-bubbling event-binding jquery-events
我试图通过合并和压缩CSS和JS文件来优化网站性能.我的问题更多的是关于如何实现这一目标的(具体)步骤,考虑到我所面临的真实情况(尽管如此,应该是其他开发人员中的典型情况).
我的页面引用了几个CSS和JS文件,如下所示:
<!--
It's easier to work on smaller files during development.
Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />
<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>
Run Code Online (Sandbox Code Playgroud)
对于生产版本,我想将3个CSS文件合并为一个并使用例如YUI Compressor缩小它.但是,我需要更新所有需要这3个文件的页面来引用新近缩小的CSS.这似乎容易出错(例如,您正在删除并在许多文件中添加一些行).还有其他风险较小的方法吗?JS文件也存在同样的问题.
如何在JavaScript中将字符数组转换为字符串?
var s = ['H', 'e', 'l', 'l', 'o'];
// How to convert s to a string?
Run Code Online (Sandbox Code Playgroud) 我试图安装phantomjs以便make test Twitter Bootstrap.我在本地安装后,即npm install phantomjs它报告该包是无关紧要的.
??? phantomjs@1.9.0-3 extraneous
? ??? adm-zip@0.2.1
...
npm ERR! extraneous: phantomjs@1.9.0-3 /Users/admin/bootstrap/node_modules/phantomjs
npm ERR! not ok code 0
Run Code Online (Sandbox Code Playgroud)
然而,当全局安装phantomjs时npm install phantomjs -g,它工作正常,即没有报告任何无关错误.
问题:
我通常将所有JavaScript脚本放在一个文件中scripts.js(例如,HTTP请求越少越好).因此,正如预期的那样,某些页面需要一些脚本,有些则不需要.
要定位特定页面,我使用以下内容:
if ($("body#share").length > 0) {
// Place the logic pertaining to the page with ID 'share' here...
}
// The file / script continues...
Run Code Online (Sandbox Code Playgroud)
其他或更好的建议?谢谢!
澄清:我不是在寻找将多个JS文件合并到一个大文件中并保留多个单独的JS文件之间的优缺点.对此的答案肯定是"取决于具体情况"(我们知道).我的问题是,假设我的所有JS逻辑都放在一个大文件中,如何在加载相应的页面时才使特定的(大块)脚本运行?我过去常做的一种方法是使用if ($('#id-of-target-element')) { /* run the script */}; 有没有更好的办法?
我有一个目录,例如/var/tmp/my-dir/我经常用以下命令压缩:
$ cd /var/tmp/
$ tar -zcf my-dir.tar.gz my-dir/*
Run Code Online (Sandbox Code Playgroud)
后来,当我解开my-dir.tar.gz时,它将my-dir/在当前目录中创建.听起来这个my-dir目录被"包裹"在tarball中.是否有tar选项重命名my-dir为例如your-dir 在实际tarring发生之前.以便 ...
$ tar -zxf my-dir.tar.gz
# So that ... this creates your-dir/, instead of my-dir/
Run Code Online (Sandbox Code Playgroud)
谢谢.
我有一个git存储库,包含数百个提交和几个分支.如何搜索包含某个字符串的特定提交,例如"辅助函数"?理想情况下,字符串可以用正则表达式表示.
由于某些未知原因,iPad Safari不会显示非常长的背景图像.在我的示例中,背景图像为1,000 x 10,000像素.相同的示例适用于任何桌面浏览器,例如Safari,Firefox等.
我知道background-repeatCSS中的内容,但不幸的是它不适用于我的具体情况.
我建立了我的混帐使用P4Merge作为比较工具,如所描述这里.所以,git diff会触发P4Merge.
但是,有时我发现使用UNIX diff更快更有效(因为没有涉及GUI).如何设置git以便我可以轻松选择我想要触发的差异工具?这可能吗?例如:
$ git diff # to trigger P4Merge
$ git difftool # to trigger UNIX diff
Run Code Online (Sandbox Code Playgroud)
我的git config --list:
code.editor=vi
merge.tool=p4merge
mergetool.extMerge.cmd=extMerge $BASE $LOCAL $REMOTE $MERGED
mergetool.extMerge.trustexitcode=false
diff.external=extDiff
mergetool.prompt=false
mergetool.keepbackup=false
mergetool.p4merge.path=/usr/local/bin/p4merge
Run Code Online (Sandbox Code Playgroud) 在iframe内部(在页面A上),我有一个简单的页面(页面B),它有一些跳转链接(例如<a href="#my-id">jump link</a>)到页面的不同部分(页面B).iframe高度预设为比page-B的高度更长; 这是一项要求.
由于某些原因,跳转链接在FF上不起作用(我在Mac/FF 10.0.2上); 但是,它在Safari和IE8上运行正常.这是示例页面.
页面代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jump Link Test on an iFrame</title>
</head>
<body>
<h1>Page that has an iFrame</h1>
<iframe width="100%" height="2000" src="./iframe.html" frameborder="0" scrolling="no">
</iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
iframe.html代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iFrame Content</title>
<style type="text/css">
.box {
margin: 0 0 5px;
width: 400px;
height: 400px;
}
#box1 {
background-color: #f00;
}
#box2 …Run Code Online (Sandbox Code Playgroud) javascript ×4
command-line ×2
css ×2
git ×2
bash ×1
filesystems ×1
firefox ×1
html ×1
hyperlink ×1
iframe ×1
ipad ×1
jquery ×1
node.js ×1
npm ×1
optimization ×1
regex ×1
safari ×1
shell ×1
tar ×1