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

집

웹 프론트엔드

프런트엔드 Q&A

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

青灯夜游

Nov 26, 2021 pm 04:07 PM

javascriptjquery

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

哈哈
啦啦
呵呵
嘿嘿

呵呵
嘿嘿

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.