您的位置：首页 > Web前端 > JQuery

jQuery 自定义选择器及应用

2017-04-03 17:56 495 查看

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<input type="text">
<ul>
<ol>0</ol>
<ol>01</ol>
<ol>012</ol>
<ol>0123</ol>
<ol>01234</ol>
<ol>012345</ol>
<ol>0123456</ol>
<ol>01234567</ol>
<ol>012345678</ol>
<ol>0123456789</ol>
<ol>0123456789</ol>
</ul>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script>
$.expr[':'].haveText = function (obj, index, meta, stack) {
/* obj   - is a current DOM element 当前DOM元素
index - the current loop index in stack 当前元素在stack中的索引，
meta  - meta data about your selector !!! 用来存参数值，详见带参数的自定义选择器。
stack - stack of all elements to loop 选择器所选中的元素集。

Return true to include current element 返回 true 就包含当前元素
Return false to explude current element 返回 false 就抛弃当前元素
*/
return (obj.textContent || obj.innerText || "").toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;
};
$(function () {
$("input").change(function () {
var val = $(this).val();
if (!val) {
$("ol").slideDown();
return;
}
var $showOl = $("ol:haveText(" + val + ")")
$("ol").not($showOl).slideUp();
$showOl.slideDown();
}).keyup(function () {
$(this).change();
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航