_技术笔记_课程笔记

几度叹 2016-07-21

.html() 获得第一个元素的html内容；.test() 获得所有元素的内容；.val()获得第一个元素的当前值

0赞 · 0采集
wwweb 2016-07-21

右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下： $(selector).contextMenu(menuId,{options}); Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。

0赞 · 0采集
wwweb 2016-07-21

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下： $(textbox).autocomplete(urlData,[options]); 其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。

0赞 · 0采集
搂椅子 2016-07-21

$("form *")=arrt("diabled","true")

0赞 · 0采集
搂椅子 2016-07-21

attr()方法是设置或者获取元素的某项属性值

0赞 · 0采集
Na_free100 2016-07-21

jQuery UI $("#x").draggable({containment: "parent","axis":"x"}); 拖动

0赞 · 0采集
liuying525 2016-07-21

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("正在延时!"); }); });

0赞 · 0采集
liuying525 2016-07-21

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("执行停止!"); }); });

0赞 · 0采集
liuying525 2016-07-21

1,调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置前，必须将元素的position设置好，否则元素移动不了。 2，移动并且变大的span $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=30px', width: '+=30px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); });

0赞 · 0采集
liuying525 2016-07-21

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("执行完成!"); }); });

0赞 · 0采集
liuying525 2016-07-21

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; } }); });

0赞 · 0采集
liuying525 2016-07-21

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); }) } }) });

0赞 · 0采集
liuying525 2016-07-21

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("向下滑"); }) })

0赞 · 0采集
wwweb 2016-07-21

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下： $(selector).menu({options}); selector参数为菜单列表中最外层<ul>元素，options为menu()方法的配置对象。

0赞 · 0采集
wwweb 2016-07-21

对话框插件可以用动画的效果弹出多种类型的对话框，实现JavaScript代码中alert()和confirm()函数的功能，它的调用格式为： $(selector).dialog({options}); selector参数为显示弹出对话框的元素，通常为<div>，options参数为方法的配置对象，在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

0赞 · 0采集
liuying525 2016-07-21

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); })

0赞 · 0采集
wwweb 2016-07-21

选项卡插件——tabs 使用选项卡插件可以将<ul>中的<li>选项定义为选项标题，在标题中，再使用<a>元素的“href”属性设置选项标题对应的内容，它的调用格式如下： $(selector).tabs({options}); selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。

0赞 · 0采集
liuying525 2016-07-21

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("隐藏"); }) }); });

0赞 · 0采集
wwweb 2016-07-21

除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下： $(selector).droppable({options}) selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。

0赞 · 0采集
liuying525 2016-07-21

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); }) }

0赞 · 0采集
wwweb 2016-07-21

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。

0赞 · 0采集
liuying525 2016-07-21

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='点击或移出就不可用了' />"); }); })

0赞 · 0采集
liuying525 2016-07-21

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 时，该事件会在元素失去焦点时

0赞 · 0采集
wwweb 2016-07-21

$. param 工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求，调用格式为： $. param (obj); 参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串。 param和serialize的区别是什么？前者是对任意的参数进行URL地址格式的转换，而后者仅属于form提交的数据转换。

0赞 · 0采集
liuying525 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("您的名称不能为空！"); }) })

0赞 · 0采集
wwweb 2016-07-21

$.trim 工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格，调用格式为： $.trim (str); 参数str表示需要删除左右两边空格符的字符串。

0赞 · 0采集
wwweb 2016-07-21

$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值，调用格式为： $.contains (container, contained); 参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含。

0赞 · 0采集
liuying525 2016-07-21

1，trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，该事件必须能执行。它的调用格式为： $(selector).trigger(event) 2，当页面加载时，手动触发文本输入框的"select"事件，是文本框的默认值处于全部被选中的状态， $(function(){ $("input").trigger("select"); }) 输入框一出来他的value就是被选中状态。这里说的手动触发不是手指碰到触发，而是不用用户去点击，可以直接代码触发事件。 2,注意这个事件名需要用双引号引起来，并且方法执行不用在后面加小括号

0赞 · 0采集
wwweb 2016-07-21

$.isPlainObject 工具函数，能检测对象是否为通过{}或new Object()关键字创建的原始对象，如果是，返回true，否则，返回false值，调用格式为： $.isPlainObject (obj); 其中，参数obj表示需要检测的对象名称。

0赞 · 0采集
wwweb 2016-07-21

$.isEmptyObject 工具函数，检测一个对象的内容是否为空，如果为空，则该函数返回true，否则，返回false值，调用格式如下： $.isEmptyObject(obj); 其中，参数obj表示需要检测的对象名称。

0赞 · 0采集

数据加载中...