jQuery基础

           1.初时jQuery

              

 

           2.jQuery库文件

                      jQuery分为开发版和发布版

                      1.jquery-1.版本号.js(开发版)     约286KB     完整无压缩版本，主要用于测试、学习和开发

                      2.jquery-1.版本号.min.js(发布版)     约94.8KB   经过压缩，主要应用于产品发布和项目发布

           3.如何引入jQuery

                      先将jquery-1.12.4.js引入js文件中  然后在HTML代码中写入

                  <script src="js/jquery-1.12.4.js"  type="text/javascript"></script>

           4.ready()方法

 

                       使用jQuery弹出提示框

                <script scr="js/jquery-1.12.4.js"  type="text/javascript"></script>

                   <script>

                      $(document).ready(function(){

                                 alert("我的第一个jQuery示例！");

                       })

               </script>

           5.window.onload与$(document).ready()的区别

                      window.onload必须等所有内容加载完毕才能开始执行    一个页面不能同时编写多个    也无法简化写法

                      $(document).ready()网页所有DOM文档结构绘制完毕后即刻就可执行，与DOM元素关联的内容可以不加载完成   同一个页面可以同时编写多个    可以进行简化

           6.jQuery语法规则

                  工厂函数$()：将DOM对象转化为jQuery对象

                  选择器selector：获取需要操作的DOM元素

                  方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

                      语法：$(selector).action()；

           7.jQuery操作页面元素

                   使用addClass()方法为元素添加样式

                      jQuery 对象.addClass([样式名]);

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

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

                   使用css()方法设置元素样式

                       css("属性","属性值");

                       css({"属性1":"属性值1","属性2":"属性值2"...})

                        $(this).css({"background":"#c81623"});

                   使用show()、hide()方法设置元素的显示和隐藏

                       $(selector).show();

                       $(selector).hide();

                          $(this).children("div").show();

                          $(this).children("div").hide();

           8.jQuery代码风格

                  "$"等同于"jQuery"

                      $(document).ready()等同于  jQuery(document).ready()

                  链式操作

                      对一个对象进行多重操作，并将操作结果返回给该对象

                      $("h2").css("background-color","#ccffff").next().css("display","block");

                  隐式迭代

                       $(document).ready(function() {

                              $("li").css({"font-weight":"bold","color":"red"});

                          });