当前位置:首页 > jQuery技术文章 > jquery选择器之基本过滤选择器详解

实例详解jquery基本过滤选择器

  • 发布时间:
  • 作者:码农之家原创
  • 点击:75

这篇文章主要知识点是关于jquery、过滤选择器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

jquery选择器之基本过滤选择器详解

 

<style type="text/css">
  /*高亮显示*/
  .highlight{  
   background-color: gray
  }
 </style>

 

<body>
   <h3>各省市行政区划</h3>
   <table border="1" width="50%">
    <thead>
     <tr>
      <th>北京</th>
      <th>上海</th>
      <th>商丘</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>海淀</td>
      <td>徐汇</td>
      <td>睢阳</td>
     </tr>
     <tr>
      <td>朝阳</td>
      <td>闸北</td>
      <td>梁园</td>
     </tr>
     <tr>
      <td>昌平</td>
      <td>黄埔</td>
      <td>柘城</td>
     </tr>
    </tbody>
   </table>
  </body>

一、:first
 

$("tr:first").addClass("highlight"); //获取匹配的第一个tr元素

jquery选择器之基本过滤选择器详解

二、:last()
 

$("tr:last").addClass("highlight"); //获取匹配的最后一个tr元素

jquery选择器之基本过滤选择器详解

三、:not(selector)
 

$("td:not(:even)").addClass("highlight");//获取除了索引是偶数的td

jquery选择器之基本过滤选择器详解


四、:even
 

$("tr:even").addClass("highlight");  //匹配所有索引值为偶数的元素,从 0 开始计数

jquery选择器之基本过滤选择器详解

五、:odd
 

$("tr:odd").addClass("highlight");  //匹配所有索引值为奇数的元素,从 0 开始计数

jquery选择器之基本过滤选择器详解

六、:eq(index)
 

$("tr:eq(2)").addClass("highlight");   //匹配一个给定索引值的元素

jquery选择器之基本过滤选择器详解

七、:gt(index)
 

$("tr:gt(1)").addClass("highlight");  //匹配所有大于给定索引值的元素

jquery选择器之基本过滤选择器详解

八、:lt(index)
 

$("tr:lt(2)").addClass("highlight");  //匹配所有小于给定索引值的元素

jquery选择器之基本过滤选择器详解

九、:header
 

$(":header").addClass("highlight");   //匹配如 h1, h2, h3之类的标题元素

jquery选择器之基本过滤选择器详解

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.978708

jQuery子元素过滤选择器用法示例

本文实例讲述了jQuery子元素过滤选择器用法。分享给大家供大家参考,具体如下: htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title/titlescript src="js/jquery-1.10.1.min.js" type="text/javascript"/scriptscript src="js/assist.js" type="text/javascript"/scriptlink rel="stylesheet" type="text/css" href="css/style.css" /script type="text/javascript"$(document).ready(function(){ //选取每个父元素下的第2个子元素 $('#btn1').click(function(){ $('div.one :nth-child(2)').css("background","#bbffaa"); }) //选取每个父元素下的第一个子元素 $('#btn2').click(function(){ $('div.one :first-child').css("background","#bbffaa"); }) //选取每个父元素下的最后一个子元素 $('#btn3').click(function(){ $('div.one :last-child').css("background","#bbffaa"); }) //如果父元素下的仅仅只有一个子元素,那么选中这个子元素 $('#btn4').click(function(){ $('div.one :only-child').css("background","#bbffa……

网友NO.163282

jquery子元素过滤选择器使用示例

:nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始; //偶数行 //$('li:nth-child(even)').addClass('class1'); //奇数行 //$('li:nth-child(odd)').addClass('class1'); //第一行 //$('li:nth-child(1)').addClass('class1'); //$('li:first-child').addClass('class1'); //只有1个子元素 $('li:only-child').addClass('class1'); ……

网友NO.305595

jquery可见性过滤选择器使用示例

script src="Jquery1.7.js" type="text/javascript"/script script type="text/javascript" $(function () { $('#btn').click(function () { //$('span:hidden').addClass('class1').show(); $(':hidden').addClass('class1').show(); //$('div:visible').addClass('class1'); $('div:visible').addClass('class1'); }) }) /script /head body form id="form1" div 第一层/div span Hidden/span input type="button" id="btn" value="显示" / /form /body ……

网友NO.801738

jQuery表单元素过滤选择器用法实例分析

本文实例讲述了jQuery表单元素过滤选择器用法。分享给大家供大家参考,具体如下: 前面jQuery内容过滤选择器与子元素过滤选择器,其中的例子稍微多一些解释也有点绕口,希望能帮助大家理解。今天学习表单元素过滤选择器,下面请看使用方法。 一、:enabled 选择器::enabled 描述:匹配所有可用元素 返回值:元素集合 示例: $("input.mini:enabled")//input.mini是DOM元素集合,:enabled是过滤条件 二、:disabled 选择器::disabled 描述:匹配所有不可用元素 返回值:元素集合 示例: $("input.mini:disabled")//input.mini是DOM元素集合,:disabled是过滤条件 三、:checked 选择器::checked 描述:匹配所有被选中的元素(复选框、单选框等,不包括select中的option) 返回值:元素集合 示例: //【写法1】写法1与写法2等价var checkedValues = $("input[type='checkbox']:checked")//input[type='checkbox']是DON元……

网友NO.541428

JQuery中属性过滤选择器用法实例分析

本文实例讲述了JQuery中属性过滤选择器用法。分享给大家供大家参考。具体如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title属性过滤选择器/titlestyle type="text/css"div{width:200px;border:1px solid red;margin:10px auto;} /stylescript src="jquery-1.6.2.min.js" type="text/javascript"/scriptscript type="text/javascript"$(function () { //==========举例1================ //: $("div[id]") ; 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签. showElements($("div[id]")); //==========举例2================ //$("div[myTag]='tt2') 匹配给定的属性是某个特定值的元素 //匹配div中myTag属性为tt2的div alert($("div[myTag='tt2']").attr("myTag")); //注意中括号的结束位置 //==========举例3============……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757