Closed. This question is opinion-based。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗?更新问题,以便editing this post用事实和引用来回答。
                
                    5年前关闭。
            
        

    

我学了一些Xquery(基础知识)

例如:



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="application/xquery">
      declare sequential function local:set($loc, $evt) {
        b:setStyle(b:dom()//body, "background-color", $loc/@value)
      };

      for $button in b:dom()//input[@type="button"]
      return
      b:addEventListener($button, "onclick", local:set#2)
    </script>
  </head>
  <body>
    <h1>Change the background color</h1>
    <input type="button" value="Blue"/>
    <input type="button" value="Red"/>
    <input type="button" value="Green"/>
    <br/>
    <input type="button" value="Black"/>
    <input type="button" value="White"/>
    <input type="button" value="Yellow"/>
  </body>
</html>





这会更改点击的颜色。现在,x查询中的编码与JS相比如何?可以完全使用X-query代替javascript吗?哪一个可以更好地控制元素?

而且我在浪费时间学习XQuery吗?我之所以这样问,是因为几乎每个人都只谈论JavaScript。使用XQuery代替JS是否可行?以及它们在浏览器支持方面如何比较?

最佳答案

使用javascript,您可以类似地执行此操作,例如本示例。

(我不得不说,对我来说,您的测试在代码段编辑器中实际上并不起作用)

您应该很容易识别代码结构,它并没有真正改变太多。一个用于设置颜色的函数,一个将setColor函数与onclick事件连接的on函数,以及一个用于获取要在其上设置事件处理程序的项目的查询。



function setColor() {
  document.body.style.background = this.value;
}

function onLoad() {
  var input = document.getElementsByTagName('input'),
    i, len, item;

  for (i = 0, len = input.length; i < len; i++) {
    item = input[i];
    if (item.getAttribute('type') === 'button') {
      item.addEventListener('click', setColor.bind(item));
    }
  }
}

window.onload = onLoad;

<h1>Change the background color</h1>
<input type="button" value="Blue" />
<input type="button" value="Red" />
<input type="button" value="Green" />
<br/>
<input type="button" value="Black" />
<input type="button" value="White" />
<input type="button" value="Yellow" />





在JQuery中,它甚至更加容易,您可以像这样:



$(function() {
  $('input[type=button]').on('click', function(e) {
    $(document.body).css('background', e.currentTarget.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Change the background color</h1>
<input type="button" value="Blue" />
<input type="button" value="Red" />
<input type="button" value="Green" />
<br/>
<input type="button" value="Black" />
<input type="button" value="White" />
<input type="button" value="Yellow" />





我会说使用Javascript更有意义。那里有很多框架,很多人已经尝试过您最有可能尝试过的东西,因此,如果您遇到困难或有疑问,您将有更多资源来寻找问题的解决方案。

07-24 09:50
查看更多