jQuery的插件和一些理论知识

最新推荐文章于 2025-05-16 11:16:36 发布

Companion~

最新推荐文章于 2025-05-16 11:16:36 发布

阅读量170

点赞数

分类专栏： jQuery 文章标签： jquery3

本文链接：https://blog.youkuaiyun.com/qq_40868408/article/details/82425234

版权

jQuery 专栏收录该内容

3 篇文章

订阅专栏

首先我们来学习jQuery的插件等等
一．this指针的作用：
this 表示一个DOM对象（HTML元素），可以调用该元素的属性和方法。
$(this) 表示一个jQuery对象，可以调用jQuery的属性和方法。

作用域：
事件源
当前元素
事件本身

二．JSON的三种格式
1.对象

{“sid”:”s01”,”sname”:”zs”}

2.列表/数组

[1,2,3,4,5]
[{“sid”:”s01”,”sname”:”zs”},{“sid”:”s02”,”sname”:”fs”}]

3.混合模式

{“id”:3,”hobby”:[“a”,”b”,”c”]}

三．插件机制简介

利用了jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的方法和属性。

四．$.extend和$.fn.extend

区别：
$.extend 是给jquery对象扩展方法（类方法）
$.fn.extend是给jquery选择器中的对象扩展方法或者属性

作用：
$.extend用于扩展jQuery对象本身，主要用于扩展jQuery类方法，用来在jQuery命名空间上增加新属性或者新函数

类属性：类名.属性名
类方法：类名.方法名

$.extend()作用：
1.合并对象

Var obj1={“id”:1};
Var obj2={“name”:”张三”}；
Var obj3={“age”:18};
Var obj4=$.extend({},obj1,obj2,obj3); 

console.log(obj4);//控制台输出obj4内容


//输出的结果：
{“id”:1,“name”:”张三”,“age”:18}

2.扩展jquery类方法

var method={
“myMethod”:function(){
alert(‘你好！’);
}
};

$.extend(method);//扩展jquery一个myMethod()方法
$.myMethod();//调扩展的方法

$.fn.extend()作用：
//扩展jquery的方法
//增加jquery对象的新属性

var method={
“myMethods”:function(){
alert(‘你好啊！’);
}
};

$.fn.extend(method);//扩展jquery一个myMethods()方法
$.(‘h1’).myMethods();

//jsp页面

<h1>
测试
</h1>

//现在就上代码，插件的案例：
//jquery-table.js的解释
定义一个根据jquery对象扩展方法,方法名可以自定义的
方法名：mycolor
声明一个options,并且判断options是否为空。
如果为空，就使用json空字符串，反之。
然后，声明一个默认的css样式
扩展该对象的方法
返回调该方法的样式，并且遍历
tr:eq(0)是tr下标等于0的，添加一个头部样式
tr:gt(0)是 tr 下标大于0的，添加一个移出的样式，然后hover(over,out)
Over 方法是移入的样式，添加样式之前要先清除之前的样式。
out中的方法是移出的样式，添加样式之前要先清除之前的样式。
//jquery-table.js

$.fn.extend({
	"mycolor":function(options){
		var options=options||{};
		
	var defaultCss={
			headCss:"head",
			overCss:"over",
			outCss:"out"
		};
		
		$.extend(defaultCss,options);
		
	    return this.each(
	    		function(){
	    			$('tr:eq(0)',this).addClass(defaultCss.headCss);
	    	$('tr:gt(0)',this).addClass(defaultCss.outCss).hover(function(){
	    		$(this).removeClass().addClass(defaultCss.overCss);	
	    	},
	    	function(){
	    		$(this).removeClass().addClass(defaultCss.outCss);
	    	});
	    	
	    });
		
		
		
	}
	
	
	
});

//style.css页面,head是表的头部样式，over是鼠标移入的样式，out是鼠标移出的样式

.head{background:#FFC125}
.over{background:#EE0000}
.out{background:#ffffff}


.myhead{background:#CAFF70}
.myover{background:#B2DFEE}
.myout{background:#BABABA}

//table.jsp页面
//js/jquery-1.7.1.min.js //js包中是jquery的类库
//css/style.css //css包中的style.css的样式
//js/jquery-table.js //js包中的写的插件js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-table.js"></script>
<script type="text/javascript">
$(function(){
//找到id为table2的表格，并且调用jquery-tale.js中的mycolor()函数
	$('#table2').mycolor();	
	
	
});

</script>
</head>
<body>
<table width="100%" border="1" id="table2">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
</table>
</body>
</html>

大家可以关注下面公众号：《巧克力酱编程》
有时其他知识会在公众号更新的哦🤞