首页 > 其他分享 >jquery(三)选择器

jquery(三)选择器

时间:2022-11-04 19:07:50浏览次数:53  
标签:jquery color 元素 tr 包装 f00 选择器 css

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>03_select</title>

<meta name="author" content="Administrator" />

<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

$(function() {


//获取tr的元素个数

//alert($("tr").length);


//当执行了get之后得到的结果是一个js的元素

//$($("tr").get(1)).css("color","#f00");


//判断id为abc的tr在包装集的位置

// alert($("tr").index($("tr#abc")));


//在表达式中通过,可以分割多个包装集,

//但是如果包装集太多,而且有时候可以变动的时候,使用这种方式就不好操作

//$("tbody tr:eq(2),tr#abc").css("color","#f00");


/*

* 可以为包装集使用add方法,可以将新加入的元素添加到包装集中

*/

// $("tbody tr:eq(2)").add("thead tr td:eq(2)")

// .add("tr td:contains('3')").css("color","#f00");


//not方法可以将包装集中的元素取消掉


//$("tr").not("tr#abc").css("color","#f00");


//获取tr中位置小于3的元素

//$("tr").filter("tr:lt(3)").css("color","#f00");


//获取tr中的1,3形成一个新的包装集,返回的值就是新的包装集

// $("tr").css("background","#00f").slice(1,3).css("color","#f00");


//从包装集的内部获取相应的元素,返回的值也是新包装集

//$("table").find("tr#abc").css("color","#f00");


//is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td

//alert($("table").is("td:contains('用户')"));


//获取tbody中的所有元素为值等于3的tr子元素,返回的也是新包装集

//$("tbody").children("tr:eq(3)").css("color","#f00");


//找到下一个子元素,只是一个元素,返回新包装集

// $("tr#abc").next().css("color","#ff0");


//找到下一个组兄弟元素,所有元素,返回新包装集

// $("tr#abc").nextAll().css("color","#0f0");


//parent仅仅只是返回上一级的div,返回新包装集

// $("#s1").parent("div").css("color","#0f0");


//返回所有满足条件的父类节点,返回新包装集

// $("#s1").parents("div").css("color","#f00");


//返回第3个tr的所有兄弟节点,返回新包装集

var a = $("tr:eq(2)").siblings("tr").css("color","#f00").is("tr#abc");/
/siblings将自己排除

alert(a);

});

</script>

</head>

<body>

<div id="d1">

cdd

<div>

<span id="s1">abc</span>

</div>

</div>

<table width="700" border="1" align="center">

<thead>

<tr>

<td>用户标识</td>

<td>用户姓名</td>

<td>用户年龄</td>

<td>用户密码</td>

</tr>

</thead>

<tbody>

<tr id="abc">

<td>1</td>

<td>张三</td>

<td>23</td>

<td>abc123</td>

</tr>

<tr>

<td>2</td>

<td>李四</td>

<td>33</td>

<td>abc123</td>

</tr>

<tr>

<td>3</td>

<td>王五</td>

<td>13</td>

<td>abc123</td>

</tr>

<tr>

<td>4</td>

<td>赵六</td>

<td>45</td>

<td>abc123</td>

</tr>

<tr>

<td>5</td>

<td>朱琪</td>

<td>21</td>

<td>abc123</td>

</tr>

</tbody>

</table>

</body>

</html>

标签:jquery,color,元素,tr,包装,f00,选择器,css
From: https://blog.51cto.com/u_10028442/5824667

相关文章

  • jquery(一)
    页面加载完后加载jquery<scripttype="text/javascript"src="jquery-1.7.2.js"></script><scripttype="text/javascript">/*$(document).ready(function(){......
  • jquery获取父级容器高度
    //获取浏览器显示区域的高度console.log($(window).height());//获取浏览器显示区域的宽度console.log($(window).width());//获取页面的文档高度console.log($(documen......
  • CSS选择器大全48式
    00、CSS选择器CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器、类选择器、id选择器。伪类选择器就是元素的不同行为、状态,或逻辑。然后不同的选......
  • jqueryeasyui-datagrid-扩展-支持单元格编辑
    jqueryeasyui-datagrid很强大,可是在包含三五十个列的时候,datagrid行编辑器加载就忍无可忍了(这里用的IE浏览器,其他的浏览器稍微好些)因为写了一个日期&时间的编辑器的扩......
  • CSS 常用选择器
    CSS常用选择器1.id选择器#i1{ background-color:#2459a2 height:80px}2.class选择器.i1{ background-color:#2459a2 height:80px}<divclass="i1"><......
  • jquery获取所有子元素遍历_Cypress 页面元素基本操作方式
    获取DOM元素基本方式.find(selector)搜索定位元素.get(selector)搜索定位元素.contains(selector)搜索定位元素.children()方法用来获取DON元素的子元素.parents......
  • [Java web]-- jquery自动填充input框(如百度搜索一样,出现模糊提示)
    一、基本思路如下 第一个html页面:<htmllang="en"><head>  <metacharset="GBK"/>  <title>页面</title>  <linkrel="stylesheet"href="http://code.jq......
  • [Java web]-- jquery设置元素成为disabled
    对元素应用disabled和readonly属性的方法,如下:  1.readonly属性举例  $('input').attr("readonly","readonly");     //将input元素设置为readonly ......
  • 手把手教你用DevExpress WinForm添加和自定义工具栏皮肤选择器
    DevExpressWinForm拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office......
  • 【Android】时间选择器,选择日期DatePicker 简单详解demo及教程
    作者:程序员小冰,GitHub主页:​​https://github.com/QQ986945193​​新浪微博:​​http://weibo.com/mcxiaobing​​首先给大家看一下我们今天这个最终实现的效果图:这个......