• jQuery自学打卡一


       作为一名编程基础比较薄弱的程序猿,目前从事软件测试工作,但是说心里话,并不是很喜欢,我对于前端这种立刻可以看到效果的技术很感兴趣,自学了html,css,js,目前在自学jQuery,由于自制力比较差,还总是三分热血,想了好多方法,把我短暂的热血维持下去,最近接触到了博客园,想通过写博客的方式,记录自己每天的所学,不积跬步无以至千里,不积小流无以成江海,希望通过不断的学习和积累,在以后可以去从事我喜欢的前端行业,加油~

      自学方式主要是通过在w3c上自学,想把上面的基础知识都走一遍,然后再进行更深层次的学习。

      以下是我的一些理解,目前看到jQuery添加,对于之前的做一个阶段性的小总结。

      1. jQuery首先要在head里面插入 <script type="text/javascript" src="jquery.js"></script>

      2. jQuery要写准备函数,$(document).ready(function(){});这个可以简写成$(function(){});这是为了防止文档在不完全加载之前运行jQuery代码。

      3.   个人觉得要先有触发方式,无论是单击双击,移动到上面等等,有了触发方式以后在进行相应的操作时才会看到自己想要的结果,触发方式在jQuery叫做事件。

       

      4.   然后就是选择器,当然上面事件中也需要用选择器,选择器无论是在css中还是在jQuery中都是十分重要的,个人认为在设置选择器时要经过仔细的规划,否则会让程序显得很乱。jQuery选择器主要分为元素选择器,属性选择器和css选择器。

          

      以上我觉得是jQuery的基础,事件和选择器在jQuery中至关重要,下面是我昨天学会的一些效果。

      1.隐藏和显示。即为hide()和show(),通过事件触发之后,对选定的内容进行隐藏和显示,还有一个toggle()函数,可以实现隐藏和显示的循环操作。这三个函数都有两个可选参数,第一个是speed即效果的速度,可以是slow,fast,毫秒数(slow和fast加引号,毫秒数不用加),第二个是callback即回调函数,意为在执行完该函数后进行的下一步操作,直接接下一个函数即可,例如:$("p").hide("slow", function(){$("p").show()});效果是隐藏之后又立刻显示。

      2.淡入和淡出。即为fadeIn()和fadeOut(),淡入是将隐藏的元素显现出来,淡出是将原有元素慢慢隐藏,同样也有一个fadeToggle()函数,可以实现淡入和淡出的切换操作。和隐藏和显示一样,这三个函数也有同样的两个可选参数,这里不多做解释。还有一个fadeTo()函数,可以修改元素的透明度(opacity),从零到一取值,对于这个函数speed参数和opacity参数都是必需的,而callback参数是可选的。例如:$("p").fadeTo("slow", 0.5);

      3.滑动。即为slideDown()和sliedeUp(),根据字面意思就是向下滑动和向上滑动,同样也有一个slideToggle,实现滑动的切换操作。同样的,这三个函数也有两个可选参数:speed和callback。

      4.动画。即为animate(),该方法用于创建自定义动画,相比于上面的效果,这个效果给人更加愉悦的感受,因为可以通过对CSS参数的改变看到很多效果,如移动颜色大小的改变等等。具体语法为$(selector).animate({param}, speed, callback);其中param即为自己设置的CSS属性,这是一个必选参数,后面的speed和callback参数是可选的。如果想对元素进行移动的话,要首先对这个元素定义一个位置,position = relative(absolute或者fixed);需要注意的是在使用动画效果操作多个css参数的时候,要用camel标记法,即margin-left要写成marginLeft。参数可以使用"show","hide","toggle"。如果想进行多个动画效果也可以使用队列功能,系统会一一进行调用。

      5.停止。即为stop(),无论是淡入淡出,滑动还是自定义动画,执行stop()函数都会停止当前动画,有两个可选参数,stopAll和goToEnd,前者是是否停止所有动画,默认是false,即只停止当前动画,对于自定义动画里的队列功能将不予停止,后者为是否立刻停止,默认也是false。

      6.Callback,以上那些效果的可选参数,意为在执行完当前效果后立即执行的函数。

      7.方法链接,即为Chaining该方法允许我们在相同元素上运行多条效果。例如:$("p").css("color", "red").slideUp(2000).slideDown(2000);

      

  • 相关阅读:
    生成.project、.classpath文件
    Ecelipse上添加Server
    通信安全验证
    通过jstack定位在线运行java系统故障_案例1
    自动代码复制工具
    在Visual Studio Express 2013中开发自定义控件
    通过java类文件识别JDK编译版本
    去掉java反编译(JD-GUI)生成的源文件中注释
    循环处理目录下文件框架
    java查找重复类/jar包/普通文件
  • 原文地址:https://www.cnblogs.com/JX-star/p/5688462.html
Copyright © 2020-2023  润新知