jquery

来源：互联网发布：ps淘宝美工教程视频编辑：程序博客网时间：2024/05/21 14:54

一、 Introduction

对javascript封装的一个框架包。简化对javascript的操作。javascript代码，dom获得页面节点对象，ajax操作，事件操作，事件对象。juery代码，无需考虑浏览器兼容问题，代码非常少。

juery的特点，语法简练、语义易懂、学习快速、丰富文档，jquery是一个轻量级的脚本，代码非常小巧；支持css1-css3定义的属性和选择器；跨浏览器；将javascript脚本与html源代码完全分离，便于后期编辑和维护。插件丰富，可以通过插件实现更多功能。

其他相关的javascript框架包，Prototype、YUI、Extjs、bindows、JSVM、mootools等等。

二、选择器

在页面上获得各种元素节点对象而使用的条件就是选择器。

比如，js中的document.getElementById();等。

1. 基本选择器

设计思路来源于css的样式选择器。

function f1(){

//通过各种选择器获得页面上的各种元素节点

//1，$("#id")，id属性值获得节点

$("#username").css("background-color","red");

//2，$("tag标签名称"")元素标签名称获得元素节点

$("h2").css("color","red");

//3，$(".class属性值")通过class属性值获得元素节点

$(".password").css("color","red");

//4，$("*")页面上所有节点

$("*").css("background-color","green");

//5，$("s1,s2,s3,...")联合选择器，只要符合其中的一个条件即可

$("#username,.password,h2").css("color","blue");

}

2. 层次选择器

$(‘s1 s2’)

父子关系，派生选择器，在s1内部获得全部的s2节点（不考虑层次）

$(‘div span’).css(‘background-color’,’red’)

$(‘s1 > s2’)

父子关系，直接子元素选择器，在s1内部获得子元素节点s2。

$(‘s1 + s2’)

直接兄弟选择器，在s1后边获得紧紧挨着的第一个兄弟关系的s2节点。

$(‘s1 ~ s2’)

后续全部兄弟关系节点选择器，在s1后边获得全部兄弟关系的s2节点。

3. 并且选择器

function f1(){

//通过各种选择器获得页面上的各种元素节点

//1，$("#id")，id属性值获得节点

$("#username").css("background-color","red");

//2，$("tag标签名称"")元素标签名称获得元素节点

$("h2").css("color","red");

//3，$(".class属性值")通过class属性值获得元素节点

$(".password").css("color","red");

//4，$("*")页面上所有节点

$("*").css("background-color","green");

//5，$("s1,s2,s3,...")联合选择器，只要符合其中的一个条件即可

$("#username,.password,h2").css("color","blue");

}

function f2(){

//:first :last第一个/最后一个

$('li:first').css('color','red');

$('li:last').css('color','green');

//eq(索引值)

$('li:eq(4)').css('color','blue');

//根据范围索引,gt(索引值)，lt(索引值)

$('li:gt(2)').css('color','red');

//:even偶数下标节点，:odd奇数下标节点

$("li:even").css('background-color','blue');

//:not(选择器)排除指定选择器

$('li:not(#haha)').css('background-color','green');

//:header h1/h2/h3/h4标题标签选择器

$(":header").css('color','red');

}

function f3(){

//并且选择器一次性可以使用多个，每个并且选择器使用前把已经获得节点

//下标进行归位处理

//$('li:gt(2):lt(2)').css('background-color','red');

//节点必须是标题标签节点，class=haha，普通选择器也可以构成并且关系

$(':header.haha').css('background-color','red');

$('li.haha').css('background-color','red');

}

注意：并且选择器可以单独使用；各种选择器都可以构造并且关系；并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要归位；多个并且关系的选择器，没有前后顺序要求，但是要避免歧义。

4. 内容过滤选择器

:contains内容，包含内容选择器，获得的节点内部必须包含指定的内容。

:empty获得空元素内部没有任何元素/文本节点对象。

:has节点内部必须包含指定选择器对应的元素。

:parent寻找的节点必须作为父元素节点存在。

function f1(){

//:contains节点内部包含text字符串信息

$('div:contains(xixi)').css('color','red');

//:empty获得空节点

console.log($('div:empty'));

//:has节点必须包含选择器对应的子节点

$('div:has(p)').css('color','red');

//:parent，作为父节点存在的节点

console.log($('div:parent'));

}

5. 表单域选中选择器

复选框、单选按钮、下拉列表

$(:checked)复选框、单选按钮选中选择器

$(:selected)下拉列表选中选择器

function f2(){

console.log($('input:lt(3):checked'));

console.log($('.ss:checked'));

console.log($('option:selected'));

}

三、属性操作

js属性操作，document.getElementById(‘xx’).属性名称;等。

jquery方式

$().attr(属性名称);//获得属性信息值

$().attr(属性名称,值);//设置属性的信息

$().removeAttr(属性名称);//删除属性

$)().attr(json对象);//同时为多个属性设置信息值，json对象键值就是名称和值

$().attr(属性名称,fn);//通过fn函数执行的return返回值对属性进行赋值。

function f3(){

console.log($("#hh").attr("type"));

$("#hh").attr("type","text");//一般不推荐修改type属性，特别是火狐浏览器不允许修改

$("#hh").removeAttr('class');

}

function f4(){

//使用json对象代码

var jn ={'class':'xx','id':'xx','name':'hbo'};

$('#hh').attr(jn);

}

function f5(){

$("#hh").attr('class',function(){

return 'xx';

})

}

四、快捷操作

1. class属性值的操作

$().attr(‘class’,值);

$().attr(‘class’);

$().removeAttr(‘class属性’);//删除class的属性

class快捷操作方法：

$().addClass(class操作);//给class属性追加信息值

$().removeClass(class属性值);//删除class属性值中的某个信息值

$().toggleClass(class属性值);//开关效果，信息值有就删除，没有就添加。

function f11(){

$("#haha").addClass('haha');

}

function f12(){

$("#haha").addClass('hehe');

}

function f2(){

$("#haha").removeClass('haha');

}

function f3(){

$("#haha").toggleClass("haha");

}

2. 标签包含内容操作

js操作。dvnode.innerHTML = xxx;//设置div包含的内容。innerHTML不是w3c标准技术，许多浏览器仅是对它支持罢了。

juery操作

$().html();

$().html(信息);

$().text();//获得节点包含的文本字符串信息

$().text(信息);//设置节点包含的内容，有html标签，就把<>符号变为符号实体。

function f4(){

console.log($("div").html());

}

function f5(){

$("div").html("xxxxxx-<ahref=''>haha</a>xxxx");

}

function f6(){

$("div").text("xxxxxx-<ahref=''>haha</a>xxxx");

}

3. css样式操作

jquery可以获得行内样式，外部样式，内部样式，都可以。

$().css(name,value);

$().css(name);

$().css(json对象);

function f1(){

console.log($('#div1').css('width'));

$('#div1').css('width','400px');

$('#div1').css({'width':'200px','height':'200px','background-color':'blue'});

}

4. value属性值快捷操作

普通操作

$().attr(‘value’);

$().attr(‘value’,信息值);

快捷操作

$().val();

$().val(信息);

该val()方法在复选框、单选按钮、下拉列表的使用有好表现。

复选框操作

获得被选中的复选框的value属性值

设置默认情况下哪个复选框被选中

function f1(){

console.log($('.haha:checked').length);

var s= '';

for(var i=0;i<$('.haha:checked').length; i++){

s +=$('.haha:checked:eq('+i+')').val()+',';

}

//去除最后的逗号

s = s.substr(0,s.length-1)

console.log(s);

}

设置复选框默认选中项目

function f2(){

$('.haha').val([1,2,4])

}

下拉列表操作

function fx3(){

//单选下拉列表

console.log($('option:selected').val());

//多选下拉列表

console.log($('select').val());

}

function fx4(){

$('select').val([1,2]);

}

单选按钮

function fd1(){

console.log($('.ss:checked').val());

}

function fd2(){

//设置默认选中项目

//$(单选按钮).val[元素];//参数元素就是被选中项目的value属性

$('.ss').val(['1']);

}

复选框操作

全选、反选、全不选

$().attr(‘checked’,true);//全选

$().attr(‘checked’,false);//取消选中

$().attr(‘checked’);$().is(‘:checked’)//判断复选框选中否，返回布尔值。

注意，这3个函数在某些高版本的jquery中可能不好用。比如1.11.x。

function ff1(){

$('.haha').attr('checked',true);

}

function ff3(){

$('.haha').attr('checked',false);

}

function ff4(){

//console.log($('.haha:eq(1)').is(':checked'));

for(var i=0;i<$('.haha').length; i++){

var flag =$('.haha:eq('+i+')').is(':checked');

$('.haha:eq('+i+')').attr('checked',!flag);

}

特别说明：关于$符号

$用来操作选择器。选择器的使用过程就是函数调用过程。$符号就是一个函数，函数名称为$符号。也可以使用jQuery符号。

五、 jquery对象与dom对象关系

jquery对象，$(‘#haha’) $(‘li’)等选择器使用返回的信息就是对象，称为jquery对象。

dom对象，document.getElementById() document.getElementByTagName()等返回的信息就是dom对象。

jquery对象实际是对dom对象的封装。jquery和dom不能相互调用对方的方法。

六、 jquery对象

jquery框架对象类型，jquery对象和$对象。

jquery对象就是各种选择器创建出来的对象，比如$(‘div’)$(‘.clss’)$(‘#idd’)。

jquery对象可以调用的成员一种有三种，init本身成员，fn的成员，fn.extend复制继承过来的。

$对象就是函数对象，比如$.get();

七、遍历方法

each()遍历方法

$.each(数组/对象.function处理);//$对象调用的

$(选择器).each(function 处理);//jquery对象调用的

//1，遍历数组

//$.each(数组,function(k下标变量,v值变量){});

var user = ['haha','heieh','hehe','xss'];

jQuery.each(user,function(k,v){

console.log(k+"--"+v);

});

//2，遍历对象

//$.each(对象,function(k下标变量,v值变量){});

var user2 ={name:'haha',age:23,do:function(){console.log('haha')}};

$.each(user2,function(k,v){

console.log(k+"--"+v);

});

遍历jquery对象

//遍历jquery对象

//$().each(function(){k dom对象下标,v 分别代表每个dom对象});

window.onload = function(){

$('div').each(function(k,v){

console.log(k+'---'+v);

v.style.backgroundColor= 'blue';

$(v).css('color','red');

});

}

八、加载事件

js中<body onload=”函数()”>或者window.onload= function(){}

作用是先执行html和css代码，再执行js代码。

jquery加载事件实现：

$(document).ready(function处理);//$(document)是把document对象转变为jquery对象

$().ready(function处理);//$()也是创建jquery对象，不过内部没有dom对象的组成部分

$(function处理);//对第一种加载的封装而已

$(document).ready(function(){

$('body').css('background-color','red');

});

$().ready(function(){

$('h2').css('color','blue');

});

$(function(){

$('h2').css('background-color','green');

});

jquery加载事件与传统加载事件的区别

设置个数。用一个请求里边，jquery可以设置多个不同的加载事件，而传统的只能设置一个。传统的如果设置多个，后者会覆盖前者。

执行时机。传统方式加载事件，是全部内容（文件、图片、样式）在浏览器显示完毕再给执行加载事件。jquery方式加载事件，只要全部内容在内存里边对应的DOM树结构绘制完毕就执行，有可能对应的内容在浏览器里边还没有显示。

jquery加载事件原理，是对DOMContentLoaded的封装，不是onload。

九、普通事件操作

js的事件操作有dom1级的和dom2级的。

jquery事件设置

$().事件类型(事件处理函数fn);//设置事件

$().事件类型();//触发事件执行

$(document).ready(function(){

$('h2').mouseover(function(){

//$('h2').css('color','blue');

$(this).css('color','blue');//this代表dom元素h2的对象

});

//为h2绑定多个mouseover事件

$('h2').mouseover(function(){

$(this).css('width','200px');

});

function f1(){

console.log('1234');

$('form').submit();//触发执行表单提交

}

$(document).ready(function(){

$('form').submit(function(){

alert('表达提交');//表单提交是触发这个事件

})

});

十、 jquery对文档的操作

通过jquery方式实现页面各种节点的追加、删除、复制、替换等操作。

1. 节点追加

DOM操作，内部追加，也叫父子追加

append(content)向每个匹配的元素内部后置追加内容。

preappend(content)向每个匹配的元素内部前置追加内容。

appendTo(content)把所有匹配的元素后置追加到另一个，指定的元素集合中。

prependTo(content)把所有匹配的元素前置追加到另一个、指定的元素集合中。

function f2(){

//主动追加

//append()后缀

$('#ul1').append("<li>aa</li>");

//prepend()前置

$('#ul1').prepend("<li>bb</li>");

//被动追加

//appendTo()后置追加

$('<li>cc</li>').appendTo($('#ul1'));

//prependTo()前置追加

$('<li>dd</li>').prependTo($('#ul1'));

//已有节点的追加，要发生物理位置移动

$('#ul1').append($("#dd"));

}

外部兄弟追加

主动，after(content)在每个匹配的元素之后插入内容；before在每个匹配的元素之前插入内容。

被动，InsertAfter(content)把所有匹配的元素插入到另一个，指定的元素集合的后面；InsertBefore把所匹配的元素插入到另一个指定的元素集合的前面。

function f3(){

//主动

//after()后置

$('#ss').after("<li>ss1</li>");

//before()前置

$('#ss').before("<li>ss2</li>");

//被动

//insertBefore 前置

$('<li>li3</li>').insertBefore($('#ss'));

//insertAfter 后置

$('<li>li4</li>').insertAfter($('#ss'));

//已有节点追加

$('#dd').insertAfter($('#ss'));

}

2. 节点替换

$().replaceWith();//被动替换

$().replaceAll();//主动替换

function f4(){

//被动，发生物理位置移动

//$('#dd').replaceWith($('#ss'));

//主动

$('#dd').replaceAll($('#ss'));

}

3. 节点删除

$(父节点).empty();//父节点清空子节点

$(匹配节点).remove();//删除指定节点

function f5(){

//清空父节点

$('#ul2').empty();

//清空指定节点

$('#ss').remove();

}

4. 使用添加删除节点做的带删除按钮多文件上传

var num = 0;

var nums =newArray(1,2,3,4);

function addpic(){

//限制最多可以上传6张照片

//使用数组作为栈，以保证在删除后取得的id不重复

if(nums.length>0){

num =nums[nums.length-1]

numstmp =nums;

nums = newArray();

for (var i=0;i<numstmp.length-1;i++){

nums[i]= numstmp[i];

}

} else {

return;

}

console.log(nums);

var p = '<pid='+num+'>相册<input type="file"><inputtype="button" value="删除"onclick="delpic('+num+')"/></p>';

$("#hah").before(p);

}

function delpic(_num){

$('#'+_num).remove();

nums[nums.length] =_num;

console.log(nums);

}

</script>

5. 复制节点

$().clone(true);//节点和器身上的事件都给复制

$().clone(false);//只给复制节点本身（包括节点内步信息）

cloneNode(true/false);

$().ready(function(){

//jquery本身方法有遍历机制

$('#ul1li').mouseover(function(){

$(this).css('background-color','red');

});

function f6(){

//复制一个li到另一个ul

var ss =$('#ss').clone(true);//节点和事件都可以复制

var ss =$('#ss').clone(false);//只有节点可以复制

$('#ul2').append(ss);

}

十一、属性选择性

$([name])节点内部必须有name名称的属性存在

$([name=value])节点name属性值等于value

$([name^=value])name属性值以value开始

$([name$=value])name属性值以value结尾

$([name+=value])name属性值必须包括value字样

$([name!=value])name属性值不等于value，没有name属性也可以

$([][][][])多个属性选择器，构成并且关系

function f1(){

$("[id]").css('color','red');

$("[id=haha]").css('color','blue');

$("[id^=ha]").css('color','yellow');

$("[id$=2ha]").css('background-color','blue');

$("[class*=h]").css('background-color','green');

$("[class!=hh]").css('width','200px');

$("[id][class^=ss]").css('height','50px');

$("input[id][class^=ss]").css('height','50px');

}

十二、事件绑定

简单的事件操作

$().事件类型(function事件处理);

$().事件类型();

1. 事件绑定

$().bind(事件类型,function事件处理);

$().bind(类型1,类型2,类型3,事件处理);//

$().bind(json对象);

事件处理，有名函数，匿名函数。

$(function(){

/*$('div').bind('mouseover',function(){

$(this).css('background-color','blue');

});*/

/*$('div').bind('mouseoverclick mouseout',function(){

console.log('haha');

});*/

$('div').bind({

mouseover:function(){console.log(1)},

mouseout:function(){console.log(2)},

click:function(){console.log(3)}

});

2. 取消事件绑定

js取消的方法

xxx.onclick =null; //dom1级

xxx.removeEventListener(类型,(有名)处理,事件流);//dom2级事件取消

jquery方式取消事件绑定

$().unbind();//取消全部事件（无视事件类型、无视处理函数类型）

$().unbind(事件类型);//取消指定类型的全部事件（无效处理函数类型）

$().unbind(事件类型,有名(事件)处理函数);//取消指定类型事件的指定处理

$(function(){

/*$('div').bind('mouseover',function(){

$(this).css('background-color','blue');

});*/

/*$('div').bind('mouseoverclick mouseout',function(){

console.log('haha');

});*/

$('div').bind({

mouseover:function(){console.log(1)},

mouseout:function(){console.log(2)},

click:function(){console.log(3)}

});

$('div').bind('mouseover',f1);

$('div').bind('mouseover',f2);

});

functionf1(){console.log(4)};

functionf2(){console.log(5)};

function cancel(){

//取消事件绑定

//$('div').unbind();

//$('div').unbind('mouseout mouseover');

$('div').unbind('mouseover',f1);

}

3. 事件对象、阻止浏览器默认动作、阻止事件冒泡

$().bind(‘click’,function(evt){});

$().click(function(evt){});

$().bind(‘mouseover’,f1);

function f1(evt){}

使用evt，在jquery框架内部有浏览器兼容处理。以上红色的evt对主流的事件对象和ie的事件对象有封装。具体是：

xxx.onclick =function(evt){}

xxx.addEventListener(类型,function(evt){})

xxx.attachEvent(类型,function(){window.event})

十三、动画效果

1. 基本动画

显示、隐藏

function f1(){

$('div').hide(2000,function(){

alert('哈哈');

});

}

function f2(){

$('div').show(2000,function(){

alert('hehe');

});

}

function f3(){

$('div').toggle(2000);

}

var flag = 0;

function f4(){

if(flag == 0){

$('div').hide(2000);

flag = 1;

} else {

$('div').show(2000);

flag = 0;

}

2. 垂直动画效果

function f5(){

$('div').slideUp(2000);

}

function f6(){

$('div').slideDown(2000);

}

function f7(){

$('div').slideToggle(2000);

}

3. 颜色渐变动画效果

淡入淡出效果

fadeIn(speed,[callback])

fadeout(speed,[callback])

fadeTo(speed,opacity,[callback])

fadeToggle(speed,[callback])

十四、 jquery封装的ajax

$.get(url [,data][,function(msg){}回调函数] [,dataType]);

$.post(url [,data][,fn回调函数] [,dataType]);

上述两种请求是异步的，如果需要设置同步请求，使用下面方法：

$.ajax({//json对象

url:请求地址,

[data]:数据（请求字符串/json对象）,

[dataType]:默认为字符串返回信息,

[type]:get/post请求,

[success]:function(msg){},

async:[true]异步/false同步,

cache:[true]缓存/false不缓存,

});

function f1(){

$.get('./11.php');

$.get('./11.php',function(msg){

console.log(msg);

});

$.get('./11.php',{name:'haha',age:'23'},function(msg){

alert(msg);

},'json');

}

function f2(){

$.ajax({

url:"./11.php",

data:{"name":"haha","age":"23"},

type:"get",

dataType:'json',

success:function(msg){

alert(msg);

console.log(msg.name);

});

}

十五、制作地区三级联动

<!DOCTYPE html>

<head>

<metacharset="UTF-8">

<title>Document</title>

var xmldom = '';

function showprovince(){

//1，ajax去服务器端获得xml文件里边的省份信息

$.ajax({

url:'./ChinaArea.xml',

// data:

dataType:'xml',//调用responseXML

type:'get',

success:function(msg){

xmldom= msg;

//在msg里面获得provice节点对象。pros是jquery对象。

varpros = $(msg).find('province');

console.log(pros);

pros.each(function(k,v){

//k是dom对象下标

//var id = $(this).attr('provinceID');

varid = $(this).attr('provinceID');

varnm = $(this).attr('province');

$('#province').append("<optionvalue="+id+">"+nm+"</option>");

});

}

var selectprovince = '';

function showcity(){

//根据选中的省份显示对应的城市

//1，获得被选中的省份

var pid =$('#province option:selected').val();

//2，在xml文档中获得province节点，其属性proviceID='pid'

var xml_province =$(xmldom).find("province[provinceID="+pid+"]");

console.log(xml_province);

//3，在xml_provice里面获得子节点city

var citys =xml_province.find('City');

selectprovince =xml_province;

console.log(citys);

//4，遍历citys并在页面上显示

$('#city').empty();

$('#city').append("<option>--请选择--</option>");

citys.each(function(){

var nm =$(this).attr("City");

var cid =$(this).attr("CityID");

$('#city').append("<optionvalue="+cid+">"+nm+"</option>");

});

}

function showpiece(){

console.log(selectprovince);

//1，根据选中的城市，选择对应的地区

var cid = $('#cityoption:selected').val();

//2，在xml中获得city节点，其属性CityID='cid';

var xml_city =selectprovince.find("City[CityID="+cid+"]");

console.log(xml_city);

//3，在xml_city里面获得子节点piecearea

var pieceareas =xml_city.find('Piecearea');

console.log(pieceareas);

//4，遍历areas并在页面上显示

$('#qu').empty();

$('#qu').append("<option>--请选择--</option>");

pieceareas.each(function(){

var nm = $(this).attr("Piecearea");

var qid =$(this).attr("PieceareaID");

$('#qu').append("<optionvalue="+qid+">"+nm+"</option>");

});

}

$(function(){

//页面加载完毕就显示省份

showprovince();

});

</script>

</head>

<body>

省份：<select id="province" name="sheng"onchange="showcity()"><option value="0">--请选择--</option></select>

城市：<select id="city" name="shi"onchange="showpiece()"><option value="0">--请选择--</option></select>

地区：<select id="qu" name="qu"><optionvalue="0">--请选择--</option></select>

</body>

</html>

十六、制作迷你jquery

选择器，#id，tag标签，dom节点

方法，css()、attr()、each()方法

<!DOCTYPE html>

<head>

<metacharset="UTF-8">

<title>Document</title>

//开发迷你jquery

(function(){

var jq =function(selector){

return newjq.fn.init(selector);

}

jq.fn = {

init:function(selector){

//实现选择器

if(selector.nodeType){

//console.log("dom");

this.length= 1;

this[0]= selector;

}elseif(selector.indexOf('#') === 0){

//console.log("id");

//取出#

varflag = selector.substr(1);

varelem = document.getElementById(flag);

//console.log(elem);

this.length= 1;

this[0]= elem;

}elseif(selector.indexOf('.') === 0){

console.log("class");

}else{

//console.log("tag");

var elems =document.getElementsByTagName(selector);

for(vari=0; i<elems.length; i++){

this[i]= elems[i];

}

this.length= elems.length;

}

css:function(k,v){

//设置遍历机制，以便多个对象的处理

for(vari=0; i<this.length; i++){

this[i].style[k]= v;

}

attr:function(k,v){

//遍历设置属性

for(vari=0; i<this.length; i++){

this[i].setAttribute(k,v);

}

each:function(callback){

//代表参数是函数参数

//遍历每个dom对象

console.log(this);

for(vari=0; i<this.length; i++){

//this[i]代表每个dom对象

//this[i]

//函数可以通过cal或者apply的方式执行

console.log(this[i]);

callback.call(this[i],i,this[i]);

}

//init通过原型方式继承fn

jq.fn.init.prototype= jq.fn;

window.$ = jq;

})();

function f1(){

//console.log($('input'));

//$('li').css('backgroundColor','red');

//$('#username').css('backgroundColor','red');

//$('#username').attr('value','haha');

//$('li').attr('id','haha');

//$('li').each(function(kdom对象下标,v dom对象){});

$('li').each(function(k,v){

//console.log($(this));

$(this).css('backgroundColor','red');

});

}

</script>

</head>

<body>

<ul>

</ul>

<inputtype="text" id="username" value="jack"/><br />

<inputtype="text" id="email" value="23@qw.com"/><br />

<inputtype="text" id="address" value="bjbjb"/><br />

<inputtype="button" value="触发" onclick="f1()">

</body>

</html>

十七、插件开发使用

jquery框架本身提供了一些方法使用，但是有限。为了满足需求，可以自己给jquery框架开发、扩展一些功能方法。

1. 制作一个插件

对于项目里面有许多地方可以用到的功能，做成插件

jquery可以调用的成员：fn，fn.extend()

$.fn.setTableColor= function(){}

$.fn.extend({setTableColor:function(){}});

/**

* author:haha

* date:2017-xx-xx

* example:

* htmlcode:

* <table border="1px">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

jquerycode:

$(function(){

$('table').setTableColor('yellow','red');

});

$.fn.setTableColor =function(m,n){

//this代表table的jquery对象

this.find("tr:first").css('background-color',m);

this.find("tr:gt(0):odd").css('background-color',n);

}

2. 两种方式丰富成员

给$.fn丰富成员，给成员可以给jquery对象使用

$.fn.成员= 值;

$.fn.extend(json对象);

给$丰富成员，给成员可以给$对象使用

$.成员= 值;

$.extend(json对象);

//给jquery对象丰富成员

function f1(){

//丰富单一成员

//通过json对象丰富成员

$.fn.addr =function(){console.log('aaaa')};

$.fn.extend({tel:function(){console.log('ssss')}});

$('table').addr();

$('table').tel();

}

//给$对象丰富成员

$.haha = "hehai";

console.log($.haha);

$.extend({shoudu:function(){console.log('bj')},hehe:'xxx'});

$.shoudu();

$.hehe;

console.log($.hehe);

$(function(){

$('table').setTableColor('blue','green');

});

</script>

3. 使用jquery插件的步骤

引入jquery插件

引入对应的css样式、img图片、辅助的相关js文件

检查jquery插件本身jquery是否有要求

阅读全文

'); })();