<!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. javascript strict mode

    ECMAScript 版本5是目前最广泛使用的js版本. 其中的一个重要feature strict mode很多人不是很清除和理解. 什么是strict mode? strict mdoe是一种强制 ...

  2. Windows 7系统启动MongoDB失败解决办法？

    问题现象: 1.在配置Python环境安装MongoDB时发现在“服务”里面手动启动失败,报错如下: 2.在cmd里面也无法启动,注意这里要以管理员身份启动cmd哦 问题解决: 1.需要先在bin下执 ...

  3. CATransform3D的m34使用

    CATransform3D的m34使用 效果图 源码 // // ViewController.m // StarWars // // Created by YouXianMing on 15/11/ ...

  4. Mysql--通俗易懂的左连接、右连接、内连接

    刚开始看书的时候花了好长时间理解 先通俗易懂的描述下: left join(左联接): 返回包括左表中的所有记录和右表中联结字段相等的记录. right join(右联接): 返回包括右表中的所有记录 ...

  5. MVC中使用EF的技巧集（一）

    一.建好数据库后,向项目中添加数据模型. 1.右键点击“Models” 文件夹,选择“添加”,再选择“添加新项”. 2.在“添加新项”窗口,选择左边的“数据”,然后再在右边选择“ADO.NET 实体数 ...

  6. Hadoop HBase概念学习系列之HBase里的时间戳（二十六）

    HBase集群要求每个节点的时间必须同步.HBase对于节点的时间扭曲(time skew)容忍度很低(这和HDFS是不一样的). 这主要是因为HBase需要使用系统时间来产生时间戳.如果系统时间不同 ...

  7. November 24th 2016 Week 48th Thursday

    All the bright precious things fade so fast. 所有的光鲜靓丽都敌不过时间. What is permanent? Thoughts and ideas. P ...

  8. [2018HN省队集训D5T1] 沼泽地marshland

    [2018HN省队集训D5T1] 沼泽地marshland 题意 给定一张 \(n\times n\) 的棋盘, 对于位置 \((x,y)\), 若 \(x+y\) 为奇数则可能有一个正权值. 你可以 ...

  9. SAP 前端技术的演化史简介

    Jerry之前曾经写过一篇微信公众号文章,题目叫<> 关注我的公号"汪子熙"后,在历史菜单"前端开发相关"里即可找到这篇文章: 该文章简单回顾了SA ...

  10. Eclipse解决运行、启动缓慢问题思路

    我的Eclipse近几天运行时速度奇慢,具体表现为: 1.只要ECLIPSE启动后,硬盘灯就狂闪,不停的读盘: 2.发布TOMCAT经常在0%: 3.偶尔CPU占满: 网上讲优化的文章无数,但是总是有 ...