jQuery에서 클릭 버튼을 표시하고 숨기는 방법
- yulia원래의
- 2018-10-29 15:41:3717833검색
jQuery는 많은 기능을 간단하고 빠르게 구현할 수 있어 프론트엔드 개발에 널리 사용됩니다. jQuery를 배우는 친구들은 jQuery를 사용하여 클릭하면 표시되고 클릭하면 다시 숨기는 효과를 얻을 수 있습니다(즉, jQuery 이중 -숨기려면 클릭)? 이 기사에서는 jQuery를 사용하여 클릭 표시 및 숨기기 효과를 얻는 방법에 대해 설명합니다. 관심 있는 친구는 이를 참조할 수 있습니다.
다음은 jQuery에서 클릭 표시 및 숨기기를 구현하는 두 가지 방법을 소개합니다. 하나는 전환() 메서드이고 다른 하나는 jquery의 hide() 및 show() 메서드입니다.
참고: jQuery 파일을 삽입하는 것을 잊지 마세요. 그렇지 않으면 효과를 얻을 수 없습니다.
1. jquery
toggle() 메서드의ggle() 메서드는 두 개 이상의 기능을 추가할 수 있으며, 그런 다음 클릭 이벤트를 통해 수행합니다. 전환하려면 클릭하면 지정된 첫 번째 함수가 호출되고, 다시 클릭하면 두 번째 함수가 호출되는 식으로 루프를 호출합니다.
구문: $(selector).toggle(function)
function은 클릭 시 실행되어야 하는 기능을 나타냅니다.
설명 예: "Show and Hide Toggle" 버튼을 처음 클릭하면 콘텐츠가 P 라벨이 숨겨져 있으며 다시 클릭하면 P 태그의 내용이 표시되며 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">显示与隐藏切换</button>
<p>我可以显示也可以隐藏</p>
<p>啦啦啦</p>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</html>아래 그림과 같이 첫 번째 그림은 클릭이 없을 때의 효과이고, 두 번째 그림은 첫 번째 클릭이 이루어졌을 때 내용을 숨기는 효과입니다.
2. jquery
hide() 메서드의 hide() 및 show() 메서드는 CSS의 display:none 속성과 유사하게 선택한 요소를 숨길 수 있습니다. show() 메소드는 숨겨진 선택된 요소를 표시할 수 있습니다. hide()와 show()의 사용법은 하나가 표시되고 다른 하나가 숨겨진다는 점을 제외하면 동일합니다.
구문: $(selector).hide(speed,easing,callback)
speed는 효과 표시 속도를 나타내며 선택 값입니다(느림, 빠름, 밀리초)
easing은 요소를 서로 다르게 설정하는 데 사용됩니다. 애니메이션의 포인트 Speed는 선택값(스윙, 선형)
콜백은 show() 메서드 실행 후 실행해야 하는 함수를 나타내며, 선택값이기도 합니다
인스턴스 설명: "Hide " 버튼을 클릭하면 P 라벨 콘텐츠가 숨겨지고, "표시" 버튼을 클릭하면 P 태그의 콘텐츠가 표시됩니다. 구체적인 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p id="p1">点击隐藏按钮，文字消失<br>点击显示按钮，文字重现</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$("#p1").hide();
});
$("#show").click(function() {
$("#p1").show();
});
});
</script>
</html>효과는 그림과 같습니다.
위의 모든 사람들은 클릭 표시 및 숨기기를 구현하는 jQuery의 두 가지 방법을 소개했습니다. 하나는 클릭하여 표시한 다음 클릭하여 버튼을 숨기는 효과를 얻을 수 있는 두 번째 방법입니다. 두 개의 버튼을 통해 콘텐츠를 표시하고 숨기는 jquery의 hide() 및 show() 메서드. 직장에서 어떤 방법을 선택할지는 업무 요구 사항과 개인 습관에 따라 다릅니다. 이전에 접해 본 적이 없는 친구는 스스로 연습해야 합니다. 이 기사가 배우기를 좋아하는 여러분에게 도움이 되기를 바랍니다!
【관련 튜토리얼 추천】
1. jQuery 동영상 튜토리얼
2. jQuery 중국어 참조 매뉴얼
3. 부트스트랩 튜토리얼
위 내용은 jQuery에서 클릭 버튼을 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!