jQuery 일반적인 방법 요약

5631 단어 jQueryJavaScript
1. jQuery 파일 및 문서 준비 함수 도입 사용


	
		
		
		JQuery index
	
	
		
	
	
		$(document).ready(function () {
			alert("    JQuery");
		});
		
	

2. jQuery 중 각종 선택기
  • 요소 선택기.문서의 모든 요소를 선택하려면 $('p')
  • class 선택기.class='a'의 모든 요소를 선택하면$('.a')
  • id 선택기.id='b'의 모든 요소를 선택하면$('#b')
  • 추가 선택기
  • 은 속성 글자의 첫 번째 선택기 [name|="value"]에 따라 그 중value는 - 앞의 값일 수 있습니다. 예를 들어value-other도 선택할 수 있습니다.$('a[href|='#']')
  • 속성에 따라 문자를 포함하는 선택기 [name*="value"].$('a[href*='#']')
  • 속성에 따라 한 단어를 포함하는 선택기 [name~="word"]에 따라 그 중의 단어는 반드시 경계가 공백이어야 한다.name="a hello"와 같이 [name~="hello"]를 선택할 수 있습니다. name="ahello"와 같이
  • 을 선택할 수 없습니다.
  • 속성에 따라 끝나는 선택기 [name$="value"].name="ahello"와 같이 [name$="hello"]를 선택하면
  • 을 선택할 수 있습니다.
  • 속성 값이 같은 선택기 [name="value"].name="hello"와 같이 [name="hello"]를 선택하면
  • 을 선택할 수 있습니다.
  • 속성 값이 같지 않은 선택기 [name!="value"].name="hello"와 같이 [name="fine"]을 선택하면
  • 을 선택할 수 있습니다.
  • 속성에 따라 시작하는 선택기 [name^="value"].name="helloword"와 같이 [name="hello"]를 선택할 수 있습니다.[name|="value"] 선택기와 차이점
  • 은 원소 유형의 선택기 [type=value]에 따라:value로 대체할 수 있습니다.예를 들어 [type=checkbox] 또는: checkbox에서 type=checkbox를 선택한 선택기
  • 어떤 원소의 모든 하위 원소parent > child를 가져옵니다.$('ul>li')처럼 l원소의 모든 l원소
  • 가져오기
  • 같은 원소 중 첫 번째 원소를 가져옵니다:first.$('li:first')에서 첫 번째 리 요소
  • 가져오기
  • 같은 원소 중 마지막 원소를 가져옵니다:last.$('li:last')처럼 마지막 리 요소
  • 가져오기
  • 어떤 원소의 첫 번째 하위 원소를 얻습니다:first-child 예를 들어 $('div span:first-child')div 원소의 첫 번째 하위 원소를 얻습니다
  • 어떤 원소의 마지막 하위 원소를 얻습니다:last-child는 $('div span:ast-child')처럼div 원소의 마지막 하위 원소를 얻습니다
  • 같은 요소의 인덱스가 어느 수치보다 큰 선택기를 가져옵니다:gt ().예를 들어 $('td:gt(4)')에서 색인 값이 4보다 큰 td 요소를 가져오면 6개 및 이후의 td 요소
  • 을 가져옵니다
  • 같은 요소의 인덱스가 어느 수치보다 작은 선택기를 가져옵니다: lt ().
  • 특정 속성(속성 값 임의)을 포함하는 선택기를 가져옵니다[].$('div[id]')와 같이 id 속성이 있는div 요소
  • 을 가져옵니다
  • 에서 여러 개의 지정한 속성 (속성 값의 임의) 을 만족시키는 선택기 [name1="value1"] [name2="value2"] 를 가져옵니다.예를 들어 $('div[id] [name='a']) 는 id 속성이 있고 name='a'가 있는div 요소
  • 을 가져옵니다
  • 원소에 최소한 지정된 원소를 포함하는 선택기:has () 를 가져옵니다.$('div:has(p)') 와 같이 p 요소를 포함하는div 요소
  • 을 가져옵니다
  • 지정한 요소의 모든 홀수 인덱스를 가져오는 선택기:odd, 짝수 인덱스 선택기:even(인덱스는 0에서 짝수로 시작)
  • 3jQuery 이벤트 프로세서
  • 바인딩 이벤트 함수bind(eventType[,eventData],handler)
  • 바인딩 해제 이벤트 함수 unbind (eventType,handler)
  • 요소 내용이 수정된 이벤트change (handler).input,textarea,checkbox,radio와select 요소에만 유효
  • 클릭 이벤트 클릭
  • 마우스 오른쪽 단추로 터치 함수 contextmenu (handler)
  • 더블 클릭 이벤트dblclick(handler)
  • 초점 함수focus(handler)
  • 초점 함수 포커스 가져오기
  • 초점을 잃은 함수 포커스 아웃 (handler)
  • 등록 이벤트 함수 on(events,selector,[data,]handler), 기타 이벤트는 이 함수로
  • 등록 가능
  • 로그아웃 이벤트 함수off(event)
  • 문서 또는 요소 불러오기 완료 이벤트load(handler)
  • 각종 키보드 누르기 이벤트 키다운(handler), 키press(handler), 키업(handler)
  • 각종 마우스 조작 이벤트 마우스다운(handler),mouseenter(handler),mouseleave(handler),mousemove(handler),mouseout(handler),mouseover(handler),mouseup(handler)
  • 텍스트 준비 이벤트ready(handler), $(handler)와 동일]
  • 창 요소 사이즈 수정 이벤트resize(handler)
  • 창 스크롤 이벤트 scroll (handler)
  • 텍스트 내용 선택 이벤트select (handler).및 요소의 컨텐트만 선택된 경우
  • 제출 이벤트submit(handler).form표에만 효과가 있고 , , 또는 을 클릭하면 form표에 대한 제출 버튼을 누르면 리턴
  • 을 터치할 수 있습니다.
  • 전환 함수 toggle(handler)
  • 네 가지 흔히 볼 수 있는 조작 함수
  • 지정한 css 코스메틱 클래스addClass 추가(className)
  • 일치하는 요소의 앞에 내용 추가before(content [, content])
  • 일치하는 요소의 뒤에 내용 추가after(content [,content])
  • 일치하는 요소 내용의 끝 추가 내용 append(content [, content])
  • 은 일치하는 요소를 지정한 목표의 끝 appendTo(target)에 추가합니다.append 함수와 차이점 주의
  • 일치하는 원소 내용의 머리 추가 내용prepend(content [, content])
  • 은 일치하는 요소를 지정된 대상의 머리 부분prependTo(target)에 삽입합니다.prepend 함수와의 차이점 주의
  • 일치하는 요소의 속성 가져오기attr(attributeName)
  • 일치하는 요소의 속성prop(propertyName)을 가져옵니다.attr 함수와 차이점
  • 딥 클론 일치 요소 클론 ()
  • 에서 일치하는 요소를 가져오거나 설정하는 css 수식기 css ().가져올 때의 매개 변수는 css (propertyName) 이고, 설정할 때 css (propertyName,value)
  • 일치하는 요소의 하위 요소 empty ()
  • 비우기
  • 지정한 클래스hasClass (className)
  • 포함 여부 판단
  • 에서 일치하는 요소의 높이height()를 가져오거나 설정합니다.높이 매개 변수를 Height()로 지정하고 높이를 설정할 때 매개 변수를 Height(value)
  • 으로 지정합니다
  • 에서 일치하는 요소의 너비width()를 가져오거나 설정합니다.너비 파라미터를 가져오면width(), 너비를 설정할 때width(value)
  • 으로 지정합니다
  • 일치하는 요소의 html 내용 html()을 얻거나 설정합니다.획득 시 매개 변수는 html(), 설정 시 html(content)
  • 일치하는 요소 중 지정한 조건을 충족시키는 요소remove()를 제거합니다.매개 변수를 지정하지 않고 일치하는 모든 요소를 제거하고, 매개 변수remove(selector)를 지정하여 밭을 만족시키는 요소
  • 을 제거합니다
  • 지정한 속성 제거removeAttr(attributeName)
  • 지정된 속성 제거 removeProp ([propertyName])
  • 지정한 class 클래스 선택기removeClass ([className]) 를 제거합니다.코스메틱 클래스 이름을 지정하지 않을 때 모든 코스메틱 클래스 제거
  • 일치하는 요소는 지정한 모든 목표 요소replaceAll(target)
  • 을 대체합니다
  • 일치 요소가 지정된 대상 요소로 replaceWith(new Content)를 대체합니다.replaceAll 함수와 차이점
  • 에서 일치하는 요소의 텍스트 내용text()를 가져오거나 설정합니다.파라미터를 지정하지 않을 때 텍스트text()를 가져오고 파라미터를 지정할 때 텍스트text(content)
  • 을 설정합니다.
  • 전환class 수정기 toggleClass (className)
  • 에서 일치하는 요소의value값 val()을 가져오거나 설정합니다.매개 변수를 지정하지 않을 때value val () 을 가져오고, 매개 변수를 지정할 때value val (value)
  • 좋은 웹페이지 즐겨찾기