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

jQuery基础课程

难度初级
时长 9小时58分
学习人数
综合评分9.23
402人评价 查看评价
9.6 内容实用
9.2 简洁易懂
8.9 逻辑清晰
  • prev+next; prev~siblings; 前者只获取第一个相邻的元素,而后者则获取prev 元素后面全部相邻的元素
    查看全部
  • // $("#content").addClass("blue red"); 注意,addClass 中,固定c大写,其余小写,否则不能正常运行
    查看全部
  • addClass()和css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。
    查看全部
  • 使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下: $.get(url,[callback]) 参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.get("http://www.imooc.com/data/info_f.php",function(data){ $this.attr("disabled", "true"); $("ul").append("<li>我的名字叫:" + data.name + "</li>"); $("ul").append("<li>男朋友对我说:" + data.say + "</li>"); }, "json"); }) }); </script>
    查看全部
  • 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示: jQuery.getScript(url,[callback])或$.getScript(url,[callback]) 参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.getScript("http://www.imooc.com/data/sport_f.js",function(){ $this.attr("disabled", "true"); }); }) }); </script>
    查看全部
  • 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) 其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.getJSON("http://www.imooc.com/data/sport.json",function(data){ $this.attr("disabled", "true"); $.each(data, function (index, sport) { if(index==3) $("ul").append("<li>" + sport["name"] + "</li>"); }); }); }) }); </script>
    查看全部
  • 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $("ul") .html("<img src='Images/Loading.gif' alt=''/>") .load("http://www.imooc.com/data/fruit_part.html",function(){ $this.attr("disabled", "true"); }); }) }); </script>
    查看全部
  • 由于使用append()方法在<body>元素中追加了一些HTML 元素标记,因此追加后,这些元素标记直接生成对应的元素和属性显示在页面中。
    查看全部
  • delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为: $(selector).delay(duration) 其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。 <script type="text/javascript"> $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=60px', width: '+=60px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); $("#btnStop").bind("click", function () { $("span").delay(2000); $("#tip").html("正在延时!"); }); }); </script>
    查看全部
  • 使用$("div>span")选择器代码,获取的是<div>“家庭中”全部“子辈”<span>元素,不包括“孙辈”<span>元素和“家庭外”的<span>元素。
    查看全部
  • 使用html()和text()方法操作元素的内容 html()方法可以获取HTML的内容包括原文中的格式代码; text()方法获取元素文本内容不包含HTMl格式代码;
    查看全部
  • stop()方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为: $(selector).stop([clearQueue],[goToEnd]) 其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。 <script type="text/javascript"> $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=60px', width: '+=60px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); $("#btnStop").bind("click", function () { $("span").stop(); $("#tip").html("执行停止!"); }); }); </script>
    查看全部
  • 调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。 <script type="text/javascript"> $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=30px', width: '+=30px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); }); </script>
    查看全部
  • 调用animate()方法可以创建自定义动画效果,它的调用格式为: $(selector).animate({params},speed,[callback]) 其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。 <script type="text/javascript"> $(function () { $("span").animate({ width: "80px", height: "80px" }, 3000, function () { $("#tip").html("执行完成!"); }); }); </script>
    查看全部
  • 其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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