jQuery即学即用取得制御属性

5104 ワード

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
        $("#emptyTest").empty();
    }
    function f2()
    {
        $("p[class=emptyTest]").remove();
    }
</script>
</head>
<body>
    <p id="emptyTest">empty</p>
    <p class="emptyTest">    </p>
    <p class="emptyTest">    </p>
    <input type="button" value="go" onclick="f()">
    <input type="button" value="go" onclick="f2()">
</body>
</html>

 
 
$("p#one,p#two").click(function() {
	$(this).toggleClass("redbox");   //         ,   ,    
});
		   
var cnt=1;
$("p#three").click(function(){
	$(this).toggleClass("redbox",cnt++%3==0);	//       ,  ,  ,   
});

 
   
<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $(document).ready(function(){
            //    p    
            $("p").attr({style:'border:1px solid #f00;',alt:'  style  '});
            var oneTg=$("p#one").attr("title"); //        title  
            $("p#one").html(oneTg+" title    ,   ");
            /**/
            $("p#two").attr("title","  two title  ");
            $("p#three").attr("title",function(){
                var title =this.id;
                return title;
            })
            .each(function(){
                $(this).html("title      id       "+this.title);
            });
       });
    }
</script>
</head>
<body>
    <p id="one" title="   ">   </p>
    <p id="two" title="   ">     </p>
    <p id="three" title="   ">   </p>
    
    <input type="button" value="go" onclick="f()">
</body>
</html>

 
  
<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $(document).ready(function(){
            var one1=$("p#one").html();
            $("p#two").html(one1);
       });
    }
</script>
</head>
<body>
    <p id="one">   </p>
    <p id="two">     </p>      
    <input type="button" value="go" onclick="f()">
</body>
</html>

  
  
<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $(document).ready(function(){
            var one1=$(":text#one").val();
            $(":text#two").val(one1);
       });
    }
</script>
</head>
<body>
    <input type="text" id="one" value="one"/>
    <input type="text" id="two" value="two"/>         
    <input type="button" value="go" onclick="f()">
</body>
</html>

 
  
<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $('p').hide();
       $('button#one').bind('click',function(){
            $('p#two').toggle();
       });
    }
</script>
</head>
<body>
    <p id="two">  /  </p>
    <button id="one">  </button>           
    <input type="button" value="go" onclick="f()">
</body>
</html>