1.页面
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<ul id="ul">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
<li>第六行</li>
</ul>
<ul id="ul2">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
<li>第六行</li>
</ul>
<script>
$(function ()
{
$.hello("CallmeYhz");
$.log("你进入了页面");
$("#ul li").click(function ()
{
$(this).Color();
})
$("#ul2 li").click(function () {
$(this).Color2({
color: "blue",
append:"自定义插入内容成功"
});
})
})
</script>
<!--引用自己的插件库><!-->
<script src="~/Scripts/jquery_plug_custom.js"></script>
2.脚本
;
(function ($) {
$.extend({
//问好
hello: function (name) {
alert("你好啊!---" + name);
},
//测试日志打印
log: function (message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //!JavaScript中月分是从0开始的
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
console.log(time + ' My App: ' + message);
}
});
//拓展jquery对象的方法(无参数)
$.fn.Color = function ()
{
this.each(function (index, ele) {
$(this)
.css("color", "red")
.append("我居然被点击了")
});
}
//拓展jquery对象的方法(有参数)
$.fn.Color2 = function (options) {
var defaultStyle={
color: "red",
append: "我居然被点击了"
}
var setting = $.extend({}, defaultStyle, options);
this.each(function (index, ele) {
$(ele).css("color", setting.color);
$(ele).append(setting.append);
});
};
})(jQuery);