jQuery 获取对象 定位子对象
选择中的特殊符号:
# 指示 id
. 指示 class
* 全选
, 多选
空格 后代
> 子
~ 兄弟
+ 下一个
: 子(多功能)
() 函数式的过滤与查找
获取 div 下的所有标题对象: $("div :header")
代码如下:
<body>
<h3>AAA</h3>
<p>BBB</p>
<h4>CCC</h4>
<div>
<h3>DDD</h3>
<p>EEE</p>
<h4>FFF</h4>
</div>
</body>
<body>
<h3>AAA</h3>
<p>BBB</p>
<h4>CCC</h4>
<div>
<h3>DDD</h3>
<p>EEE</p>
<h4>FFF</h4>
</div>
</body>
获取 first, 如: $("li:first") 或 $("li").first() 或 $("ul :first") 或 $("ul li:first")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取每组的 first, 如: $("li:first-child") 或 $("ul li:first-child") 或 $("ul :first-child")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取 last, 如: $("li:last") 或 $("li").last() 或 $("ul :last") 或 $("ul li:last")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取每组的 last, 如: $("li:last-child") 或 $("ul li:last-child") 或 $("ul :last-child")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取第几个, 如(获取第三个, eq 是 0 起): $("li:eq(2)") 或 $("li").eq(2)
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取第几个之后的, 如(获取第三个之后的, gt 是 0 起): $("li:gt(2)")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取第几个之前的, 如(获取第三个之前的, lt 是 0 起): $("li:lt(2)")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取索引值是偶数的, 如(even 是 0 起): $("li:even")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取索引值是奇数的, 如(odd 是 0 起): $("li:odd")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取每组第偶数个, 如(nth-child 是 1 起): $("li:nth-child(even)")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取每组第奇数个, 如(nth-child 是 1 起): $("li:nth-child(odd)")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
获取每组第几个, 譬如第 2 个(nth-child 是 1 起): $("li:nth-child(2)")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
用表达式指示每组的第几个, 如(nth-child 是 1 起): $("li:nth-child(3n-1)")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
如果是父元素中唯一的子元素, 如: $("li:only-child")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
:not 是对其他选择的取反, 如: $("li:not(li:first-child)")
代码如下:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
<li>GGG</li>
</ul>
<ul>
<li>111</li>
</ul>
<ul>
<li>XXX</li>
<li>YYY</li>
<li>ZZZ</li>
</ul>
相关推荐
-
Android百度定位导航之基于百度地图移动获取位置和自动定位
一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyApplication类 public class MyApplication extends Application { static MyApplication myApplication; BMapManager mBMapManager = null; String mStrKey = "7ZfuR
-
Fullpage.js固定导航栏-实现定位导航栏
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工
-
jQuery判断div随滚动条滚动到一定位置后停止
实现代码: 复制代码 代码如下: <script type="text/javascript">var rollSet = $('#widget'); var offset = rollSet.offset(); var fwidth = $("#footer").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop();
-
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码（带平滑移动的效果）
比如 想跳到 mao.aspx 的页面 的div id="s" 的位置 那么 只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 现在为了增加用户体验 跳转到页面后 平滑移动到该位置 怎么做呢 其实也很简单啦 那边传递过来一个 要跳转到哪个div的参数就行 先上一段 页面获取参数的 通用js 复制代码 代码如下: //根据参数名获得该参数 pname等于想要的参数名 function getParam(pname) { var par
-
jquery实现网页定位导航
不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示.今天我就来讲讲这样的效果是如何实现的. 先贴上显示效果: 实现: 这个的页面布局很简单,大家下去多试试就OK了,值得注意的是需要在菜单布局里的每一个li里面添加a标签并且给a标签的 href 赋上对应的id号,可以让其点击立即跳到id对应的内容 然后就是jquery是如何实现的: 1.我们需
-
js，jquery滚动/跳转页面到指定位置的实现思路
要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方: 第二个是在B页面内部点击某个元素,滚动到页面的任何地方: 怎么解决啊?很简单,当然是用锚点. 首先在A页面创建一个锚点 <body> <a href="b.html#pos" target="_blank">点击跳转</a> <body> 然后在B页面定义这个锚点 <body> ... 这里是很多文字,把页面撑开,撑出滚动条 ... <
-
jQuery仿京东商城楼梯式导航定位菜单
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></
-
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
功能实现: 用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现. 实现原理: 在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作. 代码示例: 复制代码 代码如下: <html> <head><title></title> <style type="text/css"> .redBack{}{ color:white
-
jQuery 在光标定位的地方插入文字的插件
核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "insert":function(value){ //默认参数 value=$.extend({ "text":"123" },value); var dthis = $(this)[0]; //将jQuery对象转换为DOM元素 //IE下 if(document.selection){ $(dthis).focus(); //输入元素textara获取
-
jquery鼠标放上去显示悬浮层即弹出定位的div层
复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD