不卡av日日日,日韩欧美一区二区三区免费看 ,四虎亚洲精品

jquery表單操作

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
      //重置表單元素
      $(":reset").click(function(){
          setTimeout(function() {
           countChecked();
            $("select").change();
          },0);
      });


      //對表單內可用input 賦值操作.
      $('#btn1').click(function(){
          $("#form1 input:enabled").val("這里變化了！");
          return false;
      })
      //對表單內不可用input 賦值操作.
      $('#btn2').click(function(){
          $("#form1 input:disabled").val("這里變化了！");
          return false;
      })


      //使用:checked選擇器，來操作多選框.
       $(":checkbox").click(countChecked);

       function countChecked() {
          var n = $("input:checked").length;
          $("div").eq(0).html("<strong>有"+n+" 個被選中!</strong>");
       }

       countChecked();//進入頁面就調用.

   //使用:selected選擇器，來操作下拉列表.
       $("select").change(function () {
              var str = "";
              $("select :selected").each(function () {
                   str += $(this).text() + ",";
              });
              $("div").eq(1).html("<strong>你選中的是："+str+"</strong>");
        }).trigger('change');
       // trigger('change') 在這里的意思是：
       // select加載后，馬上執行onchange.
       // 也可以用.change()代替.
});

</script>

</head>
<body>
<h3> 表單對象屬性過濾選擇器.</h3>
   <form id="form1" action="#">
   <button type="reset">重置所有表單元素</button>
   <br /><br />
<button id="btn1">對表單內可用input 賦值操作.</button>
<button id="btn2">對表單內不可用input 賦值操作.</button><br /><br />

     可用元素：<input name="add" value="可用文本框"/> <br/>
     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素： <input name="che" value="可用文本框" /><br/>
   不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
   <br/>
     多選框：<br/>
   <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     <input type="checkbox" name="newsletter" value="test2" />test2
     <input type="checkbox" name="newsletter" value="test3" />test3
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     <input type="checkbox" name="newsletter" value="test5" />test5
   <div></div>

   <br/><br/>
     下拉列表1：<br/>
   <select name="test" multiple="multiple" style="height:100px">
       <option>浙江</option>
       <option selected="selected">湖南</option>
       <option>北京</option>
       <option selected="selected">天津</option>
       <option>廣州</option>
       <option>湖北</option>
    </select>

     <br/><br/>
     下拉列表2：<br/>
   <select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>廣州</option>
    <option>湖北</option>
    </select>
   <br/><br/>

     <div></div>
</form>

</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    var $alltext = $("#form1 :text");
    var $allpassword= $("#form1 :password");
    var $allradio= $("#form1 :radio");
    var $allcheckbox= $("#form1 :checkbox");

   var $allsubmit= $("#form1 :submit");
   var $allimage= $("#form1 :image");
   var $allreset= $("#form1 :reset");
   var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
   var $allfile= $("#form1 :file");
    var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");

   var $AllInputs = $("#form1 :input");
   var $inputs = $("#form1 input");

    $("div").append(" 有" + $alltext.length + " 個（ :text 元素）<br/>")
            .append(" 有" + $allpassword.length + " 個（ :password 元素）<br/>")
           .append(" 有" + $allradio.length + " 個（ :radio 元素）<br/>")
            .append(" 有" + $allcheckbox.length + " 個（ :checkbox 元素）<br/>")
           .append(" 有" + $allsubmit.length + " 個（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 個（ :image 元素）<br/>")
           .append(" 有" + $allreset.length + " 個（ :reset 元素）<br/>")
           .append(" 有" + $allbutton.length + " 個（ :button 元素）<br/>")
           .append(" 有" + $allfile.length + " 個（ :file 元素）<br/>")
           .append(" 有" + $allhidden.length + " 個（ :hidden 元素）<br/>")
           .append(" 有" + $allselect.length + " 個（ select 元素）<br/>")
           .append(" 有" + $alltextarea.length + " 個（ textarea 元素）<br/>")
           .append(" 表單有 " + $inputs.length + " 個（input）元素。<br/>")
           .append(" 總共有 " + $AllInputs.length + " 個(:input)元素。<br/>")
           .css("color", "red")

    $("form").submit(function () { return false; }); // return false;不能提交.

});
</script>
</head>
<body>
<form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><div style="display:none">test</div><br/>
    <input type="image" /><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
</form>

<div></div>
</body>
</html>

posted @ 2013-03-18 16:08 楊軍威閱讀(457) | 評論 (0) | 編輯收藏

jquery選擇器

//選取每個父元素下的第2個子元素
      $('#btn1').click(function(){
          $('div.one :nth-child(2)').css("background","#bbffaa");
      })
      //選取每個父元素下的第一個子元素
      $('#btn2').click(function(){
          $('div.one :first-child').css("background","#bbffaa");
      })
      //選取每個父元素下的最后一個子元素
      $('#btn3').click(function(){
          $('div.one :last-child').css("background","#bbffaa");
      })
      //如果父元素下的僅僅只有一個子元素，那么選中這個子元素
      $('#btn4').click(function(){
          $('div.one :only-child').css("background","#bbffaa");
      })
//選取含有屬性title 的div元素.
      $('#btn1').click(function(){
          $('div[title]').css("background","#bbffaa");
      })
      //選取屬性title值等于 test 的div元素.
      $('#btn2').click(function(){
          $('div[title=test]').css("background","#bbffaa");
      })
      //選取屬性title值不等于 test 的div元素.
      $('#btn3').click(function(){
          $('div[title!=test]').css("background","#bbffaa");
      })
      //選取屬性title值以 te 開始的div元素.
      $('#btn4').click(function(){
          $('div[title^=te]').css("background","#bbffaa");
      })
      //選取屬性title值以 est 結束的div元素.
      $('#btn5').click(function(){
          $("div[title$=est]").css("background","#bbffaa");
      })
      //選取屬性title值含有 es 的div元素.
      $('#btn6').click(function(){
          $("div[title*=es]").css("background","#bbffaa");
      })
      //組合屬性選擇器,首先選取有屬性id的div元素，然后在結果中選取屬性title值含有 es 的元素.
      $('#btn7').click(function(){
          $("div[id][title*=es]").css("background","#bbffaa");
      })
$('#reset').click(function(){
          window.location.reload();
      })
      //給id為mover的元素添加動畫.
       function animateIt() {
          $("#mover").slideToggle("slow", animateIt);
        }
       animateIt();

       //選取所有不可見的元素.包括<input type="hidden"/>.
      $('#btn_hidden').click(function(){
          alert( "不可見的元素有："+$('body :hidden').length +"個!\n"+
           "其中不可見的div元素有:"+$('div:hidden').length+"個!\n"+
           "其中文本隱藏域有:"+$('input:hidden').length+"個!");
          $('div:hidden').show(3000).css("background","#bbffaa");
      })
      //選取所有可見的元素.
      $('#btn_visible').click(function(){
          $('div:visible').css("background","#FF6500");
      })
//選取含有文本"di"的div元素.
      $('#btn1').click(function(){
          $('div:contains(di)').css("background","#bbffaa");
      })
      //選取不包含子元素(或者文本元素)的div空元素.
      $('#btn2').click(function(){
          $('div:empty').css("background","#bbffaa");
      })
      //選取含有class為mini元素的div元素.
      $('#btn3').click(function(){
          $('div:has(.mini)').css("background","#bbffaa");
      })
      //選取含有子元素(或者文本元素)的div元素.
      $('#btn4').click(function(){
          $('div:parent').css("background","#bbffaa");
      })
//選擇第一個div元素.
      $('#btn1').click(function(){
          $('div:first').css("background","#bfa");
      })
      //選擇最后一個div元素.
      $('#btn2').click(function(){
          $('div:last').css("background","#bfa");
      })
      //選擇class不為one的所有div元素.
      $('#btn3').click(function(){
          $('div:not(.one)').css("background","#bfa");
      })
      //選擇索引值為偶數的div元素。
      $('#btn4').click(function(){
          $('div:even').css("background","#bfa");
      })
      //選擇索引值為奇數的div元素。
      $('#btn5').click(function(){
          $('div:odd').css("background","#bfa");
      })
      //選擇索引等于 3 的元素
      $('#btn6').click(function(){
          $('div:eq(3)').css("background","#bfa");
      })
      //選擇索引大于 3 的元素
      $('#btn7').click(function(){
          $('div:gt(3)').css("background","#bfa");
      })
   //選擇索引小于 3 的元素
      $('#btn8').click(function(){
          $('div:lt(3)').css("background","#bfa");
      })
       //選擇所有的標題元素.比如h1, h2, h3等等...
      $('#btn9').click(function(){
          $(':header').css("background","#bfa");
      })
      //選擇當前正在執行動畫的所有元素.
      $('#btn10').click(function(){
          $(':animated').css("background","#bfa");
      });
//選擇 body內的所有div元素.
      $('#btn1').click(function(){
          $('body div').css("background","#bbffaa");
      })
      //在body內的選擇元素名是div 的子元素.
      $('#btn2').click(function(){
          $('body > div').css("background","#bbffaa");
      })
      //選擇所有class為one 的下一個div元素.
      $('#btn3').click(function(){
          $('.one + div').css("background","#bbffaa");
      })
      //選擇 id為two的元素后面的所有div兄弟元素.
      $('#btn4').click(function(){
           $('#two ~ div').css("background","#bbffaa");
      })
//選擇 id為 one 的元素
      $('#btn1').click(function(){
          $('#one').css("background","#bfa");
      });
      //選擇 class 為 mini 的所有元素
      $('#btn2').click(function(){
          $('.mini').css("background","#bfa");
      });
      //選擇元素名是 div 的所有元素
      $('#btn3').click(function(){
          $('div').css("background","#bfa");
      });
      //選擇所有的元素
      $('#btn4').click(function(){
          $('*').css("background","#bfa");
      });
      //選擇所有的span元素和id為two的div元素
      $('#btn5').click(function(){
          $('span,#two').css("background","#bfa");
      });

posted @ 2013-03-18 16:04 楊軍威閱讀(145) | 評論 (0) | 編輯收藏

jquery文字提示

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var x = 10;
   var y = 20;
   $("a.tooltip").mouseover(function(e){
          this.myTitle = this.title;
       this.title = "";
        var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //創建 div 元素
       $("body").append(tooltip);   //把它追加到文檔中
       $("#tooltip")
           .css({
               "top": (e.pageY+y) + "px",
               "left": (e.pageX+x) + "px"
           }).show("fast");      //設置x坐標和y坐標，并且顯示
    }).mouseout(function(){
       this.title = this.myTitle;
       $("#tooltip").remove();   //移除
    }).mousemove(function(e){
       $("#tooltip")
           .css({
               "top": (e.pageY+y) + "px",
               "left": (e.pageX+x) + "px"
           });
   });
})
</script>
<style type="text/css">
body{
   margin:0;
   padding:40px;
   background:#fff;
   font:80% Arial, Helvetica, sans-serif;
   color:#555;
   line-height:180%;
}
p{
   clear:both;
   margin:0;
   padding:.5em 0;
}
/* tooltip */
#tooltip{
   position:absolute;
   border:1px solid #333;
   background:#f7f5d1;
   padding:1px;
   color:#333;
   display:none;
}
</style>

</head>
<body>
<p><a href="#" class="tooltip" title="這是我的超鏈接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="這是我的超鏈接提示2.">提示2.</a></p>
<p><a href="#" title="這是自帶提示1.">自帶提示1.</a></p>
<p><a href="#" title="這是自帶提示2.">自帶提示2.</a> </p>
</body>
</html>

posted @ 2013-03-18 15:53 楊軍威閱讀(152) | 評論 (0) | 編輯收藏

jquery遍歷節點樹

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
     var $body = $("body").children();
   var $p = $("p").children();
   var $ul = $("ul").children();
   alert( $body.length ); // <body>元素下有2個子元素
   alert( $p.length );     // <p>元素下有0個子元素
   alert( $ul.length );    // <p>元素下有3個子元素
   for(var i=0;i< $ul.length;i++){
         alert( $ul[i].innerHTML );
   }
});
</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
     var $p1 = $("p").next();
   alert( $p1.html() ); // 緊鄰<p>元素后的同輩元素
   var $ul = $("ul").prev();
   alert( $ul.html() ); // 緊鄰<ul>元素前的同輩元素
   var $p2 = $("p").siblings();
   alert( $p2.html() ); // 緊鄰<p>元素的唯一同輩元素
});
</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $(document).bind("click", function (e) {
       $(e.target).closest("li").css("color","red");
   })
});
</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

posted @ 2013-03-18 15:39 楊軍威閱讀(365) | 評論 (0) | 編輯收藏

jquery設置和獲取HTML,文本和值

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
      //獲取<p>元素的HTML代碼
      $("input:eq(0)").click(function(){
           alert( $("p").html() );
      });
      //獲取<p>元素的文本
      $("input:eq(1)").click(function(){
           alert( $("p").text() );
      });
      //設置<p>元素的HTML代碼
      $("input:eq(2)").click(function(){
           $("p").html("<strong>你最喜歡的水果是?</strong>");
      });
       //設置<p>元素的文本
      $("input:eq(3)").click(function(){
           $("p").text("你最喜歡的水果是?");
      });
      //設置<p>元素的文本
      $("input:eq(4)").click(function(){
           $("p").text("<strong>你最喜歡的水果是?</strong>");
      });
      //獲取按鈕的value值
      $("input:eq(5)").click(function(){
           alert( $(this).val() );
      });
      //設置按鈕的value值
      $("input:eq(6)").click(function(){
            $(this).val("我被點擊了!");
      });
});
</script>
</head>
<body>
    <input type="button" value="獲取<p>元素的HTML代碼"/>
   <input type="button" value="獲取<p>元素的文本"/>
   <input type="button" value="設置<p>元素的HTML代碼"/>
   <input type="button" value="設置<p>元素的文本"/>
   <input type="button" value="設置<p>元素的文本(帶HTML)"/>
   <input type="button" value="獲取按鈕的value值"/>
   <input type="button" value="設置按鈕的value值"/>

   <p title="選擇你最喜歡的水果." ><strong>你最喜歡的水果是?</strong></p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
      $("#address").focus(function(){         // 地址框獲得鼠標焦點
           var txt_value = $(this).val();   // 得到當前文本框的值
           if(txt_value==this.defaultValue){
                $(this).val("");              // 如果符合條件，則清空文本框內容
           }
      });
      $("#address").blur(function(){          // 地址框失去鼠標焦點
            var txt_value = $(this).val();   // 得到當前文本框的值
           if(txt_value==""){
                $(this).val(this.defaultValue);// 如果符合條件，則設置內容
           }
      })

      $("#password").focus(function(){
           var txt_value = $(this).val();
           if(txt_value==this.defaultValue){
                $(this).val("");
           }
      });
      $("#password").blur(function(){
            var txt_value = $(this).val();
           if(txt_value==""){
                $(this).val(this.defaultValue);
           }
      })
});
</script>

</head>
<body>
    <input type="text" id="address" value="請輸入郵箱地址"/>   <br/><br/>
   <input type="text" id="password" value="請輸入郵箱密碼"/> <br/><br/>
   <input type="button" value="登陸"/>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
      //設置單選下拉框選中
      $("input:eq(0)").click(function(){
            $("#single option").removeAttr("selected"); //移除屬性selected
           $("#single option:eq(1)").attr("selected",true); //設置屬性selected
      });
      //設置多選下拉框選中
      $("input:eq(1)").click(function(){
            $("#multiple option").removeAttr("selected"); //移除屬性selected
           $("#multiple option:eq(2)").attr("selected",true);//設置屬性selected
           $("#multiple option:eq(3)").attr("selected",true);//設置屬性selected
      });
      //設置單選框和多選框選中
      $("input:eq(2)").click(function(){
           $(":checkbox").removeAttr("checked"); //移除屬性checked
           $(":radio").removeAttr("checked"); //移除屬性checked
           $("[value=check2]:checkbox").attr("checked",true);//設置屬性checked
           $("[value=check3]:checkbox").attr("checked",true);//設置屬性checked
           $("[value=radio2]:radio").attr("checked",true);//設置屬性checked
      });
});
</script>
</head>
<body>
    <input type="button" value="設置單選下拉框選中"/>
   <input type="button" value="設置多選下拉框選中"/>
   <input type="button" value="設置單選框和多選框選中"/>

<br/><br/>

<select id="single">
<option>選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
<option>選擇4號</option>
<option selected="selected">選擇5號</option>
</select>

<br/><br/>

<input type="checkbox" value="check1"/> 多選1
<input type="checkbox" value="check2"/> 多選2
<input type="checkbox" value="check3"/> 多選3
<input type="checkbox" value="check4"/> 多選4

<br/>

<input type="radio" value="radio1" name="a"/> 單選1
<input type="radio" value="radio2" name="a"/> 單選2
<input type="radio" value="radio3" name="a"/> 單選3
</body>
</html>

posted @ 2013-03-18 15:29 楊軍威閱讀(802) | 評論 (0) | 編輯收藏

jquery樣式操作

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.high{
font-weight:bold;   /* 粗體字 */
color : red;        /* 字體顏色設置紅色*/
}
.another{
font-style:italic;
color:blue;
}
</style>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
      //獲取樣式
      $("input:eq(0)").click(function(){
           alert( $("p").attr("class") );
      });
      //設置樣式
      $("input:eq(1)").click(function(){
           $("p").attr("class","high");
      });
      //追加樣式
      $("input:eq(2)").click(function(){
           $("p").addClass("another");
      });
      //刪除全部樣式
      $("input:eq(3)").click(function(){
           $("p").removeClass();
      });
       //刪除指定樣式
      $("input:eq(4)").click(function(){
           $("p").removeClass("high");
      });
      //重復切換樣式
      $("input:eq(5)").click(function(){
           $("p").toggleClass("another");
      });
      //判斷元素是否含有某樣式
      $("input:eq(6)").click(function(){
           alert( $("p").hasClass("another") )
           alert( $("p").is(".another") )
      });
});

</script>
</head>
<body>
    <input type="button" value="輸出class類"/>
   <input type="button" value="設置class類"/>
   <input type="button" value="追加class類"/>
   <input type="button" value="刪除全部class類"/>
   <input type="button" value="刪除指定class類"/>
   <input type="button" value="重復切換class類"/>
   <input type="button" value="判斷元素是否含有某個class類"/>

   <p class="myClass" title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
      //獲取<p>元素的color
      $("input:eq(0)").click(function(){
            alert( $("p").css("color") );
    });
      //設置<p>元素的color
    $("input:eq(1)").click(function(){
            $("p").css("color","red")
    });
      //設置<p>元素的fontSize和backgroundColor
    $("input:eq(2)").click(function(){
            $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
    });
    //獲取<p>元素的高度
    $("input:eq(3)").click(function(){
            alert( $("p").height() );
    });
    //獲取<p>元素的寬度
    $("input:eq(4)").click(function(){
            alert( $("p").width() );
    });

        //獲取<p>元素的高度
    $("input:eq(5)").click(function(){
            $("p").height("100px");
    });
    //獲取<p>元素的寬度
    $("input:eq(6)").click(function(){
            $("p").width("400px");
    });
    //獲取<p>元素的的左邊距和上邊距
    $("input:eq(7)").click(function(){
            var offset = $("p").offset();
            var left = offset.left;
            var top = offset.top;
              alert("left:"+left+";top:"+top);
    });
});
</script>
</head>
<body>
    <input type="button" value="獲取<p>元素的color"/>
    <input type="button" value="設置<p>元素的color"/>
    <input type="button" value="設置<p>元素的fontSize和backgroundColor"/>
    <input type="button" value="獲取<p>元素的高度"/>
    <input type="button" value="獲取<p>元素的寬度"/>
    <input type="button" value="設置<p>元素的高度"/>
    <input type="button" value="設置<p>元素的寬度"/>
    <input type="button" value="獲取<p>元素的的左邊距和上邊距"/>

    <p title="選擇你最喜歡的水果."><strong>你最喜歡的水果是?</strong></p>
    <ul>
    <li title='蘋果'>蘋果</li>
    <li title='橘子'>橘子</li>
    <li title='菠蘿'>菠蘿</li>
    </ul>
</body>
</html>

posted @ 2013-03-18 15:10 楊軍威閱讀(172) | 評論 (0) | 編輯收藏

jquery替換節點和屬性操作

替換節點

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
   $("p").replaceWith("<strong>你最不喜歡的水果是?</strong>");
   // 同樣的實現： $("<strong>你最不喜歡的水果是?</strong>").replaceAll("p");
});

</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>
屬性操作
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
      //設置<p>元素的屬性'title'
      $("input:eq(0)").click(function(){
           $("p").attr("title","選擇你最喜歡的水果.");
      });
      //獲取<p>元素的屬性'title'
      $("input:eq(1)").click(function(){
           alert( $("p").attr("title") );
      });
      //刪除<p>元素的屬性'title'
      $("input:eq(2)").click(function(){
           $("p").removeAttr("title");
      });

});

</script>
</head>
<body>
    <input type="button" value="設置<p>元素的屬性'title'"/>
   <input type="button" value="獲取<p>元素的屬性'title'"/>
   <input type="button" value="刪除<p>元素的屬性'title'"/>

   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

posted @ 2013-03-18 15:08 楊軍威閱讀(240) | 評論 (0) | 編輯收藏

jquery刪除和復制節點

刪除節點
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
   var $li = $("ul li:eq(1)").remove(); // 獲取第二個<li>元素節點后，將它從網頁中刪除。

   $li.appendTo("ul");                       // 把剛才刪除的又重新添加到<ul>元素里
   //所以，刪除只是從網頁中刪除，在jQuery對象中，這個元素還是存在的，我們可以重新獲取它
      $("ul li").remove("li[title!=菠蘿]"); //把<li>元素中屬性title不等于"菠蘿"的<li>元素刪除
   $("ul li:eq(1)").empty(); // 找到第二個<li>元素節點后，清空此元素里的內容
});

</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>
復制節點
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   $("ul li").click(function(){
         $(this).clone(true).appendTo("ul"); //
         //注意參數true可以復制自己，并且他的副本也有同樣功能。
   })
});
</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

posted @ 2013-03-18 14:57 楊軍威閱讀(145) | 評論 (0) | 編輯收藏

jquery插入和移動節點

插入節點
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
   var $li_1 = $("<li title='香蕉'>香蕉</li>");   // 創建第一個<li>元素
   var $li_2 = $("<li title='雪梨'>雪梨</li>");   // 創建第二個<li>元素
   var $li_3 = $("<li title='其它'>其它</li>");   // 創建第三個<li>元素

   var $parent = $("ul");                           // 獲取<ul>節點，即<li>的父節點
   var $two_li = $("ul li:eq(1)");            // 獲取<ul>節點中第二個<li>元素節點

   $parent.append($li_1);                // append方法將創建的第一個<li>元素添加到父元素的最后面
   $parent.prepend($li_2);                // prepend方法將創建的第二個<li>元素添加到父元素里的最前面
   $li_3.insertAfter($two_li);             // insertAfter方法將創建的第三個<li>元素元素插入到獲取的<li>之后

});

</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

移動節點

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
   var $one_li = $("ul li:eq(1)");            // 獲取<ul>節點中第二個<li>元素節點
   var $two_li = $("ul li:eq(2)");            // 獲取<ul>節點中第三個<li>元素節點
   $two_li.insertBefore($one_li);    //移動節點
});

</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>

posted @ 2013-03-18 14:49 楊軍威閱讀(663) | 評論 (0) | 編輯收藏

jquery查找和創建節點

得到元素的值
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
      var $para = $("p");           // 獲取<p>節點
      var $li = $("ul li:eq(1)");   // 獲取第二個<li>元素節點

      var p_txt = $para.attr("title"); // 輸出<p>元素節點屬性title
      var ul_txt = $li.attr("title");   // 獲取<ul>里的第二個<li>元素節點的屬性title
      var li_txt = $li.text();       // 輸出第二個<li>元素節點的text
       alert(p_txt);
      alert(ul_txt);
      alert(li_txt);

});

</script>
</head>
<body>
   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>
</body>
</html>
創建節點
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-2-3</title>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
   var $li_1 = $("<li title='香蕉'>香蕉</li>");   //創建一個<li>元素


   //包括元素節點,文本節點和屬性節點


   //其中title='香蕉' 就是創建的屬性節點
   var $li_2 = $("<li title='雪梨'>雪梨</li>");   //創建一個<li>元素


   //包括元素節點,文本節點和屬性節點


   //其中title='雪梨' 就是創建的屬性節點

   var $parent = $("ul");       // 獲取<ul>節點。<li>的父節點

   $parent.append($li_1);        // 添加到<ul>節點中，使之能在網頁中顯示
   $parent.append($li_2);        // 等價于：$parent.append($li_1).append($li_2);
});

</script>
</head>
<body>

   <p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
   <ul>
      <li title='蘋果'>蘋果</li>
      <li title='橘子'>橘子</li>
      <li title='菠蘿'>菠蘿</li>
   </ul>

</body>
</html>

posted @ 2013-03-18 14:44 楊軍威閱讀(350) | 評論 (0) | 編輯收藏

java學習

jquery表單操作

jquery選擇器

jquery文字提示

jquery遍歷節點樹

jquery設置和獲取HTML,文本和值

jquery樣式操作

jquery替換節點和屬性操作

jquery刪除和復制節點

jquery插入和移動節點

jquery查找和創建節點

導航

統計

常用鏈接

留言簿

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜