前端教程204版第七本即jquery

辛星web前端(2014版)第七本：jQuery*****************web前端最早写前端是在2014年夏季，当时整理了大约120页的，看到有不少读者喜欢，于是我进行了扩充，就有了当前的这个版本。第一本：html第二本：css第三本：css典型范例第四本：JavaScript第五本：html5第六本：css3第七本：jQuery第八本：Bootstrap辛星网，致力于优秀的***************建议搜索“辛星web”或者“辛星”或者“辛星网”，都可以找到更全的资料奥。辛星，的关注*****************辛星网 ，就是“辛星”四辛星，致力于免费公开的IT******************与君共勉当学习成为一种，进步就是一种必然知识，传递。我心永恒，始终如一***************关于辛星本人个人博客个人邮箱有时候可能信息回复不及时，望海涵：第零节：开发之 第一节：jQuery快速入 第二节：常用动画效 第三节 HTML元 第四节：Ajax的使 第五节：总 信息交 第零节：开发之>>>>>>>>Javascript要说Javascript大家喜欢哪一个，可能大家都有各自喜欢的类库，但是要说哪一个Javascript库流行最广，影响最大，可能还得属而且jQuery也由于它的易学易用和小巧，也是拥有了不少的粉丝，读过不少介绍jQuery大部分都忘记名字了，印象深刻的一本叫做《锋利的jQuery》，原因就是这个名字本身给印象就很市面上讲jQuery书肯定是很多的，因为这门技术实在是比较火>>>>>>>>>>jQuery的历史其中jQuery的第一个版是2006年8月，距今也有八年的历史了，当前的版本是jQuery2.1。在世界的前10000个最多的中，有超过百分之五十五的使用了jQuery。而且jQuery是开源、免费的，而且还有大量的插件供开发者选择20133jQuery2.0Beta2而且它们不再支持IE6IE7、IE8，同期的jQuery1.9还是支持而且jQuery的开发团队同时开发jQuery1.x系列和2.x系列，止今天，jQuery1.x的版是1.11.1，jQuery2.x的版是2.1.1其实经常会见到两个两个系列的版本同时的情况，这样其实这样的例子有很多的，比如python言的2.x列和3.x列就是同时更新的，回到jQuery，这里还是讲1.x系列的。>>>>>>>>>>>>与安装jQuery的可以 /，截图如下点进去之后，选择合适的版本就可以了，截图下来之后，重命名为jquery.js，这样方便的时候方第一节：jQuery快速入>>>>>>>>>>>第一个程序前面把的jQuery代码重命名为jquery.js，那开始写的第一个jQuery程序。书写代码如下：上面就是的第一个jQuery程序了，下面我仔细说明一下第一二行和第九行、第十行都是html内容，第三行导入了文件，第四行和第五行是写Javascript的标记第五行中的$().ready()；是在html文档加载完毕之后执行的内容，今后的jQuery一般都是写到这里面,至于它的语法第六行的alert(“辛星和您共同成长”)；就是Javascript由于jQuery是一个Javascript库，因此在里面使用Javascript代码差点忘了，它的运行截图如下>>>>>>>>>>>jQuery的语法jQuery的语法非常一致，为什么这么说呢，先看一个例子代码实例它的运行效果这里每次点击那个文本，它就会出现这个弹窗这里的$(“p”)表示选中了p，后面的.click表示当发生点击事件的时候，它的参数是一个函数，也就是的 alert其实的大多数jQuery语句都是采用这样的书写方式，先用$()这种写法选择相应的HTML素，然后写对于该HTML操作，这些操作可能是响应鼠标点击等事件，具体后面再介绍。>>>>>>>>>>>>>选择器那么怎么样来获取选择器呢？jQuery给提供了几种方式，下面一一说明。可以使用元素选择器，比如上面的$(“p”)就获取了页面中所有的p表示的元素。可以使用id选择器，比如用$(“#demo”)会获取id为的这个元素还可以使用class选择器，比如用$(“.demo”)会获取所class性为demo素其中$(“*”)是获取所有元素，相当于一个全局的设定其中$(“this”)是选取当前元素当然还有一些并不是太常用的，这个就需要大家去查手册了>>>>>>>>>>>>.事件不知道大家的基础怎么样，因此还是先简单介绍下在看网页的时候，难免会有各种各样的操作，这些操作会被浏览器记录，然后以“事件”的形式发送给的Javascript，这些事件在Javascript常是用on打头的jQuery精简的原则，是把on去掉了的，比如前面提到的click，是没有on的。上面用到的$().ready();就是文档就绪事件，它就是在文档被全部加载之后就开始运行的jQuery代码。给个定义，事件就是者对页面的操作那么常用事件有哪些呢看下面截图第二节：常用动画本小节介绍几个比较常见的动画效果>>>>>>>>>>显示和隐可以用hide和show动态的设置HTML素的显示和隐藏。此外还有一个toggle它是用来hideshow法，即是speed，即显示和隐藏的速度参数，如果使用数字，则单位为毫秒，还可以用slow或者fast这两个字符串，第二个参数是callback，>>>>>>>>>>>>实战演示看如下代码效果截图>>>>>>>>>>淡入淡出完全一样的。使用fadeIn来表示淡入已经隐藏的元素，用fadeOut来表示淡出已经显示的元素，而fadeTogle可以在淡入和淡出之间进行切换，如果元素已经淡出，则该方添加淡入效果，如果元素已经淡入，则该方添加淡出效果。上面三个函数的参数和hide和show的参数是一样的，两个参数都是可选的，第一个参数是speed，表示速度，第二个参数是一个回调函数。其中fadeTo方法允许渐变为给定的不，该介于0和1之间，它的参数第一个是speed表示速度，第二个是opacity表示给定的，第三个是一个回调函数，表示当该函数完成之>>>>>>>>>>>>代码示例看如下代码效果如下图，其实和第一个很相似，看下面想亲自感受一下这个效果吗?那就自己动手试试吧>>>>>>>>>>>>两者区别可能有读者会问，你这个hide、show和这个fadeIn、fadeOut答案是差不多一样，但是如果使用hide和show，它是从上而下的出现和。如果使用fadeIn和fadeOut，则是颜色的变化，整有多体验才能感受得到。>>>>>>>>>>>>>>>滑动效果可以使用jQuery轻松地使用滑动效果，它的主要方法有slideDown、slideUp、slideToggle上述三个函数所需要的参数也是两个，第一个是speed，第二个是一个callack，即一个回调函数。其中slideDown用于向下滑动，slideUp用于向上滑动slideToggle用于上下滑请看下面代码我点击一次之后的效果此时彻底再次点击就会出现，效果>>>>>>>>>动画机制、都知道flas，其实用jQuery也可以实现简单的动画，这里介绍的是它的animate方法。它的第一个必须的参数就是需要定义产生动画的css属性，我们通过该css属性来产生自己的动画。这里填写的属性是动画完成后的最终属性，也就是说，的jQuery会根据这个最终属性来然后是可选的speed参数规定效果的长度，接着就是可选callback，这些和前面介绍的都一样由于这个规则用语言描述并不那么简单，接下来在代码中讲>>>>>>>>>>代码解读可以在第一个params里面只写一个动画属性，它的最终效果是让该元素的横坐标200像素处，高度增加100个像素，那么可以这么写：$(“选器”).animate({看下面的代码示效果演示一效果演示二上面只是写了一个animate，其实可以写多个animate的，它们每一个animate函数就像一个语句那样，它会逐一去调用这些动比如$(“选择器$aiaed1>>>>>>>>>>停止动画使用stop可以停止正在运行的动画。它对所有的jQuery效果都是有效的，包括滑动、淡入淡出和用animate自定义的动画。>>>>>>>>>>>小结本小节主要介绍了jQuery的常见的几种动画模式第三节：HTML元>>>>>>>>>为何要它们要实现动态的效果，很大程度上是通过调整这些HTML元素也就是说，通过改变这些HTML元素的表现形式，让用户感>>>>>>>>修改内容1.用text()方法设置或者返回HTML元素的文本内容2.用html()方法设置或返回HTML元素的内容3.用val()方法设置或返回表单字段的值4.用attr()方法获取属性值>>>>>>>>代码演示如下代码的弹窗一：的弹窗二：的弹窗三：的弹窗四：>>>>>>>>>对html元素的值的上面text等函数不仅可以查看它们的值，还可以修改它如果text函数调用的时候如果参数为空，则是返回值，如果参这些函数还可以有回调函数，该回调函数需要满足一定的书写规则，第一个参数表示被选元素中当前元素的下标，第二个参数就是原始的值。它的返回值就是希用的字符串。看下面代码示例下面是初始界面下面是点击了“点击我”字样后的界面>>>>>>>>>>>样式上面对HTML元素的值进行了设置，其实jQuery还拥有强大的设置css的能力。可以用addClass来给某个HTML元素添加一个类，也可以用removeClass来给某个HTML元素删除一个类，也可以用toggleClass则是给某个HTML元素切换一个类(即在增加和删除之如下代码初始看到它点击“点击我”字样之后，看到对于切换，并不是很好演示，这里就只是截了一个切面>>>>>>>>>>>css方法上面说到用jQuery来动态地给HTML元素增加和移除css的那么还可以用css返回或者修改该HTML的样式很简单，和text等函数差不多，只要看一下代码，我相信读者如果熟悉css，就已经会用了。在使用css函数设置属性的时候，多个属性-值对之间用逗号>>>>>>>>css如下代码初次见面点击“点击我”字样之后>>>>>>>>>>其他常用方可以用width和height方法来设置和返回元素的宽度和高度。可以用innerWidthinnerHeight来设置和返回元素的内边可以用outerWidthouterHeight来设置和返回元素的外边它的使用和上面的text、html等函数是类似的，就不赘述>>>>>>>>>致谢感谢您对辛星的支持会继续努力，打造最好最实用的纯开放式。第四节:Ajax的使>>>>>>>>>>>>>ajax简介ajax“AsynchronousJavascriptAndXml”的简写，翻译成汉语即“异步Javascript和XML”，是一种创建交互式网页应用的网页开发技术。它的优点之一就是可以实现无刷新更新页面信息，这样不仅可以减少与服务器的数据交互，降低服务器的压力，还可以提高用户的体验。其中ajax一经推出就很受欢迎，这门技术也迅速的流传开来，但是很多讲解ajax的书籍都偏向于复杂性上，导致加深了学习难度。由于jQuery本身就是一个轻量级的框架，本更是本着简单易用的特色，提供了最实用的get和post传递json数据的方式，让大家快速的掌握ajax技术。>>>>>>>>>>>说明学习该部分知识的话，通常还需要一门服务器语言的基础，我这里使用的语言是PHP，因为写起来简单，如果读者喜欢风格，可以搜索下“辛星php”来读一下PHP，目前已经写了一部分了，都是pdf格式的。还需要对Javascript和json有所了解，我也写了js的，如果读者感，可以搜索“辛星Javascript”来找到它。本小节并未完全的介绍jQueryajax全部功能，但是它介绍了jQueryload()方法是简单但是强ajax法，它从服务器加语法格式$(选择器 下面说一下这些参数，URL参数规定了希望加载的参数，而可选的data参数规定与请求一同发送的查询字符串键值对集合，可选的callback参数是load方法完成后所执行的函数名。首先就是咱们的my.php文件，代码如下然后咱们的a.php，本着尽量简化的原则，它的内容如那么当在浏览器中输入的时候，看>>>>>>>>>get和对于get和post法的区别我就不多说了，网上有很多关于他其中get()方法所需的参数就是URLcallback，这里咱们通常是把get传递的参数写到这个url里去。下面说下post，该方法的参数第一个是url，第二个是data数据，第三个是callback，即该回调函数。参数是状态。>>>>>>>>>>>.代码实战咱们还是通过实例演示的情况给大家说明，这里依然是使用环境，因为php的搭建很简单首先咱们看一下my.php的文件编写然后就是a.php的源代码截图然后咱们在浏览器中输入如下地其实这个时候的结果大家是可得到的，那就是跟刚才的界然后截图如下去就是从数据库中取出，直接写到phpjs码里确实意义不大，>>>>>>>>>>>>小结此外还有个ajax方法，也是比较常用的一种但是本着简洁的原则，先介绍到这里啦第五节：总>>>>>>>>>>>>>小结截止到目前，我感觉query很多的特效没有学习，很多细节还没接触，但是我感觉这个框架咱们已经学到了