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

jQuery基础课程

难度初级
时长 9小时58分
学习人数
综合评分9.23
402人评价 查看评价
9.6 内容实用
9.2 简洁易懂
8.9 逻辑清晰
  • 从一组标签元素数组中,灵活选择任意的一个标签元素,可以使用:eq(index)
    查看全部
  • 使用fadeTo()方法设置淡入淡出效果的不透明度 调用fadeTo()方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为: $(selector).fadeTo(speed,opacity,[callback]) 其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。 eg: $(function () { $("span").each(function (index) { switch (index) { case 0: $(this).fadeTo(3000, 0.1); break; case 1: $(this).fadeTo(3000, 0.5); break; case 2: $(this).fadeTo(3000, 0.9); break; } }); });
    查看全部
  • 使用fadeIn()与fadeOut()方法实现淡入淡出效果 fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为: $(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback]) 其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。 eg: $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").fadeIn("fast",function() { $("#hidval").val(1); }) } else { $("ul").fadeOut("slow",function() { $("#hidval").val(0); }) } }) });
    查看全部
  • mark
    查看全部
  • 过滤选择器,是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素。 得到一组相同标签元素中的第1个元素 :first 例 $(“li:first”)
    查看全部
  • 使用slideToggle()方法实现图片“变脸”效果 使用slideToggle()方法可以切换slideUp()和slideDown(),即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为: $(selector).slideToggle(speed,[callback]) 其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。 eg: $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").slideToggle(3000,function() { $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑"); }) }) });
    查看全部
  • 使用slideUp()和slideDown()方法的滑动效果 可以使用slideUp()和slideDown()方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为: $(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]) 其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。 要注意的是:slideDown()仅适用于被隐藏的元素;slideup()则相反。 eg: $(function () { $("h4").bind("click", function(){ if ($("#hidval").val() == 0) { $("ul").slideDown(3000, function(){ $("#hidval").val(1); }) } else { $("ul").slideUp("fast", function(){ $("#hidval").val(0); }) } }) });
    查看全部
  • 在<ul>元素中,添加了多个<li>元素,通过jquery选择器获取最后一个<li>元素的方法是:$("li:last") 需要注意元素与选择器字符之间是否有空格,正确的没有空格
    查看全部
    0 采集 收起

    2018-03-22

  • attr()方法是设置或者返回元素的属性 attr(属性名)格式是获取元素属性名的值 attr(属性名,属性值)格式则是设置元素属性名的值
    查看全部
  • 在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是:$("div:has(span)");
    查看全部
    0 采集 收起

    2018-03-22

  • 调用toggle()方法实现动画切换效果 调用toggle()方法就可以很容易做到,即如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是: $(selector).toggle(speed,[callback]) 其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。 eg: $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").toggle(3000, function(){ $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏"); }) }); });
    查看全部
  • 菜单工具插件——menu 菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下: $(selector).menu({options}); selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。 例如,在页面中,通过<ul>元素内联的方式构建一个三层结构的导航菜单,并将最外层<ul>元素通过menu()方法绑定插件,实现导航菜单的功能,如下图所示:从图中可以看出,通过<ul>内嵌的方式,构建一个三层结构的导航菜单,将<li>元素的class属性值设为“ui-state-disabled”,可将菜单选项置为不可用状态。
    查看全部
  • 动画效果的show()和hide()方法 show()和hide()方法中增加“speed”参数可以实现动画效果的显示与隐藏,同时,如果添加了方法的回调函数,它将在显示或隐藏执行成功后被调用。 show()和hide()方法中的第一个参数可以设置动画效果的速度,可以是“fast”字符,也可以是以毫秒为单位的时间。 show()和hide()方法中的第二个参数是方法执行后的回调函数,该函数只有在方法被成功执行后,才会被调用。 eg: $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").show(9000,function(){ $("#hidval").val(1); }) } else { $("ul").hide("fast",function(){ $("#hidval").val(0); }) } }) });
    查看全部
  • 获取prev 元素后面全部相邻的元素 调用格式如下:$(“prev ~ siblings”) 参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素。
    查看全部
  • 调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为: $(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。 eg: $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").show(); $("#hidval").val(1); } else { $("ul").hide(); $("#hidval").val(0); } }); });
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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