jquery는 자바스크립트인가요?-프런트엔드 Q&A-php.cn

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 시리즈, 쿼리 시리즈

<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>
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
</script>

로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!