jQuery解决了哪些问题?

2uluyalo  于 2023-06-05  发布在  jQuery
关注(0)|答案(2)|浏览(208)

我知道jQuery是一个强大的JavaScript框架,并且已经完成了一些教程。然而,为了帮助我的理解,我想知道jQuery是为了解决哪类问题而编写的。它如何使JavaScript编码更容易?一两个原生JavaScript代码的示例和使用jQuery的等效代码将是有用的。

jm81lzqq

jm81lzqq1#

这就是jQuery被发明的原因:
jQuery的语法旨在使文档导航、选择DOM元素、创建动画、处理事件和开发 AJAX 应用程序变得更加容易。jQuery还为开发人员提供了在JavaScript库之上创建插件的功能。这使开发人员能够为低级交互和动画、高级效果和高级主题化小部件创建抽象。jQuery库的模块化方法允许创建强大的动态网页和Web应用程序。
https://en.wikipedia.org/wiki/JQuery
现在,你可能不再需要jQuery了,因为在现代浏览器中,它的很多功能都是原生的(因此性能更高,库开销更少)。查看youdontneedjquery

使用/不使用jQuery的DOM选择和添加类示例

简单的JavaScript:

function addClassF(el, cls) {
  var clss;
  if (typeof cls === "string") {
    clss = cls.split(" ");
  } else if (cls instanceof Array) {
    clss = cls;
  }
  var i = 0,
      len = clss.length;
  for (; i < len; i++) {
    if (el.classList) {
      el.classList.add(clss[i]);
    } else {
      // <= IE8
      el.className += ' ' + clss[i];
    }
  }

}

var foo = document.getElementById( "foo" ); // returns a plain DOM element
addClassF(foo, "class1 class2");

使用jQuery:

var $foo = $("#foo"); // returns a jQuery object
$foo.addClass("class1 class2");
c9x0cxw0

c9x0cxw02#

$(document).ready(function () {
        $("#calcula").click(function () {
            if ($("#hiden").val() == 0) {
                $("#input1").show();
                $("#hiden").val(1);
                $("#input2").hide();
            } else {
                $("#input2").show();
                $("#hiden").val(0);
                $("#input1").hide();
            }
        });


        $("#calcula").click(function () {
            let array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            let randomArray1 = array1[Math.floor(Math.random() * array1.length)];

            console.log(randomArray1);

            let input1 = parseInt($("#input1").val());
            let input2 = parseInt($("#input2").val());

            let completar = [];

            let menor = Math.min(input1, input2);
            let mayor = Math.max(input1, input2);
            
            console.log(input1);
            console.log(input2);

            for (let i = menor; i <= mayor; i++) {
                completar.push(i);
            }
            console.log(completar);

            let lista = $("#input1").val().split(",");
            let invertida = lista.reverse();

            console.log(lista);
            console.log(invertida);

});

console.log(mitjanaParells([3,4,5,6,7,3,4]));
        function mitjanaParells(listNum){
            let media = 0;
            let variable;
            //let tamany = listNum.lenght;
            for(i=0;i<6;i++){
                if(i%2==0){
                    variable= listNum[i];
                    media = media + variable;
                }else{}
            }
            return media;
        }

``

<input id="numero2"/>
    <div id="resultatSumatori"></div>
    <button id="button" onclick="hola()">sumatori</button>
    <script>
        function hola(){
        let numero = document.getElementById("numero2").value;
        numero = parseInt(numero);
        let suma= 0;
        for (i=0;i<=numero;i++){
            suma= suma+i;
        }
        document.getElementById("resultatSumatori").innerHTML = suma;
        }
    </script>

``

$("#button").click(function () {
                arrAlfabetico.sort();
                console.log(arrAlfabetico);
            });

            $("#button").click(function () {
                while (arrAlfanumerico.length > 0) {
                    let min = Math.min(...arrAlfanumerico);
                    let minIndex = arrAlfanumerico.indexOf(min);
                    salidaArray.push(arrAlfanumerico[minIndex]);
                    arrAlfanumerico.splice(minIndex, 1)
                }
                console.log(salidaArray);
            });

相关问题