jQuery를 시작하기 위해 알아야 할 사항 요약

이번에는 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上传表单样式

jQuery解析xml文件详解

위 내용은 jQuery를 시작하기 위해 알아야 할 사항 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!