Jquery——简单例子

最新推荐文章于 2024-07-30 03:35:05 发布

Zjaun

最新推荐文章于 2024-07-30 03:35:05 发布

阅读量2.1k

点赞数

分类专栏： JQ 文章标签： JQuery

本文链接：https://blog.csdn.net/Zjaun/article/details/87213678

版权

本文通过实例介绍了如何制作简易版的jQuery插件，包括五星评分功能的实现，延迟显示效果以及点击返回顶部的操作，展示了jQuery在实际应用中的灵活性和便捷性。

摘要由CSDN通过智能技术生成

制作简易版jquery插件

<script src="jquery.bgColor.js"></script>
<script>
$(function () {
$("div").bgColor("red").width(400);
});
</script>

//jquery.bgColor.js
/**
* Created by HUCC on 2017/4/12.
*/
$.fn.bgColor = function (color) {
//this是一个jq对象
this.css("backgroundColor", color);
//要加上返回当前对象
return this;
};

五星评分案例

<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff16cf;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
	//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
	var wjx_k = "☆";
	var wjx_s = "★";
	$(".comment>li").on("mouseenter", function () {
		$(this).text(wjx_s).prevAll().text(wjx_s);
		$(this).nextAll().text(wjx_k);
		//链式编程 end() 方法结束当前链条中的最近的筛选