jQuery 选择器
原生 JS 获取元素方式不少，很杂，并且兼容性状况不一致，所以 jQuery 给咱们作了封装，使获取元素统一标准。css
1. 基础选择器
$("选择器") // 里面选择器直接写 CSS 选择器便可，可是要加引号
2. 层级选择器
层级选择器最经常使用的两个分别为：后代选择器和子代选择器。编程
基础选择器和层级选择器案例代码数组
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
3. 筛选选择器
筛选选择器，顾名思义就是在全部的选项中选择知足条件的进行筛选选择。常见以下 :ide
4. 知识铺垫
-
jQuery 设置样式this
$('div').css('属性', '值')
-
隐式迭代spa
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫作隐式迭代。
// 简单理解：给匹配到的全部元素进行循环遍历，执行相应的方法，而不用咱们再进行循环，简化咱们的操做，方便咱们调用。
$('div').hide(); // 页面中全部的div所有隐藏，不用循环操做
案例代码3d
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body>
5.筛选方法
重点： jQuery中还有一些筛选方法，相似DOM中的经过一个节点找另一个节点，父、子、兄之外有所增强。blog
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $("li"). parent(); | 查找最近一个父级 |
| children(selector) | $("u1"). children("li"); | 至关于$("ul>1i"),最近一级(亲儿子) |
| find(selector) | $("u1"). find("li"); | 至关于$("ul li"),后代选择器 |
| siblings(selector) | $(" . first").siblings("li"); | 查找兄弟节点，不包括本身自己 |
| nextAll([expr]) | $(".first"). nextAll() | 查找当前元索以后全部的同辈元素 |
| prevtAll([expr]) | $(" .last"). prevAll() | 查找当前元索以前全部的同辈元索 |
| hasClass(class) | $(' div' ). hasClass(" protected" ) | 检查当前的元素是否含有某个特定的类,若是有，则返回true |
| eq( index) | $("li").eq(2); | 至关于$("li:eq(2)")，index从0开始 |
重点记住: parent() children() find() siblings() eq()索引
6.新浪下拉菜单案例
<script>
$(function () {
// 鼠标通过显示
$('.nav>li').mouseover(function () {
// $(this) jQuery当前元素,this不要加引号
$(this).children('ul').show();
});
// 鼠标离开隐藏
$('.nav>li').mouseout(function () {
$(this).children('ul').hide();
});
})
</script>
7.jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其他的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
//案例代码
<script>
$(function () {
$('button').click(function () {
$(this).css('background', 'pink');
$(this).siblings('button').css('background', '');
})
})
</script>
-
链式编程seo
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
8. 案例：淘宝服饰精品案例
思路分析: 1.核心原理：鼠标通过左侧盒子某个小li，就让内容区盒子相对应图片显示，其他的图片隐藏。 2.须要获得当前小li 的索引号，就能够显示对应索引号的图片 3.jQuery 获得当前元素索引号 $(this).index() 4.中间对应的图片，能够经过 eq(index) 方法去选择 5.显示元素 show() 隐藏元素 hide()
<script>
$(function(){
// 1.鼠标通过左侧的小li
$("#left 1i").mouseover(function() {
// 2.获得当前小li的索引号
var index = $(this).index();
console.log(index);
// 3.让咱们右侧的盒子相应索引号的图片显示出来
$("#content div").eq(index).show();
// 4.让其他的图片(就是其余的兄弟)隐藏起来
$("#content div").eq(index).siblings().hide();
})
})
</script>
相关文章
- 1. jQuery-jQuery选择器
- 2. jQuery选择器
- 3. jQuery 选择器
- 4. jquery选择器
- 5. JQuery选择器
- 6. Jquery 选择器
- 7. JQuery - * 选择器
- 8. jquery——选择器
- 9. jquery选择器《-》
- 更多相关文章...
- • jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
- • XQuery 选择 和 过滤 - XQuery 教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Docker容器实战(六) - 容器的隔离与限制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. jQuery-jQuery选择器
- 2. jQuery选择器
- 3. jQuery 选择器
- 4. jquery选择器
- 5. JQuery选择器
- 6. Jquery 选择器
- 7. JQuery - * 选择器
- 8. jquery——选择器
- 9. jquery选择器《-》