<!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. Java-继承 共3题

    一.实现一个名为Person的类和它的子类Employee,Employee有两个子类Faculty和Staff.具体要求如下: (1)Person类中的属性有:姓名name(String类型),地址 ...

  2. Java-练习方法之模拟摇号抽奖

    3.采用多种算法,模拟摇奖:从1-36中随机抽出8个不重复的数字 int[] shuzu=new int[8]; Random ran=new Random(); for(int i=0;i<s ...

  3. 基础才是重中之重~方法override详解

    回到 目录 之所以写这篇文章,完全是因为这次代码审核,这次代码审核过程当中,出现了很多我认为基础知识不够扎实的问题,所以,打算把它们记录下来,共大家分享. 方法的override,即方法的覆写或者重写 ...

  4. EF架构~XMLRepository仓储的实现~续(XAttribute方式）

    回到目录 之前我写过关于XMLRepository仓储的实现的文章,主要是针对XElement方式的,对于XML的结构,一般来说有两种,一是使用节点方式的,我习惯称为XElement方式,别一种是属性 ...

  5. Atitit python3.0 3.3 3.5 3.6 新特性 Python2.7新特性1Python 3_x 新特性1python3.4新特性1python3.5新特性1值得关注的新特性1Pyth

    Atitit python3.0 3.3 3.5 3.6 新特性 Python2.7新特性1 Python 3_x 新特性1 python3.4新特性1 python3.5新特性1 值得关注的新特性1 ...

  6. 高性能Cordova App开发学习笔记

    高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...

  7. cordova添加platform

    cordova添加platform 一般需要指定版本的 cordova platform add android@4.1

  8. Findbugs介绍及使用方法

    1.   简介 Findbugs 是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.利用这个工具,就可以在不实际运行程序的情况对软件进行分析.它可以帮助改 ...

  9. Java——List集合

    package om.hanqi.test; import java.util.ArrayList; import java.util.List; public class Test01 { publ ...

  10. 第五节：表单标签的用法——value绑定和修饰符

    1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如:  v-model ...