집 > 기사 > 웹 프론트엔드 > jquery는 자바스크립트인가요?

jquery는 자바스크립트인가요?

青灯夜游원래의: 2021-11-26 16:07:273996검색

jquery는 자바스크립트가 아닙니다. JavaScript는 해석적 스크립팅 언어이고 jquery는 JavaScript 언어를 기반으로 작성된 프레임워크인 JavaScript 함수 라이브러리이며 둘 사이에는 구문에 많은 차이가 있습니다.

jquery는 자바스크립트인가요?

이 튜토리얼의 운영 환경: windows7 시스템, javascript1.8.5&&jquery1.10.2 버전, Dell G3 컴퓨터.

jquery는 자바스크립트가 아닙니다.

javascript는 해석적 스크립팅 언어이고, jquery는 JavaScript 언어를 기반으로 작성된 프레임워크인 JavaScript 함수 라이브러리입니다.

JQuery를 사용하려면 먼저 HTML 코드 시작 부분에 jQuery 라이브러리에 대한 참조를 추가해야 합니다. 예:

<script src="js/jquery.min.js"></script>

라이브러리 파일을 로컬에 배치할 수도 있고, 유명한 회사의 CDN을 직접 사용할 수도 있습니다. 장점은 사용자가 웹사이트를 방문하기 전에 이러한 대기업의 CDN이 더 인기가 있다는 것입니다. 다른 웹사이트를 방문할 때 브라우저에 캐시되어 웹사이트 열기 속도를 높일 수 있습니다. 또 다른 이점은 웹 사이트 트래픽 대역폭을 절약한다는 점입니다. 예:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google
或者：
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

jquery와 javascript

1 사이에는 구문에 많은 차이가 있습니다. 요소 노드 조작

a.JavaScript는

getElement 시리즈, 쿼리 시리즈

6c04bd5ca3fcae76e30b72ad730ca86d
    ff6d136ddc5fdfeffaf53ff6ee95f185
        f720c45ccc45a0fb64cf9d40e6aab528哈哈bed06894275b65c1ab86501b08a632eb
        cf1867405928e86c5f34ccfa5e1981eb啦啦bed06894275b65c1ab86501b08a632eb
        0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
        4b092670435d4bbf91b8df6a5cec99d9嘿嘿bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    7b2cfc96e4c0d74da423eefa2832bb6a
        ff6d136ddc5fdfeffaf53ff6ee95f185
            0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6嘿嘿bed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
2cacc6d41bbb37262a98f745aa00fbf0

b를 사용합니다.JQuery는

a를 사용합니다. lot 선택기는 또한 $()를 사용하여 선택기

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
　　//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name=&#39;na&#39;]");
    $("li");

    $("#div");
    $("#div li");
</script>

2. 속성 node

a를 작동합니다. JavaScript는

getAttribute("속성 이름"), setAttribute("속성 이름", "속성을 사용합니다. Value")

<body>
    <ul>
        <li id=>哈哈</li>
    </ul>
</body>
<script>).getAttribute().setAttribute(,　　document.getElementById("first").removeAttribute("name");
</script>

b.JQuery는

.attr()을 사용하여 가져올 하나의 매개변수를 전달하고, attr과 마찬가지로

.prop()

prop을 설정하기 위해 두 개의 매개변수를 전달하여 속성을 읽고 설정할 수 있습니다.

두 속성의 차이점은 selected, 비활성화 및 속성 이름 = 속성 값을 갖는 기타 속성을 읽을 때

attr은 selected 속성을 읽을 때 속성 값 또는 정의되지 않음을 반환한다는 것입니다.

prop는 true와 false를 반환합니다. selected 속성을 읽으면 선택 여부에 따라 변경됩니다. 즉, attr에 쓰여진 속성이어야 합니다. 그렇지 않으면 얻을 수 없습니다.

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body>
<script src="js/jquery.js"></script>
<script>
　　$("#first").attr("id");
　　$("#first").attr("name","nafirst");
　　$("#first").removeAttr("name");
　　$("#first").prop("id"); 
　　$("#first").prop("name","nafirst"); 
　　$("#first").removeProp("name");
</script>

3. 텍스트 노드 조작 a.JavaScript 사용

innerHTML: CSS를 가져오거나 설정할 수 있습니다. form of text

innerText: 노드의 HTML 코드를 가져오거나 설정합니다. css

를 가져올 수 없습니다.

value: input[type='text']로 입력된 텍스트를 가져옵니다.

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script>
    document.getElementById("serven_times").innerHTML;
    document.getElementById("serven_times").innerHTML = "<span style=&#39;color: #ff3a29&#39;>呵呵</span>";
    document.getElementById("eight_times").innerText;
    document.getElementById("eight_times").innerText = "啦啦";
    document.getElementById("input").value;
 </script>

b.JQuery는

를 사용합니다. html() 노드에서 html 코드를 가져오거나 설정합니다.

.text() 노드에서 html 코드를 가져오거나 설정합니다. Text

.val()은 input

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script src="/js/jquery.min.js"></script>
<script>
    $("#serven_times").html();
    $("#serven_times").html("<span style=&#39;color: #ff3a29&#39;>呵呵</span>");
    $("#eight_times").text();
    $("#eight_times").text("啦啦");
    $("#input").val();
    $("#input").val("哈哈");
 </script>

의 값 속성을 가져오거나 설정합니다. CSS 스타일 운영1. setAttribute를 사용하여 클래스 및 스타일 설정

document.getElementById("first").setAttribute("style","color:red");

2. className을 사용하여 클래스 선택기를 추가

document.getElementById("third").className = "san";

3. 스타일 이름은 낙타 대소문자를 사용해야 합니다.

document.getElementById("four_times").style.fontWeight = "900";

4. 직렬 수준 스타일을 추가하려면 .style 또는 .style.cssText를 사용하세요.

document.getElementById("five_times").style = "color: blue;";//IE不兼容
document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

JQuery:

$("#p2").css("color","yellow");

$("#p2").css({
    "color" : "white",
    "font-weight" : "bold",
    "font-size" : "50px",
});

5. 계층적 노드를 조작하세요.

JavaScript:

*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）
*  children：获取当前节点的所有元素子节点（不包括文本节点）
*2.parentNode:获取当前节点的父节点
*3.firstChild:获取第一个元素节点，包括回车等文本节点
*  firstElementChild:获取第一个元素节点，不包括回车节点
*  lastChild、lastElementChild 同理
*4.previousSibling：获取当前元素的前一个兄弟节点
*  previousElementSibling：：获取当前元素的前一个兄弟节点
*  nextSibling、nextElementSibling

JQuery:

1. 다양한 선택기를 제공합니다:

:first-of-type1.9+
:last-child
: last-of-type1.9+
:nth-child
:nth-last-child()1.9+
:nth-last-of-type()1.9+
:nth -of-type()1.9+
:only-child
:only-of-type
2 또한 해당 기능도 제공됩니다:

first( )

last()
children()
parents()
parent()
siblings()

JavaScript: Dom0 이벤트 모델 및 Dom2 이벤트 모델을 사용합니다. 자세한 내용은 이전 블로그를 참조하세요.

JQuery:

　①.

이벤트 바인딩에 대한 단축키

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });
</script>

　②: on 이벤트 바인딩을 사용하세요.

<body>
    <button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>    //①使用on进行单事件的绑定
     $("button:eq(0)").on("click",function () {
        alert(456);
    });     //②使用on同时给同一对象绑定多个事件
    $("button:eq(0)").on("click dblclick mouseover",function () {
        console.log(123);
    });    //③使用on，给一个对象绑定多个事件
    $("button:eq(0)").on({        "click":function () {
            console.log("click");
        },        "mouseover":function () {
            console.log("mouseover");
        },        "mouseover":function () {
            console.log("mouseover2");
        }
    });    //④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        console.log(e);
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
        console.log(window.event);//js中的事件因子
    });    
</script>

[관련 권장 사항: javascript 학습 튜토리얼

]

위 내용은 jquery는 자바스크립트인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트에서 배열이란 무엇인가요?다음 기사：자바스크립트에서 배열이란 무엇인가요?