jQuery笔记---选择器(二)
2024-08-31 18:06:39
1.选择器练习:
1)查找UL中的元素的内容
格式:$(“ul li:XX”).text() XX:代表方法
比如:获取到第一元素,然后获取当中的值
$(“ul li:first”).text()
获取最后一个元素,然后获取当中的值
$(“ul li:last”).text()
查找索引号是奇数的标签,索引号从1开始
$("ul li:odd").size();
查找表格的索引号为偶数行个数,索引号从0开始
$("table tr:even").size();
查找表格中第3行的内容,从索引号0开始
$("table tr:eq(2)");
查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
假如说有三条记录,为1和2的数据,可以理解为大于0的标签
$("table tr:ge(0).size()");
查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
可以理解为小于2的标签
$("table tr:lt(2)")
给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加绿色
$(":header").css('bgcolor','bule');
text() 和 html()方法的区别:
text()方法可以是XMl、HTML还可以是jsp,但是HTML()不可以将xml的属性值取出来。所以text()这个方法也是推荐是一种方法
Html()强调的是标签中的内容,即使标签中的指中的子标签,也会显示出来
Text()强调的是文本,只将值取出来
<body>
<ul>
<li>list item </li>
<li>list item </li>
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>
<table border="">
<tr><td>line1[]</td></tr>
<tr><td>line2[]</td></tr>
<tr><td>line3[]</td></tr>
<tr><td>line4[]</td></tr>
<tr><td>line5[]</td></tr>
<tr><td>line6[]</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查找UL中第一个元素的内容
$(“ul li:first”).text() 获取到第一个元素,然后获取他们里面的值
//2)查找UL中最后个元素的内容
$(“ul li:last()”).text() 最后一个
//3)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
$(“table tr:odd”).size() 获取为奇数的值
//4)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
$(“table tr:even”).size() 获取为偶数的值
//5)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
$(“table tr:eq()”)
//6)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
$(“table tr:gt().size()”)找出下标里面的值为0的。就是下标大于0的有几个
//7)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
$(“table tr:lt(2)”) 小于2
</script>
</body>
2.练习2
1)查找所有包含文本"kw"的div元素的个数查找一下,因为是数据,所以注意大小写
$(“div”).size() 获取到所有的div标签
$(“div:contains(‘kw’)”).size() 查找一下
/2)查找所有p元素为空的元素个数
$("p:empty").size() empty为空的。
3)给所有包含p元素的div元素添加一个myClass样式
查找div中含有p标签的,然后在后面加上自己的样式
$("div.has(p)").addclass("myClass");
4)查找所有含有子元素或者文本的p元素个数,即p为父元素
注意:p里面的数据是自己本身带有的,不是手动输入的。
$("p:parent").size();
练习
<body>
<div><p>kw Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom kw Sinclair</div>
<div>J. Ohn</div>
<div></div>
<p>kw啦啦啦</p>
<p></p>
<script type="text/javascript">
//1)查找所有包含文本"kw"的div元素的个数
$(“div”).size()
$(“div:contains(‘kw’)”).size()值是有大小写区分的。
//2)查找所有p元素为空的元素个数
$(“p:empty”).size() empty为空的
//3)给所有包含p元素的div元素添加一个myClass样式
$(“div:has(p)”).addClass(“myclass”)
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
$(“p:parent”).size()</script>
</body>
最新文章
- mybatis hibernate比较
- 一道关于阿里简单面试题的反思C/C++
- C++基础知识(1)----文件操作
- linux系统性能调优第一步——性能分析(vmstat)
- DEDECMS里面DEDE函数解析
- 使用jQuery页面加载函数启动定时任务
- 无法打开Android SDK Manager的解决办法
- MySQL使用Union创建视图报错
- jQuery层级元素选择器
- a href 相对路径 与绝对路径
- 流媒体开发之-腾讯体育NBA视频点播解析
- 怎样手势的判断android GestureDetector在android开发中
- linux_解压缩详解
- (HTTPS)-https原理及tomcat配置https方法
- CentOS7解决firefox无法启用ibus中文输入的问题
- Python 安装 (win10)
- [转]keepalived简介
- EmitMapper的使用小结
- python中关于类隐藏属性的三种处理方法
- [Optimization] Dynamic programming
热门文章
- 目标决定人生——没有目标就失去一切 (没有目标的奋斗是浪费青春,比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账)good
- android-从官网下拉源码(ubuntu)
- VS中创建自定义一个VC工程为基础的开发向导的总结
- 【Codeforces Round #427 (Div. 2) A】Key races
- spring之AOP(转)
- python生成md5, shell生成md5
- Android模拟、实现、触发系统按键事件的方法
- Maven和Ant的差别
- 更为详细的Txtsetup.sif文件解释
- centos6.*yum源更新