jQuery 메소드 요약(예제 포함)
- 不言앞으로
- 2019-03-20 11:53:152408검색
이 문서는 jQuery 메서드에 대한 요약(예제 포함)을 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구가 참조할 수 있기를 바랍니다.
jQuery 소개
jQuery는 DOM 운영을 위한 경량 JS 라이브러리입니다. 여기에는 주로 다음 기능이 포함됩니다:
HTML 요소 선택 및 작업
HTML 이벤트 기능
HTML DOM 탐색 및 수정
CSS 작업
JavaScript 특수 효과 및 애니메이션
AJAX
jQuery 기반 플러그인
jQuery의 장점은 Internet Explorer 6을 포함한 모든 주요 브라우저와 호환된다는 것입니다!
jQuery 구문
$(selector).action()
문서 로딩 준비 이벤트
$(document).ready(function() {
// 代码...
});
// 简写方式
$(function() {
// 代码...
}); $(document).ready와 window.onload
$(document).ready와 window.onload의 차이점은 둘 다 페이지가 로드된 후에 실행되는 함수입니다. 경우에는 별 차이가 없습니다.
$(document).ready: DOM 구조가 그려진 후 로드될 때까지 기다리지 않고 실행됩니다. 이는 페이지의 이미지나 기타 외부 파일이 로드될 때까지 기다리지 않고 DOM 트리가 로드된 후에 실행된다는 것을 의미합니다. 그리고 여러 개의 .ready를 작성할 수 있습니다.
window.onload: 사진 및 기타 요소를 포함하여 페이지의 모든 요소가 로드되었습니다. 한 번만 실행할 수 있습니다.
jQuery 선택기
jQuery 선택기는 기존 CSS 선택기를 기반으로 합니다
$('*')
$('p')
$('ul li')
$('ul li:last -child' )
...
jQuery 이벤트
| 마우스 이벤트 | 키보드 이벤트 | 양식 이벤트 | 문서/창 이벤트 |
|---|---|---|---|
| click | keypress | 제출 | 로드 |
| dbclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave |
|
blur | unload |
| hover | |
|
일반적으로 사용되는 jQuery 이벤트 메소드
- click() 클릭 이벤트
- dbclick() 더블 클릭 이벤트
- mouseenter() 마우스 통과 이벤트
- mouseleave( ) 마우스가 요소를 벗어남 이벤트
- mousedown() 마우스가 요소 위로 이동할 때 마우스 다운 이벤트
- mouseup() 마우스를 누르고 요소 위로 이동할 때 마우스 놓기 이벤트
- hover() 마우스 호버 이벤트
- focus() 폼에 포커스 이벤트 elements
- blur() 양식 요소가 포커스를 잃음 이벤트
- submit() 양식 제출 이벤트
- change() 양식 요소 값 변경 이벤트
- keypress() 키보드 키 누르기 이벤트
- keydown() 키보드 키 누르기 이벤트
- keyup () 키보드 키 릴리즈 이벤트
- load() 지정된 요소 로딩 완료 실행 이벤트(1.8 버전 이후 폐기)
- resize() 창 크기 변경 이벤트
- scroll() 스크롤 청취 이벤트
jQuery 효과
$ (selector).action(speed,callback)
| variable | description |
|---|---|
| selector | selector |
| action | event |
| speed | 속도, 밀리초, 가능합니다 'slow', 'fast'에 대한 함수도 콜백 |
| callback |
show hide
- hide() 요소 숨기기
- show() 요소 표시
- toggle() 표시 it 숨겨진 요소, 표시된 요소 숨기기
페이드 인 및 아웃
- fadeIn() 페이드 인
- fadeOut() 페이드 아웃
- fadeToggle() 페이드 아웃 요소 페이드 인, 페이드 인 요소 페이드 아웃
-
fadeTo( ) 그라데이션 주어진 불투명도에 대해
$(selector).fadeTo(speed,opacity,callback);
불투명도 값은 0에서 1 사이입니다
slide
- slideDown() 아래로 슬라이드하여 요소를 확장합니다
- slideDown ( ) 위로 밀어 요소를 축소합니다
- slideToggle() 확장된 요소를 위로 밀어 축소하고 축소된 요소를 아래로 밀어 표시
animation
$(selector).animate({params},speed,callback) ;
| Parameters | 설명 | 필요 여부 |
|---|---|---|
| params | 애니메이션을 구성하는 CSS 속성을 정의하세요 | Must |
| speed | 속도(밀리초)도 가능 '느리게', '빠르게' | Optional |
| callback | Callback function | Optional |
Instance
$("button").click(function() {
$("p").animate({
left: "250px",
opacity: "0.5",
height: "150px",
width: "150px"
});
});
Stop animation
$(selector).stop(stopAll, goToEnd);
| 매개변수 | 가 필수 | |
|---|---|---|
| stopAll | 이 애니메이션 대기열을 지워야 하는지 여부를 나타냅니다. 기본값은 false입니다.jQuery 链(Chaining)通过 jQuery，可以把动作/方法链接在一起。 Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上，浏览器就不必多次查找相同的元素。 $("#p1")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);
// "p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动
jQuery HTMLjQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。 获取内容和属性获取内容
获取属性
// 获取属性
$('#test').attr('href'）
// 设置属性
$('#test').attr('href','http://www.baidu.com')
$('#test').attr({
href: 'http://www.baidu.com',
title: '百度'
})
// 回掉函数
$('#test').attr('href', function(i, origValue){
// i 被选元素列表中当前元素的下标
// origValue 原始值
return origValue + '/jquery'
})
添加删除元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。下面的代码表示删除所有 p 元素中类名是 italic 的元素 $('p').remove('.italic') 获取并设置 css 类
// 返回样式属性
$("p").css("background-color");
// 设置样式属性
$("p").css("background-color", "yellow");
// 或者
$("p").css({ "background-color": "yellow", "font-size": "200%" });
尺寸方法
元素遍历祖先元素：
$(document).ready(function() {
// p > ul > li > span
$("span").parentsUntil("p");
// 返回 ul 和 li
});
后代元素：
$(document).ready(function() {
$("p").find("span");
});
同胞元素：
元素过滤：
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的jQuery教程视频栏目！ |
위 내용은 jQuery 메소드 요약(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!