Jquery 사용법에 대한 자세한 설명-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Jquery 사용법에 대한 자세한 설명

PHPz

May 14, 2023 am 10:12 AM

jQuery는 가장 널리 사용되는 JavaScript 라이브러리 중 하나이며 이제 프런트엔드 개발에 필수적인 기술 중 하나가 되었습니다. 이 기사에서는 독자가 jQuery의 기본 개념, 구문 및 일반적인 방법을 더 잘 이해할 수 있도록 돕기 위해 jQuery 라이브러리의 사용법을 자세히 소개합니다.

1. jQuery 소개

jQuery는 JavaScript의 핵심 기능을 캡슐화한 빠르고 간결한 JavaScript 라이브러리입니다. 이는 HTML 문서 탐색, 이벤트 처리, 애니메이션 효과, AJAX 상호 작용 및 기타 작업을 단순화하는 사용하기 쉬운 API를 제공하여 개발자가 웹 애플리케이션을 보다 효율적으로 작성할 수 있도록 합니다.

웹 애플리케이션에서 jQuery를 사용하는 방법을 살펴보겠습니다.

2. jQuery 도입

jQuery를 사용하려면 웹 애플리케이션에 도입해야 합니다. jQuery를 도입하는 방법은 두 가지가 있습니다.

jQuery 파일 다운로드(권장)

jQuery 공식 웹사이트에서 jQuery 파일을 다운로드한 후 다음과 같이 HTML 페이지에 도입할 수 있습니다.

<script src="jquery.js"></script>

로그인 후 복사

In </head&gt ; 태그 앞에 위 코드를 삽입하면 웹 페이지에 jQuery 라이브러리를 도입할 수 있습니다. 파일 이름은 다운로드한 버전에 따라 다를 수 있습니다. </head>标签之前引入以上代码，即可将jQuery库引入到网页中。注意，文件名称可以根据你下载的版本而有所不同。

通过CDN引入jQuery

另一种引入jQuery的方式是使用CDN（内容分发网络），你只需要在HTML页面中进行如下引入：

<script src="https://cdn.jsdelivr.net/jquery/3.5.0/jquery.min.js"></script>

로그인 후 복사

这样就可以从CDN中引入最新版本的jQuery文件，而不需要下载并自己维护该文件。

三、jQuery语法

jQuery库中的所有功能都是通过jQuery()函数实现的。这个函数也称为 $ 函数，可以将选择器传递给它，以获取指定元素的jQuery对象，如下所示：

$(selector).action()

로그인 후 복사

$ 符号定义jQuery
selector 是要操作的HTML元素
action() 是要执行的动作，比如 addClass()、fadeOut()、animate() 等

四、jQuery选择器

jQuery选择器使我们能够根据元素的标记名、类、属性和属性值等内容来选择DOM元素。与传统的JavaScript DOM选择器不同，jQuery选择器不区分大小写。

下面是一些常见的jQuery选择器：

CDN을 통해 jQuery 소개jQuery를 소개하는 또 다른 방법은 CDN(Content Delivery Network)을 사용하는 것입니다. HTML 페이지에 다음과 같이 소개하기만 하면 됩니다. rrreee

选择器	描述
`*`	选择所有元素
`#id`	选择具有指定id的元素
`.class`	选择具有指定class的元素
`element`	选择所有指定元素类型的元素
`element.class`	选择指定元素class属性中包含指定值的元素
`element,element`	选择所有指定元素类型的所有指定元素类型的元素
`:first`	选择文档中第一个指定的元素
`:last`	选择文档中最后一个指定的元素
`:even`	选择文档中所有偶数位置的指定元素
`:odd`	选择文档中所有奇数位置的指定元素
`:eq(index)`	选择指定位置的指定元素（从第0个开始）
`:gt(no)`	选择指定位置之后的指定元素
`:lt(no)`	选择指定位置之前的指定元素
`:header`	选择所有标题元素（h1 ~ h6）
`:not(selector)`	选择不符合指定选择器的元素
`:contains(text)`	选择包含指定文本的元素
`:empty`	选择不包含子元素和文本的元素
`:hidden`	选择所有隐藏的元素
`:visible`

이렇습니다. 파일을 직접 다운로드하고 유지 관리할 필요 없이 CDN에서 최신 버전의 jQuery 파일을 가져옵니다. 🎜🎜3. jQuery 구문🎜🎜jQuery 라이브러리의 모든 함수는 jQuery() 함수를 통해 구현됩니다. 이 함수는 $ 함수라고도 하며 다음과 같이 선택기를 전달하여 지정된 요소의 jQuery 개체를 가져올 수 있습니다. 🎜rrreee

$

selector

action()

🎜4. jQuery 선택기🎜🎜jQuery 선택기를 사용하면 요소의 태그 이름, 클래스, 속성 및 속성 값을 기반으로 DOM 요소를 선택할 수 있습니다. 기존 JavaScript DOM 선택기와 달리 jQuery 선택기는 대소문자를 구분하지 않습니다. 🎜🎜다음은 몇 가지 일반적인 jQuery 선택기입니다: 🎜🎜🎜 *🎜🎜모든 요소 선택🎜🎜🎜#id🎜🎜지정된 ID를 가진 요소 선택🎜🎜🎜.class🎜🎜 지정된 클래스를 가진 요소 선택🎜🎜🎜element🎜🎜지정된 요소 유형의 모든 요소 선택🎜🎜🎜element.class🎜🎜 지정된 요소의 클래스 속성에 지정된 값이 포함된 요소🎜🎜🎜요소,요소🎜🎜지정된 모든 요소 유형 중 지정된 요소 유형의 모든 요소 선택🎜🎜🎜 :first🎜🎜문서에서 첫 번째로 지정된 요소를 선택하세요🎜🎜🎜:last🎜🎜문서에서 마지막으로 지정된 요소를 선택하세요🎜🎜🎜:even🎜🎜문서의 모든 짝수 위치에서 지정된 요소를 선택합니다🎜🎜🎜:odd🎜🎜모든 홀수 위치에서 지정된 요소를 선택합니다 문서에서🎜🎜🎜 :eq(index)🎜🎜지정된 위치에서 지정된 요소를 선택합니다(0번째부터 시작)🎜🎜🎜:gt( no)🎜🎜지정된 위치 선택 🎜🎜🎜:lt(no)🎜🎜지정된 위치 뒤에 지정된 요소 선택 🎜🎜🎜 :header🎜🎜Title 요소 전체 선택(h1 ~ h6)🎜🎜🎜:not(selector)🎜🎜지정된 선택기와 일치하지 않는 요소 선택🎜 🎜🎜:contains(text)🎜🎜지정된 텍스트를 포함하는 요소를 선택하세요🎜🎜<tr>🎜<code>:empty🎜🎜child를 포함하지 않는 요소를 선택하세요 요소 및 텍스트🎜🎜🎜:숨김 code>🎜🎜숨겨진 요소 모두 선택🎜🎜<tr>🎜<code>:visible🎜🎜보이는 요소 모두 선택🎜🎜🎜🎜

5. jQuery 이벤트

jQuery 이벤트는 HTML 요소를 조작하는 가장 편리한 방법입니다. 다음은 몇 가지 일반적인 jQuery 이벤트입니다.

선택기	설명

Event	Description
`click()click()`	鼠标点击事件
`dblclick()`	鼠标双击事件
`mouseenter()`	鼠标移入事件
`mouseleave()`	鼠标移出事件
`mousedown()`	按下鼠标按钮事件
`mouseup()`	松开鼠标按钮事件
`keydown()`	按下键盘按钮事件
`keyup()`	松开键盘按钮事件
`focus()`	元素获取焦点事件
`blur()`	元素失去焦点事件
`submit()`	提交表单事件
`load()`	加载页面事件
`resize()`	调整页面大小事件
`scroll()`	页面滚动事件
`change()`	元素内容改变事件

六、jQuery效果

jQuery提供了一组强大的效果方法，可以让我们轻松地添加动画效果、改变元素内容、元素位置、元素大小等等。下面是一些常见的jQuery效果：

效果	描述
`hide()`	隐藏指定的元素
`show()`	显示指定的元素
`toggle()`	隐藏显示元素的状态
`fadeIn()`	淡入指定的元素，基于透明度
`fadeOut()`	淡出指定的元素，基于透明度
`fadeToggle()`	隐藏显示元素的状态，基于透明度
`slideDown()`	向下滑动显示指定的元素
`slideUp()`	向上滑动隐藏指定的元素
`slideToggle()`	展开或收缩元素
`animate()`	创建自定义动画
`stop()`	停止动画
`scrollTop()`	将滚动条向上移动到指定元素的顶部
`scrollLeft()`	将滚动条向左移动到指定元素的左侧
`css(property)`	获取指定CSS属性的值
`css(property, value)`	设置CSS属性的值
`width()`	获取元素的宽度
`height()`	获取元素的高度

七、jQuery AJAX

AJAX是一种异步JavaScript和XML技术，使我们能够通过JavaScript使用HTTP请求和响应数据，无需重新加载整个页面即可更新部分页面。

jQuery提供了一组强大的AJAX方法，使我们可以轻松地使用AJAX技术。下面是一些常见的jQuery AJAX方法：

마우스 클릭 이벤트dblclick() code >

AJAX方法	描述
`$.ajax()`	使用HTTP请求从远程服务器获取数据
`$.get()`	使用HTTP GET请求从远程服务器获取数据
`$.post()`	使用HTTP POST请求从远程服务器获取数据
`$.getJSON()`	获取JSON格式的数据
`$.ajaxSetup()`	设置全局AJAX设置
`$.ajaxError()`	处理AJAX错误
`$.ajaxComplete()`	处理AJAX请求的完成事件
`$.ajaxStart()`	处理AJAX开始时的事件
`$.ajaxSend()`	处理AJAX请求发送前的事件
`$.ajaxSuccess()`	处理AJAX请求成功的事件
`$.ajaxStop()`	处理AJAX结束时的事件
`$.ajaxSetup()`

마우스 더블클릭 이벤트

🎜mouseenter()🎜🎜마우스 인 이벤트🎜🎜🎜🎜mouseleave()🎜🎜마우스 아웃 이벤트🎜🎜 🎜🎜mousedown()🎜🎜마우스 버튼 눌림 이벤트🎜🎜🎜🎜mouseup()🎜🎜마우스 버튼 눌림 이벤트🎜🎜🎜🎜keydown() code >🎜🎜키보드 버튼 누름 이벤트🎜🎜🎜🎜<code>keyup()🎜🎜키보드 버튼 릴리즈 이벤트🎜🎜🎜🎜focus()🎜🎜요소가 포커스 이벤트를 얻음🎜 🎜 🎜🎜blur()🎜🎜요소가 포커스를 잃음 이벤트🎜🎜🎜🎜submit()🎜🎜Submit form 이벤트🎜🎜🎜🎜load() code >🎜🎜페이지 로드 이벤트🎜🎜🎜🎜<code>resize()🎜🎜페이지 크기 조정 이벤트🎜🎜🎜🎜scroll()🎜🎜페이지 스크롤 이벤트🎜🎜🎜🎜 change()🎜🎜요소 내용 변경 이벤트🎜🎜🎜🎜🎜 6. jQuery 효과🎜🎜jQuery는 애니메이션 효과 추가, 요소 내용 변경, 요소 위치, 요소 변경 등을 쉽게 할 수 있는 강력한 효과 메서드 세트를 제공합니다. 크기 등 다음은 몇 가지 일반적인 jQuery 효과입니다. 🎜🎜🎜🎜🎜Effect🎜🎜Description🎜🎜🎜🎜🎜🎜hide()🎜🎜지정된 요소 숨기기🎜🎜🎜🎜show()🎜🎜지정된 요소 표시🎜🎜🎜🎜<code>toggle()🎜🎜표시된 요소의 상태 숨기기🎜🎜🎜🎜fadeIn()🎜🎜페이드 인 투명도에 따라 지정된 요소🎜🎜🎜🎜fadeOut()🎜🎜투명도에 따라 지정된 요소 페이드 아웃🎜🎜🎜🎜fadeToggle()🎜🎜상태 숨기기 투명도에 따라 표시된 요소의 🎜🎜🎜🎜slideDown()🎜🎜아래로 슬라이드하여 지정된 요소를 표시합니다🎜🎜🎜🎜slideUp()🎜🎜위로 슬라이드 지정된 요소 숨기기🎜🎜🎜🎜slideToggle()🎜🎜요소 확장 또는 축소🎜🎜🎜🎜animate()🎜🎜맞춤 애니메이션 만들기🎜🎜🎜🎜 stop()🎜 🎜애니메이션 중지🎜🎜🎜🎜scrollTop()🎜🎜스크롤 막대를 지정된 요소의 맨 위로 이동🎜🎜🎜🎜

scrollLeft()🎜🎜스크롤 막대를 왼쪽으로 이동 지정된 요소의 왼쪽으로 이동🎜🎜🎜🎜<code>css(property)

🎜🎜지정된 CSS 속성 값 가져오기🎜🎜🎜🎜 css(property, value)🎜🎜Settings CSS 속성의 값 🎜🎜🎜🎜width()🎜🎜요소의 너비를 가져옵니다🎜🎜🎜🎜height()🎜🎜요소의 높이를 가져옵니다🎜🎜🎜🎜🎜VII , jQuery AJAX🎜🎜AJAX는 JavaScript를 통해 HTTP 요청 및 응답 데이터를 사용하여 부분을 업데이트할 수 있는 비동기 JavaScript 및 XML 기술입니다. 전체 페이지를 다시 로드하지 않고 페이지를 다시 로드합니다. 🎜🎜jQuery는 AJAX 기술을 쉽게 사용할 수 있게 해주는 강력한 AJAX 메소드 세트를 제공합니다. 다음은 몇 가지 일반적인 jQuery AJAX 메서드입니다. 🎜🎜🎜🎜🎜AJAX 메서드 🎜🎜 설명 🎜🎜🎜🎜🎜🎜 🎜$.get()🎜🎜HTTP GET 요청을 사용하여 원격 서버에서 데이터 가져오기🎜🎜 🎜🎜$.post()🎜🎜HTTP POST 요청 데이터를 사용하여 원격 서버에서 데이터 가져오기🎜🎜🎜🎜$.getJSON()🎜🎜JSON 형식으로 데이터 가져오기🎜 🎜🎜🎜$.ajaxSetup()🎜🎜전역 AJAX 설정 지정🎜🎜🎜🎜 $.ajaxError()🎜🎜AJAX 오류 처리🎜🎜🎜🎜$ .ajaxComplete()🎜🎜AJAX 요청 완료 이벤트 처리🎜🎜🎜🎜$.ajaxStart()🎜🎜AJAX 시작 시 이벤트 처리🎜🎜🎜🎜$.ajaxSend ()🎜🎜AJAX 요청이 전송되기 전에 이벤트를 처리합니다🎜🎜🎜🎜$.ajaxSuccess ()🎜🎜AJAX 요청이 성공하면 이벤트를 처리합니다🎜🎜🎜🎜$. ajaxStop()🎜🎜AJAX 종료 시 이벤트 처리🎜🎜🎜🎜$.ajaxSetup() 🎜🎜전역 AJAX 설정 설정🎜🎜🎜🎜🎜 8. 요약🎜🎜이 글에서는 다음 내용을 소개합니다. 기본 개념, 구문 및 일반적인 방법을 포함하여 jQuery 라이브러리의 사용법을 자세히 설명합니다. 개발자는 이러한 지식을 활용하여 웹 애플리케이션을 보다 효율적으로 작성할 수 있습니다. jQuery는 현재 가장 인기 있고 간결한 JavaScript 라이브러리 중 하나입니다. JavaScript용 강력한 API를 많이 제공하여 JavaScript 개발을 더 쉽게 이해하고 관리하며 확장할 수 있습니다. 개발자는 jQuery 라이브러리를 사용하여 복잡한 작업을 쉽게 완료하고, 다양한 DOM 이벤트를 처리하고, 다양한 효과와 AJAX 작업을 수행할 수 있어 웹 애플리케이션의 사용자 경험, 안정성 및 응답 속도를 향상시키는 데 도움이 됩니다. 🎜

위 내용은 Jquery 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.