言尽于此，完结
无论是一个初级的 coder，高级的程序员，还是顶级的系统架构师，应该都有深刻的领会到设计模式的重要性。
- 第一，设计模式能让专业人之间交流方便，如下：
程序员A：这里我用了XXX设计模式
程序员B：那我大致了解你程序的设计思路了
- 第二，易维护
项目经理：今天客户有这样一个需求…
程序员：明白了，这里我使用了XXX设计模式，所以改起来很快
- 第三，设计模式是编程经验的总结
程序员A：B，你怎么想到要这样去构建你的代码
程序员B：在我学习了XXX设计模式之后，好像自然而然就感觉这样写能避免一些问题
- 第四，学习设计模式并不是必须的
程序员A：B，你这段代码使用的是XXX设计模式对吗？
程序员B：不好意思，我没有学习过设计模式，但是我的经验告诉我是这样写的
从设计思想解读开源框架，一步一步到Spring、Spring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！
搜集费时费力，能看到此处的都是真爱！
| — | — | — | — |
| 标签选择器 | element | 根据给定的标签名匹配元素 | $(“h2”)选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $(“.title”)选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(“#title”)选取id为title元素 |
| 并集选择器 | selector1,selector2,…,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $(“div,p,.title”)选取所有div、p和拥有class为title的元素 |
| 全局选择器 | * | 匹配所有元素 | $(“*”)选取所有元素 |
【2】jQuery层次选择器：
后代选择器、子选择器、相邻元素选择器和同辈元素选择器。
| 名称 | 语法结构 | 描述 | 实例 |
|---|---|---|---|
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $(“#menu span”)选取#menu下的span元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(“#menu>span”)选取#menu下的子元素span |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(“h2+ dl”)选取紧邻h2元素之后的同辈元素dl |
| 同辈元素选择器 | prev~siblings | 选取prev元素之后的siblings元素 | $(“h2~ dl”)选取紧邻h2元素之后的同辈元素dl |
【3】属性选择器
属性选择器通过HTML元素的属性来选择元素。
- 属性选择器可以根据是否包含某属性来获取元素
如：a标签带有class属性
- 属性选择器可以根据属性值来获取元素
如：class属性值为hot的元素
- 属性选择器可以指定选取不等于属性是某个特定值的元素
如：class值不等于hot的元素
- 属性选择器可以指定属性值以指定值开头的元素
如：a标签href属性值以www开头的元素
- 属性选择器可以指定属性值以指定值结尾的元素
如：a标签href属性值以html结尾的元素
- 属性选择器可以指定属性值包含指定值的元素
如：a标签href属性值包含“k2”的元素
【4】过滤选择器
通过特定的过滤规则来筛选出所需的元素。
主要分类：
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器
- 内容过滤选择器、子元素过滤选择器……
基本过滤选择器
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤选择器</title>
<script src="js/jQuery-3.6.1.js"></script>
</head>
<body>
<ul>
<li>列表项第1项</li>
<li>列表项第2项</li>
<li>列表项第3项</li>
<li>列表项第4项</li>
<li>列表项第5项</li>
<li>列表项第6项</li>
<li>列表项第7项</li>
<li>列表项第8项</li>
</ul>
</body>
<script>
$(function(){
//获取第一个li元素,并将文本颜色设置为#0f0;
$('li:first').css('color','#0f0');
//获取最后一个li元素,并将文本颜色设置为#00f;
$('li:last').css('color','#00f');
//获取索引为2的元素，并将文本颜色设置为#f00；
$('li:eq(2)').css('color','#f00');
// $('li:gt(4)').css('color','#f00');
// $('li:lt(4)').css('color','#f00');
});
</script>
</html>
运行效果：
可见性过滤选择器：通过元素显示状态来选取元素
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jQuery-3.6.1.js"></script>
<style>
h2{
display: none;
}
</style>
</head>
<body>
<p>段落标签</p>
<h2>标题标签</h2>
<button id="test">隐藏段落标签</button>
<button id="demo">显示标题标签</button>
</body>
<script>
$(function(){
//获取id为test的button按钮，添加点击事件
$('#test').click(function(){
//选取可见的p标签,并将其隐藏
$('p:visible').hide();
});
//获取id为demo的button，并添加点击事件
$('#demo').click(function(){
$('h2:hidden').show();
});
});
</script>
</html>
运行效果：
💞 功能函数前缀
在JavaScript中，开发者经常需要编写一些功能函数来处理各种操作细节。例如在用户提交表单时，需要将输入框中最前端和最末端的空格清楚。JavaScript直到ES6才提供类似trim()的功能，而引入jQuery后，便可以直接使用trim()函数，如下所示：
$.trim(sString);
以上代码相当于：
jQuery.trim(sString);
即trim()函数是jQuery对象的一个方法。
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="js/jQuery-3.6.1.js"></script>
<script>
var sString=' 12345678 ';
sString=$.trim(sString);
alert(sString.length)
</script>
</body>
</html>
💞 window.onload
由于页面的HTML框架在页面完全加载后才能被使用，因此在DOM编程时，window.onload函数会被频繁地使用。倘若页面中有多处需要使用该函数，或者其它.js文件中也包含该函数，冲突问题将十分棘手。
jQuery中的ready()方法很好地解决了上述问题，它能够自动地将其中的函数在页面加载完成后运行，并且同一个页面中可以使用多个ready()方法而不相互冲突。
案例代码：
$(document).ready(function(){
var pEle =$('p');
console.log(pEle);
});
上述代码可以简写：
$(function(){
var pEle =$('p');
console.log(pEle);
});
简写语法：
$ (function(){
//执行代码
});
💞 创建DOM元素
前面我们学过，在JavaScript中，利用DOM方法创建元素，通常需要将document.createElement()、document.createTextNode()、appendChild()等配合使用，十分麻烦。而jQuery使用$则可以直接创建DOM元素，如下所示：
var oNewP=$("<p>这是一个感人肺腑的故事</p>")
以上代码等同于JavaScript中的如下代码：
var oNewP=document.createElement("p"); //创建节点
var oText=document.createTextNode("这是一个感人肺腑的故事");
oNewP.appendChild(oText);
最后总结
ActiveMQ+Kafka+RabbitMQ学习笔记PDF
关于分布式，限流+缓存+缓存，这三大技术（包含：ZooKeeper+Nginx+MongoDB+memcached+Redis+ActiveMQ+Kafka+RabbitMQ）等等。这些相关的面试也好，还有手写以及学习的笔记PDF，都是啃透分布式技术必不可少的宝藏。以上的每一个专题每一个小分类都有相关的介绍，并且小编也已经将其整理成PDF啦
ed+Redis+ActiveMQ+Kafka+RabbitMQ）等等。这些相关的面试也好，还有手写以及学习的笔记PDF，都是啃透分布式技术必不可少的宝藏。以上的每一个专题每一个小分类都有相关的介绍，并且小编也已经将其整理成PDF啦
2651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
