<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>位置选择器</title>

        <script src="js/jquery.js"></script>

        <script type="text/javascript">

        $(function(){

            //获取第一个li

            $("li:first").css("border","2px dotted red");

            //获取最后一个出现的DIV

            $("div:last").css("border","2px dotted black");

            //奇数 odd 段落，在jQuery中所有的元素从0开始

            $("p:odd").css("border","2px dotted blue");

            //偶数 even 输入框

            $("input[type='text']:even").css("border","2px dotted orange");

            //第三个超链接 使用eq精确指定组建下标位置

            $("a:eq(2)").css("border","2px dotted lightblue");

            //获取第三个之后的超链接 使用gt获取指定位置之后的所有元素

            $("a:gt(2)").css("border","3px dotted red");

            //利用lt获取指定位置之前的元素

            $("p:lt(1)").css("border","4px soild red");

        })

        </script>

    </head>

    <body>

    <div>

    <ul>

    <li>li111111</li>

    <li>li2222222</li>

    <li>li33333</li>

    </ul>

    </div>

    <div>

        <p>p1</p>

        <p>p2</p>

        <p>p3</p>

        <p>p4</p>

        <p>p5</p>

    </div>

    <div>

        姓名<input type="text" />

        <br>

                姓名1<input type="text" /><br>

                        姓名2<input type="text" /><br>

                                姓名3<input type="text" /><br>

                                        姓名4<input type="text" /><br>

                                                姓名5<input type="text" /><br>

    </div>

    <div>

        <a href="#">href1</a>

        <a href="#">href2</a>

        <a href="#">href3</a>

        <a href="#">href4</a>

        <a href="#">href5</a>

    </div>

    </body>

</html>

jQuery学习- 位置选择器的更多相关文章

  1. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jquery 学习(一) - 选择器

    基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...

  3. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery学习- 层叠选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery学习-属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery学习-基本选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jQuery学习之------选择器

    a.id选择器 <div id=”test1”></div> var div1=$(“#test1”);                //同css的写法一样id选择器用#号实 ...

  8. jquery学习：选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  9. jQuery学习(三)——选择器总结

    1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...

随机推荐

  1. 固定UILabel宽度分行显示

    固定UILabel宽度分行显示 这种小伎俩估计都被用烂了,笔者给大家提供一个category文件,供大家简单设置哦. 各种富文本效果哦(普通文本也是可以用的呢): 3行,固定宽度200 2行,固定宽度 ...

  2. 解决win 和 ubuntu 虚拟机之间 无法 复制粘贴的问题，以及重装vmtool后，还是无法解决的办法

    第一步:重新安装vmware-tool 我这里已经装过了,所以显示这个,不然应该是显示:安装 VMware Tools 它会打开一个文件夹,把压缩包复制到任一个地方解压,执行.pl的那个文件:sudo ...

  3. Linux cal命令详解

    cal 显示指定月份的日历 常见命令参数 NAME cal - displays a calendar SYNOPSIS cal [-smjy13] [[[day] month] year] DESC ...

  4. 数据库初始化以及制作为Windows服务

    前面的博客里我讲述了一些安装过程中会出现的问题以及解决方法,下面我讲一下基本的操作. 1.初始化:(我们要现在数据库里面创建一个data文件,这里是存放数据的地方,所以要是重要的数据已经记得看清楚了删 ...

  5. (1)网络编程的常识 (2)基于tcp协议的编程模型 (3)tcp协议和udp协议的比较 (4)基于udp协议的编程模型

    1.网络编程的常识 目前主流的网络通讯软件有:微信.QQ.YY.陌陌.探探.飞信.阿里旺旺.... 在吗? 1.1 七层网络模型(熟悉) 为了保证数据传递的可靠安全等等,ISO(国际标准委员会组织)将 ...

  6. 论文 ClickP4: Towards Modular Programming of P4 小结

    当前P4存在的问题(ClickP4为解决的问题) 1.随着P4程序的规模和复杂性的增加,从零开始开发单片P4程序容易出错,需要相当多的时间和精力去解决,所以网络政策的多样性和动态性使得运营商为了满足要 ...

  7. python SQLAlchemy复习

    下面的代码主要使用SQLAlchemy的ORM思想实现查询单词的功能: 实现输入一个单词,查询出与输入单词接近的单词以及单词的意思. 主要有以下三步: 1.创建数据表 2.插入数据 3.查询数据 1. ...

  8. 用python解析word文件（一）：paragraph

    太长了,我决定还是拆开三篇写.   (一)段落篇(paragraph)(本篇) (二)表格篇(table) (三)样式篇(style) 选你所需即可.下面开始正文. 最近公司的项目,需要在页面上显示w ...

  9. ab网站压力测试命令的参数、输出结果的中文注解

    ab命令原理 Apache的ab命令模拟多线程并发请求,测试服务器负载压力,也可以测试nginx.lighthttp.IIS等其它Web服务器的压力. ab命令对发出负载的计算机要求很低,既不会占用很 ...

  10. UVa 10213 - How Many Pieces of Land ?（欧拉公式）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...