将 jQuery 代码转换为 Javascript

Posted

技术标签:

【中文标题】将 jQuery 代码转换为 Javascript【英文标题】:Converting jQuery code into Javascript 【发布时间】:2012-03-20 12:44:01 【问题描述】:

我对 javascript 和 jQuery 非常陌生。我正在尝试实现一个下拉选择框,从而在选择某些项目时禁用输入文本框。我能够通过从各种 *** 问题中破解一些 jQuery 来实现:

<select name="Severity-of-your-symptoms" id="Severity-of-your-symptoms" class="cformselect" >
    <option value="full01_severity_notselected" selected="selected">Please select...</option>
    <option value="full01_severity_other">Mild</option>
    <option value="full01_severity_other">Moderate</option>
    <option value="Severe">Severe</option>
    <option value="full01_severity_other">Other</option>
</select>
<br />
<input type="text" id="li-10-14" />

<input type="text" name="firstname" title="First Name" style="color:#888;"
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" id='color'/>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>  

<script type="text/javascript">

$('#Severity-of-your-symptoms').change(function() 
  $("#li-10-14")[$(this).val() == "full01_severity_other" ? 'show' : 'hide']("fast");
).change();

$('#Severity-of-your-symptoms').change(function() 
    $("#li-10-14")[$(this).val() == "full01_severity_other" ? $('#color').attr("disabled", true)
 : $('#color').attr("disabled", false)]
).change();

</script>

我真的很想用 Javascript 来实现它,但只能用 jQuery 来实现它,谁能帮我把它转换成纯 Javascript 吗?

【问题讨论】:

为什么?你有迫切的理由不在 jQuery 中这样做吗? jQuery Javascript。你尝试了什么?你为什么不喜欢 jQuery? 感谢 cmets。我知道 jQuery 是一个 Javascript 库,并且它 is Javascript。主要是一个学习练习我想了解如何在没有jQuery库的情况下编写上面的代码。 如果你是这样学习javascript的,为什么不从一个更简单的例子开始呢?看起来您正在尝试解决一个实际问题,而没有使用最适合这项工作的工具。 更不用说......你如何通过发布 jQuery 来学习,以便其他人为你重新编码 【参考方案1】:

如果我理解您代码的意图,您可以这样做。唯一遗漏的是用于隐藏/显示的动画,就像使用 jQuery 一样。

// this code should be located after the rest of the html at the end of the <body> tag
function checkSeverity() 
    var displayVal, disabledVal;
    if (document.getElementById("Severity-of-your-symptoms").value == "full01_severity_other") 
        displayVal = "inline";
        disabledVal = true;
     else 
        displayVal = "none";
        disabledVal = false;
    
    document.getElementById("li-10-14").style.display = displayVal;
    document.getElementById("color").disabled = disabledVal;


// hook up the event handler
document.getElementById("Severity-of-your-symptoms").onchange = checkSeverity;
// call it initially to establish the initial state
checkSeverity();

你可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/3xGxp/

【讨论】:

我不会使用“内联”作为可见显示值,最好使用“”(空字符串),以便元素采用其默认值。 @RobG - 这取决于是否有默认的 CSS 规则生效。由于这里的环境不完全了解,所以我选择了更直接的显示风格,但我理解你的意思。【参考方案2】:

细细分析:

$('#Severity-of-your-symptoms')

$ 函数创建一个“jQuery 对象”,它是一个带有附加方法的数组。数组的成员是选择器选择的元素。在这种情况下,它使用了一个 ID,因此只选择了一个元素。可以替换为:

var element = document.getElementById('severity-of-your-symptoms');

.change(function()...)

这会调用 jQuery 对象的方法来为元素添加一个 onchange 监听器,当元素接收到 change 事件时将调用该监听器。如果您只需要一个更改侦听器,则可以将其附加到 onchange 属性:

element.onchange = function()...;

但元素可能为空,所以最好这样做:

if (element) element.onchange = function()...;

要从函数中删除 jQuery 位,如果你只是想让元素出现和消失,那么:

function() 
  var element = document.getElementById('li-10-14');

  if (this.value == "full01_severity_other") 
    element.style.display = element.style.display == 'none'? '' : 'none';
  

如果您想要淡入/淡出或上滑/下滑效果,可以使用非常简单的库来实现这些效果。

终于有:

.change();

您可以将整个事情写成一个单独的语句,但我认为将它作为单独的语句保存会更加健壮。转换另一部分也差不多。

【讨论】:

以上是关于将 jQuery 代码转换为 Javascript的主要内容,如果未能解决你的问题,请参考以下文章

如何将jquery转换为javascript

使用 jQuery 将表单数据转换为 JavaScript 对象

将jquery控件转换为javascript

将触摸事件从 Javascript 转换为 jQuery

将毫秒转换为日期 (jQuery/JavaScript)

javascript 将php转换为Jquery