我的案例:带有键+值的localStorage应该在浏览器关闭时删除,而不是单个标签.
请查看我的代码是否正确以及可以改进的内容:
//create localStorage key + value if not exist
if(localStorage){
localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"};
}
//when browser closed - psedocode
$(window).unload(function(){
localStorage.myPageDataArr=undefined;
});
Run Code Online (Sandbox Code Playgroud) http://domain.com/page.html?returnurl=%2Fadmin
Run Code Online (Sandbox Code Playgroud)
对于js
内部page.html
,如何检索GET
参数?
对于上面这个简单的例子,func('returnurl')
应该是/admin
但它也适用于复杂的查询......
我是ReactJS和JSX的新手,我对下面的代码有点问题.
我试图className
在每个属性上添加多个类li
:
<li key={index} className={activeClass, data.class, "main-class"}></li>
Run Code Online (Sandbox Code Playgroud)
我的React组件是:
var AccountMainMenu = React.createClass({
getInitialState: function() {
return { focused: 0 };
},
clicked: function(index) {
this.setState({ focused: index });
},
render: function() {
var self = this;
var accountMenuData = [
{
name: "My Account",
icon: "icon-account"
},
{
name: "Messages",
icon: "icon-message"
},
{
name: "Settings",
icon: "icon-settings"
}
/*{
name:"Help & Support <span class='font-awesome icon-support'></span>(888) 664.6261",
listClass:"no-mobile last help-support last"
}*/
];
return ( …
Run Code Online (Sandbox Code Playgroud) 我注意到在监控/尝试回答常见的jQuery问题时,有一些使用javascript而不是jQuery的实践,实际上可以让你写得更少,并做 ...相同的数量.并且还可以产生性能优势.
一个具体的例子
$(this)
VS this
在单击事件中引用单击的对象id
jQuery的
$(this).attr("id");
Run Code Online (Sandbox Code Playgroud)
使用Javascript
this.id;
Run Code Online (Sandbox Code Playgroud)
还有其他类似的常见做法吗?可以更轻松地完成某些Javascript操作,而无需将jQuery添加到组合中.或者这是一个罕见的情况?(jQuery"快捷方式"实际上需要更多代码)
编辑:虽然我很欣赏有关jQuery与普通javascript性能的答案,但实际上我正在寻找更多的定量答案. 在使用jQuery时,实际上可以更好地使用普通javascript代替使用的实例(可读性/紧凑性)$()
.除了我在原始问题中给出的例子.
$(document).ready(function() {
//Check City Value
var city_value = parseInt($("#city").val());
if( city_value == 0) {
$("#state").attr("readonly", true);
//$("#rate").attr("readonly", "readonly");
} else {
$("#state").removeAttr("readonly");
//document.getElementById("state").removeAttribute("readonly",0);
//get_states(city_value);
}
/***
//Check State Value
var state_value = parseInt($('#state').val());
if( state_value == 0) {
$('#rate').attr('readonly', true);
} else {
$('#rate').attr('readonly', false);
}
***/
});
Run Code Online (Sandbox Code Playgroud)
这是我的示例代码.
<td><select name="city" id="city">
<option value="0">PLEASE_SELECT_TEXT</option>
<option value="Antalya">Antalya</option>
<option value="Bodrum">Bodrum</option>
<option value="Istanbul">Istanbul</option>
</select> </td>
<td><div id="states"><input type="text" name="state" value="FORCE_FOR_SELECT" readOnly id="state"></div></td>
Run Code Online (Sandbox Code Playgroud)
我还添加了doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Run Code Online (Sandbox Code Playgroud) 我的HTML:
<div class="profileForm">
<fieldset>
<label>Name<input type="text" id="name" name="name" runat="server" readonly=""/></label>
<label>Email<input type="email" id="email" name="email" runat="server" readonly=""/></label>
<label>Date Of Birth<input type="date" id="dob" name="dob" runat="server" readonly=""/></label>
<label>Address<input type="text" id="address" name="address" runat="server" readonly=""/></label>
<label>City<input type="text" id="city" name="city" runat="server" readonly=""/></label>
<label>State<input type="text" id="state" name="state" runat="server" readonly=""/></label>
<label>Country<input type="text" id="country" name="country" runat="server" readonly=""/></label>
<label>Access Level<input type="text" id="accessLevel" name="accessLevel" runat="server" readonly=""/></label>
</fieldset>
</div>
<div class="profileEdit">
<fieldset>
<label><a href="#" id="Aname">edit</a></label>
<label><a href="#" id="Aemail">edit</a></label>
<label><a href="#" id="Adob">edit</a></label>
<label><a href="#" id="Aaddress">edit</a></label>
<label><a href="#" id="Acity">edit</a></label>
<label><a href="#" id="Astate">edit</a></label>
<label><a href="#" …
Run Code Online (Sandbox Code Playgroud) 所以我的问题是,当我得到$(window).height()
一个空文档时,它给出了正确的值,但是当我为 div ( .main-header
)设置高度时,$(window).height()
它的值加上接近 div 高度的值,
当我height
为.main-header
div设置0时的这张图片
当我设置 700pxheight
时.main-header
我试过 $(window).load() 和 $(document).ready() 并且都给出了相同的值https://jsfiddle.net/nev5onff/
$(window).load(function () {
var header = $('.main-header'),
windowH = $(window).height();
$('.test').text( windowH);
});
Run Code Online (Sandbox Code Playgroud)
.main-header {
width: 100%;
height: 700px;
box-shadow: 0 1px 4px #888;
position: relative;
overflow: hidden;
}
.test {
position: fixed;
top: 0;
left: 0;
width: 100px;
float: left;
height: 100px;
background-color: #eee;
color: #000;
padding: 20px;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div …
Run Code Online (Sandbox Code Playgroud)我是JavaScript和JQuery的新手,我在尝试检索与select的所选选项相关的值时遇到以下问题.
所以,进入我的页面我有:
<select id="selAttivitaSelezionata" class="form-control valid" name="selAttivita" aria-invalid="false">
<option value="valida">Valida Progetto</option>
<option value="invalida">Rimuovi Validazione</option>
</select>
Run Code Online (Sandbox Code Playgroud)
然后我每次用户在上一个select中选择一个选项时都会执行以下JQuery代码:
$("#selAttivitaSelezionata").change(function() {
//alert("TIPOLOGIA PROGETTO CAMBIATA");
var sel = $("#selAttivitaSelezionata");
var val = sel.value;
alert(val);
$("#statoProgettoLabel").hide();
$("#selStatoProgetto").hide();
});
Run Code Online (Sandbox Code Playgroud)
所以,正如你可以看到我首先在DOM中选择了具有id ="selAttivitaSelezionata"的select对象,然后我尝试通过sel.value获取所选值,然后将其打印到警告弹出窗口中
问题是警报是空的.使用FireBug调试器,我看到sel变量已正确初始化,但val变量未定义为sel.value获取的值.
为什么?我错过了什么?如何获取value属性的值(valida或invalida)?
TNX
我有这个: $('#night > li').appendTo('#day');
代码将所有<li>
元素移动<ul id="night">
到结尾<ul id="day">
.
请问,我怎么能把它翻译成VanillaJS?
我的意思是,我如何重写代码,所以我不需要Jquery?
到目前为止有这个:
的document.getElementById( '夜')li.appendTo.document.getElementById( '天').
我已经开始学习Vue Js,我在Google上搜索时找不到令人满意的答案,无法将两者进行比较。
我找到了什么是Vue js和另一个问题是什么Vanilla Js。但是,毫无疑问,可以将两者进行比较。
javascript ×10
jquery ×7
css ×2
html5 ×2
ecmascript-6 ×1
get ×1
html ×1
performance ×1
reactjs ×1
vue.js ×1