-
使用remove()和empty()方法删除元素 remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。查看全部
-
使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为: $(selector).each(function(index)) 参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。查看全部
-
工具提示插件——tooltip。工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下: $(selector).tooltip({options}); 其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。 例子: <input id="name" name="name" title="我是土豪,欢迎与我做朋友" /> js: $(function () { $("input").tooltip({ show: { effect: "slideDown", delay: 350 }, hide: { effect: "explode", delay: 350 }, position: { my: "left top", at: "left bottom" } }); });查看全部
-
<span id=spnColor><input /></span><span id=spnPrev js: $(function () { var intR = 0, intG = 0, intB = 0, strColor; $("input").spinner({ max: 10, min: 0, //设置微调按钮递增/递减事件 spin: function (event, ui) { if (ui.value == 8) spnPrev.style.backgroundColor = "red"; else spnPrev.style.backgroundColor = "green"; }, //设置微调按钮值改变事件 change: function (event, ui) { var intTmp = $(this).spinner("value"); if (intTmp < 0) $(this).spinner("value", 0); if (intTmp > 10) $(this).spinner("value", 10); if (intTmp == 8) spnPrev.style.backgroundColor = "red"; else spnPrev.style.backgroundColor = "green"; } }); });查看全部
-
微调按钮插件——spinner 。微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下: $(selector).spinner({options}); selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。查看全部
-
菜单工具插件——menu。菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下: $(selector).menu({options}); selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。 例子: <ul id="menu"> <li><a href="#">小明一中</a> <ul> <li><a href="#">高中部</a> <ul> <li><a href="#">高一(1)班</a></li> <li><a href="#">高一(2)班</a></li> <li><a href="#">高一(3)班</a> <ul> <li><a href="#">小胡</a></li> <li><a href="#">小李</a></li> <li><a href="#">小陈</a></li> </ul> </li> </ul> </li> <li class="ui-state-disabled"><a href="#">大明二中</a></li> </ul> $(function () { $("#menu").menu(); });查看全部
-
按钮id为btnDelete。<div id='dialog-modal'></div> js:$(function () { $("#btnDelete").bind("click", function () { if ($("#spnName").html() != null) { sys_Confirm("您真的要删除该条记录吗?"); return false; } }); }); function sys_Confirm(content) { //弹出询问信息窗口 $("#dialog-modal").dialog({ height: 140, modal: true, title: '系统提示', hide: 'slide', buttons: { '确定': function () { $("#spnName").remove(); $(this).dialog("close"); }, '取消': function () { $(this).dialog("close"); } }, open: function (event, ui) { $(this).html(""); $(this).append("<p>" + content + "</p>"); } }); }查看全部
-
从图中可以看出,由于使用append()方法在<body>元素中追加了一些HTML 元素标记,因此追加后,这些元素标记直接生成对应的元素和属性显示在页面中。 为什么是$("body").append(rethtml);....查看全部
-
对话框插件——dialog 。对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()和confirm()函数的功能,它的调用格式为: $(selector).dialog({options}); selector参数为显示弹出对话框的元素,通常为<div>, options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。查看全部
-
选项卡插件——tabs。使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(selector).tabs({options}); selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容, options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。 例子: <div id="tabs"> <ul> <li><a href="#tabs-1">最爱吃的水果</a></li> <li><a href="#tabs-2">最喜欢的运动</a></li> </ul> <div id="tabs-1"> <p>橘子</p> <p>香蕉</p> <p>葡萄</p> <p>苹果</p> <p>西瓜</p> </div> <div id="tabs-2"> <p>足球</p> <p>散步</p> <p>篮球</p> <p>乒乓球</p> <p>骑自行车</p> </div> </div> </div> <script type="text/javascript"> $(function () { $("#tabs").tabs ({ //切换选项卡的动画效果 fx: { opacity: "toggle", height: "toggle" }, event: "mousemove" //切换选项卡 }) }); </script>查看全部
-
通过addClass()和css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。查看全部
-
禁用id号为test的div元素的拖动动作后,重新开启的代码为$("#test").draggable("enable");查看全部
-
面板折叠插件——accordion。面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下: $(selector).accordion({options}); 其中,参数selector为整个面板元素,options参数为方法对应的配置对象。 例子: <div id="accordion"> <h3> <a href="#">白富美</a></h3> <p>咱们结婚吧!</p> <h3> <a href="#">土豪族</a></h3> <p>咱们交个朋友吧!</p> </div> <script type="text/javascript"> $(function () { $("#accordion").accordion(); }); </script>查看全部
-
从图中可以看出,通过$("li:last-child")选择器代码,获取了两个<ul>父元素中的最后一个<li>元素,并使用css()方法修改了它们在页面中显示的文字颜色。查看全部
-
拖曳排序插件——sortable 。拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为: $(selector).sortable({options}); selector参数为进行拖曳排序的元素,options为调用方法时的配置对象。 例子: <ul> <li>1)足球</li> <li>2)散步</li> <li>3)篮球</li> <li>4)乒乓球</li> <li>5)骑自行车</li> </ul> js: $(function () { $("ul").sortable({ delay:2, //为防与点击事件冲突,延时2秒 opacity:0.35 //以透明度0.35随意拖动 }) });查看全部
举报
0/150
提交
取消