jquery를 시작하는데 필요한 기본 이해와 예제(organized)_jquery

1.Juqery는 자바스크립트를 위한 훌륭한 프레임워크입니다. CSS3 및 다양한 브라우저(IE 6.0, FF 1.5, Safari 2.0, Opera 9.0)와 호환되는 경량 js 라이브러리이며 jQuery2.0 및 후속 버전에서는 더 이상 IE6/7/8 브라우저를 지원하지 않습니다. jQuery를 사용하면 사용자는 HTML 문서 및 이벤트를 보다 쉽게 ​​처리하고, 애니메이션 효과를 구현하고, 웹 사이트에 AJAX 상호 작용을 쉽게 제공할 수 있습니다.

jQuery의 또 다른 큰 장점은 문서가 매우 완벽하고 다양한 애플리케이션이 자세히 설명되어 있다는 점입니다. 선택할 수 있는 성숙한 플러그인도 많이 있습니다. jQuery는 사용자 HTML 페이지의 코드와 HTML 콘텐츠를 분리하여 유지할 수 있습니다. 즉, 명령을 호출하기 위해 HTML에 여러 개의 js를 삽입할 필요가 없습니다.

jQuery2.0 프레임워크를 사용할 때 위 문단을 통해 제가 말씀드리고 싶은 것은 일부 코드가 Eclipse에서 실행되지 않는다면 브라우저 커널이 너무 낮다는 것입니다. 브라우저 버전이 높을수록 효과를 볼 수 있습니다.

2. jQuery 라이브러리에는 다음 기능이 포함되어 있습니다.
·HTML 요소 선택
·HTML 요소 조작
·CSS 조작
·HTML 이벤트 기능
·JavaScript 특수 효과 및 애니메이션
· HTML DOM 탐색 및 수정
· AJAX
· 유틸리티
3. Google과 Microsoft 모두 jQuery를 매우 잘 지원합니다.
컴퓨터에서 jQuery 라이브러리를 호스팅하지 않으려면 Google 또는 Microsoft에서 CDN jQuery 코어 파일을 로드할 수 있습니다.
Google CDN 사용

코드 복사 코드는 다음과 같습니다.

< 헤드>

기본 구문:
jQuery 구문 예
$(this ).hide()
현재 HTML 요소를 숨기는 jQuery hide() 함수를 보여줍니다.
$("#test").hide() //id 읽기
id="test"인 요소를 숨기는 jQuery hide() 함수를 보여줍니다.
$("p").hide()
모든

요소를 숨기는 jQuery hide() 함수를 보여줍니다. //이 방법으로 태그를 직접 읽을 수 있습니다.
$(".test").hide()
class="test"로 모든 요소를 ​​숨기는 jQuery hide() 함수를 보여줍니다. //클래스
의 요소 노드 읽기
Jquery에는 많은 선택기가 있습니다. jQuery 요소 선택기
jQuery는 CSS 선택기를 사용하여 HTML 요소를 선택합니다.
$("p")는

요소를 선택합니다.
$("p.intro")는 class="intro"가 있는 모든

요소를 선택합니다.
$("p#demo")는 id="demo"인 모든

요소를 선택합니다.
jQuery 속성 선택기
jQuery는 XPath 표현식을 사용하여 주어진 속성이 있는 요소를 선택합니다.
$("[href]")는 href 속성이 있는 모든 요소를 ​​선택합니다.
$("[href='#']")는 href 값이 "#"과 같은 모든 요소를 ​​선택합니다.
$("[href!='#']")는 href 값이 "#"과 같지 않은 모든 요소를 ​​선택합니다.
$("[href$='.jpg']")는 href 값이 ".jpg"로 끝나는 모든 요소를 ​​선택합니다.
jQuery CSS 선택기
jQuery CSS 선택기는 HTML 요소의 CSS 속성을 변경하는 데 사용할 수 있습니다.

다음 예에서는 모든 p 요소의 배경색을 빨간색으로 변경합니다.
예

코드 복사 코드는 다음과 같습니다.

$("p").css("Background-color","red")

jQuery 이벤트
아래는 jQuery의 이벤트 메소드에 대한 몇 가지 예입니다.

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件