左边的是jQuery用法  右边是js用法

$("tag") == document.getElementsByTagName("tag");

$(".class") == document.getElementsByClassName("class");

$("#id")  == document.getElementById("id");

$("sb").css("background","red") == sb.style.background = "red";

var bg = $("sb").css("background-color");console.log(bg);//输出rgb(255,0,0)//红色\

$("sb").css({"background":"red","font-size":"14px"})

$("#id>.class>tag") $(".class tag") $(li.class) $(".f1+.fr")在css里的方法这里也可以用
过滤选择器：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>过滤选择器</title>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(document).ready(function () {

            //从0开始数

            // :odd奇数行

            //$("li:odd").css("background","red");

            // :even偶数行

            //$("li:even").css("background","green");

            // :eq(index)指定行

            //$("ul li:eq(4)").css("font-size","30px");

            // :lt(index)小于6的

            //$("li:lt(6)").css("font-size","30px");

            // :gt(index)大于7的

            //$(".ulList1 li:gt(7)").css("font-size","40px");

            // :first第一个

            //$(".ulList li:first").css("font-size","40px");

            // :last最后一个

            //$("li:last").css("font-size","40px");

        });

    </script>

</head>

<body>

<ul class="ulList">

    <li>01男嘉宾</li>

    <li>02男嘉宾</li>

    <li>03男嘉宾</li>

    <li>04男嘉宾</li>

    <li>05男嘉宾</li>

    <li>06男嘉宾</li>

    <li>07男嘉宾</li>

    <li>08男嘉宾</li>

    <li>09男嘉宾</li>

    <li>10男嘉宾</li>

</ul>

<ul class="ulList">

    <li>01男嘉宾</li>

    <li>02男嘉宾</li>

    <li>03男嘉宾</li>

    <li>04男嘉宾</li>

    <li>05男嘉宾</li>

    <li>06男嘉宾</li>

    <li>07男嘉宾</li>

    <li>08男嘉宾</li>

    <li>09男嘉宾</li>

    <li>10男嘉宾</li>

</ul>

</body>

</html>
属性选择器：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(document).ready(function () {

            // 属性选择器

            /*$("a[href]").css("color","red");*/

            // [attr=value]

            //$("a[href='http://web.itcast.cn']").css("font-size","40px");

            // [attr!=value]

            //$("a[href!='http://www.baidu.com']").css("font-size","40px");

            // [attr^=value]开头

            //$("a[href^='http']").css("font-size","40px");

            // [attr$=value]结尾

            //$("a[href$='cn']").css("font-size","40px");

            // [attr*=value]通配符

            //$("a[href*='sina']").css("font-size","40px");

            // [attr][attr] 都满足 交集

            $("a[href][title*='的']").css("font-size","40px");

        });

    </script>

</head>

<body>

<div class="divItem">

    <a href="www.baidu.com" title="谁啊？">百度</a>

    <a href="http://www.taobao.com" title="我是title的内容">淘宝网</a>

    <a href="http://sina.com.cn">新浪</a>

    <a>我没有href</a>

</div>

</body>

</html>
筛选选择器：
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(document).ready(function () {

            // .eq()

            // 类比 ":eq(index)" 选择器

            //$("span").eq(1).css("font-size","40px");

            // .first()

            // 类比 ":first" 选择器

            //$("span").first().css("font-size", "40px");

            // .parent()

            // 选择父亲元素

            //$("#sp").parent().css("background", "gold");

            //$("p").parent("#div").css("background", "gold");

            // .siblings()

            // 选择所有的兄弟元素

            //$("#li04").siblings(".liItem").css("background", "gold");

            // .find()

            // 查找所有后代元素

            $("div").find("#li04").css("background", "gold");

        });

    </script>

</head>

<body>

<div>

    <span>我是第1个span</span>

    <span id="sp">我是第2个span</span>

    <span>我是第3个span</span>

</div>

<div id="div">

    <p>Hello</p>

</div>

<div class="selected">

    <p>Hello Again</p>

</div>

<div>

    <ul>

        <li>我是li01</li>

        <li>我是li02</li>

        <li>我是li03</li>

        <li id="li04">我是li04</li>

        <li>我是li05</li>

        <li class="liItem">我是li06</li>

        <li>我是li07</li>

        <li>我是li08</li>

    </ul>

</div>

</body>

</html>

0.jQuery选择器的更多相关文章

  1. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  2. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  3. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  4. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  5. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  6. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  7. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  8. jQuery-1.9.1源码分析系列（二）jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  9. jQuery-1.9.1源码分析系列（二）jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

随机推荐

  1. telnet测试端口是否正常打开

    点击计算机的开始菜单-->运行 ,输入CMD命令,然后确定.打开cmd命令行.   输入telnet测试端口命令: telnet IP 端口 或者 telnet 域名 端口 回车   如果端口关 ...

  2. printf 的格式

    1) 类型类型字符用以表示输出数据的类型,其格式符和意义如下表所示: %c  输出单个字符 %s  输出字符串 %u  以十进制形式输出无符号整数 %d  以十进制形式输出带符号整数(正数不输出符号) ...

  3. Python常用算法

    本节内容 算法定义 时间复杂度 空间复杂度 常用算法实例 1.算法定义 算法(Algorithm)是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机 ...

  4. Unity3D自带Demo AngryBots路径

    [Unity3D自带Demo AngryBots路径] 1.Windows: C:\Users\Public\Documents\Unity Porjects 2.MacOSX: /Users/Sha ...

  5. PrimeNG01 angular集成PrimeNG

    1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...

  6. web 应用中访问 Spring 具体实现

    user=LF password=LF jdbcUrl=jdbc:oracle:thin:@localhost:1521:orcl driverClass=oracle.jdbc.driver.Ora ...

  7. linux c 获取系统时间

    #include <time.h> main() { time_t timep; time (&timep); printf(“%s”,asctime(gmtime(&ti ...

  8. 9.hive聚合函数，高级聚合，采样数据

    本文主要使用实例对Hive内建的一些聚合函数.分析函数以及采样函数进行比较详细的讲解. 一.基本聚合函数 数据聚合是按照特定条件将数据整合并表达出来,以总结出更多的组信息.Hive包含内建的一些基本聚 ...

  9. 一步一步带你构建第一个 Laravel 项目

    参考链接:https://laravel-news.com/your-first-laravel-application 简介 按照以下的步骤,你会创建一个简易的链接分享网站. 安装 Laravel ...

  10. HDU 6034 Balala Power! (贪心+坑题)

    题意:给定一个 n 个字符串,然后问你怎么给 a-z赋值0-25,使得给定的字符串看成26进制得到的和最大,并且不能出现前导0. 析:一个很恶心的题目,细节有点多,首先是思路,给定个字符一个权值,然后 ...