java学习

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 杨军威阅读(455) | 评论 (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 杨军威阅读(141) | 评论 (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 杨军威阅读(146) | 评论 (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 杨军威阅读(358) | 评论 (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 杨军威阅读(799) | 评论 (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 杨军威阅读(171) | 评论 (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 杨军威阅读(236) | 评论 (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 杨军威阅读(142) | 评论 (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 杨军威阅读(658) | 评论 (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 杨军威阅读(348) | 评论 (0) | 编辑收藏

jquery表单操作

jquery选择器

jquery文字提示

jquery遍历节点树

jquery设置和获取HTML,文本和值

jquery样式操作

jquery替换节点和属性操作

jquery删除和复制节点

jquery插入和移动节点

jquery查找和创建节点

导航

统计

常用链接

留言簿

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜