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()来替代(在各个版本都适用)。