제이쿼리를 사용하는 이유-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

제이쿼리를 사용하는 이유

Nov 16, 2020 am 10:53 AM

제이쿼리 사용

jquery를 사용하는 이유: 1. CSS 선택자를 기반으로 DOM 요소를 빠르게 얻을 수 있습니다. 2. 또한 DOM 요소의 CSS 스타일을 수정할 때 프로그래밍 형식이 스타일 태그와 유사하여 기억하기 쉽습니다.

제이쿼리를 사용하는 이유

추천: "jquery 비디오 튜토리얼"

1. jQuery란 무엇입니까

jQuery는 JavaScript를 사용하여 웹 페이지 특수 효과를 개발할 때 발생하는 복잡성 중 일부를 단순화하고 다음을 제공하는 JavaScript 라이브러리 세트입니다. 일반적인 작업을 자동화하고 복잡한 작업을 단순화합니다. jQuery를 사용하면 원래 많은 JavaScript 코드가 필요한 기능을 몇 줄의 코드로 줄일 수 있을 뿐만 아니라 충분히 빠른 성능을 제공할 수 있습니다.

2. jQuery를 사용하는 이유

예를 들어, 이제 다음과 같은 기본 웹 페이지가 있다고 가정해 보겠습니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;style&gt;
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div id=&quot;box2&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

그런 다음 기본 JavaScript와 jQuery를 사용하여 위 세 div의 배경색을 변경합니다.

&lt;script&gt;
        //使用原生JavaScript改变背景颜色
        window.onload = function (ev) {
            var div1 = document.getElementsByTagName(&quot;div&quot;)[0];
            var div2 = document.getElementsByClassName(&quot;box1&quot;)[0];
            var div3 = document.getElementById(&quot;box2&quot;);
            // console.log(div1);
            // console.log(div2);
            // console.log(div3);
            div1.style.backgroundColor = &quot;red&quot;;
            div2.style.backgroundColor = &quot;yellow&quot;;
            div3.style.backgroundColor = &quot;blue&quot;;
        }
 
        //使用jQuery改变背景颜色
        // $(function () {
        //     var $div1 = $(&quot;div&quot;)[0];
        //     var $div2 = $(&quot;.box1&quot;)[0];
        //     var $div3 = $(&quot;#box2&quot;)[0];
        //     // console.log($div1);
        //     // console.log($div2);
        //     // console.log($div3);
        //     $div1.css({
        //         background: &quot;red&quot;
        //     });
        //     $div2.css({
        //         background: &quot;yellow&quot;
        //     });
        //     $div3.css({
        //         background: &quot;blue&quot;
        //     });
        // })
    &lt;/script&gt;

로그인 후 복사

두 가지 방법을 비교해 보면 jQuery 사용의 가장 직접적인 이점은 CSS 선택기를 기반으로 DOM 요소를 빠르게 얻을 수 있다는 점입니다. 또한 DOM 요소의 CSS 스타일을 수정할 때 프로그래밍 형식이 스타일 태그와 유사하여 기억하기 쉽습니다. 물론 jQuery를 사용하면 다른 이점도 있는데, 이는 이후 연구에서 계속해서 발견하고 탐구할 것입니다.