-
jQuery学习查看全部
-
查看全部
-
请输入笔记内容...
查看全部 -
使用getJSON()方法异步加载JSON格式数据
使用
getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
查看全部 -
使用load()方法进行异步加载请求数据
load(url,[data],[callback])参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数
查看全部 -
!
查看全部 -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
li {
background-color: yellow;
}
li:first-child {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>第1个LI</li>
<li>第2个LI</li>
<li>第3个LI</li>
</ul>
</body>
</html>
<script type="text/javascript">
//方法一 简单方便 但不推荐
(function ($) {
$.extend({
"focusColor": function (obj, color) {
var a = obj.css("backgroundColor");
obj.hover(function () {
$(this).css("backgroundColor", color);
$(this).siblings().css("backgroundColor", "");
}, function () {
$(this).css("backgroundColor", "");
})
}
});
})(jQuery);
$.focusColor($("li"), "red");
//方法二 封装一般是这样写
$(function () {
//注意此处each的原因是为了得到每个li原始颜色 注意 li:first-child样式
$("li").each(function (index) {
$(this).focusColor2("red");
});
});
(function ($) {
$.fn.extend({
"focusColor2": function (color) {
var oldColor = $(this).css("backgroundColor");
$(this).hover(function () {
$(this).css("backgroundColor", color);
}, function () {
$(this).css("backgroundColor", oldColor);
})
}
});
})(jQuery);
</script>
查看全部 -
<head>
<title>搜索插件</title>
<link href="https://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script src="https://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">搜索插件</span>
</div>
<div class="content">
<span class="fl">用户名</span><br />
<input id="txtSearch" name="txtSearch" type="text" />
<div class="tip">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));
}
});
</script>
</body>
查看全部 -
使用load 方法
$("button").bind("click",function(){
})
$("ul").html(<img url="" alt""/>);
$("ul").load("xx.txt");
$(this).attr("disbled",true);
//按钮失效。
查看全部 -
<script type="text/javascript">
$(function () {
$.ajaxSetup({
type:"POST",
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "https://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "https://www.imooc.com/data/check_f.php"
});
})
});
</script>
查看全部 -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用ajax()方法加载服务器数据</title>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测数字的奇偶性</span>
<span class="fr">
<input id="btnCheck" type="button" value="检测" />
</span>
</div>
<ul>
<li>请求输入一个数字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url:"https://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type:"POST",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
</body>
查看全部 -
在tabs()方法的配置对象中，通过“fx”属性设置了选项卡切换时的效果，“event”属性设置鼠标也可以切换选项卡，因此，当鼠标在移动至两个选项卡标题时，对应内容以动画的效果自动切换。查看全部
-
sortable()拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能 调用格式为： $(selector).sortable({options}); selector参数为进行拖曳排序的元素，options为调用方法时的配置对象(delay是为防止与点击事件冲突，延时2秒。opacity透明度)!查看全部
-
$(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。 “containment”属性指定拖曳区域； 类型分为：选择器, 元素, 字符串, 数组. 1、选择器: 只能在选择器约束的元素内拖动 2、元素: 只能在给定的元素内拖动 3、字符串: parent: 只能在父容器内拖动 document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条 widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条... 4、数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值. 5、false: 不限制拖动的活动范围 [默认值]false查看全部
-
右键菜单插件——contextmenu 右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下： $(selector).contextMenu(menuId,{options}); Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。查看全部
举报