159 lines
7.7 KiB
HTML
159 lines
7.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<meta name="author" content="viggo" />
|
|||
|
|
<title>Fullstack Club | 全栈工程师俱乐部</title>
|
|||
|
|
<link rel="shortcut icon" href="../assets/images/favicon.ico">
|
|||
|
|
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/fonts/linecons/css/linecons.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/fonts/fontawesome/css/font-awesome.min.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/bootstrap.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/xenon-core.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/xenon-components.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/xenon-skins.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/nav.css">
|
|||
|
|
<link rel="stylesheet" href="../assets/css/custom-style.css">
|
|||
|
|
<script src="../assets/js/jquery-1.11.1.min.js"></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<meta property="og:type" content="article">
|
|||
|
|
<meta property="og:url" content="">
|
|||
|
|
<meta property="og:title" content="">
|
|||
|
|
<meta property="og:description" content="">
|
|||
|
|
<meta property="og:image" content="">
|
|||
|
|
<meta property="og:site_name" content="">
|
|||
|
|
|
|||
|
|
<meta name="twitter:card" content="summary_large_image">
|
|||
|
|
<meta name="twitter:title" content="">
|
|||
|
|
<meta name="twitter:description" content="">
|
|||
|
|
<meta name="twitter:image" content="">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body class="page-body boxed-container">
|
|||
|
|
<nav class="navbar horizontal-menu navbar-fixed-top">
|
|||
|
|
<div class="navbar-inner">
|
|||
|
|
<div class="navbar-brand">
|
|||
|
|
<a href="../index.html" class="logo">
|
|||
|
|
|
|||
|
|
<img src="../assets/images/bt8-expand-light.png" width="100%" alt="" class="hidden-xs">
|
|||
|
|
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="navbar-mobile-clear"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<div class="page-container">
|
|||
|
|
|
|||
|
|
<div class="main-content" style="">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="panel panel-default">
|
|||
|
|
|
|||
|
|
<h4 class="text-gray"></h4>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-12">
|
|||
|
|
<h1 id="metaselector">MetaSelector</h1>
|
|||
|
|
<p>元数据选择器，用于文件、笔记、物体筛选，服务器规划、微服务调度等众多领域。</p>
|
|||
|
|
<p>规则参考了 CSS 属性选择器，JQuery 属性选择器。</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>便于生成、书写</li>
|
|||
|
|
<li>便于解析、阅读</li>
|
|||
|
|
<li>便于执行</li>
|
|||
|
|
<li>支持 url 形式属性编码</li>
|
|||
|
|
<li>支持异步属性加载</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>多语言支持</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>java</code> 实现去往 <a href="https://github.com/CheneyWong/MetaSelector.js">这里</a>。</li>
|
|||
|
|
<li><code>javascript</code> 实现去往<a href="https://github.com/CheneyWong/MetaSelector">这里</a>。</li>
|
|||
|
|
<li>语法实验室去往这里。</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="语法介绍">语法介绍</h2>
|
|||
|
|
<p>元数据以属性(attribute) 和值 (value) 的形式描述，包裹在 <code>[]</code> 之中。</p>
|
|||
|
|
<h3 id="基本选择器">基本选择器</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>[attribute]</code> 包含某个属性</li>
|
|||
|
|
<li><code>[attribute=undefined]</code> 不包含某个属性</li>
|
|||
|
|
<li><code>[attribute=value]</code> 属性等于某值</li>
|
|||
|
|
<li><code>[attribute*=value]</code> 属性包含某个值</li>
|
|||
|
|
<li><code>[attribute|=value]</code> 属性以某值标记的开头（value 后面必须有内容且不能紧跟字母和数字，eg. <code>btn-user</code>、<code>btn-*</code>、<code>btn-</code>、<code>btn.user</code>）。</li>
|
|||
|
|
<li><code>[attribute^=value]</code> 属性以某值开头</li>
|
|||
|
|
<li><code>[attribute$=value]</code> 属性以某值结尾</li>
|
|||
|
|
<li><code>[attribute!=value]</code> 属性不等于某值</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3 id="特殊符号">特殊符号</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>特殊符号（组1）：<code>[</code>,<code>]</code>,<code>=</code>,<code>*</code>,<code>|</code>,<code>^</code>,<code>$</code>,<code>!</code>,<code>,</code></li>
|
|||
|
|
<li>特殊符号（组2）：<code>'</code>,<code>"</code></li>
|
|||
|
|
<li>特殊符号（组3）：<code>/</code></li>
|
|||
|
|
<li>特殊符号（组4）：<code>undefined</code></li>
|
|||
|
|
</ul>
|
|||
|
|
<blockquote>
|
|||
|
|
<p>特殊符号使用注意</p>
|
|||
|
|
</blockquote>
|
|||
|
|
<ul>
|
|||
|
|
<li>默认属性和值中间不能包含特殊符号（组1）。</li>
|
|||
|
|
<li>如果属性和值中确实需要使用特殊符号（组1），那么需要将属性或值用单引号或双引号包裹起来。此时可以使用特殊符号（组1）但是不能使用特殊符号（组2）</li>
|
|||
|
|
<li>当操作符是 <code>=</code> 时, 属性或值如果以 <code>//</code> 包裹起来，则以正则规则处理。</li>
|
|||
|
|
<li><code>undefined</code> 表示不存在， 字符串 <code>undefined</code> 也等于不存在。</li>
|
|||
|
|
<li>空格（其他空白字符）不是特殊符号，按照其原本的样子匹配，属性和值都可以以空白开头和结尾，书写时请注意避免不必要的空白。</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="数值选择器">数值选择器</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>[attribute==number]</code> 属性等于某值</li>
|
|||
|
|
<li><code>[attribute>number]</code> 属性大于某值</li>
|
|||
|
|
<li><code>[attribute>=number]</code> 属性大于等于某值</li>
|
|||
|
|
<li><code>[attribute<number]</code> 属性小于某值</li>
|
|||
|
|
<li><code>[attribute<=number]</code> 属性小于等于某值</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="组合选择器">组合选择器</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>逻辑与 <code>[s1][s2]</code></li>
|
|||
|
|
<li>逻辑或 <code>[s1],[s2]</code></li>
|
|||
|
|
<li>组合逻辑 <code>[s1],[s2][s3],[s4]</code> 逻辑与总是优先于逻辑或执行。</li>
|
|||
|
|
</ul>
|
|||
|
|
<h2 id="联系">联系</h2>
|
|||
|
|
<p>postmaster(a)fullstack.club</p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer class="main-footer sticky footer-type-1 fixed">
|
|||
|
|
<div class="footer-inner">
|
|||
|
|
<div class="footer-text">
|
|||
|
|
<strong>本站内容源自互联网，如有内容侵犯了你的权益，请联系删除相关内容，联系邮箱：postmaster@fullstack.club <br/>© 2021 - 2022 By <a href="https://www.fullstack.club">FullStack Club</a> | <a href="http://beian.miit.gov.cn/">浙ICP备14009836号-5</a><br/></strong>
|
|||
|
|
</div>
|
|||
|
|
<div class="go-up">
|
|||
|
|
<a href="#" rel="go-top">
|
|||
|
|
<i class="fa-angle-up"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="../assets/js/bootstrap.min.js"></script>
|
|||
|
|
<script src="../assets/js/TweenMax.min.js"></script>
|
|||
|
|
<script src="../assets/js/resizeable.js"></script>
|
|||
|
|
<script src="../assets/js/joinable.js"></script>
|
|||
|
|
<script src="../assets/js/xenon-api.js"></script>
|
|||
|
|
<script src="../assets/js/xenon-toggles.js"></script>
|
|||
|
|
|
|||
|
|
<script src="../assets/js/xenon-custom.js"></script>
|
|||
|
|
<textarea tabindex="-1" style="position: absolute; top: -999px; left: 0px; right: auto; bottom: auto; border: 0px; padding: 0px; box-sizing: content-box; word-wrap: break-word; overflow: hidden; transition: none; height: 0px !important; min-height: 0px !important; font-family: Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-transform: none; word-spacing: 0px; text-indent: 0px; line-height: 18.5714px; width: 53px;" class="autosizejs" id="autosizejs"></textarea>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|