JQueryページの要素を隠す方法のまとめを表示します。

3961 ワード

jqueryには隠しdivを表示する方法がたくさんあります。比較的簡単な関数show（）、hide（）、togggle（）、slade Down（）、そしてcss設定divのstyle属性なども操作できます。紹介します。
ショーの方法
隠し

要素が表示されます。



$(".btn2").click(function(){

  $("p").show();

});

toggle()の方法
toggale()法は元素の可視状態を切り替える。
選択された要素が見える場合は、これらの要素は非表示になります。選択された要素が非表示になっている場合は、これらの要素が表示されます。



<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(".btn1").click(function(){

  $("p").toggle(1000);

  });

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Toggle</button>

</body>

</html>

slade Down()方法
隠し

要素をスライドで表示します。



$(".btn2").click(function(){

  $("p").slideDown();

});

hideの方法
表示されている

要素を隠す:



$(".btn1").click(function(){

  $("p").hide();

});

この関数はよくショーと一緒に使います。
css()方法
css()メソッドは、選択された要素の1つまたは複数のスタイル属性を設定または返します。
CSS属性を返します
指定されたCSS属性の値を返すには、次のような文法を使ってください。



css("propertyname");

$("p").css("display","none");

実例を見る



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script type="text/javascript"> 

$(document).ready(  function(){}); 

function hiden(){ 

$("#divObj").hide();//hide()  ,    ,             (  )  hide(2000) 2000       ,    slow,fast 

} 

function slideToggle(){ 

$("#divObj").slideToggle(2000);//       ,    ,    ,     ,       

} 

function show(){ 

$("#divObj").show();//  ,       

} 

function toggle(){ 

$("#divObj").toggle(2000);//      ,     ,       

 

} 

function slide(){ 

$("#divObj").slideDown();//       

} 

 

</script> 

</head> 

 

<body> 

<h3>div          </h3> 

<input type="button" value="  " onclick="hiden()"/> 

 <input type="button" value="  " onclick="show()"/> 

 <input type="button" value="      2" onclick="slide()"/> 

 <input type="button" value="       " onclick="slideToggle()"/> 

  <input type="button" value="        " onclick="toggle()"/> 

<div id="divObj" style="display:none"> 

        1.    <br/> 

        2.    <br/> 

        3.    <br/> 

        4.    <br/> 

        5.    <br/> 

        6.    <br/> 

        7.    <br/> 

        8.    <br/> 

        9.    <br/> 

        0.    <br/> 

    </div> 

</body> 

</html>