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" style="id:p1;" 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>