在开讲之前,我要说下我这套教程的讲课思路~ 以免大家茫然~
在第一节的时候,我就说过 我的这套教程会讲的比较慢,如果大家急于求成 的话不建议看这套教程
之所以慢的原因为,我的讲课顺序和一般的 相关书籍的不太一样~,这就是我开始说的 讲课思路
对于 JQ 这个 面向对象的语言来说,起核心的内容,我觉得 莫过于 JQ 对象了
学习什么方法,什么效果,都基于 第一步 你要准确的得到 你想要的东西,所以 我到现在为止,基本上都在磨磨唧唧的将CSS选择器, 以后 还有 xpath 选择器,还有,其他一些选择器
在这以后,我再降一些 比较常用的方法~
这里要说一下,我如果 时间充裕的话,我会尽可能多的给大家讲讲 JQ 提供的方法,如果,时间不充裕,我就捡重点的,常用的,易混淆的来~ 剩下的就靠大家自己翻手册了
在这之后 我会把 ajax 单拿出来,用一段时间讲讲的~ 如果 还是时间充裕的话,我也会把 JQ 的效果方面的东西也拿出来讲讲
废话 不说了
--------------------------------------开讲--------------------------------------
今天有两个内容 一个是第一个出现的匹配元素 第二个是同辈元素(也叫兄弟元素)
现在 说下 第一个出现的匹配元素 的语法$("prev+next ")
其中 prev 为 任意选择器,next 其实也为 任意选择器,不过,如果写prev 选择器后 没有的元素,那肯定没有结果, 第一个出现的匹配元素 也就没有意思了,所以,我建议 大家还是写 prev 的后 存在的元素选择器~!
解释下 什么是 第一个出现的匹配元素:刚才已经说过了 ,第二个选择器其实是选择prev 后的元素。那么 第一个出现的匹配元素 就比较好理解了,他匹配的是离prev 起始标签最近的,且满足第二个选择器的元素了!
举两个例子
双击复制代码
1
2
3
4
|
< div >
< input type = "text" value = "第一个元素" />
< span >input 后第一个元素</ span >
</ div >
|
第二个例子
双击复制代码
1
2
3
4
|
< div >
< span >第一个元素</ span >
< input type = "text" value = "span后第二个元素" />
</ div >
|
两个例子结束了,是不是有点 感觉了~ 现在写个例子,复杂一点的
双击复制代码
1
2
3
4
5
6
7
8
|
< div >
< input type = "text" value = "第1个元素,第一个 input元素" />
< span >第2个元素,但为第一个 span元素</ span >
< div >第3个元素,span后第一个元素 </ div >
< span >第4个元素</ span >
< input type = "text" value = "第5个元素,span后第一个元素" />
</ div >
|
下面是 JQ 的代码
这样获得的 就是 [<input type="text" value="第5个元素,span后第一个元素"/> ] 对象了怎么样,这回明白了吗~~~ 不明白的童鞋,留言! 讲下一个同辈元素 这个 从他的 别名 兄弟元素 名字上 就比较好理解了,说的通俗点,就是 同一个父元素,同一个爹~~还是说语法 $(" prev~siblings ") prev 还是所有选择器, siblings 为兄弟元素选择器以本文 的前两个 HTML 的代码为例,div中的 input 与 span 就互为兄弟元素 在来段 HTML 代码,让大家 更深刻的理解下
双击复制代码
1
2
3
4
5
6
|
< div class = "font" style = "border:2px solid green" >一级子 div
< input type = "text" id = "f_input" value = "第一个input" >
< span id = "f_span" >第一次出现 span</ span >
< span >第二次出现 span</ span >
</ div >
< input type = "text" id = "s_input" value = "第2个input" >
|
其中 div 与最后一个 input 互为 兄弟元素 div 内部的 所有元素也 互为兄弟元素 怎么 对兄弟元素 有点理解了吧现在 写一个 看看效果
双击复制代码
1
2
3
|
$ ( "div~input" ) ;
/ / 还有种写法,这个以后会讲,现在先看看
$ ( "div" ) .siblings ( "input" )
|
结果为[<input type="text" id="s_input" value="第2个input"> ]好了 今天的内容也讲完了!
本人的原文出自 http://bbs.coderli.com/forum.php?mod=viewthread&tid=409&fromuid=7
有需要样例代码的 童鞋 可以去下载
分享到:
相关推荐
NULL 博文链接:https://mmmzzc.iteye.com/blog/1579593
NULL 博文链接:https://mmmzzc.iteye.com/blog/1579590
NULL 博文链接:https://mmmzzc.iteye.com/blog/1576396
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jQuery 3.1 标准课程第二章 选择器层级选择器
jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车 jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车 jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车
JQuery选择器,xpath类型等的选择器
jQuery date_input日期选择器 发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示...
包含有JQuery树状菜单代码 JQuery多层级树形菜单 JQuery的树形地区菜单选择
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
Jquery表单-层级-内容-属性-子元素选择器知识点整理,主要是关于Jquery选择器的知识点整理包括页面属性的选择如$(":empty")等,子元素的选择,层级选择$("parent > child")等
JQ 选择器大全包含:基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
jQuery时间选择器点击选择小时分钟代码
jquery 城市选择器代码
jquery 选择器 描述
主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
主要为大家详细介绍了jQuery层级选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery商品价格选择器
Jquery颜色选择器插件,通过Jquery模拟实现颜色选择器,便于网页中设置颜色