jQuery 베이스 01
8793 단어 jquery
자바스크립트의 프레임워크는 매우 많은데 예를 들면prototype, JQuery, ExtJS 등등 jQuery의 통용성이 매우 좋다.jQuery 디자인 사상은 원시적인dom 대상을 하나의 jQuery 대상으로 봉하여 jQuery 대상을 호출하는 방법을 통해 원시적인dom 대상에 대한 조작을 실현하는 것이다.이러한 디자인의 목적은 서로 다른 브라우저를 더욱 잘 호환하고 코드를 간소화하기 위한 것이다.특징: jQuery는 선택기를 사용하여 요구에 맞는 노드를 찾고 이 노드를 하나의 jQuery 대상으로 봉하여 jQuery 대상의 속성이나 방법을 호출하여 노드에 대한 조작을 실현한다.봉인된 목적은 두 가지가 있는데, 하나는 서로 다른 브라우저 간의 차이를 더욱 잘 호환하기 위한 것이고, 다른 하나는 코드가 더욱 간결하다는 것이다.2) jQuery 프로그래밍 단계 step1은 선택기로 노드를 찾습니다.step2는 jQuery 대상의 속성이나 방법을 호출하여 노드를 조작합니다.예:
1 function f1(){
2 //$obj jquery , $
3 var $obj = $('#d1');
4 //$() jQuery
5 $obj.html('hello jave');
6 $obj.css('background-color','yellow').css('font-style','italic').css('font-size','50px');
7 }3) jQuery 대상과dom 대상 사이의 변환 a.dom 대상을 jQuery 대상으로 변환하려면 var$obj=$(dom 대상)var obj=document을 사용합니다.getElementById('d1'); var $obj = $(obj);b.jQuery 대상이dom 대상으로 변환되는 방식 1:jQuery 대상을 사용합니다.get(0) 방법, $obj는 jQuery 대상 $obj를 나타냅니다.get(0) 모드 2: jQuery 객체를 사용합니다.get()[0]; $obj.get()[0]와 같이 var$obj=$('#d1'); var obj = $obj.get(0);//$obj.get()[0] 예:
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <title>Insert title here</title>
5 <style>
6 #d1{
7 width:200px;
8 height:100px;
9 background-color:red;
10 color:yellow;
11 }
12 </style>
13 <script type="text/javascript" src="js/jquery-1.4.3.js">
14 </script>
15 <script type="text/javascript">
16 function f1(){
17 var $obj = $('#d1');
18 //$() jQuery
19 //$obj.innerHTML = 'hello java'; error!
20 // jQuery
21 //$obj.html('hello java');
22
23 //css ， $obj ，
24 // ， 。
25 $obj.css('background-color','blue')
26 .css('font-style','italic').css('font-size','50px');
27 }
28
29 //dom jQuery
30 function f2(){
31 var obj = document.getElementById('d1');
32 var $obj = $(obj);
33 $obj.css('width','300px');
34 }
35
36 //jQuery dom
37 function f3(){
38 var $obj = $('#d1');
39 //var obj = $obj.get(0);
40 var obj = $obj.get()[0];
41 obj.innerHTML = 'hello kitty';
42 }
43 </script>
44 </head>
45 <body style="font-size:30px;">
46 <div id="d1">hello jQuery</div>
47 <input type="button" value="ClickMe"
48 onclick="f3();"/>
49 </body>
50 </html>4) jQuery는prototype과 함께 사용할 때 주의해야 할 문제입니다.step1은prototype을 먼저 도입합니다.js step2는 jQuery를 사용합니다.noConflict () 함수, jQuery의 $함수에 별명을 제공합니다.예: var $a = jQuery.noConflict(); var $obj = $a('#d1');
1 function f1(){
2 // $ $a
3 var $a = jQuery.noConflict();
4 //var obj = $('d1');
5 //obj.innerHTML = 'hello java';
6 var $obj = $a('#d1');
7 $obj.html('hello java');
8 }이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
