为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础课程

难度初级
时长 9小时58分
学习人数
综合评分9.23
402人评价 查看评价
9.6 内容实用
9.2 简洁易懂
8.9 逻辑清晰
  • $.isEmptyObject只能检测在JS脚本里面定义的对象
    查看全部
  • 使用bind()方法绑定元素的事件 bind()方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以,它的绑定格式如下: $(selector).bind(event,[data] function) 参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
    查看全部
  • 使用fadeTo()方法设置淡入淡出效果的不透明度 调用fadeTo()方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为: $(selector).fadeTo(speed,opacity,[callback]) 其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。 $(function () { $("span").each(function (index) { switch (index) { case 0: $(this).fadeTo(3000,0.2,function(){ $(this).text('红').css({'text-align':'center','line-height':'70px'}); }); break; case 1: $(this).fadeTo(3000,0.4); break; case 2: $(this).fadeTo(3000,0.6); break; } }); });
    查看全部
  • ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。此外,下列写法是相等的: $(document).ready(function(){})等价于$(function(){});
    查看全部
  • 使用remove()和empty()方法删除元素<br> remove()方法删除所选元素本身和子元素(内容),该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素(内容)。
    查看全部
  • 使用fadeIn()与fadeOut()方法实现淡入淡出效果 fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为: $(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback]) 其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").fadeOut(2000,function(){ $("#hidval").val(1); }) } else { $("ul").fadeIn(2000,function(){ $("#hidval").val(0); }) } }) });
    查看全部
  • 使用each()方法遍历元素 使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为: $(selector).each(function(index)) 参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。
    查看全部
  • 使用slideToggle()方法实现图片“变脸”效果 使用slideToggle()方法可以切换slideUp()和slideDown(),即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为: $(selector).slideToggle(speed,[callback]) 其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。 $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").slideToggle(2000,function(){ $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑"); }) }) }); 实例二,当点击第一张图片时,向上滑动收起该图片,当收起完成时,触发回调函数,调用第二张图片的slideToggle()方法,向下滑动显示第二张图片。 <div id="divtest1"> <img src="Images/1.png" alt=""/> </div> <div id="divtest2"> <img src="Images/2.png" alt=""/> </div> <script type="text/javascript"> $(function(){ var $div1 = $("#divtest1"); var $div2 = $("#divtest2"); $div1.bind("click",function(){ $div1.slideToggle(3000,function(){ $div2.slideToggle(3000); }); }); });
    查看全部
  • 使用wrap()和wrapInner()方法包裹元素和内容<br> wrap()和wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:<br> $(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)<br> 例如:$(".red").wrap("<div></div>");//将元素包裹在div内 $(".red").wrapInner("<i></i>");//将元素内容用斜体包裹 参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
    查看全部
  • 使用slideUp()和slideDown()方法的滑动效果 可以使用slideUp()和slideDown()方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为: $(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]) 其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。 要注意的是:slideDown()仅适用于被隐藏的元素;slideup()则相反。 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").slideUp(2000,function(){ $("#hidval").val(1); }) } else { $("ul").slideDown(2000,function(){ $("#hidval").val(0); }) } }) });
    查看全部
  • $(selector).live(event,[data],fun) 参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
    查看全部
  • my: 提示框的位置 at:当前框的位置 之间的对应关系 ex: "my: left bottom" "at: right top" 即提示框的左下和当前框的右上是一个地方
    查看全部
  • $()就是jQuery中的函数,它的功能是获得()中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素,也可能是函数。 在jQuery中 $()方法等价于jQuery()方法,前者比较常用,是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。
    查看全部
    0 采集 收起 来源:jQuery初体验

    2016-04-26

  • 3级分菜单效果
    查看全部
  • 当一个元素的值发生变化时,将会触发change事件,例如在选择下拉列表框中的选项时,就会触change事件。
    查看全部

举报

0/150
提交
取消
课程须知
您需要知道HTML、JavaScript和CSS样式的基础语法,并能使用这些语法构建一个DIV+CSS结构页的完整过程。
老师告诉你能学到什么?
通过本课程的学习,您可以由浅入深地全面了解jQuery框架的基础知识,掌握并使用jQuery操控DOM元素的方法与技巧,深入理解jQuery框架提供的各类API与函数的工作原理和自定义jQuery插件的各项技能。

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!