jQuery를 시작하기 위해 알아야 할 사항 요약
- php中世界最好的语言원래의
- 2018-04-23 15:13:59920검색
이번에는 jQuery 시작하기 지침에 대한 요약을 가져왔습니다. jQuery를 시작하기 위해 알아야 할 Notes는 무엇입니까? 다음은 실제 사례입니다.
jQuery 객체
•jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다.
•jQuery 개체는 jQuery에 고유합니다.
•jQuery 객체만 jQuery 메소드를 사용할 수 있습니다. DOM 객체의 모든 메소드는 jQuery 객체에서 사용할 수 없으며, 반대로 DOM 객체는 jQuery 메소드를 사용할 수 없습니다.
•규칙: jQuery 객체를 얻으면 변수 앞에 $
를 추가하세요. jQuery 객체는 여러 DOM 객체를 캡슐화하며 jQuery 객체는 배열과 유사한 객체입니다.
•배열 및 배열과 유사한 객체 차이점
1. 배열 유형은 Array
2입니다. 배열 유사 객체의 유형은 Object
DOM 객체에서 jQuery 객체
를 사용합니다. () DOM 객체를 Wrap Up하면 jQuery 객체로 변환할 수 있습니다
var item = document.getElementsByTagName('ul')[0], // DOM对象
$item = $(item); // jQuery对象
jQuery 객체는 DOM 객체로 변환됩니다
jQuery 객체는 jQuery에서 제공하는 get(index) 메소드를 사용하여 해당 객체를 가져옵니다. DOM 객체
var $ul = $('ul'),
ul = $ul.get(0);
jQuery 객체는 배열형 객체이므로 [] 메소드를 통해 해당 DOM 객체를 얻을 수 있습니다.
배열 유사 객체
배열 유사 객체는 본질적으로 객체이지만 저장 방법은 배열의 구조와 유사합니다
•인수 객체---- 함수 인수 개수를 허용합니다
• jQuery 객체-- --하단 레이어는 dom 객체입니다
attribute
•length 속성(배열 길이 | 요소 수)
method
•get(index): 인덱스 Object에 따라 해당 DOM을 다시 넣습니다.
•eq(index): 인덱스에 따라 해당 jQuery 개체를 반환합니다.
•index(): 요소의 인덱스 값을 찾습니다.
ready와 onlaod의 차이점
ready
1. 약어 있음
2. 하나의 HTML 페이지에 여러
허용 3. DOM 구조 로드 후 실행
4. 빠른 실행
onload
1. 약어 없음
2. HTML 페이지에서는 하나만 사용할 수 있습니다.
3 실행하기 전에 페이지의 모든 리소스가 로드될 때까지 기다려야 합니다.
4. 실행 속도가 준비보다 느립니다.
jQuery 애니메이션
기본 숨기기 및 표시 효과
•show()/hide()
$('p').show(1000).hide(1000);
맞다면 동일한 jQuery 객체를 사용하여 연쇄 연산을 사용할 수 있습니다.
슬라이딩 애니메이션 효과
•slideDown()/slideUp()
$('p').slideUp(1000).slideDown(1000);
페이드 인 및 아웃
•fadeIn() 페이드 인
•fadeOut() 페이드 아웃
$('p').fadeIn(1000).fadeOut(1000);
동시 및 대기 효과
•동시 효과: set 여러 개의 애니메이션을 동시에 실행
•큐 효과: 여러 개의 애니메이션을 설정하여 순서대로 실행
jQuery 플러그인
jQuery 플러그인의 역할
•기능 확장 jQuery
•컴포넌트화 기능 제공
날짜 플러그인 -layDate 플러그인
•layDate 사전 사용
1.laydate.js 소개
2.laydate(옵션)
플러그인 개발
전역 함수, 실제로는 jQuery 자체의 메서드입니다.
jQuery의 내장 함수 중 일부는 전역 함수를 통해 구현됩니다.
•比如$.ajax（）就是典型的全局函数
向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性
$.globalFunction = function(){
// todo...
};
可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用
当需要添加多个函数可以使用$.extend（）函数
$.extend({
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
});
通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险
我们可以把属于一个插件的所有全局函数封装到一个对象
$.plugins = function(){
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
};
通过上述代码，其实是为全局函数创建了另一个方法 --- plugins
functionOne 和 functionTwo 已经成为 plugins 对象的属性。
$.plugins.functionOne(); $.plugins.functionTwo();
添加 jQuery 实例对象的方法
$.fn.method = function(){};对象方法的环境
在任何插件方法内部，关键字 this 引用的都是当前调用方法的 jQuery对象，因此可以在 this 上面调用任何内置的 jQuery 方法。
方法连缀
通过 return this 来实现链式操作
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 jQuery를 시작하기 위해 알아야 할 사항 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!