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

jQuery基础课程

难度初级
时长 9小时58分
学习人数
综合评分9.23
402人评价 查看评价
9.6 内容实用
9.2 简洁易懂
8.9 逻辑清晰
  • .html() 获得第一个元素的html内容;.test() 获得所有元素的内容;.val()获得第一个元素的当前值
    查看全部
  • 右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下: $(selector).contextMenu(menuId,{options}); Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
    查看全部
  • 搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下: $(textbox).autocomplete(urlData,[options]); 其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。
    查看全部
  • $("form *")=arrt("diabled","true")
    查看全部
  • attr()方法是设置或者获取元素的某项属性值
    查看全部
  • jQuery UI $("#x").draggable({containment: "parent","axis":"x"}); 拖动
    查看全部
  • 1,delay()方法延时执行动画效果,它的调用格式为: $(selector).delay(duration) 其中参数duration为延时值,单位是毫秒,当超过延时值时,动画继续执行。 2,delay()方法延时正在执行的动画效果 $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=60px', width: '+=60px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); $("#btnStop").bind("click", function () { $("span").delay(3000); $("#tip").html("正在延时!"); }); });
    查看全部
  • 1,stop()方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动,淡入淡出和自定义的动画,它的调用格式为: $(selector).stop([clearQueue],[goToEnd]) 其中,两个可选项参数都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false 2,停止正在运动的span $(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("执行停止!"); }); });
    查看全部
  • 1,调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置前,必须将元素的position设置好,否则元素移动不了。 2,移动并且变大的span $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=30px', width: '+=30px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); });
    查看全部
  • 1,调用animate()方法可以创建自定义的动画效果,它的调用格式为: $(selector).animate({params},speed,[callback]) 其中,params参数为制作动画效果的css属性名和值 2,制作一个渐渐放大的正方体 <h3>制作简单的动画效果</h3> <span></span> <div id="tip"></div> <script type="text/javascript"> $(function () { $("span").animate({ width: "80px", height: "80px" }, 3000, function () { $("#tip").html("执行完成!"); }); });
    查看全部
  • 1,fadeTo()方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的格式为: $(selector).fadeTo(speed,opacity,[callback]) 2,试着给三个淡入的盒子以不同透明度淡入 $(function () { $("span").each(function (index) { switch (index) { case 0: $(this).fadeTo(3000,0.2); break; case 1: $(this).fadeTo(3000,0.4); break; case 2: $(this).fadeTo(3000,0.6); break; } }); });
    查看全部
  • 1,fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果,前者为淡入隐藏的元素,后者可以淡出可见的元素,调用格式: $(selector).fadeIn(speed,[callback]) $(selector).fadeOut(speed,[callback]) 2,图片的淡入淡出 var $div1 = $("#divtest1"); var $div2 = $("#divtest2"); $div1.bind("click",function(){ $div1.fadeOut(3000,function(){ $div2.fadeIn(3000); }); }) $div2.bind("click",function(){ $div2.fadeOut(3000,function(){ $div1.fadeIn(3000); }); }) 3,下拉条的淡入淡出 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").fadeIn("fast",function() { $("#hidval").val(1); }) } else { $("ul").fadeOut("fast",function() { $("#hidval").val(0); }) } }) });
    查看全部
  • 1,使用slideToggle(),方法可以切换slideUp()和slideDown(),格式为: $(selector).slideToggle(speed,[callback]) 2,在页面中,使用该方法实现图片的变脸效果 var $div1 = $("#divtest1"); var $div2 = $("#divtest2"); $div1.bind("click",function(){ $div1.slideToggle(3000,function(){ $div2.slideToggle(3000) }); }) $div2.bind("click",function(){ $div2.slideToggle(3000,function(){ $div1.slideToggle(3000); }); }) 4,字条切换 $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").slideToggle("fast",function() { $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑"); }) })
    查看全部
  • 菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下: $(selector).menu({options}); selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。
    查看全部
  • 对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()和confirm()函数的功能,它的调用格式为: $(selector).dialog({options}); selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
    查看全部
  • 1,使用slideUp()和slideDown()方法在页面中滑动元素,前者是用于向上滑动元素,后者用于向下滑动元素,他们的调用方法分别为: $(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]) 2,要注意的是:slideDown()仅适用于被隐藏的元素,slideUp()则相反 3,例如,调用这两个方法实现页面元素的向上和向下的滑动效果 var $div=$("#divtest"); $("#btnAct").bind("click",function(){ var $this=$(this); if($this.val()=="向上滑"){ $div.slideUp(3000,function(){ $this.val("向下滑"); }); }else{ $div.slideDown(3000,function(){ $this.val("向上滑"); }) } }) }) 4,滑动和淡入淡出的区别,滑动改变元素的高度,淡入淡出改变元素的透明度 5,内容的伸缩条案例 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").slideUp("slow",function() { $("#hidval").val(1); }) } else { $("ul").slideDown("fast",function(){ $("#hidval").val(0); })
    查看全部
  • 选项卡插件——tabs 使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(selector).tabs({options}); selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
    查看全部
  • 1,调用toggle()方法处于显示状态就隐藏,处于隐藏状态就显示,比hide(),show()更方便 格式是:$(selector).toggle(speed,[callback]) 2,例子,调用toggle()方法以动画的效果显示和隐藏图片 $("#btnAct").bind("click",function(){ var $this=$(this); $("img").toggle(3000,function(){ $this.val()=='隐藏'?$this.val('显示'):$this.val('隐藏'); }) }) 3,用toggle()方法实现内容部分的隐藏和显示 $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").toggle("fast",function(){ $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏"); }) }); });
    查看全部
  • 除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下: $(selector).droppable({options}) selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
    查看全部
  • 1,如果给show()和hide()设置时间和回调函数,它可以实现一些动画效果,执行完之后会执行函数。 2,例如,以动画效果方式显示或隐藏页面中的图片,同时,当显示或隐藏完成时,对应的按钮状态将变为不可用。 $(function(){ $("#btnShow").bind("click",function(){ $("img").show(3000,function(){ $("#btnShow").attr("disabled",true); $("#btnHide").attr("disabled",false); }); }); $("#btnHide").bind("click",function(){ $("img").hide("slow",function(){ $("#btnShow").attr("disabled",false); $("#btnHide").attr("disabled",true); }) }) }) 3,以动画的效果显示或隐藏正文元素,并在回调方法中,设置控制显示影藏状态的hidval元素值 $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").show("slow",function(){ $("#hidval").val(1); }) } else { $("ul").show("fast",function(){ $("#hidval").val(0); }) }
    查看全部
  • 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
    查看全部
  • 1,与bind()方法相同,live()方法与可以绑定元素的可执行事件,除此相同功能外,live()方法还可以绑定动态元素,即使用代码添加的元素事件,格式如下: $(selector).live(event,[data],fun) 2,例如:使用live()方法绑定,页面中按钮元素的单击事件,而这个按钮时通过追加的方式添加至页面的。 $(function(){ $(#btntest).live("click",function(){ $(this).attr("disabled","true"); }) $("body",append("<input id='button' value='点击就不可用了'/>")) 3,注意,从jq1.7开始,不再建议使用.live()方法,1.9不支持live(). 4,点击或移除就不可用了。动态添加的按钮 $(function () { $("#btntest").live("click mouseout", function () { $(this).attr("disabled", "true"); }) $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />"); }); })
    查看全部
  • 1,下拉列表的change事件,当一个元素的值发生变化时,将会触发change事件,例如在选择下来列表框中的选项时,就会触发change事件。<br> 2,示例:当页面选择下拉列表框中的选项时,将在<div>元素中显示所选择的选项内容<br> $(function(){<br> $("select").bind("change",function(){<br> $("div").html("你选择的是:"+$(this).val())<br> })<br> 3,根据不同选项改变下拉框的背景色。<br> $(function () {<br> $("select").bind("change", function () {<br> if ($(this).val() == "苹果")<br> $(this).css("background-color", "red");<br> else<br> $(this).css("background-color", "green");<br> })<br> });<br> <br> }) 该事件仅适用于文本域(text field),以及 textarea 和 select 元素。 change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。 注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时
    查看全部
  • $. param 工具函数,能使对象或数组按照key/value格式进行序列化编码,该编码后的值常用于向服务端发送URL请求,调用格式为: $. param (obj); 参数obj表示需要进行序列化的对象,该对象也可以是一个数组,整个函数返回一个经过序列化编码后的字符串。 param和serialize的区别是什么?前者是对任意的参数进行URL地址格式的转换,而后者仅属于form提交的数据转换。
    查看全部
    0 采集 收起 来源:URL操作函数

    2016-07-21

  • 1,focus事件在元素获取焦点时触发,如点击文本框时,触发该事件,而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件。 例如:在触发文本框的focus事件是,div元素显示提示内容 $(function(){ $("input").bind("focus",function(){ $("div").html("请输入您的姓名!"); }) }) 3,非空验证示例 $(function(){ $(input).bind("focus",function(){ $("div").html("请输入您的姓名"); }).bind("blur",function(){ if($(this).val().length==0) $("div").html("您的名称不能为空!"); }) })
    查看全部
首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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