首页 > 代码库 > Jquery杂项

Jquery杂项

--------------------------------------------------------------------------------------------------

jquery框架

①    jquery是一个 javascript框架/javascript 库

 

为什么出现 javascript框架?

 

比如: 为了获取 id 对应对象

document.getElementById(‘id号‘);

为了获取标签名获取对象

document.getElmentsByTagName("tagname");

 

如果使用框架

$(‘#id‘) $(‘.classname‘)

 

如果使用jquery框架发送 ajax请求

Jquery.send(..);

 

得出结论是: 使用js框架可以提高我们开发js的效率

 

②    write less do more

③    jquery是一个轻量级的js库,给使用者提供一系列的函数

④    目前流行的js库有:

  1. jquery 2. extjs 3. prototype 4. dwr(运行服务器) 5. dojo

如何在zend studio 安装一个插件(apatana) 可以提示js的函数和 属性,目前这个工具很流行

u      下面我演示如何安装

①    先下载aptana插件 www.aptana.org

②    安装的方式有两种

在线安装(推荐)

离线安装 (首先下载插件包)

  1. help->software->find and install->search for new featrue .. ->new archived site->选中你的aptana.zip ->finish->选中aptana zip复选框

如果提示某个jar安装不成,则去掉这个jar选项

安装时,大概3分钟.

快速入门案例

  1. 使用jquery开发在网页打开是,提示一句话: "hello,world"!

 

<!--如果使用jquery,则需要引入jquery库-->

<script type="text/javascript" src="http://www.mamicode.com/jquery-1.3.1.js"></script>

<script>

//$(document)是一个jquery 对象

//document是dom对象

$(document).ready(function(){

       window.alert(‘hello,world‘);

}

);

 

</script>

 

? 在使用jquery开发中,有两种对象 1. jquery对象 2. dom对象, 如果是jquery对象则只能使用jquery库提供的方法, 如果是dom对象,则只能使用 js本身提供的方法.

 

分析一下,为什么可以使用jquery方法?

 

<script type="text/javascript">

 

function Dog(){

      

}

Dog.prototype={

       ready: function(){

window.alert(‘ok‘);

}

}

 

var dog1=new Dog();

 

dog1.ready();

 

</script>

 

 

u      什么事jquery对象

 

jquery对象就是对dom对象进行包装,这样就可以使用jquery的方法, jquery对象和dom对象可以相互转换,方法是:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Insert title here</title>

<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

<script type="text/javascript">

 

//说明jquery对象和dom对象区别

 

function testing(){

      

       //使用传统的方法来获取test

       //obj1是dom对象

       var obj1=document.getElementById("test");

       window.alert(obj1.value);

      

       //如果是jquery对象,规定一个jquery对象名是 $开头

       var $obj2=$(‘#test‘);

       alert($obj2.val());

      

       //他们之间是否能够相互转换.

       //dom->jquery

       //var $obj3=$(obj1); // $(document).ready()..

       //window.alert($obj3.val());

      

       //jquery->dom对象?

       //在jquery开发中,把一个对象当做集合处理

       //有两种方法.1.

       var obj4=$obj2[0]; //obj4就是dom

      

       //现在

       alert("obj4 valu="+obj4.value);

      

       //第二种方法 把jquery->dom

       var obj5=$obj2.get(0);

      

       alert("obj5 val="+obj5.value)

      

}

 

</script>

</head>

<body>

 

 

<input type="text" id="test" value="http://www.mamicode.com/test"/>

<input type="button" onclick="testing()" value="http://www.mamicode.com/点击" />

</body>

</html>

 

u      jquery的选择器

 

  1. 基本选择器

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

   

       </head>

        

       <body>

               <input type="button" value="http://www.mamicode.com/改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>

               <input type="button" value="http://www.mamicode.com/改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b2"/>

               <input type="button" value="http://www.mamicode.com/改变元素名为

的所有元素的背景色为 #00FFFF"  id="b3"/>

               <input type="button" value="http://www.mamicode.com/改变所有元素的背景色为 #00FF33"  id="b4"/>

               <input type="button" value="http://www.mamicode.com/改变所有的元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>

               

            <div id="one"  class="mini">

                  div id为one 

               </div>

               <div id="two">

                     div id为two

               </div>

               

               <div id="three"  class="mini">

                  div id为three 

               </div>

               

               

               <span id="s_one"  class="mini">

                    span  one

               </span>

               

               <span id="s_two">

                    span two

               </span>

      

 

             

       </body>

     <script language="JavaScript">

 

       //************改变 id 为 one 的元素的背景色为 #0000FF***********

      

       /*function abc(){

             

              document.getElementById("one").style.background="#0000FF";

       }*/

      

       //jquery的id选择器去和按钮绑定一个事件

       //$(‘#b1‘)表示选中 b1这个控件

       //$(‘#b1‘).click 给b1这个按钮绑定 click事件

       //function(){

       //     window.alert(‘yes‘);

       //} 表示点击b1按钮时,究竟做什么

       $(‘#b1‘).click(

       function(){

              $(‘#one‘).css("background","#0000FF");

       }

       );

      

       //*****改变 class 为 mini 的所有元素的背景色为 #FF0033

      

       $(‘#b2‘).click(

       function (){

              $(‘.mini‘).css("background"," #FF0033");

       }

       );

      

       //******改变元素名为 <div> 的所有元素的背景色为 #00FFFF

       $(‘#b3‘).click(

       function (){

              $(‘div‘).css("background","#00FFFF");

       }

       );

      

       //******改变所有元素的背景色为 #00FF33

      

       $(‘#b4‘).click(

       function(){

              $("*").css("background","#00FF33");

       }

       );

      

       //*****改变所有的<span>元素和 id 为 two class .mini 的元素的背景色为 #3399FF

       $(‘#b5‘).click(

              function(){

                     //??

                     $(‘span,#two,.mini‘).css("background","#3399FF");

              }

       )

      

       //***********end*************

    </script>

  

</html>

练习案例:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Insert title here</title>

<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

</head>

<body>

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

 

<script type="text/javascript">

      

       $(‘p‘).click(

       function(){

              //this表示当前被点击元素,但是此时我们当做dom对象

             

              //window.alert(this.innerHTML);

              //$(this) 表示当前被点击元素,但是此时我们当做jquery对象

              window.alert($(this).html());

              //window.alert(‘ok‘);

       }

       );

      

</script>

</body>

</html>

 

 

u      层次选择器的

 

 

  1. prev + next 表示选择  prev 的下一个元素 (强调 : 同一级)
  2. prev ~ siblings 表示选择 prev 的后面所有元素(强调 : 同一级)

 

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

   

       </head>

        

       <body>

               <input type="button" value="http://www.mamicode.com/改变 <body> 内所有

的背景色为 #0000FF"  id="b1"/>

               <input type="button" value="http://www.mamicode.com/改变 <body> 内子

的背景色为 #FF0033"    id="b2"/>

               <input type="button" value="http://www.mamicode.com/改变 id 为 one 的下一个

的背景色为 #0000FF"  id="b3"/>

               <input type="button" value="http://www.mamicode.com/改变 id 为 two 的元素后面的所有兄弟

的元素的背景色为 # #0000FF"  id="b4"/>

               <input type="button" value="http://www.mamicode.com/改变 id 为 two 的元素所有

兄弟元素的背景色为 #0000FF"  id="b5"/>

               

            <div id="one"  class="mini">

                  div id为one 

               </div>

               <div id="two">

                     div id为two

                      <div id="two01">

                           id twoo1

                      </div>

                      <div id="two02">

                           id twoo2

                      </div>

               </div>

               

               <div id="three"  class="mini">

                  div id为three 

                      <div id="three01">

                           id three01

                      </div>

               </div>

               

               

               

               <span id="s_one"  class="mini">

                    span  one

               </span>

               

               <span id="s_two">

                    span two

               </span>            

       </body>

    

       <script language="JavaScript">

   //*******改变 <body> 内所有 <div> 的背景色为 #0000FF

   $(‘#b1‘).click(function(){

          

           $(‘div‘).css("background","#0000FF");

   })

   //*******改变 <body> 下 <div> 的背景色为 #0000FF

    $(‘#b2‘).click(function(){

          

           $(‘body > div‘).css("background","#0000FF");

   })

  

   //改变 id 为 one 的下一个 <div> 的背景色为 #0000FF(选择一个)

  

   $(‘#b3‘).click(function(){

          

           $(‘#one + div‘).css("background","#0000FF");

   })

  

   //*******改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF

    $(‘#b4‘).click(function(){

          

           $(‘#two ~ div‘).css("background","#0000FF");

   })

   //****改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF

   $(‘#b5‘).click(function(){

           $("#two").siblings("div").css("background","#0000FF");

   })

    </script>

  

</html>

 

 

 

u      过滤选择器

①    基础过滤选择器

 

所有的案例如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

   

       </head>

        

       <body>

              <h1>XXXX</h1>

              <h2>XXXXXXX</h2>

              <h3>XXXXXXXXX</h3>

             

               <input type="button" value="http://www.mamicode.com/改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>

               <input type="button" value="http://www.mamicode.com/改变最后一个 div 元素的背景色为 #0000FF"    id="b2"/>

               <input type="button" value="http://www.mamicode.com/改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>

               <input type="button" value="http://www.mamicode.com/改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>

                <input type="button" value="http://www.mamicode.com/改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>

               <input type="button" value="http://www.mamicode.com/改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>

               <input type="button" value="http://www.mamicode.com/改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>

               <input type="button" value="http://www.mamicode.com/改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>

            <input type="button" value="http://www.mamicode.com/改变所有的标题元素的背景色为 #0000FF"  id="b9"/>

            <input type="button" value="http://www.mamicode.com/改变当前正在执行动画的所有元素的背景色为 #0000FFF"  id="b10"/>

               

            <div id="one"  class="mini">

                  div id为one 

               </div>

               <div id="two">

                     div id为two

                      <div id="two01">

                           id twoo1

                      </div>

                      <div id="two02">

                           id twoo2

                      </div>

               </div>

               

               <div id="three"  class="one" >

                  div id为three   class one

                      <div id="three01">

                           id three01

                      </div>

               </div>

               

                <div id="mover">

                  执行动画

               </div>

             

               

               <span id="s_one"  class="mini">

                    span  one

               </span>

               

               <span id="s_two">

                    span two

               </span>            

       </body>

    

       <script language="JavaScript">

              //函数

              function ca(){

                     $("#mover").slideToggle("slow",ca);

              }

             

              //调用

              ca();

             

       //*****改变第一个 div 元素的背景色为 #0000FF

      

       $(‘#b1‘).click(

       function(){

              //$(‘div:first‘).css("background","#0000ff");

              $("div:eq(0)").css("background","#0000ff");

       }

       );

      

       //*****改变最后一个 div 元素的背景色为 #0000FF

       //所谓最后一个指的是是从上到下,从左到右去搜,最后的一个

       $(‘#b2‘).click(

       function(){

              $(‘div:last‘).css("background","#0000ff");

       }

       );

        

       //***改变class不为 one 的所有 div 元素的背景色为 #0000FF

       $(‘#b3‘).click(

       function(){

             

              //先选择所有div,然后再过滤(select mysql )

              $("div:not(.one)").css("background","#0000ff");

             

       }

       );

      

       //********改变索引值为偶数的 div 元素的背景色为 #0000FF

      

       $(‘#b4‘).click(

       function(){

              //:表示过滤

              $("div:odd").css("background","#0000ff");

             

       }

       );

       //5

       //*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

       $(‘#b6‘).click(

       function(){

             

              $("div:gt(3)").css("background","#0000ff");

             

       }

       );

       //改变索引值为等于 3 的 div 元素的背景色为 #0000FF

      

       $(‘#b7‘).click(

       function(){

             

              $("div:eq(3)").css("background","#0000ff");

             

       }

       );

       //**改变索引值为小于 3 的 div 元素的背景色为 #0000FF

         $(‘#b8‘).click(

       function(){

             

              $("div:lt(3)").css("background","#0000ff");

             

       }

       );

      

       //****改变所有的标题元素的背景色为 #0000FF

      

       $(‘#b9‘).click(

       function(){

             

              $(":header").css("background","#0000ff");

             

       }

       );

      

       //***改变当前正在执行动画的所有元素的背景色为 #0000FFF

       $(‘#b10‘).click(

       function(){

              //怎么样吧颜色在重新找回的.

              $(":animated").css("background","red");

             

       }

       );

    </script>

  

</html>

-----

练习

代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>Insert title here</title>

<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

</head>

<body>

<h1>第一个表格</h1>

<table border="1" width="400px">

       <tr><td>1</td><td>1</td></tr>

       <tr><td>2</td><td>2</td></tr>

       <tr><td>3</td><td>3</td></tr>

       <tr><td>4</td><td>4</td></tr>

       <tr><td>5</td><td>5</td></tr>

       <tr><td>6</td><td>6</td></tr>

      

</table>

<h1>第二个表格</h1>

<table border="1" width="400px">

       <tr><td>1</td><td>1</td></tr>

       <tr><td>2</td><td>2</td></tr>

       <tr><td>3</td><td>3</td></tr>

       <tr><td>4</td><td>4</td></tr>

       <tr><td>5</td><td>5</td></tr>

       <tr><td>6</td><td>6</td></tr>

      

</table>

<script type="text/javascript">

      

       $("table:eq(0) tr:even").css("background","red");

       $("table:eq(0) tr:odd").css("background","blue");

       //第二个表格

       $("table:eq(1) tr:even").css("background","green");

       $("table:eq(1) tr:odd").css("background","yellow");

      

</script>

</body>

</html>

 

 

代码

 

u      内容选择器

根据内容来选择你需要的元素

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

   

       </head>

        

       <body>

              <h1>XXXX</h1>

              <h2>XXXXXXX</h2>

              <h3>XXXXXXXXX</h3>

             

               <input type="button" value="http://www.mamicode.com/改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>

               <input type="button" value="http://www.mamicode.com/改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF"    id="b2"/>

               <input type="button" value="http://www.mamicode.com/改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>

               <input type="button" value="http://www.mamicode.com/改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>

                <input type="button" value="http://www.mamicode.com/改变不含有文本 di; 的 div 元素的背景色"  id="b5"/>

               <input type="button" value="http://www.mamicode.com/改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>

             

       <div id="xxxx">

            <div id="one"  class="mini">

                  div id为one 

               </div>

    </div>

               

               <div id="two">

                     div id为two

                      <div id="two01">

                           id twoo1

                      </div>

                      <div id="two02">

                           id twoo2

                      </div>

               </div>

               

               <div id="three"  class="one" >

                  div id为three   class one

                      <div id="three01">

                           id three01

                      </div>

               </div>

               

               <div id="four"  class="one" >

                 XXXXXXXXXX

               </div>

               

                <div id="five"  class="one" >

                

               </div>

               

               

               <div id="mover">

                  执行动画

               </div>

               

               <span id="s_one"  class="mini">

                    span  one

               </span>

               

               <span id="s_two">

                    span two

               </span>            

       </body>

    

       <script language="JavaScript">

       //********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF

       $(‘#b1‘).click(function(){

              $("div:contains(‘di‘)").css("background","#0000ff");

       })

      

       //**************改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF

       $(‘#b2‘).click(function(){

              $("div:empty").css("background","red");

       })

       //******改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF

       $(‘#b3‘).click(function(){

              //这个是元素本身

              $("div:.mini").css("background","green");

              //这个元素它父元素

              //$("div:has(‘.mini‘)").css("background","green");

       })

       //****改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF

    $(‘#b4‘).click(function(){

              //这个是元素本身

              $(‘div:parent‘).css("background","yellow");

       })

      

       //*****改变不含有文本 di; 的 div 元素的背景色

        $(‘#b5‘).click(function(){

              //这个是元素本身

              $("div:not(contains(‘di‘))").css("background","red");

       })

      

       //****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

      

       $(‘#b6‘).click(function(){

              //这个是元素本身

              $("div:gt(3)").css("background","#0000ff");

       })

      

       //***

    </script>

  

</html>

 

 

 

u      可见度选择器

 

该选择器,是根据元素的可见性来选择对象

 

 ----------------------------------

 

u      jquery的属性选择器

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

                    

 

                     div.visible{

                            display:none;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

   

       </head>

        

       <body>

              <h1>XXXX</h1>

              <h2>XXXXXXX</h2>

              <h3>XXXXXXXXX</h3>

             

               <input type="button" value="http://www.mamicode.com/含有属性title 的div元素."  id="b1"/>

               <input type="button" value="http://www.mamicode.com/属性title值等于test的div元素"    id="b2"/>

               <input type="button" value="http://www.mamicode.com/属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>

               <input type="button" value="http://www.mamicode.com/属性title值 以te开始 的div元素"  id="b4"/>

               <input type="button" value="http://www.mamicode.com/属性title值 以est结束 的div元素"  id="b5"/>

               <input type="button" value="http://www.mamicode.com/属性title值 含有es的div元素"  id="b6"/>

               <input type="button" value="http://www.mamicode.com/选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>

               <input type="hidden" value="http://www.mamicode.com/hidden1"/>

               <input type="hidden" value="http://www.mamicode.com/hidden2"/>

               <input type="hidden" value="http://www.mamicode.com/hidden3"/>

               <input type="hidden" value="http://www.mamicode.com/hidden4"/>

               

            <div id="one"  title="test">

                  div id为one  test

               </div>

               

               <div id="one"  title="texxx">

                  div id为one  texxx

               </div>

               

               <div id="one"  title="xxxest">

                  div id为one  texxx

               </div>

               

                <div id="one"  title="xxxesxxxxxt">

                  div id为one  xxxesxxxxxt

               </div>

               

               <div id="two"   title="ate">

                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

               </div>

               

               <div id="three"  class="one" >

                 XXXXXXXXX

               </div>

               

       </body>

    

       <script language="JavaScript">

        //*****含有属性title 的div元素.

        $("#b1").click(

        function(){

             $("div[title]").css("background","green");

        }

        );

        

        //****属性title值等于test的div元素

         $("#b2").click(

        function(){

             $("div[title=\"test\"]").css("background","green");

        }

        );

        

        //属性title值不等于test的div元素(没有属性title的也将被选中)

         $("#b3").click(

        function(){

             $("div[title!=‘test‘]").css("background","red");

        }

        );

        

        //属性title值 以te开始 的div元素

         $("#b4").click(

        function(){

             $("div[title^=‘te‘]").css("background","red");

        }

        );

        //属性title值 以est结束 的div元素

         $("#b5").click(

        function(){

             $("div[title$=‘est‘]").css("background","red");

        }

        );

        

        //属性title值 含有es的div元素

         $("#b6").click(

        function(){

             $("div[title*=‘es‘]").css("background","red");

        }

        );

        

        //选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素

        //我们的过滤方式有两种 :

        //比如选出文本中含有  abc的 div  $("div:contains[‘abc‘]")

        $("#b7").click(

        function(){

             //选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素

             $("div[title*=‘es‘][id]").css("background","red");

             

             

        }

        );

    </script>

  

</html>

 

u      子元素选择器

 

根据该元素是父元素下出现的位置来选中子元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

                    

 

                     div.visible{

                            display:none;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

   

       </head>

        

       <body>

              <h1>XXXX</h1>

              <h2>XXXXXXX</h2>

              <h3>XXXXXXXXX</h3>

             

               <input type="button" value="http://www.mamicode.com/每个class为one的div父元素下的第2个子元素"  id="b1"/>

               <input type="button" value="http://www.mamicode.com/每个class为one的div父元素下的第一个子元素"    id="b2"/>

               <input type="button" value="http://www.mamicode.com/每个class为one的div父元素下的最后一个子元素"  id="b3"/>

               <input type="button" value="http://www.mamicode.com/如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素"  id="b4"/>

               

           

<div class="one">

               <div id="one"  class="one" >

                 XXXXXXXXX  one

               </div>

                     

               <div id="two"  class="one" >

                 XXXXXXXXX  two

               </div>

                     

               <div id="three"  class="one" >

                 XXXXXXXXX  three

               </div>

               

                <div id="four"  class="one" >

                 XXXXXXXXX  four

               </div>

</div>  

 

<div class="one">

               <div id="one"  class="one" >

                 XXXXXXXXX  one

               </div>

</div>         

       </body>

    

       <script language="JavaScript">

        //****每个class为one的div父元素下的第2个子元素

        $(‘#b1‘).click(

        function(){

             $("div .one:nth-child(1)").css("background","red");

        }

        );

        //*****每个class为one的div父元素下的第一个子元素

         $(‘#b2‘).click(

        function(){

             $("div .one:first-child").css("background","red");

       //     $("div .one:nth-child(1)").css("background","red");

        }

        );

        

        //*****每个class为one的div父元素下的最后一个子元素

         $(‘#b3‘).click(

        function(){

             $("div .one:last-child").css("background","red");

      

        }

        );

        

        //**如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素

         $(‘#b4‘).click(

        function(){

             $("div .one:only-child").css("background","red");

      

        }

        );

         </script>

  

</html>

 

 

u      表单对象选择器

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <script language="JavaScript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

   

       </head>

        

       <body>

             

       <form>

  <input type="text" /><br/>

  <input type="checkbox" /><br/>

  <input type="radio" /><br/>

  <input type="image" /><br/>

  <input type="file" /><br/>

  <input type="submit" /><br/>

  <input type="reset" /><br/>

  <input type="password" /><br/>

  <input type="button" value="http://www.mamicode.com/按钮1" /><br/>

  <select><option/></select><br/>

  <textarea></textarea><br/>

  <button>按钮2</button><br/>

</form>             

             

       </body>

<script language="JavaScript">

      

       //选择所有的button

       var buttons=$(‘:button‘);

       alert(buttons.length);

       var buttons=$("input[type=‘button‘]");

       alert(buttons.length);

</script>

  

</html>

 

 

 

 

小结: 我们在获取表单元素时候,有两种方式

  1. $(":表单元素名") [input button file img....] ,这种方式选择最全.
  2. $("input[type=‘button‘]");  这种方式<input type="button"/>

 

 

u      表单对象属性选择器

$("select option:selected")

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

                    

 

                     div.visible{

                            display:none;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

   

  </head>

  <body>

              <h1>XXXX</h1>

              <h2>XXXXXXX</h2>

              <h3>XXXXXXXXX</h3>

             

               <input type="button" value="http://www.mamicode.com/利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 元素的值"  id="b1"/>

               <input type="button" value="http://www.mamicode.com/利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 元素的值"    id="b2"/>

               <input type="button" value="http://www.mamicode.com/利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>

               <input type="button" value="http://www.mamicode.com/利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>

               <br>

                <input type="text" value="http://www.mamicode.com/篮球1"/>

                <input type="text" value="http://www.mamicode.com/篮球2"/>

                <input type="text" value="http://www.mamicode.com/篮球3" disabled="true"/>

                <input type="text" value="http://www.mamicode.com/篮球4" disabled="true"/>

                <br>

                <input type="checkbox" value="http://www.mamicode.com/爱好1"/>爱好1

                <input type="checkbox" value="http://www.mamicode.com/爱好2"/>爱好2

                <input type="checkbox" value="http://www.mamicode.com/爱好3"/>爱好3

                <input type="checkbox" value="http://www.mamicode.com/爱好4"/>爱好4

                <br>

                <select name="job" size=9 multiple="multiple">

                       <option value="http://www.mamicode.com/选项1">选项1^^</option>

                           <option value="http://www.mamicode.com/选项2">选项2^^</option>

                              <option value="http://www.mamicode.com/选项3">选项3^^</option>

                              <option value="http://www.mamicode.com/选项4">选项4^^</option>

                              <option value="http://www.mamicode.com/选项5">选项5^^</option>

                              <option value="http://www.mamicode.com/选项6">选项6^^</option>

                 </select>

                

                 <select id="hsp" name="edu">

                       <option value="http://www.mamicode.com/博士">博士^^</option>

                           <option value="http://www.mamicode.com/硕士">硕士^^</option>

                              <option value="http://www.mamicode.com/本科">本科^^</option>

                              <option value="http://www.mamicode.com/小学">小学^^</option>

                 </select>

               

                

               

               

</body>

    

       <script language="JavaScript">

        

        //*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值

        

        $("#b1").click(function(){

            

              $("input[type=‘text‘]:enabled").val("hello");

        })

        

         //**利用 jQuery 对象的 length 属性获取多选框选中的个数

         $("#b3").click(function(){

         // alert($(":checkbox:checked").length);

                   alert($("input[type=‘checkbox‘]:checked").length);

         })

        

         //****利用 jQuery 对象的 text() 方法获取下拉框选中的内容

        

         $("#b4").click(function(){

                   //alert($("select option:selected").text());

                     //必须 用这个 val()函数把每个值打印;

                     var $objs=$("select option:selected");

              /*    $.each($objs,function(){

                            alert($(this).val());

                     });*/

             

              /*    $.each($objs,function(i,n){

                     //     alert(n.value);

                            alert($(n).val());

                     })*/

                    

              /*    $objs.each(function(){

                            window.alert($(this).val());

                     })*/

                    

                     $objs.each(function(i,n){

                            window.alert("ok"+$(n).val());

                     })

                    

                    

         })

        

        

         </script>

  

</html>

 

? 总结一下过滤器使用的方式

$("div:contains(‘di‘)"); //内容

$("div[type]")//属性

$("div .one")// 选中div 中含 class 为 .one 的div元素

$("div, .one")// 选中div 和 class 为 .one 的div元素

?总结jquery对象集合遍历的四种形式

       //必须 用这个 val()函数把每个值打印;

                     var $objs=$("select option:selected");

              /*    $.each($objs,function(){

                            alert($(this).val());

                                   });*/

             

              /*    $.each($objs,function(i,n){

                     //     alert(n.value);

                            alert($(n).val());

                     })*/

                    

              /*    $objs.each(function(){

                            window.alert($(this).val());

                     })*/

                    

                     $objs.each(function(i,n){

                            window.alert("ok"+$(n).val());

                     })

 

?如何使用我们的选择器

总结如下:

1.使用什么样的选择器根据需求定

2.如果针对文档内容,则使用内容选择器

3.如果是选择父子(祖先、后代)元素则使用层次选择器

4. 如果是根据id/class/tagname/使用基本选择器

5. 如果是选择表单中的元素,则使用表单选择器、表单对象属性选择器

6. 根据可见性选择元素,则使用可见性选择器

7. 如果是选择某个元素中包含某个属性(属性值),则使用属性选择器

8. !!!如果考虑对选中的元素,要进行过滤,则使用过滤选择器,(有三种方法)

$("div:contains(‘di‘)"); //内容

$("div[type]")//属性

$("div .one")// 选中div 中含 class .one div元素

 

 

 

u      jquery如何操作dom

 

jquery的dom操作分为三种 (js)

①    xml dom

②    html dom

③    css dom

 

 

查找节点,然后去通过attr函数去修改或者设置属性的值.

 --------------------------------------------------------------------------

jquery的dom操作

u      创建对象

使用jquery的 $() 来创建一个dom对象, 并包装成一个jquery对象返回

快速入门:

如果传统的dom方法.

 

//添加重庆li到 上海下(使用dom的传统方法)

       function test1(){

             

              var myli=document.createElement("li");

              myli.setAttribute("id","cq");

              myli.setAttribute("name","chongqing");

              myli.innerHTML="重庆";

             

              document.getElementById("city").appendChild(myli);

             

       }

 

 

如果使用的 jquery方法

 

 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

 

       </head>

       <body>

             

                 <ul id="city">

               <li id="bj" name="beijing">北京</li>

                     <li id="sh" name="shanghai">上海</li>

         </ul>

             

              <input type="button" id="b1" value="http://www.mamicode.com/添加重庆li到 上海下"/><br/>

              <input type="button" id="b2" value="http://www.mamicode.com/添加成都li到 北京前"/><br/>

             

       </body>

    

       <script language="JavaScript">

        

       //*****添加重庆li到 上海下

       $("#b1").click(function(){

              //jquery方法

              //<li id=‘cq‘ name=‘‘chongqing>重庆</li>

              //有两种方法

              //1.一步到位********

       //     $myli=$("<li id=‘cq‘ name=‘chongqing‘>重庆</li>");

              //先使用内部插入

              //$(‘#city‘).append($myli) :表示 在 $(‘#city‘)对象内部后面添加一个 $myli对象

       //     $(‘#city‘).append($myli);

              //1.end ....一步到位********

             

             

              //2.逐步添加我们的dom对象

             

              $myli=$("<li></li>");//<===>$myli=$("<li/>");

              $myli.text("重庆"); //=> <li>重庆</li>

              $myli.attr("id","cq");//==><li id=‘cq‘>重庆</li>

              $myli.attr("name","chongqing");

              //把$myli添加到上海

              ////$(‘#city‘).append($myli) :表示 在 $(‘#city‘)对象内部后面添加一个 $myli对象

              //$(‘#city‘).append($myli);

              //如果使用appendTo这应当这样使用

              //$myli.appendTo($("#city")); :表示把$myli添加到  $("#city")对象的内部后面

              $myli.appendTo($("#city"));

             

             

       })

      

       //***添加成都li到 北京前

       $("#b2").click(function(){

              //jqury方法

              $myli=$("<li id=‘cq‘ name=‘chongqing‘>成都</li>");

              //$(‘#city‘).prepend($myli);

              $myli.prependTo($(‘#city‘));

       })

      

    </script>

  

</html>

 

 

 

 

 

 

$aaa.append($bbb);

 

$bbb.appendTo($aaa);

 

 

 

我们看看外部插入:

核心代码如下:

$(‘#b4‘).click(function(){

             

              //使用外部插入

              //一步到位

              //$("#bj").after("<li id=‘cd‘ name=‘chengdu ‘>成都</li>");

              $("<li id=‘cd‘ name=‘chengdu ‘>成都</li>").insertAfter($(‘#bj‘));

             

       })

      

       $(‘#b5‘).click(function(){

             

              //使用外部插入

              //一步到位

              //$("#jl") 对象前面添加  "<li id=‘cd‘ name=‘chengdu ‘>成都</li>";

              var $jl=$("<li id=‘cd‘ name=‘chengdu ‘>成都</li>");

              //$("#jl").before($jl);

              $jl.insertBefore($(‘#jl‘));

             

       })

 

 

l      使用jquery去查找某个对象,如果这个对象(id/class...)不存在,jquery不报错, val()

 

<script type="text/javascript">

      

//alert($(‘#text2‘).val());

alert(document.getElementById("text2").value);

//dom,这样处理

/*if(document.getElementById("text2")){

       alert(document.getElementById("text2").value);

}else{

       window.alert("ok");

}*/

</script>

 

 

u      删除节点

 

代码 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

 

       </head>

       <body>

              您喜欢的城市:<br>

              <ul id="city">

               <li id="bj" name="beijing">北京</li>

                     <li id="sh" name="shanghai">上海</li>

                     <li id="tj" name="tianjin">天津</li>

         </ul>

             

              您爱好的游戏:<br>

              <ul id="game">

               <li id="fk" name="fakong">反恐</li>

                     <li id="cq" name="chuangqi">传奇</li>

         </ul>

             

              <p>Hello</p> how are <p>you?</p>

             

             

              <p name="test">Hello, <span>Person</span> <a href="http://www.mamicode.com/#">and person</a></p>

             

              <input type="button" value="http://www.mamicode.com/删除所有p" id="b1"/>

              <input type="button" value="http://www.mamicode.com/所有p清空" id="b1"/>

              <input type="button" value="http://www.mamicode.com/删除上海这个li" id="b3"/>

       </body>

       <script language="JavaScript">

     

         //*****删除所有p

        // $("p").remove();

        

        //***所有p清空

        $("p").empty();

        

        //****删除上海这个li

       $("#b3").click(function(){

              $("#sh").remove();

       })

      

    </script>

  

</html>

 

 

u      复制节点

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

 

       </head>

       <body>

              <button>保存</button><br><br><br><br><br>

              ///////////////////////////////////////////////<br>

        <p>段落</p>

              <p>段落2</p>

              <p>段落2</p>

              <p>段落2</p>

              <p>段落2</p>

             

       </body>

       <script language="JavaScript">

        

        $("p").click(function(){

             window.alert($(this).text());

        });

        //$("p").clone()表示复制一份 $("p"),但是没有复制事件

        //$("p").clone(true)表示复制一份 $("p"),同时复制事件

        $("p").clone(true).insertAfter($(‘button‘));

        

      

    </script>

  

</html>

 

 

u      节点替换

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

 

       </head>

       <body>

              <p>Hello</p><p>cruel</p><p>World</p>

       </body>

       <script language="JavaScript">

      //with : 用什么去替换什么

       //  $("p").replaceWith("<input type=‘button‘ value=http://www.mamicode.com/‘按钮‘>
");

        

       //  $("<a href=http://www.mamicode.com/‘#‘>sohu").replaceAll($("p"));

         $("p").replaceWith("<a href=http://www.mamicode.com/‘#‘>sohu
");

      

    </script>

  

</html>

 

 

在jquery开发中有这样几个函数,可以获取值,同时也可以设置值

 

  1. val() val(val)
  2. html() html(val)

 

$("#div1").html("<p>hello</p>")

 

  1. text() text(val)

$("#div1").text("<p>hello</p>");

 

4. attr(name) attr(name,val)

$(‘#div1‘).attr("title");

$(‘‘#div1).attr("title","abc");

 

  1. css("css名字"), css("css名字",val)

$("#div1").css("backgorund");

$("#div1").css("backgorund","red");

 

removeAttr(): 删除指定元素的指定属性

 

<a href=http://www.mamicode.com/‘http://www.sohu.com‘ id="a1">soho</a>

 

$("#a1").removeAttr("href");

$("#a1").attr("href","http://www.baidu.com");

 

 

 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>XXX</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <script language="JavaScript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

   

       </head>

        

       <body>

              <!--value 就是默认值 可以通过 this.defaultValue来访问-->

               <input type="text" value="http://www.mamicode.com/用户邮箱/手机号/用户名"  id="b1"/><br>

               <input type="password" value=""  id="b2"/><br>

               <input type="button" value="http://www.mamicode.com/登陆"  id="b3"/>

             

               <br>

      

             

       </body>

<script language="JavaScript">

      

      

       $(document).ready(function (){

              //当dom对象加载完毕后,给 b1绑定一个focus事件

              $("#b1").focus(function(){

                    

                     //获取当前值

                     $curVal=$(this).val();

                     if($curVal==this.defaultValue){

                            //应当设置""

                            $(this).val("");

                     }else{

                            $(this).val($curVal);

                     }

              })

              //在绑定一个事件 blur

              $("#b1").blur(function(){

                     //获取当前值

                     $curVal=$(this).val();

                     if($curVal==""){

                            $(this).val(this.defaultValue);

                     }else{

                            $(this).val($curVal);

                     }

              })

             

             

       });

 

</script>

  

</html>

 

 

***如何获取子元素和兄弟元素的方法:

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ddd</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       <style type="text/css">

                    div,span{

                         width: 140px;

                         height: 140px;

                         margin: 20px;

                         background: #9999CC;

                         border: #000 1px solid;

                            float:left;

                         font-size: 17px;

                         font-family:Roman;

                     }

                    

                     div.mini{

                         width: 30px;

                         height: 30px;

                         background: #CC66FF;

                         border: #000 1px solid;

                         font-size: 12px;

                         font-family:Roman;

                     }

        </style>

        <!--引入jquery的js库-->

        <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

 

       </head>

       <body>

             

              <input type="button" value="http://www.mamicode.com/查找所有子元素"  id="b2"/>

        <input type="button" value="http://www.mamicode.com/获取后面的同辈元素"  id="b3"/>

        <input type="button" value="http://www.mamicode.com/获取前面的同辈元素"  id="b4"/>

        <input type="button" value="http://www.mamicode.com/获取所有的同辈元素"  id="b5"/>

      

        <div >

              ccccccc

   </div>   

             

   <div class="one">

               <div id="one"   >

                 XXXXXXXXX  one

               </div>

                     

               <div id="two"  >

                 XXXXXXXXX  two

               </div>

                     

               <div id="three" >

                 XXXXXXXXX  three

               </div>

               

                <div id="four" >

                 XXXXXXXXX  four

               </div>

   </div>   

   <div>

           tttttttttt

   </div>   

   <div>

           aaaaaaa

   </div>

   <div>

           bbbbbb

   </div></body>

       <script language="JavaScript">

             

       //**查找所有子元素(class 为 one 的div的子元素)

       $("#b2").click(function(){

              window.alert(‘aaaa‘);

       /*    $(".one").children().each(function(){

                     alert($(this).text());

              })*/

             

              //指定获取第几个子孩子

              alert($(".one").children().eq(1).text());

       })

      

       //***获取后面的同辈元素(class 为 one 的div的子元素)

      

       $("#b3").click(function(){

      

              //获取.one后面所有的兄弟  

       //     $(".one").nextAll().each(function(){

       //            alert($(this).text());

       //     })

              //获取.one后面的第2兄弟

              alert($(".one").nextAll().eq(1).text());

       })

      

       //**获取前面的同辈元素(class 为 one 的div的子元素) 

      

       $("#b4").click(function(){

       //获取.one前面所有的兄弟  

       //     $(".one").prevAll().each(function(){

              //     alert($(this).text());

              //})

              //获取.one前面的第1兄弟

              alert($(".one").prevAll().eq(0).text());

              alert($(".one").prev().text());

       })

      

       //**获取所有的同辈元素

       $("#b5").click(function(){

      

              $(".one").siblings().each(function(){

                     alert($(this).text());

              })

      

       })

       //*** 

    </script></html>

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

       <head>

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

              <title>Untitled Document</title>

              <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>

       </head>

       <body>

              <form method="post" action="">

                 请选择您的爱好!

                     <br><input type="checkbox" id="checkedAll_2"/>全选/全不选

                 <br/>

                  <input type="checkbox" name="items"   value="http://www.mamicode.com/足球"/>足球

                     <input type="checkbox" name="items" value="http://www.mamicode.com/篮球"/>篮球

                     <input type="checkbox" name="items" value="http://www.mamicode.com/游泳"/>游泳

                     <input type="checkbox" name="items" value="http://www.mamicode.com/唱歌"/>唱歌

                 <br/>

                  <input type="button" id="CheckedAll" value="http://www.mamicode.com/全 选"/>

                  <input type="button" id="CheckedNo" value="http://www.mamicode.com/全不选"/>

                  <input type="button" id="CheckedRev" value="http://www.mamicode.com/反 选"/>

             

                     <input type="button" id="send" value="http://www.mamicode.com/提 交"/>

              </form>

       </body>

      

       <script language="JavaScript">

      

        

        

              $("#checkedAll_2").click(

              function (){

                     if(this.checked){

                            $("input[name=‘items‘]").attr("checked","checked");

                     }else{

                            //$("input[name=‘items‘]").attr("checked","");

                            $("input[name=‘items‘]").removeAttr("checked");

                     }

              }

              );

             

              $(‘#CheckedAll‘).click(function(){

                     $("input[name=‘items‘]").attr("checked", "checked");

              }

              );

              $(‘#CheckedNo‘).click(function(){

                     $("input[name=‘items‘]").attr("checked", "");

              }

              );

             

              //反选

              $(‘#CheckedRev‘).click(function(){

                     $("input[name=‘items‘]").each(function(){

                            if(this.checked){

                                   $(this).attr("checked","");

                            }else{

                                   $(this).attr("checked","checked");

                            }

                     })

              }

              );

       </script>

</html>

 

 

 

 

小结: jquery和ajax整合的使用方法

 

使用jquery的方法

  1. load(url,[data,],[callfunction])

 

这个load方法把我们ajax自行写的代码包装,

url表示向哪个php发送ajax请求.

data数据是可以选填 ,但是格式有要求 应当按照  json格式来发送, 一旦有这个数据则,load将以post方式提交, 如果没有数据 ,可以设置null,则默认以get方式提交

callfunction :形式 function(data,textstatus,xmlHttpRequest);

data :表示从服务器返回数据(string)

textstatus:表示文本状态succuss, error, notmodify, timeout

xmlHttpRequest,就是XMLHttpRequest对象

 

返回的数据可能是text/xml/json, 这时你需要用不同的方法来处理,然后使用jquery来显示到某个适当位置

 

说明 : load方法需要用jquery 对象来调用.

jquery.load();

 

  1. get(url,[data,][callfunction]);
  2. post(url,[data,][callfunctino]);

 

这个post方法可以不依赖某个jquery对象,它可以直接调用

$.post();

 

url也是向某个php发送数据.

data 也是可以选填的,格式仍然遵守json格式 {"name":"sp"}; $_POST[‘name‘];

该函数返回的值就是xmlHttpRequest 对象

callfunction函数只能有两个参数. data,textstatus

 

Jquery杂项