집 > 기사 > 웹 프론트엔드 > jQuery 디자인 아이디어의 예 공유

jQuery 디자인 아이디어의 예 공유

小云云원래의: 2018-01-23 13:21:271171검색

어떤 언어이든 생각이 매우 중요합니다. jQuery의 세부 사항을 살펴보기 전에 jQuery의 디자인 아이디어에 대한 일반적인 이해가 필요합니다. 문제가 발생하면 어떤 jQuery 기능을 사용해야 하는지 파악한 후 매뉴얼에서 구체적인 사용법을 빠르게 찾아보세요. 이 기사에서는 jQuery의 디자인 아이디어를 자세히 소개합니다. 아래 에디터와 함께 살펴보겠습니다.

요소 선택

jQuery의 기본 디자인 아이디어와 주요 사용법은 "웹 페이지 요소를 선택한 다음 해당 요소에 대해 특정 작업을 수행하는 것"입니다. 이것이 다른 JavaScript 라이브러리와 구별되는 기본 기능입니다

jQuery를 사용하는 첫 번째 단계는 종종 선택 표현식을 생성자 jQuery()(약어로 $)에 넣은 다음 선택한 요소를 가져오는 것입니다

【 CSS 시뮬레이션 선택 요소】

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('p.myClass') // 选择class为myClass的p元素
$('input[name=first]') // 选择name属性等于first的input元素

【특수 표현식 선택】

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('p:visible') //选择可见的p元素
$('p:gt(2)') // 选择所有的p元素，除了前三个
$('p:animated') // 选择当前处于动画状态的p元素

【다중 필터링 방법】

$('p').has('p'); // 选择包含p元素的p元素
$('p').not('.myClass'); //选择class不等于myClass的p元素
$('p').filter('.myClass'); //选择class等于myClass的p元素
$('p').first(); //选择第1个p元素
$('p').eq(5); //选择第6个p元素

Writing

【메소드 기능화】

네이티브 JavaScript에서는 할당 연산자가 더 자주 사용됩니다. jQuery에서는 함수 매개변수를 전달하는 방식이 주로 사용되는데, 즉 메소드 기능화

//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
p.onclick = function(){};
//jQuery
p.click(function(){});
//原生
p.innerHTML = '123';
//jQuery
p.html('123');

[Chained Operation]

웹 페이지 요소를 선택한 후 해당 요소에 대해 일련의 연산을 수행하고, 모든 연산을 연결한다. 함께 체인 형태로 작성하세요

$('p').find('h3').eq(2).html('Hello');

나누어 보면 다음과 같습니다.

$('p') //找到p元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello

jQuery가 가장 칭찬할 만하고 편리한 기능입니다. 그 원리는 jQuery 작업의 각 단계가 jQuery 객체를 반환하므로 서로 다른 작업을 함께 연결할 수 있다는 것입니다.

jQuery는 .end() 메서드도 제공하므로 결과 집합을 한 단계 뒤로 가져올 수 있습니다

$('p')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World

【Get 할당 조합 】

웹 페이지 요소를 작동하려면 가장 일반적인 요구 사항은 해당 값을 얻거나 값을 할당하는 것입니다. jQuery는 동일한 함수를 사용하여 값(getter)과 할당(setter)을 완료합니다. 즉, "getter"와 "할당자"가 하나로 결합됩니다. 값인지 할당인지는 함수의 매개변수에 따라 결정됩니다

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

공통 값과 할당 함수는 다음과 같습니다

.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

결과 집합에 여러 요소가 포함된 경우 할당 시 모든 요소가 값을 가져올 때 첫 번째 요소의 값만 가져옵니다.

[참고] 모든 요소의 텍스트 내용을 가져오는 .text()는 예외입니다.

이 기사가 도움이 되기를 바랍니다.

jQuery 디자인 아이디어의 예 공유

관련 기사