jQuery之位置选择器

针对整个页面而言的位置选择器

:first获取第一个元素

:last获取最后一个元素

:odd匹配所有索引值为奇数的元素，从0 开始计数

:even匹配所有索引值为偶数的元素，从0 开始计数

:eq(n)匹配一个给定索引值的元素

:gt(n)匹配所有大于给定索引值的元素

:lt(n)匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器

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

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

:only-child如果某个元素是父元素中唯一的子元素，将会被匹配

:nth-child(n) :nth-child(odd|even) :nth-child(xn+y)匹配其父元素下的第N个子或奇偶元素

注意：nth-child()选择器编号是从1开始，而其他选择器从0开始

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>位置选择器</title> <style type="text/css"> div{ border: 1px solid  red; } .myClass{ background-color:  aqua; } </style> <script src="js/jquery.min.js"   ></script><script type="text/javascript"> $(function(){ //位置针对整个页面 //:first     :last   :odd   :even   //$("p:first").addClass("myClass"); //$("p:last").addClass("myClass"); //$("p:odd").addClass("myClass");//索引从0开始 奇数的索引 1 3 5 第偶数的元素//$("p:even").addClass("myClass"); ////:eq(n)     :gt(n)   :lt(n) //$("p:eq(4)").addClass("myClass");   //equals //$("p:lt(4)").addClass("myClass");//less   than  //$("p:gt(4)").addClass("myClass");//greater   than //位置针对上级标签 //:first-child    :last-child   :only-child //$("p:first-child").addClass("myClass"); //$("p:last-child").addClass("myClass"); //$("p:only-child").addClass("myClass"); //:nth-child(n)   :nth-child(odd|even) :nth-child(xn+y)//索引从0开始 只有此处从1开始//$("p:nth-child(2)").addClass("myClass");//$("p:nth-child(odd)").addClass("myClass"); //$("p:nth-child(even)").addClass("myClass"); //$("p:nth-child(3n+1)").addClass("myClass");//n=0,1,2,3 });</script> </head>   <body> <div> <p>1.   JavaSE</p><p>2.   Oracle</p></div> <div> <p>3.   HTML/CSS/JS</p><p>4.   jQuery/EasyUI</p><p>5.   JSP/Servlet/Ajax</p></div> <div> <p>6.   SSM</p>  <p>7.   SpringBoot/SpringCloud/SpringData</p><p>8.   Maven/Linux/p> <p>9.   Redis/Solr/Nginx</p> <p>10.   SpringBoot/SpringCloud/SpringData</p> <p>11.   SpringBoot/SpringCloud/SpringData</p> <p>12.   SpringBoot/SpringCloud/SpringData</p> </div> <div> <p>13. 就业指导</p> </div> </body>
</html>

jQuery之位置选择器相关推荐

jQuery学习- 位置选择器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>位置选 ...
转：初探 jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
jQuery基础：选择器、动画、DOM操作和事件等
本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 文章目录 *1.选择器 1.1 DOM和jQuery比较 1.2 隔行变色 1.3 层 ...
jQuery 的 Sizzle 选择器
这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...
【JavaLearn】（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
目录 1. jQuery定义和特点 1.1 jQuery 入门 1.2 jQuery对象和DOM对象 2. jQuery 选择器 2.1 基本选择器 2.2 属性选择器 2.3 位置选择器 2.4 表 ...
【JavaLearn】#（22）jQuery介绍、选择器、事件、动画、DOM编程、操作CSS、表单验证
1. jQuery定义和特点 1.1 jQuery 入门对 JavaScript 进行了封装,降低了使用JavaScript的难度,可以大幅提高开发效率(Write less, do more) j ...
jQuery入门、选择器、事件、静态方法、动画
目录第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuer ...
jquary学习（二）jquary的使用，jQuery中的选择器
目录首先在官网下载jquary的js文件 html页面文件里面引入 jQuery中的选择器基本选择器 id 选择器标签选择器 $("a") 类选择器 $(".cla ...
jQuery系列第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元素的标签名.属性名.状态等进行快速准确 ...

jQuery之位置选择器

针对整个页面而言的位置选择器

针对上级标签而言的位置选择器

jQuery之位置选择器相关推荐

最新文章

热门文章