jquery智能筛选代码(代码筛选数据)
admin 发布:2022-12-19 23:58 221
本篇文章给大家谈谈jquery智能筛选代码,以及代码筛选数据对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
jquery的筛选有哪些
jQuery提供了强大的选择器让我们获取对象。在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件。选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象
1.选择对象
1).基本
·#id 根据给定的ID匹配一个元素。例如:$("#id")
·element 根据给定的元素名匹配所有元素。例如:$("div")
·.class 根据给定的类匹配元素。例如:$(".style1");
·* 匹配所有元素。例如:$("*")
·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如:$("#id,div,.style1")
2).表单
·:button 匹配所有按钮。例如:$(":button")
·:checkbox 匹配所有复选框。例如:$(":checkbox")
·:file 匹配所有文件域。例如:$(":File")
·:hidden 匹配所有不可见元素,或者type为hidden的元素。例如:$("input:hidden")
·:image 匹配所有图像域。例如:$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")
·:password 匹配所有密码框。例如:$(":password")
·:radio 匹配所有单选按钮。例如:$(":radio")
·:reset 匹配所有重置按钮。例如:$(":reset")
·:submit 匹配所有提交按钮。例如:$(":submit")
·:text 匹配所有的单行文本框。例如:$(":text")
·:header 匹配如 h1, h2, h3之类的标题元素。例如:$(":header").css("background", "#EEE");
2.筛选条件
1).属性筛选
·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如:$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!='man');
·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如:$("input[name$='man']")
·[attribute=value] 匹配给定的属性是某个特定值的元素。例如:$("input[name='man']");
·[attribute] 匹配包含给定属性的元素。例如:$("div[id]")
·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如:$("input[name^='man']")
·[selector1][selector2][selectorN] 同时满足多个条件。例如:$("input[id][name$='man']")
·:hidden 匹配所有的不可见元素。例如:$("tr:hidden")
·:visible 匹配所有的可见元素。例如:$("tr:visible")
·:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。例如:$("input:checked")
·:disabled 匹配所有不可用元素。例如:$("input:disabled")
·:enabled 匹配所有可用元素。例如:$("input:enabled")
·:selected 匹配所有选中的option元素。例如:$("select option:selected")
2).内容筛选
·:contains(text) 匹配包含给定文本的元素。例如:$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$("td:empty")
·:has(selector) 匹配含有选择器所匹配的元素的元素。例如:$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如:$("td:parent")
3).层级筛选
·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如:$("form input")
·parent child 在给定的父元素下匹配所有的子元素。例如:$("form input")
·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如:$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$("form ~ input")
·:first-child 匹配第一个子元素。例如:$("ul li:first-child")
·:last-child 匹配最后一个子元素。例如:$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如:$("ul li:nth-child(2)")
·:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。例如:$("ul li:only-child")
4).方法筛选
·:animated 匹配所有正在执行动画效果的元素。例如:$("div:animated");
·:eq(index) 匹配一个给定索引值的元素。例如:$("tr:eq(1)")
·:even 匹配所有索引值为偶数的元素,从 0 开始计数。例如:$("tr:even")
·:first 匹配找到的第一个元素。例如:$("tr:first")
·:gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数。例如:$("tr:gt(0)")
·:last 匹配找到的最后一个元素。例如:$("tr:last")
·:lt(index) 匹配所有小于给定索引值的元素。例如:$("tr:lt(2)")
·:not(selector) 去除所有与给定选择器匹配的元素。例如:$("input:not(:checked)")
·:odd 匹配所有索引值为奇数的元素,从 0 开始计数。例如:$("tr:odd")
jQuery基本筛选选择器实例代码
本文实例为大家分享了jQuery基本筛选选择器的具体代码,供大家参考,具体内容如下
!DOCTYPE
html
html
head
meta
http-equiv="Content-type"
content="text/html;
charset=utf-8"
/
title/title
link
rel="stylesheet"
href="imooc.css"
type="text/css"
script
src=""/script
/head
body
h2基本筛选器/h2
h3:first/:last/:even/:odd/h3
div
class="left"
div
class="div"
pdiv:first/p
p:even/p
/div
div
class="div"
p:odd/p
/div
div
class="div"
p:even/p
/div
div
class="div"
p:odd/p
/div
div
class="div"
p:even/p
/div
div
class="div"
pdiv:last/p
p:odd/p
/div
/div
script
type="text/javascript"
//找到第一个div
$(".div:first").css("color",
"#CD00CD");
/script
script
type="text/javascript"
//找到最后一个div
$(".div:last").css("color",
"#CD00CD");
/script
script
type="text/javascript"
//:even
选择所引值为偶数的元素,从
开始计数
$(".div:even").css("border",
"3px
groove
red");
/script
script
type="text/javascript"
//:odd
选择所引值为奇数的元素,从
开始计数
$(".div:odd").css("border",
"3px
groove
blue");
/script
h3:eq/:gt/:lt/h3
div
class="left"
div
class="aaron"
p:lt(3)/p
/div
div
class="aaron"
p:lt(3)/p
/div
div
class="aaron"
p:eq(2)/p
/div
div
class="aaron"
/div
div
class="aaron"
p:gt(3)/p
/div
div
class="aaron"
p:gt(3)/p
/div
/div
script
type="text/javascript"
//:eq
//选择单个
$(".aaron:eq(2)").css("border",
"3px
groove
blue");
/script
script
type="text/javascript"
//:gt
选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border",
"3px
groove
blue");
/script
script
type="text/javascript"
//:lt
选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color",
"#CD00CD");
/script
h3:not/h3
div
class="left"
div
input
type="checkbox"
name="a"
/
pAaron/p
/div
div
input
type="checkbox"
name="b"
/
p慕课/p
/div
div
input
type="checkbox"
name="c"
checked="checked"
/
p其他/p
/div
/div
script
type="text/javascript"
//:not
选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色
$("input:not(:checked)
+
p").css("background-color",
"#CD00CD");
/script
/body
/html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
jquery如何实现一个表格的筛选,也就是按条件查找筛选
1、首先新建html文档,向下查找兄弟标签:.next()。
2、jquery支持链式操作,向下查找兄弟标签的兄弟标签:.next().next()。
3、接着向下查找所有兄弟标签:nextAll(),向下查找一直找到某个条件为止:nextUntil('条件')。
4、向上查找兄弟标签:.prev(),向上查找所有兄弟标签:prevAll(),向上查找一直找到某个条件为止:prevUntil('条件')。
5、最后查找父标签:parent(),查找所有父标签:parents(),如果没有人拦着,会一直找找到最上面的父标签(没什么用),条件满足时停止查找:parentsUntil('body') 。
jquery多种条件筛选
script src="jquery-1.10.2.js"/script
script
$(function(){
$("#tj1 span,#tj2 span,#gd1 span,#gd2 span,#gd3 span").click(function(){
$(this).clone(true).appendTo("#yxtj")
});
})
/script
style
span{
margin-left:10px;
}
#gd1 span,#gd2 span,#gd3 span{
display:none;
}
/style
body
div style="background:#aaa; color:#fff;width:60%"已选条件:
div id="yxtj"/div
/div
div id="tj1"
条件1:span class="tj1"条件11/spanspan class="tj1"条件12/spanspan class="tj1"条件13/span
/div
div id="tj2"
条件2:span class="tj2"条件21/spanspan class="tj2"条件22/spanspan class="tj2"条件13/span
/div
div id="gd"
更多:span class="gd" id="gdtj1"更多1/spanspan class="gd" id="gdtj2"更多2/spanspan class="gd" id="gdtj3"更多3/span
/div
div
div id="gd1"
span id="gd11"更多11/spanspan id="gd12"更多12/spanspan id="gd13"更多13/span
/div
div id="gd2"
span id="gd21"更多21/spanspan id="gd22"更多22/spanspan id="gd23"更多23/span
/div
div id="gd3"
span id="gd31"更多11/spanspan id="gd32"更多32/spanspan id="gd33"更多33/span
/div
/div
/body
时间仓促,仅供参考,还有许多需要完善的地方
关于jquery智能筛选代码和代码筛选数据的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:包含网络直播系统代码的词条
- 下一篇:笑脸matlab代码(matlab教程菜鸟)
相关推荐
- 05-18足球比赛今日最新推荐,足球比赛今日最新推荐数据
- 05-17百度搜索大数据查询,百度实时大数据
- 05-17疫情死亡最新数据消息,疫情死亡最新数据消息今天
- 05-16贷款客户大数据精准获客,信贷员10大获客软件
- 05-09网页代码,网页代码快捷键
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
- 05-06付费观看代码php(付费观看代码)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接