jquer基础篇二
jquery中的过滤选择器:
1.通过标签的内容来进行过滤
:contains(’内容关键字‘)
例:
$("input").click(function () {
$("p:contains('JJJ')").css("background", "red");
});
2.可见性选择器:
依赖于元素是否可见作为筛选的条件
:hidden 过滤出不可见的元素
:visible 过滤出可见的元素
举例:
1. <p style="display:none">hhh</p> //隐藏
2.
$("input").click(function () {
alert( $("p:hidden('hhh')").text());
});
3.循环遍历的方法
jquery对象.each(function(){
//函数体
});
//注意:
visibility:hidden这种隐藏方式通过:hidden无法过滤的00
opacity 0:透明度为0 不是隐藏
3.属性过滤选择器:
语法:$("基本选择器[属性名]") 过滤出制定属性的元素
$(基本选择器["属性名=属性值"]过滤出保函制定属性并且属性值为制定的值元素
$("input").click(function () {
$("p[title]").each(function () {
alert($(this).text());
});
jquery中提供与选择器相关的一些筛选方法:
链式操作:jquery操作的一个特色
这些方法返回的是选择到的jquery对象的方法
$("p[title=aaa]").each(function () {
alert($(this).css("background","red").css("color","blue"));
});
方法:
first()选中第一个元素//left();
$("input").click(function () {
$("p").first().css("background", "red");
});
//注意:过滤方法主要用于链式操作(提高性能)//链式操作的好处
end()结束当前链式操作并放回前面选择到的jquery对象
例:
$("input").click(function () {
$("p").first().css("background", "red").end;
});
1.last()/eq(index)//传入参数 等价于:eq(index)
2.fillter(":过滤选择器")
$("p").filter(":even").css("background", "red").end;//通过偶数进行过滤
3.not("基本选择器/过滤选择器")方法相当于:not()
例子:将单元格分成不同的颜色
$("input").click(function () {
$("#zz tr").filter(":even").css("background", "red").end().filter(":odd").css("background",
"blue");
});
3 根据元素之间的层次关系进行DOM筛选:
1.对象.children() 获取当前对象的所有子元素
不包括文本节点和空的文本节点
一般规律:只要是用来选择多个元素的方法都可以传入参数
2.对象.parent();直接选择上一级的元素
//jq写入选择器的时候别忘了写#或者.还有在写按钮的时要input
parent("参数") 选择所有的父元素
3.兄弟元素的选择方法:
next() 返回紧临当前对象的下一个兄弟元素
nextAll() 获取对象后所有兄弟元素
prev() 返回紧临上一个兄弟元素
prevAll()返回所有的兄弟元素
siblings()返回所有的对象元素除了当前对象自己本身
例:
<div>
我是大盒子
<div id="xz">
我是小盒子
<p>W</p>
<p>j</p>
</div>
</div>
<input type="button" value="测试" />
<script type="text/javascript">
var divd = $("#xz");
alert( divd.children().length);
jquer基础篇二的更多相关文章
- php基础篇-二维数组排序 array_multisort
原文:php基础篇-二维数组排序 array_multisort 对2维数组或者多维数组排序是常见的问题,在php中我们有个专门的多维数组排序函数,下面简单介绍下: array_multisort(a ...
- JavaScript笔记基础篇(二)
基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...
- Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析
转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编 ...
- NIO相关基础篇二
转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...
- docker+k8s基础篇二
Docker+K8s基础篇(二) docker的资源控制 A:docker的资源限制 Kubernetes的基础篇 A:DevOps的介绍 B:Kubernetes的架构概述 C:Kubernetes ...
- Python基础篇(二)_基本数据类型
Python基础篇——基本数据类型 数字类型:整数类型.浮点数类型.复数类型 整数类型:4种进制表示形式:十进制.二进制.八进制.十六进制,默认采用十进制,其他进制需要增加引导符号 进制种类 引导符号 ...
- node基础篇二:模块、路由、全局变量课堂(持续)
今天继续更新node基础篇,今天主要内容是模块.路由和全局变量. 模块这个概念,在很多语言中都有,现在模块开发已经成为了一种潮流,它能够帮助我们节省很多的时间,当然咱们的node自然也不能缺少,看下例 ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
- C语言----输入输出语句(基础篇二)
今天整理一下自己的基础篇输入和输出的理解,自己没有研究系统输入和输出函数,以后有时间在去深究,之前在别人的博客里面看到这么一句话分享给大家,“学习就是一个不断抄袭,模仿,练习和创新的一个过程”. 使用 ...
随机推荐
- CSS3 之 flexbox 响应式的未来
CSS3 之 flexbox 响应式的未来 flexbox 伸缩盒模型 . flex: CSS3中一个重要的而且非常有用的属性,用来制作弹性布局是非常的方便而又强大. . flex布局:旨在提供一个更 ...
- mysql遇到锁表常用命令
出现 waiting for table metadata lock 锁表的解决方法 1. show processlist; kill xxx; //xxx 为会话id 2.查询是否有未提交的事物 ...
- UI第九节——UIProgressView
- (void)viewDidLoad { [super viewDidLoad]; // 实例化 UIProgressView,高度是固定的 UIProgressView ...
- MYSQL(二)
上一篇文章讲的是mysql的基本操作,这一篇会有一点难以理解,本节主要内容mysql视图,存储过程,函数,事务,触发器,以及动态执行sql 视图view 视图是一个虚拟表,其内容由查询定义.同真实的表 ...
- CentOS 7.0,启用iptables防火墙
CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.service #停止fir ...
- ToolStripMenuItem
MenuStrip 类 为窗体提供菜单系统. 继承层次结构 System.Object System.MarshalByRefObject System.ComponentModel.Comp ...
- PHP - xhprof+Graphviz 安装配置
简介:XHProf是Facebook放出的轻量级调试工具.和Xdebug相比,XHProf更加易用和可控,尤其是生成流程图和调试数据对比的功能很好很强大. 参考:http://us2.php.net/ ...
- InnoDB全文索引:N-gram Parser【转】
本文来自:http://mysqlserverteam.com/innodb%E5%85%A8%E6%96%87%E7%B4%A2%E5%BC%95%EF%BC%9An-gram-parser/ In ...
- Oracle 过程中检查数据表存在与否
在过程中,尤其是每天执行的任务,通常要检查查询的数据表存在不存在,如果不存在则等待一段时间在进行执行,以下代码实现了这个功能,如果表不存在,抛出异常,交给异常处理代码,确保数据完整性 使用方法:p_C ...
- Spring的测试
spring测试要引用junit及spring-test <dependency> <groupId>junit</groupId> <artifactId& ...