Jquery打飞机

jQuery:

版本：1.8.3

本质：js的一个库

入门：$(function(){

    Jquery 代码

});

获取元素：JS:document.getElementById();

JQ:$(“#id”);

jQuery对象与DOM对象转换：

           function JSWrite (){

              //document.getElementById("span1").innerHTML=" 美美哒！ ";

              var spanEle = document .getElementById( "span1" );

              $(spanEle).html( " 美美哒！ " );

           }

          

           $( function (){

              /*document.getElementById("btn1").onclick = function(){

                  document.getElementById("span1").innerHTML=" 帅帅哒！ ";

              }*/

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

                  //JQ 对象转换成 DOM 对象的第一种方式

                  //$("#span1")[0].innerHTML=" 呵呵哒！ ";

                  //JQ 对象转换成 DOM 对象的第二种方式

                  $( "#span1" ).get( 0 ).innerHTML = " 呵呵哒！ " ;

              });

             

           });

注意 ：JQ 对象只能操作JQ 里面的属性和方法

      JS 对象只能操作JS 里面的属性和方法

  jQuery的效果（实现广告弹出）：

第一步：引入jQuery 相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作( 显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery 的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作( 隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery 的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

jQuery的选择器

基本选择器

id 选择器：$(“#id 名称”);

元素选择器：$(“ 元素名称”);

类选择器：$(“. 类名”);

通配符：*

多个选择器共用( 并集)

代码示例

< script >

           $( function (){

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

                  $( "#one" ). css ( "background-color" , "pink" );

              });

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

                  $( ".mini" ). css ( "background-color" , "pink" );

              });

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

                  $( "div" ). css ( "background-color" , "pink" );

              });

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

                  $( "*" ). css ( "background-color" , "pink" );

              });

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

                  $( "#two .mini" ). css ( "background-color" , "pink" );

              });

           });

       </ script >

层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素( 儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素( 儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素( 紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素( 兄弟)

       < script >

           $( function (){

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

                  $( "body div" ). css ( "background-color" , "pink" );

              });

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

                  $( "body>div" ). css ( "background-color" , "pink" );

              });

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

                  $( "#two+div" ). css ( "background-color" , "pink" );

              });

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

                  $( "#one~div" ). css ( "background-color" , "pink" );

              });

           });

          

       </ script >

基本过滤选择器

$('li').first() 等价于：$(“li:first”)

       < script >

           $( function (){

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

                  $( "div:first" ). css ( "background-color" , "pink" );

              });

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

                  $( "div:last" ). css ( "background-color" , "pink" );

              });

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

                  $( "div:odd" ). css ( "background-color" , "pink" );

              });

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

                  $( "div:even" ). css ( "background-color" , "pink" );

              });

           });

       </ script >

属性选择器：

       < script >

           $( function (){

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

                  $( "div[id]" ). css ( "background-color" , "pink" );

              });

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

                  $( "div[id='two']" ). css ( "background-color" , "pink" );

              });

           });

          

       </ script >

表单选择器：

       < script >

           $( function (){

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

                  $( ":input" ). css ( "background-color" , "pink" );

              });

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

                  $( ":text" ). css ( "background-color" , "pink" );

              });

           });

       </ script >

使用JQ实现表格的隔行换色 ：

第一步：引入jquery 的类库

第二步：直接写页面加载函数

第三步：直接使用jquery 的选择器( 组合选择) 拿到需要操作的元素( 奇数行和偶数行)

第四步：分别使用CSS 的方法(css(name,value)) 对奇数行和偶数行设置背景颜色。

< script >

    $( function (){

       $( "tbody tr:even" ).addClass( "even" );

       $( "tbody tr:odd" ).addClass( "odd" );

    });

</ script >

使用jQuery实现全选和全不选

第一步：引入jquery 文件

第二步：书写页面加载函数

第三步：为上面的复选框绑定单击事件

第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

< script >

    $( function (){

       // 找到下面所有的复选框并设置属性 checked()

       /*if($("#select")[0].checked==true){

           $(".selectOne").attr("checked",true)

       }*/

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

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

       });

    });

</ script >

注意： attr 在 jquery1.11 版本不适用，采用 prop() 来替代 ( 在各个版本都适用 ) 。