jquery는 자바스크립트가 아닙니다. JavaScript는 해석적 스크립팅 언어이고 jquery는 JavaScript 언어를 기반으로 작성된 프레임워크인 JavaScript 함수 라이브러리이며 둘 사이에는 구문에 많은 차이가 있습니다.
이 튜토리얼의 운영 환경: 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 官方
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='na']"); $("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='color: #ff3a29'>呵呵</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='color: #ff3a29'>呵呵</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
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!