코드 복사 코드는 다음과 같습니다.
if ($('#keks').html().trim()) {
//아무 것도 찾지 못했습니다
}
10 . 정렬되지 않은 집합에서 요소의 인덱스 번호를 찾는 방법
$("ul > li").click(function () {
var index = $(this).prevAll().length;
});11. 함수는 이벤트
$('#foo').bind('click', function () {
alert('User clicked on "foo."');
});12에 바인딩됩니다. . 요소에 html을 추가하는 방법
$('#lal').append('sometext')
13. 속성 정의
var e = $(" " , { href: "#", class: "a-class another-class", title: "..." });
14. 필터링을 위해 여러 속성을 사용하는 방법
//다른 유형의 유사한 입력 요소를 많이 사용하는 경우
//이 정밀도 기반 방법은 유용합니다. var elements = $('#someid input[type=sometype][value=somevalue]').get();15 jQuery를 사용하여 이미지를 미리 로드하는 방법
jQuery.preloadImages = function () {
for (var i = 0; i < 인수.길이; i ) {
$("
![]()
"). ', 인수[i]);
}
}; //Usage$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
16. 선택기와 일치하는 요소에 대한 이벤트 핸들러를 설정하는 방법
$('button.someClass').live('click', someFunction)
//jQuery 1.4.2에서는 옵션을 위임하고 취소합니다.
// 더 나은 컨텍스트 지원을 제공하기 때문에 live 대신 도입되었습니다.
// 예를 들어 테이블의 경우 이전에는
// .live()
$("table"을 사용했습니다. ).each(function () {
$("td", this).live("hover", function () {
$(this).toggleClass("hover");
}) ;
});
//이제
$("table").delegate("td", "hover", function () {
$(this) .toggleClass("hover)를 사용하세요. ");
});
17. 선택된 옵션 요소를 찾는 방법
$('#someElement').find('option:selected')
18. 특정 값 텍스트가 포함된 요소를 숨기려면
$ ("p.value:contains('thetextvalue')").hide();
19. 페이지의 특정 영역으로 자동 스크롤하는 경우
jQuery.fn.autoscroll = function(selector) {
$( 'html,body'). animate( { scrollTop: $(this ).offset().top },
500
)
}
//그런 다음 원하는 클래스/영역으로 스크롤합니다. 이렇게 가고 싶다 .
$('.area_name').autoscroll();
20. 다양한 브라우저 감지 방법
if( $.browser.safari) //Safari 감지
if ($.browser.msie && $.browser.version > 6) //IE6 이상 버전 감지
if ($.browser.msie && $.browser.version <= 6) //IE6 이하 버전 감지
if ($.browser.mozilla && $. browser.version >= '1.8' ) //FireFox 2 이상 버전 감지
21. 문자열에서 단어를 바꾸는 방법
var el = $('#id'); .replace(/word/ig , ''))
22. 우클릭 컨텍스트 메뉴 비활성화 방법
$(document).bind('contextmenu', function (e) {
return false ;
})
23. 🎜>
$.expr[':'].mycustomselector = function(element, index , Meta, stack){
// element- DOM 요소
// index – 스택의 현재 루프 인덱스
// Meta – 선택기에 대한 메타데이터
// 스택 – 루프에 있는 모든 요소의 스택
// 현재 요소가 포함되어 있으면 true를 반환합니다.
// 현재 요소가 포함되어 있지 않으면 false를 반환합니다. }
// 사용자 정의 사용법 selector:
$( '.someClasses:test').doSomething(); 24. 요소가 존재하는지 확인하는 방법
if ($('#someDiv' ).length) {
//Your 언니 드디어 찾았어요
25. jQuery를 사용하여 마우스 오른쪽 및 왼쪽 클릭을 감지하는 방법
$("#someelement").live('click', function (e) { if ((!$. browser.msie && e .button == 0) || ($.browser.msie && e.button == 1)) {
alert("왼쪽 마우스 버튼을 클릭했습니다."
} else if (e .button == 2 ) {
alert("오른쪽 마우스 버튼 클릭");
}
})
26. 입력 필드
//이 코드는 다음을 보여줍니다. 사용자가 값을 입력하지 않은 경우 //텍스트 입력란에 기본값을 유지하는 방법
//기본값
$(".swap").each(function (i) {
wap_val[i] = $(this ).val();
$(this).focusin(function () {
if ($(this).val() == swap_val[i ]) {
$(this).val ("");
}
}).focusout(function () {
if ($.trim($(this).val() ) == "") {
$( this).val(swap_val[i])
}
})
27. 일정시간이 지나면 요소를 자동으로 숨기거나 닫는 방법(1.4버전 지원)
setTimeout(function () { $('.mydiv').hide('blind', {}, 500)
}, 5000);
// 이것이 1.4의 Delay() 함수를 사용하는 방법입니다(최대 절전 모드와 매우 유사합니다)
$(".mydiv"). Delay(5000).hide('blind', {}, 500);28. 생성된 요소를 DOM에 동적으로 추가하는 방법
var newDiv = $('')
newDiv.attr('id', 'myNewDiv').appendTo('body' );
29. "텍스트 영역" 필드의 문자 수를 제한하는 방법
this.each(function() { var type = this.tagName.toLowerCase() ;
var inputType ? this.type.toLowerCase() : null
if (type == "input" && inputType == "text" || inputType == "password") {
this.maxLength = max
}
else if (type == "textarea") {
this.onkeypress = 함수(e ) {
var ob = e || event;
var keyCode = ob.keyCode;
var hasSelection
? document.selection.createRange().text.length >
: this.selectionStart != this.selectionEnd;
return !(this.value.length >= max
&& (keyCode > 50 || keyCode == 32 || keyCode == 0 | | keyCode == 13)
&& !ob.ctrlKey && !ob.altKey && !hasSelection)
}
this.onkeyup = function () {
if (this.value.length) > max) {
this.value = this.value.substring(0, max)
}
}); $('#mytextarea').maxLength(500);
30. 함수에 대한 기본 테스트를 만드는 방법
코드
코드는 다음과 같습니다.
//테스트를 모듈
module("Module B")
test("some other test", function () {
//내부 기대사항 표시 테스트 실행
expect(2); //JUnit의 AssertEquals
equals(true, false, "failing test")와 동일한 비교 주장
equals(true) , true, "테스트 통과");
}) 31. jQuery에서 요소를 복제하는 방법
var cloned = $('#somediv').clone(); >
32. jQuery에서 요소가 표시되는지 테스트하는 방법
//요소가 표시됩니다}
33. 화면 중앙 위치에 요소 넣기
this.css('position', 'absolute') this.css('top', ($(window).height() - this.height ()) / $(window) .scrollTop() 'px');
this.css('left', ($(window).width() - this.width()) / 2 $(window) .scrollLeft() 'px') ;
return this;
} //위 함수를 다음과 같이 사용합니다: $(element).center()
34. 특정 이름을 가진 모든 요소를 반환합니다. 값은 배열에 배치됩니다.
$("input[name='table[]']").each(function () { arrInputValues.push ($(this ).val());
} ; >
(function ($) {
$.fn.stripHtml = function () {
var regexp = /< ;("[^"]*"|'[^']* '|[^'">])*>/gi;
this.each(function () {
$(this) .html($(this).html().replace(regexp, ""));
return $(this); 복사 code
코드는 다음과 같습니다.
$('#searchBox').closest('div');
37. Firebug 및 Firefox 사용
코드 복사
코드는 다음과 같습니다.
// 체인 로깅 허용 // 사용법: $('#someDiv').hide() .log('div Hidden').addClass('someClass') jQuery.log = jQuery.fn.log = function (msg) {
console.log(" %s: %o", msg, this)
}
return this; >
38. 링크를 팝업창으로 강제로 열게 하는 방법
코드 복사
코드
jQuery('a.popup').live('click', function () {
newwindow = window.open($(this).attr('href) '), '', 'height=200,width=150');
if (window.focus) {
newwindow.focus()
} return false
}); 🎜>
39. 링크를 새 탭에서 강제로 열게 하는 방법
jQuery('a.newTab').live('click', function () { newwindow = window.open($(this).href);
jQuery(this).target = "_blank";
return false;
})
40. jQuery에서 .siblings()를 사용하여 형제 요소를 선택하는 방법
$ ('#nav li').click(function () { $('#nav li').removeClass('active');
$( this).addClass('active');
}); // 대안은
$('#nav li').click(function () {
$(this).addClass('active').siblings().removeClass ('활성')
})
41. 페이지의 모든 체크박스를 전환하는 방법
var tog = false ;
// 로드 시 선택된 경우
$('a').click(function () {
$( "input[type =checkbox]").attr("checked", !tog);
tog = !tog;
});
42. 일부 입력 텍스트를 기반으로 하는 방법 필터링하려면 요소 목록
//값이 요소의 입력 텍스트가
과 일치하는 경우//요소가 반환됩니다. $('.someClass').filter(function () {
return $(this).attr('value') == $(' input#someId').val()
})
43. 마우스패드 커서 위치 x 및 y 가져오기
$(document).ready(function () {
$(document) .mousemove(function (e) {
$('#XY').html("X 축 : " e.pageX " | Y 축 " e.pageY);
}); ;
44. 전체 목록 요소(LI)를 클릭 가능하게 만드는 방법
$("ul li").click(function () {
window.location = $(this).find("a").attr(" href");
return false;
});
function parXml(xml) {
//각 Tutorial을 찾아 작성자를 인쇄합니다.
$(xml).find("Tutorial").each(function () {
$("# output").append($(this ).attr("author") "");
});
}
46. 이미지가 생성되었는지 확인하는 방법 완전히 로드됨
$('#theImage') .attr('src', 'image.jpg') .load(function () {
alert('이 이미지가 로드되었습니다');
})
47 .jQuery를 사용하여 이벤트에 대한 네임스페이스를 지정하는 방법
//이벤트는 다음과 같이 네임스페이스에 바인딩될 수 있습니다$(' input').bind('blur.validation', function (e) {
// ...
}) ;
//data 메소드는
$( 'input').data('validation.isValid', true)도 허용합니다.
48. 쿠키가 활성화되었습니다
var dt = new Date( ); dt.setSeconds(dt.getSeconds() 60);
document.cookie = "cookietest=1; 만료=" dt.toGMTString()
var cookieEnabled = document.cookie.indexOf( "cookietest=") != -1;
if (!cookiesEnabled) {
// 쿠키가 활성화되지 않았습니다
}
쿠키 만료 방법
코드 복사 코드는 다음과 같습니다.
var date = new Date();
date.setTime(date.getTime() (x * 60 * 1000))
$.cookie('example', 'foo', { 만료: 날짜 });50. 클릭 가능한 링크를 사용하여 페이지의 URL을 바꾸는 방법
$.fn.replaceUrl = function () {
var regexp =
/( ( ftp|http|https)://(w :{0,1}w*@)?(S )(:[0-9] )?(/|/([w#!:.? =&% @ !-/]))?)/gi;
this.each(function () {
$(this).html(
$(this).html().replace(regexp, ' < ;a href="$1">$1')
)
})
return $(this)
} //사용법 $('p' ) .replaceUrl();
드디어 끝났습니다. 조판도 힘든 작업입니다. 리소스는 인터넷에서 수집하여 아직 수집하지 않은 어린이에게 제공됩니다.
(피드백 감사합니다. 오류가 수정되었습니다. 오해하지 않았으면 좋겠습니다.)
PS: 오류 수정으로 인해 레이아웃이 잘못되었습니다. 내용이 엉망이어서 지금 다시 올립니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
