我在脚本上使用的主要是Javascript.我有一些脚本每1秒执行几个任务,有些每0.02秒执行一次等等.我的间隔执行任务,如检查ifs,做一些innerHTML,小动画等等.现在我有4个,但我认为它会增加未来; 也许我会把自己控制在10以内.虽然它在我的电脑里根本没有滞后.
另外,我有一个关于jQuery的问题.正常的Javascript和jQuery可以做类似的事情(比如innerHTML和.html()),对吧?鉴于这种情况,我应该更喜欢使用jQuery还是Javascript?
谢谢.
这是我的情况.我在整个网站上都有一些链接.其中一些看起来像这样:
<a target="_blank" onclick="someFunction()" href="/somFile.pdf">some file</a>
有些看起来像这样:
<a target="_blank" href="/somFile.pdf">some file</a>
所有链接都应该在单击时调用someFunction().在onclick属性中具有调用的是旧内容页面.较新的页面附加了一个jQuery click事件,如下所示:
$(document).ready(function(){
$('a[href$=".pdf"]').click(function() {
someFunction();
});
});
Run Code Online (Sandbox Code Playgroud)
所以这就是事情.我可以更新someFunction(),但我无法触及实际链接或jQuery.我需要知道点击链接的href值.我尝试在someFunction()中使用以下内容:
var ev = window.event;
origEl = ev.target || ev.srcElement;
console.log(origEl.href);
Run Code Online (Sandbox Code Playgroud)
但这不起作用.我也尝试过console.log(window.event)什么也没得到,说这是未定义的.知道我在这里缺少什么,或者在调用函数时没有传递引用它基本上是不可能的?
编辑:要清楚,我不能作为短期甚至中期的解决方案编辑someFunction()onclick或jQuery代码中的调用黑色,所以我不能将它们更改为someFunction(this)或类似.我不确定是否有可能从someFunction()中获取href,除非我这样做:(
下面的代码使用this.value来获取表单下拉列表的值.我一般只看到.val()使用过.以下方式是否可以接受跨浏览器(尤其是IE的旧版本)?谢谢!
$(':input', '#all').each(function() {
alert(this.value);
});
Run Code Online (Sandbox Code Playgroud) jQuery有一个attr()方法可以检索给定HTML属性的值.例如:
var foo = document.getElementById("foo");
$(foo).attr("id");
Run Code Online (Sandbox Code Playgroud)
但是,在性能方面,这不是最佳的,因为必须创建jQuery对象才能调用该attr()方法.这表现得更好:foo.id.
所以,理想情况下我们希望避免使用attr().但是,我们可以这样做(对于任何属性)?我相信foo.id并且foo.value是"安全的"(跨浏览器),但我记得有问题foo.href.
以下是我希望能够"直接"检索的各种属性的列表:
对于任何元素:foo.id,foo.name
用于锚定:foo.href,foo.target,foo.rel
对于图像,对象,内置页框:foo.src,foo.width,foo.height
对于表单元素:foo.checked,foo.selected,foo.disabled,foo.readonly,foo.type,foo.value,foo.action
所以问题是:上述表达式是否跨浏览器?我可以安全地使用它们吗?
检查此问题的文章的链接也很不错.
编辑(基于答案):粗体表达式使用不安全!
我正在尝试让jQuery测试输入框onLoad中文本的长度,并更改输入框的大小以适应.这是我到目前为止的代码尝试:
$("#emailSubject").attr('size', this.val().length);
Run Code Online (Sandbox Code Playgroud)
我收到以下错误:
this.val不是一个函数
我究竟做错了什么?
更新:现在我不再收到第一个错误,但是长度显示为0,即使它不应该是.(我正在使用警报检查长度是多少).为什么会这样?
更新:这是代码上下文:
$(
function()
{
//works correctly
alert($("#emailSubject").val().length);
//throws error
$("#emailSubject").attr('size', ($(this).val().length));
}
)
Run Code Online (Sandbox Code Playgroud)
新错误 - 长度在警报中正确显示,但我收到错误:
索引或大小为负数或大于允许的数量.
我有这个代码:
<ul>
<li><a href="#" class="service-chooser" id="ubuntu-one">Ubuntu One</a></li>
<li><a href="#" class="service-chooser" id="ftp">FTP account</a></li>
</ul>
<!-- these div are hidden -->
<div id="ubuntu-one-form" class="hide">
Ubuntu One credential
</div>
<div id="ftp-form" class="hide">
Ftp Crediental
</div>
Run Code Online (Sandbox Code Playgroud)
当我点击链接时,我想根据链接的ID显示div:
<script type="text/javascript">
$(document).ready(function() {
$(".service-chooser").click(function() {
var service = $(this).attr('id');
var service-id = '#' + service + 'form';
$(service-id).show('slow', function() {
// Animation complete.
});
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
但它不起作用
简单的功能,我想根据更改顶级复选框切换检查/取消选中复选框.
问题是Toggle/Click事件处理程序存在固有问题.如果您尝试将这些处理程序绑定到输入复选框,则框的默认检查行为将失败.
所以,我尝试以两种不同的方式之一使用Change处理程序.
$('input.all_neighborhoods').change(function(){
if($(this).not(':checked')){
$(this).closest('li').siblings('li').find('input[name=neighborhood_id]').attr('checked','checked');
}
else{
$(this).closest('li').siblings('li').find('input[name=neighborhood_id]').removeAttr('checked');
}
});
Run Code Online (Sandbox Code Playgroud)
在这里,第一个变化按照您的预期运作.选中并选中所有同级复选框.但是,当我再次单击取消选中时,没有任何反应.事件处理程序不起作用.
然后我尝试了这个:
$('input.all_neighborhoods').change(function(){
$(this).attr( 'checked', $(this).is( ':checked' ) ? $(this).closest('li').siblings('li').find('input[name=neighborhood_id]').attr('checked','checked'): $(this).removeAttr('checked').closest('li').siblings('li').find('input[name=neighborhood_id]').removeAttr('checked') );
});
Run Code Online (Sandbox Code Playgroud)
在这里,兄弟复选框有效地切换.但是,主开/关开关复选框保持选中状态.
这里的问题是否与他们都是兄弟姐妹并且主要复选框不是父母这一事实有关?
我试图通过使用document.createElement通过Javascript在HTML页面正文中添加新元素,我正在使用少量if/ else案例和函数调用.一切都很好.
最近我开始知道我也可以用JQuery做到这一点.我还没有做太多编码所以我想知道哪种方式在效率方面最好?使用本机DOM方法或使用JQuery在页面上动态添加元素?
我有一个带有表格的index.html页面:
<body>
<table class="mytable">
<tr id="1">
<td>John</td>
<td>123</td>
</tr>
<tr id="2">
<td>Kate</td>
<td>456</td>
</tr>
</table>
<script src="my.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)
我已将my.js包含在我的页面中,我试图在my.js中以下列方式获取鼠标单击行的id:
$('.mytable tr').click(function(e){
alert('clicked.'); //even did not get alert here.
var rowId = $(this).attr('id');
alert(rowId);
});
Run Code Online (Sandbox Code Playgroud)
但我没有得到点击行的行ID(没有警报),我在哪里错了?
- -解 - -
我的坏,我有一个地方清空了桌子,这意味着没有tr.这就是为什么它不起作用.很抱歉打扰.
我正在制作一个带有options.html页面的Chrome扩展程序.
在选项页面上,我有3个复选框.选中/取消选中其中一个复选框后,使用chrome.storage.sync.set()将该复选框的值保存到chrome.storage或从chrome.storage中删除.但是一旦使用chrome.storage.sync.get()保存数据,我似乎无法检索数据.
这是我的代码:
options.html:
<div class="checkboxes">
<input id="test1" name="test1" type="checkbox">
<input id="test2" name="test2" type="checkbox">
<input id="test3" name="test3" type="checkbox">
</div>
Run Code Online (Sandbox Code Playgroud)
options.js:
$(document).ready(function() {
var storage = chrome.storage.sync;
//Retrieve existing settings
$(':checkbox').each(function() {
$(this).prop('checked', function() {
var name = this.name;
storage.get(name, function(test){
console.log(test[name]);
});
});
});
$(".checkboxes").on("change", ":checkbox", saveSettings);
//Save or delete settings
function saveSettings() {
var name = this.name;
if($(this).is(':checked')) {
storage.set({name:'checked'},function(){
console.log("saved");
});
}
else {
storage.remove(name, function(){
console.log("removed");
});
}
}
});
Run Code Online (Sandbox Code Playgroud)
以上产出: …
我们如何区分jquery和javascript?
在这里我们可以使用jquery不javascript反之亦然.?