<!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">

 <head>

  <title>子元素选择器</title>

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

  <style type="text/css">

  .yang{ border-collapse: collapse; width:500px;height:30px;border:1px solid red;"}

  </style>

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

  <script type="text/javascript">

  /*

    :nth-child(index/even/odd)  //匹配指定索引，或偶数，或奇数的元素（索引从1开始）

    :first-child  //匹配第一个子元素

    :last-child   //匹配最后一个子元素

    :only-child  //如果元素为父元素的唯一子元素则匹配

  */

        window.onload=function(){

        $('#btnOk').click(function(){

            //匹配第一个子元素

            //$('ol li:first-child ').html('水浒传');

            //匹配指定索引

             // $("ol li:nth-child(3)").html('杨在鲁');

             //如果元素为父元素的唯一子元素则匹配

                $("ol li:only-child").html('杨在鲁');

            });

        };

  </script>

 </head>

 <body>

    <ol>

        <li>三国演义</li>

        <li>西游记</li>

        <li></li>

        <li>红楼梦</li>

    </ol>

        <ol>

        <li>义</li>

    </ol>

  <hr/>

  <input type="button" id='btnOk' value='确定'  />

 </body>

</html>

jquery子元素选择器的更多相关文章

  1. 一个样例看清楚JQuery子元素选择器children()和find()的差别

    近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...

  2. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  3. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  4. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  5. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  6. CSS选择器的组合选择器之后代选择器和子元素选择器

    实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  7. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. weex中css不能使用子元素选择器

    weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

随机推荐

  1. 博文写作——摘要&摘要图标

    问题描述: 写博文的时候,一个比较好的习惯就是在博文的开头用简短的文字介绍一下本篇博文的大致内容.在博客园系统里面,如果博文没有在指定的地方添加摘要内容,那么系统会自动截取博文的开始部分作为摘要.如下 ...

  2. PHP中Trait特性

    Trait是自 PHP 5.4.0 起添加的一个新特性,是 PHP 多重继承的一种解决方案.例如,需要同时继承两个 Abstract Class, 这将会是件很麻烦的事情,Trait 就是为了解决这个 ...

  3. Atitit 编程语言常用算法attilax总结

    Atitit 编程语言常用算法attilax总结 1. 编译算法分类and   数据操作算法.1 1.1. Tab driver stat  状态转换表格算法1 1.2. Nest case 词法分析 ...

  4. seajs模块化开发

    seajs是一个起辅助作用的库,所以它可以更方便开发,而它可以解决以下问题: 1.命名问题,就是冲突 2.性能问题,就是只要一个功能,但却使用一个大插件中的一个小功能,所以要手动拆分出这个功能 3.j ...

  5. BrowserSync前端调试工具使用

    上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便 ...

  6. KendoUI系列：DropDownList

    1.基本使用 1>.创建Input <input id="dropDownList" /> <link href="@Url.Content(&q ...

  7. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  8. .NET应用服务器

    昨天参加Oracle的一个活动,知道了WebLogic的强大,于是对应用服务器产生了兴趣. WebLogic是一个Java EE应用服务器(与Java EE对应的另外一个技术平台就是.NET). 为什 ...

  9. Java多线程系列--“JUC线程池”02之 线程池原理(一)

    概要 在上一章"Java多线程系列--“JUC线程池”01之 线程池架构"中,我们了解了线程池的架构.线程池的实现类是ThreadPoolExecutor类.本章,我们通过分析Th ...

  10. 必应词典3.2去广告备忘笔记(转摘于roustar31)

    下载安装包后,沙盘运行,得到本体BingDict_Setup.msi文件,起作用的就是这个,其他的无视了.使用命令行参数:msiexec /a "d:\BingDict_Setup.msi& ...