1、alert例子

(function($){
$.alert = function(msg){
window.alert(msg);
} $.fn.alert = function(msg){
window.alert(msg);
}
})($); $().ready(function(){
$.alert("aaaaa");
$("body").alert("bbbb");
});

2、继承

(function(jQuery){
jQuery.fn.myextend = function(json){
for(var i in json){
jQuery.fn[i] = json[i];
}
} jQuery.myextend = function(json){
for(var i in json){
jQuery[i] = json[i];
}
}
})(jQuery); $().ready(function(){
$("body").myextend({
aa:function(){
alert("aa");
}
});
$("body").aa();
});

3、myeach

(function(jQuery){
jQuery.fn.myeach = function(callback){
var array = $(this);
for(var i=0;i<array.length;i++){
//this代表当前正在遍历的对象
callback.call($(array[i]),$(array[i]));
}
}
/**
* @param {Object} obj 可以来自于利用jquery的选择器创建的jquery对象,也可以来自于一个数组(来源于后台)
* @param {Object} callback
*/
jQuery.myeach = function(obj,callback){
var array = obj;
for(var i=0;i<array.length;i++){
//this代表当前正在遍历的对象
callback.call($(array[i]),$(array[i]));
}
}
})(jQuery); $().ready(function(){
$("div").myeach(function(){
//this代表当前正在遍历的div对象
alert($(this).text());
}); $.myeach($("div"),function(e){
alert($(e).text());
});
});

4、jquery开发的querytable

1、首先封装一个命名空间的组件
(function($){
$.nameSapce = function(namespaceString){
var temp = [];//声明了一个空的数组
var array = namespaceString.split(".");
for (var i = 0; i < array.length; i++) {
temp.push(array[i]);
/**
* 把多个json对象添加了window上
*/
eval("window." + temp.join(".") + "={}");
}
}
})($); 2、封装对table的增删改查
(function($){
/**
* 这里需要一些方法
* 查询方法
* 修改的方法
* 删除的方法
*/
$.fn.GridPanel = {
/**
* 初始化事件
*/
initEvent:function(){
/**
* 给table中的所有的超级链接添加事件
*/
$("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("a","click",function(){
if($(this).text()=="删除"){
$.fn.GridPanel.method.deleteRow.call(this);
}else if($(this).text()=="修改"){ }
}) /**
* 当点击一个td的时候,触发td的click事件
*
* "td:not(:has(a))" 不含有超级链接的td
*/
$("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("td:not(:has(a))","click",function(){
if($(this).children("input").length==0){//td下面没有文本框
var value = $(this).text();
$(this).empty();//把该元素下面的所有的子子元素清空
var $txt = $.fn.GridPanel.method.createText();
$(this).append($txt);
$txt.focus();//聚焦
$txt.attr("value",value);//赋值
}
}) /*
* 添加td中的文本框失去焦点的事件
*/
$("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("input","blur",function(){
$.fn.GridPanel.method.updateCell.call(this);
})
},
/**
* 默认的配置
*/
defaultConfig:{
table_id:'',
url:'',
/**
* 特定的操作要往后台传递的参数
*/
option:{
/**
* 查询操作
*/
query:{ },
/**
* 删除操作
*/
del:{ },
/**
* 修改操作
*/
update:{ }
},
/**
* <th field="name">姓名</th>
<th field="description">描述</th>
<th field="del">删除</th>
<th field="update">修改</th>
*/
fields:'',
filedUpdate:'',
filedDelete:''
},
/**
* 对表格操作的所有的方法全部放在method中
*/
method:{
/**
* 从后台加载数据,利用ajax技术形成表格
*/
createTable:function(config){
/**
* 1、请求后台,把数据传到客户端
*/
//把客户端传递过来的参数覆盖掉默认的配置 true为深度迭代
$.extend(true,$.fn.GridPanel.defaultConfig,config); /**
* 执行initEvent方法
*/
$.fn.GridPanel.initEvent(); $.post($.fn.GridPanel.defaultConfig.url,$.fn.GridPanel.defaultConfig.option.query,function(data){
/**
* data:
* [
* {
* pid:1,
* name:'aa',
* description:'aa'
* },
* {
* pid:2,
* name:'bb',
* description:'bb'
* }
* ]
*/
//把后台回调过来的数据转化成json对象
var array = eval("("+data+")");
/**
* 遍历array数组中的每一个元素
* 第二个参数为回调,在该函数中创建tr
*/
$.each(array,function(){
/**
* 每遍历一次,调用一次createTR方法
* 当createTR方法调用完毕以后创建了一个tr,再把tr追加到tbody上
*/
$("#"+$.fn.GridPanel.defaultConfig.table_id+" tbody").append(
$.fn.GridPanel.method.createTR.call(this));
});
});
},
/**
* 修改其中的一个单元格
*/
updateCell:function(){
/**
* this为当前的文本框
*/
var updateObj = $(this);
var pid = $(this).parent().parent().data("id");
var value = $(this).val(); //文本框的值
var $td = $(this).parent();//文本框的父节点td
var item = $td.attr("item");//要修改的列名
$.post($.fn.GridPanel.defaultConfig.url,{
id:pid,
item:item,
value:value,
method:'update'
},function(data){
updateObj.remove();
$td.text(value);
}); },
/**
* 给table添加一行
*/
addRow:function(){ },
/**
* 删除指定的行
*/
deleteRow:function(){
var delObj = $(this);
if (window.confirm("您确认要删除吗")) {
/*
* 因为在查询的时候把id利用该tr放入到了jQuery的缓存中,所以在这里可以提取到
*/
$.fn.GridPanel.defaultConfig.option.del.pid = $(this).parent().parent().data("id");
$.post($.fn.GridPanel.defaultConfig.url, $.fn.GridPanel.defaultConfig.option.del, function(data){
delObj.parent().parent().remove();
});
}
},
/**
* 创建一个tr
*/
createTR:function(){
/**
* this为{
pid:2,
name:'bb',
description:'bb'
}
*/
var jsonObj = this;
var $tr = $("<tr/>");
/**
* 相当于把key为id,value为jsonObj.pid加在了jQuery.cache中
* 可以利用$tr.data("id")获取到值
*/
$tr.data("id",jsonObj.pid);
/**
* 因为$.fn.GridPanel.defaultConfig.fields的数组的长度就是多少列
*/
$.each($.fn.GridPanel.defaultConfig.fields,function(){
/**
* this代表正在遍历的每一个元素就是fields中的每一个元素
*/
$tr.append($.fn.GridPanel.method.createTD.call(this,jsonObj));
});
return $tr;
},
/**
* 创建一个td
* jsonObj
* {
pid:2,
name:'bb',
description:'bb'
}
*/
createTD:function(jsonObj){
/**
* this <th field="name">姓名</th>
*/
if($(this).attr("field")==$.fn.GridPanel.defaultConfig.filedDelete){//如果是删除
return $("<td/>").append($.fn.GridPanel.method.createA("删除"));
}else if($(this).attr("field")==$.fn.GridPanel.defaultConfig.filedUpdate){//如果是修改
return $("<td/>").append($.fn.GridPanel.method.createA("修改"));
}else{//不是超级链接
return $("<td/>").attr("item",$(this).attr("field")).text(jsonObj[$(this).attr("field")]);
}
},
createA:function(text){
return $("<a/>").css("cursor","pointer").text(text);
},
createText:function(){
return $("<input type='text'/>");
}
}
};
})($);

3、如何使用

$().ready(function(){
/**
* 1、创建命名空间
*/
$.nameSapce("com.itheima12.Person");
/**
* 2、把GridPanel中的内容复制给了com.itheima12.Person
*/
$.extend(com.itheima12.Person,$.fn.GridPanel);
/**
* 3、调用方法
*/
com.itheima12.Person.method.createTable({
table_id:'usertable',
url:'../PersonServlet',
fields:$("#usertable *[field]"),
option:{
query:{
method:'query'
},
del:{
method:'deleteById',
pid:''
},
update:{
method:"update"
}
},
filedUpdate:'update',
filedDelete:'del'
});
});
 

5、对于this的讲解

/**
* 任何一个对象都有可能成为任何一个对象的属性
*/
function Person(){
alert(this);
}
Person();//window = this function Student(){ }
Student.a = Person;
Student.a();//this就是Student
var json = {
a:Person
}
json.a();//this就是json对象 //可以利用call和 apply函数改变this的指向
Person.call(json);//Person.call(json)==json.Person
Person.apply(Student);//Student.Person();

4、jQuery面向对象之简单的插件开发的更多相关文章

  1. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  2. 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  5. 3、jQuery面向对象

    1.首先介绍callback.js对ajax进行了封装 function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safar ...

  6. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  7. MYSQL、PHP基础、面向对象基础简单复习总结

    一.MYSQL         1.配置MySql                 第一步安装服务器(apache).                 第二部安装MySql界面程序         2 ...

  8. 以最简单的登录为例,诠释JS面向对象的简单实例

    JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这 ...

  9. sql+PHP基础+面向对象基础简单总结

    一.MYSQL         1.配置MySql                 第一步安装服务器(apache).                 第二部安装MySql界面程序         2 ...

随机推荐

  1. Problem accessing /jenkins/. Reason:

    这是一个Jenkins的Bug.临时解决方法是:在浏览器中手工输入:http://<ip>:<port>.不要访问"/jenkins"这个路径.

  2. opencv中图像的读取,显示与保存1

    1.读入图像 用cv2.imread()函数来读取图像,cv2.imread(路径,图像颜色空间)(其中颜色空间默认为BGR彩图)     cv2.IMREAD_COLOR:读入一副彩色图像 cv2. ...

  3. poj3252 Round Numbers(数位dp)

    题目传送门 Round Numbers Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 16439   Accepted: 6 ...

  4. 牛客网练习赛 2 烟花(概率dp)

    题目传送门 烟花 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K Special Judge, 64bit IO Format: %lld 题目 ...

  5. 新手学习 React 迷惑的点

    网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...

  6. C#break和continue学习

    一,代码 static void Main(string[] args) { ; while (true) { int num = Convert.ToInt32(Console.ReadLine() ...

  7. Centos设置自带中文输入法

    1.点击屏幕左上角的[系统应用程序]->[系统工具]->[设置] 2.在弹出的设置对话窗中选择Region&language 3.在弹出的[区域和语言]对话窗中,点击左下角“+”, ...

  8. Docker入门 .Net Core 使用Docker全程记录

    https://www.cnblogs.com/flame7/p/9210986.html Docker入门 第一课 --.Net Core 使用Docker全程记录   微服务架构无疑是当前最火热的 ...

  9. 【学习总结】Python-3-身份运算符 is 与 == 区别

    参考:菜鸟教程-Python3运算符 身份运算符 is 和 is not:用于比较两个对象的存储单元 判断两个标识符是不是引用自相同或不同对象,返回一个布尔值 对于"同一个对象"中 ...

  10. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...