$("p").addClass(css에 정의된 스타일 유형); 요소에 스타일 추가
$("img").attr({src:"test.jpg",alt:" 테스트 이미지 "}); 요소에 속성/값을 추가합니다. 매개변수는 map
$("img").attr("src","test.jpg"); 요소에 속성/값을 추가합니다.
$("img").attr("title", function() { return this.src }) 요소에 속성/값 추가
$("Element Name").html() ; 요소(요소, 텍스트 등) 내에서 콘텐츠 가져오기
$("Element name").html("new stuff") 요소의 콘텐츠 설정
$ ("요소 이름").removeAttr("속성 이름") 요소에서 지정된 속성과 속성 값을 삭제합니다.
$("요소 이름").removeClass("class") 요소에서 지정된 스타일을 삭제합니다. element
$("Element Name").text(); 요소의 텍스트를 가져옵니다.
$("Element Name").text(value); 요소의 텍스트 값을 value
로 설정합니다. $("Element Name" ).toggleClass(class) 해당 요소가 매개변수의 스타일에 존재하는 경우 취소합니다. 존재하지 않는 경우 이 스타일을 설정합니다.
$("input element name").val() Get 입력 요소의 값
$( "input element name").val(value); 입력 요소의 값을 value로 설정
조작:
$("element name").after( content); 일치하는 요소
$("요소 이름").append(content) 뒤에 콘텐츠를 추가합니다.
$("요소 이름").appendTo(content) 요소 뒤에 콘텐츠를 삽입합니다. ); 컨텐츠 뒤에 컨텐츠 삽입
$( "Element name").before(content); after 메소드와 반대로
$("Element name").clone(Boolean 표현식) Boolean 표현식이 true인 경우 요소 복제(매개변수가 없으면 true로 처리됩니다. 처리 중)
$("Element Name").empty() 요소의 내용을 비어 있도록 설정
$("Element Name").insertAfter(content ); 콘텐츠 뒤에 요소 삽입
$("Element name").insertBefore(content); 콘텐츠 앞에 요소 삽입
$("Element").prepend(content); 요소 앞에 배치합니다.
$("Element").prependTo(content); 요소를 콘텐츠의 일부로 취급하고 콘텐츠 앞에 배치합니다
$("Element") .remove(); 지정된 모든 요소 삭제
$("Element").remove("exp"); exp를 포함하는 모든 요소 삭제
$("Element").wrap("html"); 요소를 둘러싸려면
$("Element ").wrap(element); 요소를 둘러싸려면
Traversing:
add(expr)
add(html)
add(elements )
children(expr)
contain(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not( el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
핵심:
$(html).appendTo("body")는 요소를 가져오기 위해
$(elems) 본문에 HTML 코드 조각을 작성하는 것과 같습니다. DOM에서
$(function(){… ..}); 함수 실행
$("div > p").css("border", "1px solid grey"); 모든 div의 하위 노드 p 및 스타일 추가
$( "input:radio", document.forms[0]) 현재 페이지의 첫 번째 양식에서 모든 라디오 버튼 찾기
$.extend(prop) 소품은 다음과 같습니다. jquery 객체,
예:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a , b) { return a > b ? a : b; }
})
jQuery( 표현식, [context] ) —$( 표현식, [context]); 현재 HTML 문서의 DOM 요소입니다.
각( 콜백 )은 일치하는 각 요소를 컨텍스트로 사용하여 함수를 실행합니다.
예: 1
$("span").click(function){
$("li " ).each(function(){
$(this).toggleClass("example");
})
})
예: 2
$("button" ) .click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("BackgroundColor", " yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" index);
return false ;
}
});
})
jQuery 이벤트:
$(document).ready()참고 본문에 onload 이벤트가 없습니다. 그렇지 않으면 함수를 실행할 수 없습니다. 각 페이지에는
많은 기능을 불러와 실행할 수 있으며, fn의 순서대로 실행됩니다.
bind( type, [data], fn )은 하나 이상의 이벤트 핸들러 함수를 일치하는 각 요소의 특정 이벤트(예: 클릭)에 바인딩합니다. 가능한 이벤트 속성은 다음과 같습니다: 흐림, 초점, 로드, 크기 조정, 스크롤, 언로드, 클릭, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, 변경, 선택, 제출, keydown, keypress,
keyup, error
one( type, [data], fn ) 하나 이상의 이벤트 핸들러 함수를 일치하는 각 요소의 특정 이벤트(예: 클릭)에 바인딩합니다. 이 이벤트 핸들러는 각
객체에서 한 번만 실행됩니다. 그 외의 규칙은 Bind() 함수와 동일합니다.
trigger( type, [data] )는 일치하는 각 요소에서 특정 유형의 이벤트를 트리거합니다.
triggerHandler( type, [data] ) 이 특정 메소드는 요소에서 특정 이벤트를 트리거하고(이벤트 유형 지정) 이 이벤트에 대한 브라우저의 기본 작업을 취소합니다.
unbind( [type], [ data] ) 바인딩을 해제하고 일치하는 각 요소에서 바인딩된 이벤트를 제거합니다.
$("p").unbind()는 모든 단락에서 모든 바인딩된 이벤트를 제거합니다
$("p").unbind( "click" )는 모든 단락에서 클릭 이벤트를 제거합니다
hover(over, out ) Over 및 out은 두 가지 방법 모두 마우스가 일치하는 요소 위로 이동하면 지정된 첫 번째 기능이 트리거됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다.
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);
toggle( fn, fn ) 동일한 요소를 다시 클릭하면 지정된 첫 번째 함수가 트리거됩니다. 요소에서는 지정된 두 번째 기능이 트리거됩니다.
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);
요소 이벤트 목록 설명
참고: 매개변수가 없는 함수의 매개변수는 선택사항입니다. jQuery는 양식 요소의 재설정 이벤트를 지원하지 않습니다.
이벤트 설명은 요소 또는 객체를 지원합니다.
blur( ) 요소는 포커스를 잃습니다. a, input, textarea, 버튼, select, label, map, Area
change( ) 사용자가 필드 입력의 내용을 변경합니다. textarea, select
click( ) 객체의 거의 모든 요소를 마우스로 클릭합니다.
dblclick( ) 객체의 거의 모든 요소를 마우스로 더블클릭합니다.
error( ) 로드할 때 오류가 발생하는 경우 문서 또는 이미지 창, img
focus ( ) 요소가 포커스를 얻습니다 a, input, textarea, 버튼, 선택, 레이블, 지도, 영역
keydown( ) 특정 키보드 키를 눌렀을 때 거의 모든 요소
keypress ( ) 특정 키보드 키가 눌림 거의 모든 요소를 누르거나 누르고 있음
keyup( ) 특정 키보드 키가 눌림 거의 모든 요소
load( fn ) 특정 페이지나 이미지가 로드된 창, img
mousedown( fn ) Some 거의 모든 요소에서 마우스 버튼을 눌렀습니다.
mousemove( fn ) 거의 모든 요소에서 마우스를 움직입니다.
mouseout( fn ) 거의 모든 요소에서 한 요소에서 마우스를 움직입니다.
mouseover( fn ) 요소 위에서 마우스가 이동합니다. 요소 위의 거의 모든 요소
mouseup( fn ) 마우스 버튼이 해제됩니다. 거의 모든 요소
resize( fn ) 창이나 프레임의 크기가 조정됩니다. window, iframe, Frame
스크롤( fn ) 문서 스크롤 보이는 부분이 창일 때
select( ) 텍스트가 선택됨 document, input, textarea
submit( ) submit 버튼 클릭 시
unload( fn ) 사용자가 페이지 창을 종료합니다.
JQuery Ajax 메서드 설명:
load( url, [data], [callback] )은 원격 HTML 콘텐츠를 DOM 노드에 로드합니다.
$("#feeds").load("feeds.html"); 피드 ID가 있는 div에 Feeds.html 파일을 로드합니다.
$("#feeds").load("feeds. php", {제한: 25}, function(){
alert("피드의 마지막 25개 항목이 로드되었습니다.");
});
jQuery.get( url, [data], [callback] ) 페이지를 요청하려면 GET을 사용하세요.
$.get("test.cgi", { 이름: "John", 시간: "오후 2시" }, function(data){
alert("로드된 데이터: " data);
}) ;
jQuery.getJSON( url, [data], [callback] ) JSON 데이터를 요청하려면 GET을 사용하세요.
$.getJSON("test.js", { 이름: "John", 시간: "오후 2시" }, function(json){
alert("JSON 데이터: " json.users[3].name );
});
jQuery.getScript( url, [callback] ) GET을 사용하여 자바스크립트 파일을 요청하고 실행합니다.
$.getScript("test.js", function(){
alert("스크립트가 로드되고 실행되었습니다.");
})
jQuery.post( url, [data], [콜백], [유형] ) POST를 사용하여 페이지를 요청합니다.
ajaxComplete( callback ) AJAX 요청이 끝나면 함수를 실행합니다. 이것은 Ajax 이벤트입니다
$("#msg").ajaxComplete(function(request, settings){
$(this).append("
Request Complete.") ;
});
ajaxError( callback ) AJAX 요청이 실패하면 함수를 실행합니다. 이것은 Ajax 이벤트입니다
$("#msg").ajaxError(function(request, settings){
$(this).append("
페이지 " settings.url "< /li>");
});
ajaxSend( callback ) AJAX 요청이 전송되면 함수를 실행합니다. 이것은 Ajax 이벤트입니다
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("});
ajaxStart( callback ) AJAX 요청이 시작되었지만 아직 활성화되지 않은 경우 함수를 실행합니다. 이것은 Ajax 이벤트입니다.
AJAX 요청이 시작되고 아직 활성화되지 않은 경우 로딩 정보를 표시합니다.
$("#loading").ajaxStart(function(){
$(this).show( ) ;
});
ajaxStop( callback ) 모든 AJAX가 중지되면 함수를 실행합니다. 이것은 Ajax 이벤트입니다.
모든 AJAX 요청이 중지되면 로딩 정보를 숨깁니다.
$("#loading").ajaxStop(function(){
$(this).hide();
})
ajaxSuccess( callback ) AJAX 요청이 다음과 같은 경우 성공 완료되면 함수를 실행합니다. Ajax 이벤트입니다.
AJAX 요청이 성공적으로 완료되면 정보를 표시합니다.
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("요청 성공!");
});
jQuery.ajaxSetup( options ) 모든 AJAX 요청에 대한 전역 설정을 지정합니다. 모든 옵션 정보를 얻으려면 $.ajax 함수를 참조하세요.
기본 전역 AJAX 요청 옵션을 설정합니다.
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”
})
$.ajax({ data: myData });
serialize( )는 입력 요소 집합을 이름과 값으로 연결합니다. 양식 요소의 올바른 순서를 구현했습니다.
function showValues() {
var str = $("form").serialize()
$("#results").text(str); > }
$(":checkbox, :radio").click(showValues)
$("select").change(showValues)
showValues()
serializeArray ( )는 모든 양식과 양식 요소를 연결하지만(.serialize() 메서드와 유사) JSON 데이터 형식을 반환합니다.
양식에서 값 세트를 가져와 표시합니다.
function showValues() {
var fields = $(":input").serializeArray()
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value " ") ;
});
}
$(":checkbox, :radio").click(showValues)
$("select").change(showValues); );
JQuery 효과 메서드 설명
show() 숨겨진 일치 요소를 표시합니다.
show(speed, [callback])은 일치하는 모든 요소를 우아한 애니메이션으로 표시하고 선택적으로 표시가 완료되면 콜백 함수를 트리거합니다.
hide( )는 일치하는 모든 요소를 숨깁니다.
hide( speed, [callback] ) 우아한 애니메이션으로 일치하는 모든 요소를 숨기고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다.
toggle( ) 요소의 표시 상태를 전환합니다. 요소가 표시되면 숨김으로 전환하고, 요소가 숨겨져 있으면
표시로 전환합니다.
slideDown( speed, [callback] )은 높이 변경(아래로 증가)을 통해 일치하는 모든 요소를 동적으로 표시하고 선택적으로 표시가 완료된 후 콜백 함수를 트리거합니다
. 이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소가
"슬라이딩" 방식으로 표시되도록 합니다.
slideUp( speed, [callback] )은 높이를 변경(위로 감소)하여 일치하는 모든 요소를 동적으로 숨깁니다. 선택적으로
숨기기가 완료된 후 콜백 함수를 트리거합니다. 이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소를 "슬라이딩"
방식으로 숨길 수 있습니다.
slideToggle( speed, [callback] )은 높이 변경을 통해 일치하는 모든 요소의 표시 여부를 전환하고 선택적으로 전환이 완료되면 콜백 함수를 트리거합니다. 이 애니메이션 효과는 요소의 높이만 조정하여 일치하는 요소를 "슬라이딩" 방식으로 숨기거나 표시할 수 있습니다.
fadeIn( speed, [callback] )은 불투명도를 변경하여 일치하는 모든 요소를 페이드 인하고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다. 이 애니메이션은 요소의 불투명도만 조정합니다. 즉,
일치하는 모든 요소의 높이와 너비는 변경되지 않습니다.
fadeOut( speed, [callback] )은 불투명도를 변경하여 일치하는 모든 요소를 페이드 아웃하고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다. 이 애니메이션은 요소의 불투명도만 조정합니다. 즉,
일치하는 모든 요소의 높이와 너비는 변경되지 않습니다.
fadeTo( speed, opacity, [callback] )는 일치하는 모든 요소의 불투명도를 지정된 불투명도로 점진적으로 조정하고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다
. 이 애니메이션은 요소의 불투명도만 조정합니다. 즉,
일치하는 모든 요소의 높이와 너비는 변경되지 않습니다.
stop( )은 일치하는 모든 요소의 현재 실행 중인 애니메이션을 중지합니다. 대기열에 있는 애니메이션이 있으면 즉시 시작됩니다.
queue() 첫 번째로 일치하는 요소의 애니메이션 시퀀스에 대한 참조를 가져옵니다(내용이 함수인 배열을 반환함)
queue(callback) 일치하는 각 요소의 이벤트 시퀀스 끝에 실행 가능한 함수를 추가합니다. , as 이 요소의 이벤트 함수
queue( queue )는 일치하는 모든 요소의 원래 애니메이션 시퀀스를 새로운 애니메이션 시퀀스로 대체합니다.
dequeue( )는 애니메이션 시퀀스 앞부분의 애니메이션을 실행하고 제거합니다
animate( params, [duration ], [easing], [callback] ) 사용자 정의 애니메이션을 생성하기 위한 함수입니다.
animate( params, options ) 사용자 정의 애니메이션을 만드는 또 다른 방법입니다. 기능은 위와 동일합니다.
JQuery Traversing 메서드 설명
eq(index) 일치하는 요소 컬렉션에서 지정된 위치에 있는 요소를 가져옵니다. 인덱스는 0부터 시작합니다.
filter(expr) 지정된 항목과 일치하는 항목을 반환합니다. 표현식 요소 컬렉션의 경우 ","를 사용하여 여러 조건 필터링을 구현하는 데 사용되는 여러 expr을 구분할 수 있습니다.
filter(fn)는 필터링 조건으로 특수 함수를 사용하여 집합에서 일치하지 않는 요소를 제거합니다.
is(expr)는 표현식을 사용하여 현재 선택된 요소 집합을 확인하고 하나 이상의 요소가 주어진
표현식과 일치하면 true를 반환합니다.
map(callback)은 콜백 메서드를 사용하여 jQuery 개체의 요소 집합을 해당 값으로 변환한 다음 이를 jQuery 배열에 추가합니다.
not(expr) 일치하는 요소 집합에서 지정된 표현식과 일치하는 요소를 제거합니다.
slice(start, [end]) 배열의 내장 슬라이스 메소드와 동일하게 일치하는 요소 집합에서 하위 집합을 가져옵니다.
add(expr)는 표현식과 일치하는 요소를 jQuery 객체에 추가합니다.
children( [expr] ) 일치하는 요소 세트에 있는 각 요소의 모든 하위 요소를 포함하는 요소 세트를 가져옵니다.선택적 필터
를 사용하면 이 메서드가 일치하는 요소(텍스트 노드가 아닌 요소 노드만)만 일치하게 됩니다.
contents( )는 일치하는 요소 집합에 있는 각 요소의 모든 하위 노드를 포함하는 집합을 얻습니다(
텍스트 노드를 제외하고 요소 노드만 포함됨). 요소가 iframe인 경우 문서 요소
를 얻습니다. find(expr)는 지정된 표현식과 일치하는 모든 요소를 검색합니다.
next( [expr] ) 일치하는 요소 집합에 있는 각 요소의 바로 다음 형제 요소를 포함하는 요소 집합을 가져옵니다.
nextAll( [expr] ) 일치하는 요소 집합에 있는 각 요소의 모든 후속 형제 요소를 포함하는 요소 집합을 가져옵니다.
parent( [expr] ) 일치하는 모든 요소의 고유한 상위 요소를 포함하는 요소를 가져옵니다. .
parents( [expr] ) 일치하는 모든 요소(루트 요소 제외)의 고유한 조상 요소를 포함하는 요소 집합을 가져옵니다.
prev([expr]) 일치하는 요소 집합에 있는 각 요소의 바로 앞에 있는 형제 요소를 포함하는 요소 집합을 가져옵니다.
prevAll( [expr] ) 일치하는 요소 집합에 있는 각 요소의 이전 형제 요소를 모두 포함하는 요소 집합을 가져옵니다.
siblings( [expr] ) 일치하는 요소 세트에 있는 각 요소의 모든 형제 요소를 포함하는 요소 세트를 가져옵니다.
andSelf() 현재 세트에 이전에 일치하는 요소 세트를 추가합니다.
모든 div 요소와 그 중 p 요소를 가져오고 테두리 클래스 속성을 추가합니다.모든 div 요소에서 p 요소를 가져옵니다.
배경 클래스 속성 추가
$("div").find("p").andSelf().addClass("border")
$(" div").find("p").addClass("Background");
end( )는 현재 작업을 종료하고 현재 작업의 이전 작업으로 돌아갑니다
. 전체 중에서 범위 요소 집합을 찾습니다. p 요소. 그런 다음 p 요소 컬렉션을 반환하고 CSS 속성
$("p").find("span").end().css("border", “2px red solid”);를 추가합니다. >
JQuery 선택기 메서드 설명
기본 선택기
$("#myDiv")는 이 ID 값을 가진 유일한 요소와 일치합니다.
$("div")는 지정된 이름을 가진 모든 요소와 일치합니다.
$ (".myClass")는 이 클래스 스타일 값을 가진 모든 요소와 일치합니다
$("*")는 모든 요소와 일치합니다
$("div,span,p.myClass")는 일치하는 모든 선택기를 통합합니다
계단식 선택기
$("form input") 하위 선택기, 조상의 모든 하위 노드 선택
$("#main > *") 하위 선택기, 상위의 모든 하위 노드 선택
$( "label input") 근접 선택기, prev
의 다음 근접 노드 선택$("#prev ~ div") 형제 선택기, prev
기본 필터 선택기
의 모든 형제 노드 선택 $("tr: first")는 처음 선택한 요소와 일치
$("tr:last")는 마지막으로 선택한 요소와 일치
$("input:not(:checked)span") 원본에서 선택기와 일치하는 모든 요소를 필터링합니다. 요소 세트에서 (여기에 특수 선택기가 있습니다)
$("tr:even") 세트에서 짝수 위치에 있는 모든 요소를 일치시킵니다 (0부터 시작)
$("tr :odd" ) 집합의 홀수 위치에 있는 모든 요소와 일치합니다(0부터 시작)
$("td:eq(2)") 집합의 지정된 위치에 있는 요소와 일치합니다(0부터 시작).
$("td :gt(4)") 집합에서 지정된 위치 뒤의 모든 요소와 일치합니다(0부터 시작)
$("td:gl(4)") 집합에서 지정된 위치 앞의 모든 요소와 일치합니다(0부터 시작). )
$(":header")는 모든 헤더와 일치
$("div:animated")는 실행 중인 애니메이션이 있는 모든 요소와 일치
콘텐츠 필터 선택기
$("div:contains('John ' )") 지정된 텍스트를 포함하는 모든 요소와 일치
$("td:empty") 모든 빈 요소와 일치(텍스트만 포함하는 요소는 빈 요소로 계산되지 않음)
$("div:has(p)" ) 다시 원래 요소 세트에서 하나 이상의 선택기를 포함하는 모든 요소와 일치
$("td:parent") 비어 있지 않은 모든 요소와 일치(텍스트가 포함된 요소도 계산됨)
$("div: Hidden ")는 형식의 숨겨진 필드를 포함하여 모든 숨겨진 요소와 일치합니다.
$("div:visible") 모든 보이는 요소와 일치합니다.
속성 필터 선택기
$("div[id]") 다음과 같은 모든 요소와 일치합니다. 지정된 속성
$("input[name='newsletter']") 지정된 속성 값을 가진 모든 요소와 일치
$("input[name!='newsletter']") 그렇지 않은 모든 요소와 일치 지정된 속성 값이 있음
$("input[name^='news']") 지정된 속성 값이 값으로 시작하는 모든 요소와 일치
$("input[name$='letter']" ) 일치 지정된 속성 값이 값
$("input[name*='man']")으로 끝나는 모든 요소 지정된 속성 값에 값 문자가 포함된 모든 요소와 일치
$("input[id][name $= 'man']")은 여러 선택기와 동시에 일치하는 모든 요소와 일치
하위 요소 필터 선택기
$("ul li:nth-child(2)"),
$(" ul li :nth-child(odd)"), 상위 요소의 n번째 하위 요소와 일치
$("ul li:nth-child(3n 1)")
$("div 범위: 첫 번째 -child")는 상위 요소의 첫 번째 하위 요소와 일치합니다.
$("div span:last-child")는 상위 요소의 마지막 하위 요소와 일치합니다.
$("div 버튼:only-child") 일치 상위 요소
양식 요소 선택기
$(":input")의 유일한 하위 요소는 모든 유형의 입력, 텍스트 영역, 선택 및 버튼을 포함한 모든 양식 입력 요소와 일치합니다.
$(":text ")는 텍스트 유형의 모든 입력 요소와 일치
$(":password")는 비밀번호 유형의 모든 입력 요소와 일치
$(":radio")는 라디오 유형의 모든 입력 요소와 일치
$ (": checkbox")는 checkbox 유형의 모든 입력 요소와 일치
$(":submit") submit 유형의 모든 입력 요소와 일치
$(":image")는 image 유형의 모든 입력 요소와 일치
$(" :reset")은 재설정 유형의 모든 입력 요소와 일치합니다.
$(":button")은 버튼 유형의 모든 입력 요소와 일치합니다.
$(":file")은 모든 유형의 입력 요소와 일치합니다. 파일 $(":hidden")은 양식의 숨김 또는 숨겨진 필드 유형의 모든 입력 요소와 일치합니다.
양식 요소 필터 선택기
$(":enabled")는 작동 가능한 모든 양식 요소와 일치합니다
$(" :disabled")는 작동할 수 없는 모든 양식 요소와 일치
$(":checked")는 선택한 모든 요소와 일치
$("select option:selected")는 모든 선택된 요소와 일치
JQuery CSS 메서드 설명
css( name ) 첫 번째로 일치하는 요소의 스타일 속성에 액세스합니다.
css(properties) "이름/값 쌍" 객체를 일치하는 모든 요소의 스타일 속성으로 설정합니다.
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow",fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “rgb(0,40,244)”
}
$(this). css(cssObj);
});
css( name, value ) 일치하는 모든 요소에 스타일 속성 값을 설정합니다.
offset( )은 현재 시각적 창을 기준으로 첫 번째로 일치하는 요소의 위치를 가져옵니다. 반환된 객체에는
top, left 2개의 속성이 있으며, 속성값은 정수입니다. 이 기능은 보이는 요소에만 사용할 수 있습니다.
var p = $("p:last");
var offset = p.offset();
p.html( “left: " offset.left ", top: " offset.top ) ;
width( )는 현재 첫 번째로 일치하는 요소의 너비 값을 가져오고,
width( val )은 일치하는 각 요소에 대해 지정된 너비 값을 설정합니다.
height( )는 현재 첫 번째로 일치하는 요소의 높이 값을 가져오고,
height( val)은 일치하는 각 요소에 대해 지정된 높이 값을 설정합니다.
JQuery 유틸리티 메서드 설명
jQuery.browser
.msie는
jQuery.browser.version이 사용자 브라우저의 버전 정보를 읽음을 의미합니다.
jQuery.boxModel은 사용자 브라우저에서 다음을 감지합니다. 현재 페이지의 표시가 w3c CSS 상자 모델을 기반으로 하는지 여부
jQuery.isFunction( obj )는 전달된 매개변수가 함수인지 확인합니다
function stub() { }
var objs = [
function () { },
{ x:15, y:20 },
null,
stub,
"function"
]
jQuery.each(objs, function (i) {
var isFunction(objs[i])
$("span:eq( " i ")").text(isFunc)
}); 🎜>jQuery.trim ( str ) 문자열의 양쪽 끝에서 공백을 제거합니다. 정규 표현식을 사용하여 주어진 문자의 양쪽 끝에서 공백을 제거합니다.
jQuery.each( object, callback ) 사용할 수 있는 범용 반복자입니다. 객체와 배열을 원활하게 반복하기 위해
jQuery.extend( target, object1, [objectN] )는 객체를 확장하고 원본 객체를 수정하여 반환합니다. 이는 상속을 구현하기 위한 강력한
도구입니다. JavaScript의
프로토타입 체인 메서드 대신 값을 전달합니다.
설정 및 옵션 개체를 병합하고 수정된 설정 개체를 반환합니다.
var settings = { 유효성 검사: false, 제한: 5, 이름: "foo" }
var 옵션 = { 유효성 검사: true, 이름: "bar" };
jQuery.extend(settings, options);
기본값과 옵션 개체를 병합하고 기본 개체는 수정되지 않았습니다. 옵션 개체의
값은 기본 개체 값 대신 빈 값으로 전달됩니다.
var 비어 있음 = {}
var defaults = { 유효성 검사: false, 제한: 5, 이름: "foo" }
var 옵션 = { 유효성 검사: true, 이름: "bar" } ;
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 필터 함수를 사용하여 배열의 항목 제거
$.grep( [0,1,2], function(n,i){
return n > 0;
})
jQuery.makeArray( obj ) 배열과 유사한 객체를 실제 배열로 변환합니다. 🎜>선택한 div 요소 컬렉션을 배열로 변환
var arr = jQuery.makeArray(document.getElementsByTagName("div"))
arr.reverse(); dom 요소
$(arr).appendTo(document.body);
jQuery.map( array, callback )은 메서드를 사용하여 배열의 항목을 수정한 다음 새 배열을 반환합니다.
jQuery.inArray ( value, array)는 배열에서 값의 위치를 반환하고, 값이 없으면 -1을 반환합니다.
jQuery.unique( array)는 배열에서 중복된 요소를 모두 삭제하고 정렬된 배열을 반환합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
