左边的是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. 【转】VS 安全开发生命周期（SDL）检查

    前面在学习使用google的protobuf时在VS2012中一直无法编译编译通过,经过查找一些资料原来发现,并不是protobuf的问题,而是自己在使用VS2012时,没有完全了解VS2012的强大 ...

  2. 通过class类获取类的成员变量和构造函数信息

  3. document.ready与window.load区别

    jQuery document window load ready 区别详解 用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件, ...

  4. Dubbo+zookeeper应用的入门案例

    前提:Linux安装zookeeper  Dubbo管理中心部署 简单案例的项目结构: 1,demo_parent的pom.xml,用来统一管理依赖 <?xml version="1. ...

  5. 中国大学MOOC 玩转AutoCAD 熟悉AutoCAD的工作空间

  6. Python_14-绘图

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  7. SpringBoot15 sell02 订单模块

    1 订单模块 1.1 MySQL数据表 订单模块涉及到两个数据表: 订单表:主要存储订单相关的基本信息 DROP TABLE IF EXISTS `order_master`; CREATE TABL ...

  8. SQL 数据排重，去掉重复数据 有用

    .最大的错误:    在对数据排重的时候,首先想到的就是Distinct,虽然这很管用,但多数场合下不适用,因为通常排重后还要做进一步处理,比如对编号排重后要按日期统计等. 无法排重的Group by ...

  9. win32多线程(三) 死锁

    任何时候当一段代码需要两个(或更多)资源时,都有潜在性的死锁. void SwapLists(List *list1, List *list2) { List *tmp_list; EnterCrit ...

  10. CF519E A and B and Lecture Rooms

    最近很颓……难题想不动……水题写不对,NOIP怕是