左边的是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. Jenkins+maven+SVN构建java项目中遇到的问题及解决

    [ERROR] No goals have been specified for this build. You must specify a valid lifecycle phase or a g ...

  2. codeforce 459 DIV2 D题

    题意   在一个DAG上面有N个点M条边,每一条边上都有一个小写字母.两个人Max and Lucas 每个人一颗棋子,两个人轮流行棋,当前这一步选择的路上面的字母必须大于等于上一步路上面的字母,当轮 ...

  3. android样式相关

    转载自Keegan小钢,原文链接http://keeganlee.me/post/android/20150830

  4. Linux 安装lamp

    安装软件包编译器 gcc -v 查看是否存在 yum -y install gcc gcc-c++ mack rpm -q httpd 查看是否安装http rpm -e httpd --nodeps ...

  5. Qt入门-第一个Qt程序

    在安装完之后,迫不及待创建第一个Qt  demo

  6. 266. Palindrome Permutation 重新排列后是否对称

    ［抄题］: Given a string, determine if a permutation of the string could form a palindrome. For example, ...

  7. Ubuntu18.04创建新的系统用户

    目标: 1.为测试学习Docker,在虚拟机OS为18.04里,创建一个系统账号,账号名称:docker 2.在/home下有新建username的文件夹 一.建立账号 1.以root账号登录 2.u ...

  8. Debian上SCST的设置

    一)创建SCST,无infiniband支持 1:载入最小化支持 #aptitude install build-essentials linux-headers checkinstall #wget ...

  9. oracle高级查询练习题

    1.  列出员工表中每个部门的员工数和部门编号 Select deptno,count(*) from emp group by deptno; 补充1:列出员工表中,员工人数大于3的部门编号和员工人 ...

  10. WordCountPro

    github项目地址:https://github.com/Hoyifei/SQ-T-Homework-WordCount-Advanced PSP表格   PSP2.1 PSP阶段 预估耗时 (分钟 ...