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)
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Ajax 이용시 로컬 파일이 CORS 에러가 되었을 때의 대응
초보의 초보로 입문편의 참고서를 보면서 공부하고 있어,
Ajax에서 로컬 파일을 호출하려고했지만 CORS 정책 오류로 인해 실패했습니다.
브라우저에서 로컬 파일(html)을 표시한 것뿐.
사용 브라우저는 chrome...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.