jq第四讲+实例

一、设置元素样式(第12课继续)

    6、直接获取、编辑内容

   text(content)            当不设置content时获取标签中文本内容,设置content时用新内容替换标签中的文本内容。

       html(text)                当不设置text时获取标签内的html文本,设置text时用新html文本替换标签中的html文本。

    7、移动和复制元素

       指定对象.append(text) 把text中的html文本追加到指定的对象中。

       指定对象.appendTo(js对象)         把指定标签对象追加到appendTo指向的js对象之中。

       指定对象.after(text)                   把text中的html文本追加到指定的对象的后面。

       指定对象.before(text)                 把text中的html文本追加到指定的对象的前面。

    8、删除元素

       empty               清除指定标签的内容

       remove             删除指定标签

    9、处理表单元素的值

       val(值)              当不设置val的值时获取表单元素的value内容,设置val值时用新值替换表单元素的value内容。

   10、绑定事件监听

       bind(event,data,function)   为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

           event                            必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

           data                        可选。规定传递到函数的额外数据。

           function                     必需。规定当事件发生时运行的函数。

       unbind(event,function)       移除被选元素的事件处理程序。如果没有规定参数会删除指定元素的所有事件处理程序。

           event                        可选。规定删除元素的一个或多个事件,由空格分隔多个事件值。

                                        如果只规定了该参数,则会删除绑定到指定事件的所有函数。

           function                     可选。规定从元素的指定事件取消绑定的函数名。

       one                        js对象需要执行多个事件时使用绑定方法连续执行,只有首次执行才有效。

    

二、显示和隐藏交替效果

    1、toggle(speed,callback,switch)        如果被选元素可见,则以伸缩方式隐藏这些元素,

                                                如果被选元素隐藏,则以伸缩方式显示这些元素。

           speed                                可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。

                                                如果设置此参数,则无法使用 switch 参数。

               可能的值:•毫秒 (比如 1500)

                         •"slow"                慢的

                         •"normal"            标准的

                         •"fast"                 快的

           callback                             可选。toggle 函数执行完之后,要执行的函数。

                                                   除非设置了 speed 参数,否则不能设置该参数。

           switch                               可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

               •True                            显示所有元素

               •False                           隐藏所有元素

     ** 如果设置此参数,则无法使用 speed 和 callback 参数,也就是。 speed 和 callback 和 switch 之间是拍出的。

       hide(speed,callback)                  如果被选的元素已被显示,则以伸缩方式隐藏该元素。

       show(speed,callback)                 如果被选元素已被隐藏,则以伸缩方式显示这些元素。

    2、slideToggle(speed,callback)          如果被选元素可见,则以卷帘方式隐藏这些元素,

                                                   如果被选元素隐藏,则以卷帘方式显示这些元素。

       slideDown(speed,callback)             如果被选的元素已被显示,则以卷帘方式隐藏该元素。

       slideUp(speed,callback)                如果被选元素已被隐藏,则以卷帘方式显示这些元素。

    3、fadeToggle(speed)                    如果被选元素可见,则以渐变方式隐藏这些元素,

                                                如果被选元素隐藏,则以渐变方式显示这些元素。

       fadeOut(speed,callback)              如果被选的元素已被显示,则以卷帘方式隐藏该元素

       fadeIn(speed,callback)                如果被选元素已被隐藏,则以卷帘方式显示这些元素。

    4、fadeTo(speed,opacity,callback)

           opacity                               必选,参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

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

                   $("#div1").fadeTo("slow",0.15);     慢速渐变到0.15的透明度

                   $("#div2").fadeTo(1000,0.4);        1秒钟内渐变到0.4的透明度

                   $("#div3").fadeTo("slow",0.7);      块速渐变到0.7的透明度

               });

    

三、动画效果

    动画效果的前提条件是

    1、animate                    执行 CSS 属性集的自定义动画。

       styles                         必需。规定产生动画效果的 CSS 样式和值。

                     ** 注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。

    

       speed                        可选。规定动画的速度。默认是 "normal"。

           可能的值:•毫秒 (比如 1500)

                     •"slow"        慢速

                     •"normal"    标准

                     •"fast"         快速

       callback                     可选。animate 函数执行完之后,要执行的函数。

       如:$("#d1").animate({ "top": "300px", "left": "300px" }, 2000, function () {

                $("#d1").animate({ "top": "0px", "left": "600px" }, 2000);

           });   ---#d1标签从原位置2秒内移动到300,300的位置,再从300,300位置移动到0,600的位置。

    2、自动执行---可多次反复执行

       setInterval(code,millisec[,"lang"])     可按照指定的周期(以毫秒计)来调用函数或计算表达式。

           code                                    必需。要调用的函数或要执行的代码串。

           millisec                                必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

       clearInterval(id_of_setinterval)         可取消由 setInterval() 设置的 timeout。

           id_of_setinterval                      由 setInterval() 返回的 ID 值。

    3、自动执行---只执行一次

       setTimeout(code,millisec)                 用于在指定的毫秒数后调用函数或计算表达式。

           code                                    必需。要调用的函数后要执行的 JavaScript 代码串。

           millisec                                必需。在执行代码前需等待的毫秒数。

    

    4、插件(以后再说)

四、轮播图

    1、让轮播的图用div显示出来。

    2、找到第一张图片,在寻找其他兄弟图片并隐藏。

    3、间隔4秒轮播一次:每4秒序号增加1,用它改变当前显示的图片index。

    4、用div做下标,再设置下标样式,确定放置的位置。

       cursor:pointer            当鼠标移上去时显示手的光标

       border-redius:50%         对方框的四个角做圆角处理,50%时方框会变成圆。

       posintion:absolute        相对定位

    5、再建一个样式表现当前图片的下标,并作关联处理,是指图片和下标配对。

    6、当点击据图某个图片时显示该图片,下标也跟着移动。

原文地址:https://www.cnblogs.com/huang3/p/4878238.html