-
通过$("li:first-child")选择器代码，获取了两个<ul>父元素中的第一个<li>元素，查看全部
-
$("li[title*='最']") 类似模糊匹配查看全部
-
放置插件——droppable。除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，调用格式如下： $(selector).droppable({options}) selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。 例子： <div class="box"> <div class="title">产品区</div> <div class="drag"><div>苹果</div></div> </div> <div class="box"> <div class="title">回收站</div> <div class="cart"><div id="tip">还没有产品</div></div> </div> js： $(function () { $(".drag").draggable(); $(".cart").droppable({ drop: function () { $(this) .addClass("focus") //改变购物车的css .find("#tip").html(""); //删除原有内容 } }) });查看全部
-
通过调用$("#frmTest :input")表单选择器代码获取了表单中的全部元素 addClass()方法的功能是为元素添加指定的样式类别名称 $("#frmTest :input").addClass("red")查看全部
-
拖曳插件——draggable。拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。 例子：使元素指定的坐标方向拖曳： <div id="x" class="drag">沿x轴拖拽</div> <div id="y" class="drag">沿y轴拖拽</div> </div> js： $(function () { $("#x").draggable({containment:"parent",axis:"x"}); $("#y").draggable({containment:"parent",axis:"y"}); });查看全部
-
$("li[title!='我最爱']")查看全部
-
自定义类级别插件—— twoaddresult。通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为： 计算两数值相加：$.addNum(p1,p2) 计算两数值相减：$.subNum(p1,p2) 其中p1和p2为任意数值。 例子：两个数相减 <input id="btnCount" type="button" value="计算" /> <div class="content"> 两数相减： <input id="Text1" type="text" class="txt" /> - <input id="Text2" type="text" class="txt" /> = <input id="Text3" type="text" class="txt" /> </div> </div> js： $(function () { $("#btnCount").bind("click", function () { $("#Text3").val( $.subNum($("#Text1").val(), $("#Text2").val()) ); }); });查看全部
-
$("li[title='我最爱']"查看全部
-
这里有一个版本错误的问题！最上面的引入jQuery文件应该是1.8.2版本。 <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>查看全部
-
自定义对象级插件——lifocuscolor插件。插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为： $(Id).focusColor(color) 其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。 例子： <ul id="u1"> <li><span>橘子</span><span>水果</span></li> <li><span>芹菜</span><span>蔬菜</span></li> <li><span>香蕉</span><span>水果</span></li> </ul> js： $(function () { $("ul").focusColor("#CCC") //调用自定义的插件 })查看全部
-
右键菜单插件——contextmenu。插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下： $(selector).contextMenu(menuId,{options}); Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。例子： <input id="btnSubmit" type="button" value="提交" /><div class="tip"></div> <div class="contextMenu" id="sysMenu"> <ul> <li id="Li3"><img src="http://img1.sycdn.imooc.com//52e4b34b0001bb6d00160016.jpg" alt="" />保存</li> <li id="Li4"><img src="http://img1.sycdn.imooc.com//52e4b3680001424900160016.jpg" alt="" />退出</li> </ul> </div> js： $(function () { $("#btnSubmit").contextMenu("sysMenu", { bindings: { 'Li3': function (Item) { $(".tip").show().html("您点击了“保存”项"); }, 'Li4': function (Item) { $(".tip").show().html("您点击了“退出”项"); } } }); });查看全部
-
与上一节的:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。查看全部
-
:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。查看全部
-
移除属性和样式 使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名 例如，使用removeAttr()方法移除<a>元素中的“href”属性，如下图所示：查看全部
-
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <title>jQuery动画特效</title> <style> div { position:absolute; top: 50px; left: 50px; height: 50px; width: 50px; background-color: red; border: 1px solid red; } </style> </head> <body> <input type="button" id="lebu" value="左移"/> <input type="button" id="ribu" value="右移"/> <div></div> <script type="text/javascript"> $(function(){ $("#lebu").bind("click",function(){ $("div").animate({ left:"-=30px" },3000,function(){ $(this).html("执行完成"); }); }); $("#ribu").bind("click",function(){ $("div").animate({ left:"+=30px" },3000,function(){ $(this).html("执行完成"); }); }); }); </script> </body> </html>查看全部
举报
0/150
提交
取消