天天看点

Jquery学习笔记---Day02

                                                                                                        Jquery学习笔记---Day02

         一:JQuery选择器

                 选择器允许用户对元素组或单个元素进行操作。

                1:JQuery元素选择器

                例如:

                      $("p")            <!--选取<p>元素-->

                      $("p.intro")   <!--选取所有class="intro"的<p>元素-->

                      $("p#demo")<!--选取所有id="demo"的<p> 元素-->

                 2:JQuery属性选择器

                       JQuery使用XPath表达式来选择带有指定属性的元素。

                       例如:

                           $("[href]")             <!--选取所有带有href属性的元素-->

                           $("[href='#']")      <!--选取所有带有href值等于'#'的元素-->

                           $("[href!='#']")      <!--选取所有带有href值不等于'#'的元素-->

                           $("[href$='.jpg']") <!--选取所有href值以".jpg"结尾的元素-->

                  3:Jquery CSS选择器

                            通过JQuery CSS选择器可以改变对应元素的CSS属性。

                           例如--通过单击button ,改变p元素的背景颜色为红色

                           $(document).ready(function(){

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

                                $("p").css("background-color","red");

                               });

                            });   

                           <p>This is a pargraph</p>

                  二:JQuery事件

                          Jquery事件处理方法是jQuery中的核心函数。

                         Jquery名称冲突解决办法

                                     Jquery使用名为noConflict()的方法来解决该问题。

                                      var   jp=jQuery.noConflict();

                                      然后使用jp来代替$

                             JQuery常见事件

                             1:$(document),ready(function());       //将函数绑定到文档的就绪事件,当文件加载完成时。

                             2:$(元素).click(function());                   //单击时触发的事件

                             3:$(select).dbclick(function())           //鼠标双击时触发的事件

                             4:   $(select).focus(function())               //触发被选元素时候的事件

                             5:$(select).mouseover(function)        //鼠标悬靠时触发的事件

                             6:$(select).hide()

                             7:$(select).show()

                             8:$(select).toggle()                              //实现hide和show 的切换

                            $(select).toggle(speed,callback);

                            可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

                            可选的 callback 参数是隐藏或显示完成后所执行的函数名称。