jQuery 选择器

时间 2020-10-07

标签 css 编程数组 ide this spa code blog 索引 seo 栏目 JQuery 繁體版

原文原文链接

1. jQuery 选择器

原生 JS 获取元素方式不少，很杂，并且兼容性状况不一致，所以 jQuery 给咱们作了封装，使获取元素统一标准。css

1.1. 基础选择器

$("选择器")   // 里面选择器直接写 CSS 选择器便可，可是要加引号

1.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>

1.3. 筛选选择器

筛选选择器，顾名思义就是在全部的选项中选择知足条件的进行筛选选择。常见以下 :ide

案例代码this

<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>

另: jQuery中还有一些筛选方法，相似DOM中的经过一个节点找另一个节点，父、子、兄之外有所增强。spa

1.4 知识铺垫

jQuery 设置样式code

$('div').css('属性', '值')

jQuery 里面的排他思想blog

// 想要多选一的效果，排他思想：当前元素设置样式，其他的兄弟元素清除样式。 $(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);

隐式迭代索引

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫作隐式迭代。 // 简单理解：给匹配到的全部元素进行循环遍历，执行相应的方法，而不用咱们再进行循环，简化咱们的操做，方便咱们调用。 $('div').hide(); // 页面中全部的div所有隐藏，不用循环操做

链式编程seo

// 链式编程是为了节省代码量，看起来更优雅。 $(this).css('color', 'red').sibling().css('color', '');

1.5 案例：淘宝服饰精品案例

思路分析: 1.核心原理：鼠标通过左侧盒子某个小li，就让内容区盒子相对应图片显示，其他的图片隐藏。2.须要获得当前小li 的索引号，就能够显示对应索引号的图片3.jQuery 获得当前元素索引号 $(this).index()4.中间对应的图片，能够经过 eq(index) 方法去选择5.显示元素 show() 隐藏元素 hide()

<script>
      $(function () { // 当鼠标通过左侧栏时相应的图片显示出来 // 鼠标通过事件 $("#left li").mouseover(function () { //获得当前小li的索引号 var index = $(this).index(); // 鼠标通过 相应图片显示 $("#content div").eq(index).show(); // 其余(兄弟图片)图片隐藏 $("#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容器实战(六) - 容器的隔离与限制