jquery 사용 설명
11929 단어 jquery
《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》 첫 번째 jQuery 개발자가 쓴 jQuery를 어떻게 공부하는지에 관한 책이 7월에 출시됐으며, 관련 책도 3권이 출시됐다.
jQueryCamp 2007, 제이큐리 개발자의 만남도 10월 27일 보스톤에서 열린다.
VisualJquery는 Jquery의 학습과 조회 사이트로 1.1.2 버전으로 업데이트되었다.
jQuery 홈페이지 소개 번역:jQuery는 이전에 없었던 자바스크립트 라이브러리입니다.그는 HTML 문서를 쉽게 처리하고 이벤트를 제어하며 페이지에 애니메이션과 Ajax 효과를 추가할 수 있는 빠르고 간결하다.jQuery는 JavaScript의 작성 방식을 바꾸기 위해 설계되었습니다.
그는 모든 사람에게 적합하다: 디자이너, 개발자, 극객, 상업 응용...
작은 크기: 26.5KB(1.2.1 압축), 45.3KB(1.2.1 씬), 78.6KB(1.2.1 Full)...20.7KB(1.1.2 압축), 57.9KB(1.1.2 전체)호환성: CSS 1-3 및 기본 XPath 지원
전체 브라우저: IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+(하위 호환)jQuery 플러그인 : Ajax (25)/Animation and Effects (26)/Browser Tweaks (6)/Data (17)/DOM (21)/Drag-and-Drop (6)/Events (19)/Forms (39)/Integration (12)/JavaScript (20)/jQuery Extensions (37)/Layout (23)/Media (13)/Menus (13)/Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4) jQueryUI 라이브러리: 기본 마우스 상호작용: 드래그(drag and dropping), 정렬(sorting), 선택(selecting), 확대(resizing) 다양한 상호작용 효과: 아코디언식 접기 메뉴(accordions), 달력(date pickers), 대화상자(dialogs), 슬라이더(sliders), 표 정렬(table sorters), 쪽지(tabs), 확대경 효과(magnifier),섀도우 효과(shadow)는 jQuery가 어떻게 작동하는지 설명하는 간단한 예입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> </title>
</head>
<body id="bd">
<a href="http://www.baidu.com">baidu</a>
</body>
</html>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" >
$(function(){
$("a").click(function(e){//1) $("a");2)jQuery click;3)jQuery hide
$(this).hide("slow");
return false;
});
});
</script> jQuery에는'설정'이라는 사상이 있는데 이 점은 대상의 속성/이벤트 등 설정을 쉽게 이해하고 간편하게 한다. 다음과 같은 드래그 구성 요소의 초기화:
$(document).ready(
function()
{
$('#drag1').Draggable({
handle: "ax", //
onStart: function(el,x,y){ //
}
});
}
); $("#drag1") 는 jquery 대상을 찾고 만든 다음Draggable 방법으로 드래그 초기화를 호출합니다. 이 방법이 호출될 때 "설정"대상을 전달하고 드래그 동작을 하는 초기화 설정입니다.이러한'배치'사상은 일부 인코딩 절차를 크게 간소화했고 상당히 직관적이고 이해하기 쉽다.세 가지 문답:
1) 질문: 왜 $(selector) 다음에 jQuery 대상을 되돌려줍니까?답: jQuery의 원본 코드에서 알 수 있습니다: var $= jQuery.따라서 $(selector)가 작업할 때 사실은 jQuery(selector)이고 jQuery 대상을 만듭니다.물론 정확한 쓰기는 다음과 같아야 한다. var jq = new$(selector);jQuery는 외부에서 new를 피하는 작은 기교를 사용했습니다. jquery 방법 내부에서:if(window=this)return new jQuery(selector);
2) 질문: 왜 jQuery 대상을 만든 후에 $(selector)를 이렇게 쓸 수 있습니까?each(function(index){...});스트리밍을 해볼까요?답: 사실 jQuery(selector) 방법이 호출되었을 때 jQuery(selector) 방법 내부에서 마지막으로 되돌아오는 것은 하나의 수조:return this.setArray(a);each 방법체 내부는 for 순환이고 순환 체내에서는 이렇게 호출된다:method.call(this[ i],i).
3) 질문: 왜 jQuery는 jQuery 대상 속성/방법/이벤트의 플러그인식 확장을 할 수 있습니까?답:javasciprt의 대상에 대한 지식이 있다면 알 수 있습니다,jQuery.prototype 원형 대상의 확장 속성/방법 및 이벤트는 jQuery의 대상에게 '확장' 을 줍니다.이 점을 바탕으로 jQuery는 이렇게 썼다. jQuery.fn = jQuery.prototype.
따라서 플러그인 기능을 확장하면 다음과 같습니다.
jQuery.fn.check = function() {
return this.each(function() {
this.checked = true;
});
}; 사실:
jQuery.prototype.check = function() {
return this.each(function() {
this.checked = true;
});
}; 요약하면 jQuery는 우리에게 간결하고 편리한 인코딩 모델(jQuery 대상 만들기, jQuery 대상의 속성/방법/이벤트 직접 사용), 강력한dom 요소 검색기($), 플러그인 프로그래밍 인터페이스(jQuery.fn), 그리고 플러그인 초기화의'설정'대상 사상을 가져다 주었다.자신의 jQuery 구현
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<div id="d">divvv</div>
<div id="fsd">fdsf</div>
</body>
</html>
<script type="text/javascript">
// MyQuery
var MyQuery = function(selector){
if ( window == this ) return new MyQuery(selector);
// dom ,
var doms = document.getElementsByTagName(selector);
var arr = [];
for(var i=0; i<doms.length; i++){
arr.push(doms.item(i));
}
return this.setArray(arr);
}
MyQuery.prototype.setArray = function( arr ) {
this.length = 0;
[].push.apply( this, arr );
return this;
}
MyQuery.fn = MyQuery.prototype;
var $ = MyQuery;
// 1)each
MyQuery.fn.each = function(method){
for(var i=0,l=this.length; i<l; i++){
method.call(this[i],i);
}
}
// 2)show
MyQuery.fn.show = function(){
this.each(function(i){
alert(i+":"+this.id+":"+this.innerHTML);
});
}
//debugger
$("div").show();
</script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
