你的位置:首页 > Java教程

[Java教程]JQuery的基础和应用


<参考文档>


 
1、什么是?
   DOM的作用:提供了一种动态的操作HTML元素的方法。
   jQuery是一个优秀的js库。用来操作HTML元素的工具。
   jQuery和DOM关系:DOM--树。jQuery是多个DOM模型的集合。
   jQuery设计核心理念:write less,do more;
   DOM获取id的值:document.getElementById("id");
   jQuery获取id的值: $("#id");$=jQuery
   jQuery的缺点:效率会下降。
 
   注意点:jQuery可以和DOM混用。
   2005诞生-------11年了。
 
2、相关作用?
 
   1、获取HMTL元素---id,name,tag......
   2、动态改变页面中的css样式和属性。
      <p color="red" id="p1">
      css样式。name="p1" input disabled="disabled"
   3、动态的改变页面内容。
      var p1=document.getElementById("p1");
      p1.value="";
   4、事件响应。
      click;focus,blur......鼠标的移动等........
   5、快速实现通信
      ajax---对异步请求的支持非常的缜密。功能非常的完成。
   6、提供页面基本动画需求
      淡入,淡出,擦除,移动。。。。。。
 
3、怎么用?
   第一步:下载包......
  
第二步:配置
          本机配置:<script src="js/..."></script>
           联网配置:<  src="http://ajax.googleapis.com/ajax/jquery/1.6.4/jquery.min.js">
 
第一种:< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
 
第二种:< script type= "text/javascript" src= "./js/jquery-1.7.2.min.js" ></script >
 

 
      
第三步:测试;
 
 
4、选择器
 
   基本选择器
  •        id选择器:$("#p1").css({"color":"red","font-size":"50px"});
  •        类选择器:$(".p1").css("color","red");
  •        标签选择:$("p").css("color","blue");
  •        选择后过滤:$("p[class='p1']").css("color","blue");
  •        通配符选择器:$("div *").css("color","blue");(注意,星号前有空格键)
  •        组选择器:$("h2,#div1,.p2,[title='p2']").css("color","yellow");
 
  伪类选择器:选择符前有一个 ":"(冒号)
       特定位置选择器::first,:last,:eq()
  •           $("tr:last").css("background-color","red");    --------表格的最后一行变成红色
  •           $("tr:first").css("background-color","red");
  •           $("p").eq(0).css();  -----得到第一个<P>标签
 
       指定范围选择器:(多用表格)
  • :even,  //奇数行
  • :odd,      //偶数行
  • gt(),
  • lt()
       注意点:指定范围选择器在表格的使用中非常的方便。
 
< script type= "text/javascript" >
     $( function() {
            //随着页面自动加载
            //$("#p1").css({"color":"red","font-size":"20px"});
            //$(".p2").css("color","red");
            // $("p[class='p1']").css("color","blue");
            //$("div *").css("color", "green");
            //   $("h2,#div1,.p2,[title='p2']").css("color", "yellow");
 
            //        $("tr:first").css("background-color","red");
            //        $("tr:last").css("background-color","green");
            //        $("tr").eq(1).css("background-color","blue");
 
            //        $("tr:even").css("background-color","blue");
            //        $("tr:odd").css("background-color","green");
 
           $( "tr:gt(1)").css( "background-color" , "blue" );
           $( "tr:lt(1)").css( "background-color" , "red" );
 
     });
</ script>

 
 
5、属性和css操作
   属性操作: attr();
   css样式操作: css("","");css({"":"","":""});
 
6、获取文本和值?
   文本:text();<p>hello</p>  $("#p3").text()
   值 val() :主要正对于表单元素中的value中的值。
 
 
7、事件控制
   jQuery中定了bind统一的接口,来为每一个匹配的标签添加事件控制。
   案例:点击p标签,让字体变成红色。
    1、事件注册   
       bind
     $("p").bind();
    2、toggle
       可以为click是绑定两个方法
    3、hover:可以模仿悬停事件和鼠标移上去和鼠标离开。
 
 
8、综合案例。
   综合案例1:使用jQuery完成密码是否一致判断。
 
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
     $( function() {
           $( "#username").focus( function(){
                 if($( "#username").val()== "请输入用户名" )
                     $( this).val( "");
           });
           $( "#username").blur( function(){
                 if($( "#username").val()== "")
                     $( this).val( "请输入用户名" );
           });
           $( "#pwd").focus( function(){
                 if($( "#pwd").val()== "请输入密码" )
                     $( this).val( "");
           });
           $( "#pwd").blur( function(){
                 if($( "#pwd").val()== "")
                     $( this).val( "请输入密码" );
                 if($( "#pwd").val()==$( "#username").val()){
                     $( "#s1").text( "用户名可用" ).css("color" ,"green" );
                } else{
                     $( "#s1").text( "用户名不可用" ).css("color" ,"red" );
                }
           });
     });
</ script>
</ head>
< body>
      <input id = "username" type= "text" value= "请输入用户名" />< span id = "s1"></ span>
      <br >
      <input id = "pwd" type= "text" value= "请输入密码" />
 
</ body>

 
   综合案例2:全选,反选,全部选,选中的值
 
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
     $( function() {
           $( "#qx").click( function(){
            var chks=$( "input[type='checkbox']" );
            for( var i=0; i<chks.length;i++){
                chks[i].checked= true;
           }
     });
           $( "#fx").click( function(){
            var chks=$( "input[type='checkbox']" );
            for( var i=0; i<chks.length;i++){
                chks[i].checked=!chks[i].checked;
           }
     });
           $( "#qbx").click( function(){
            var chks=$( "input[type='checkbox']" );
            for( var i=0; i<chks.length;i++){
                chks[i].checked= false;
           }
           });
 
           $( "#test").click( function(){
           $( "input:checkbox[name='chks']:checked" ).each(
                    function(){
                   alert($( this).val());
 
     });
     });
     });
 
</ script>
 
</ head>
< body>
      <input type = "checkbox" name= "chks" value= "100" />
      <input type = "checkbox" name= "chks"  value= "200" />
      <input type = "checkbox" name= "chks"  value= "300" />
      <input type = "checkbox" name= "chks"  value= "400" />
 
      <input type = "button" id= "qx" value= "全选" >
      <input type = "button" id= "fx" value= "反选" >
      <input type = "button" id= "qbx" value= "全不选" >
      <input type = "button" id= "test" value= "选中的值" />
</ body>

 
   综合案例3:隔行变色
   综合案例4:克隆。
 
< script type= "text/javascript" >
     $( function() {
            var i=0;
           $( "#tab1").click( function(){
                 /* var b2=$("table").clone();
                $("#tab1").append(b2); */ ----------克隆
 
                i++;
                $( "#tab1").append( "<p>我是" +i+"</p>" );
           });
     });
</ script>
< style type= "text/css" >
table {
      width: 800px;
      border: 1px solid black;
      border-collapse: collapse;
}
 
tr {
      height: 25px;
}
 
td {
      border: 1px solid black;
}
</ style>
 
</ head>
< body>
 
      <input type = "button" id= "b1" value= "" >
 
      <input type = "checkbox" id= "c1" value= "100" checked= "checked" />
      <input type = "checkbox" />
      <input type = "checkbox" />
      <input type = "checkbox" checked= "checked" />
 
      <table id = "">
            <tr >
                 <td ></td >
                 <td ></td >
                 <td ></td >
            </tr >
            <tr >
                 <td ></td >
                 <td ></td >
                 <td ></td >
            </tr >
            <tr >
                 <td ></td >
                 <td ></td >
                 <td ></td >
            </tr >
      </table >
< span id= "tab1" >点击我 </span >
</ body>