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);

　　

转载于:https://www.cnblogs.com/JX-star/p/5688462.html