左边的是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. VS2008与MATLAB R2007a混合编程配置过程

    系统平台:windows xp sp2, visual studio 2008 professional, matlab R2007a 首先,为了使matlab 能够找到vs2008编译器,需要下载以 ...

  2. Django中favicon.ico文件的配置

    默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求“/favicon.ico”这个URL,目的是获取网站的图标. 若没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个404 ...

  3. Tornado抽象方法抽象类

    #!/usr/bin/env python #抽象方法抽象类 import abc class Foo(metaclass=abc.ABCMeta): def f1(self): raise Exce ...

  4. Linux awk&sed

    awk AWK是强大的文本处理工具,擅长对日志文件迚行快速分析. 它丌仅用亍 Linux ,也是任何环境中现有的功能最强大的数据处理引擎之一. 名称得自亍它的发明者 Alfred Aho .Pet ...

  5. php 数据导出csv 注意问题。

    总共10W数据每次下载到9.5W就停了. 加上这个就好了 ini_set('memory_limit','512M'): //脚本运行无时间限制. set_time_limit(0); 要设置一个se ...

  6. 2014蓝桥杯B组初赛试题《奇怪的分式》

    题目描述: 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是:     1/4 乘以 8/5      小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1.png)   ...

  7. 使用python创建生成动态链接库dll

    如今,随着深度学习的发展,python已经成为了深度学习研究中第一语言.绝大部分的深度学习工具包都有python的版本,很多重要算法都有python版本的实现.为了将这些算法应用到具体工程中,这些工具 ...

  8. POI 生成exel报表

    去官网下载相关jar包   http://poi.apache.org/ package poi.zr.com; import java.io.File; import java.io.FileNot ...

  9. 简单Factory模式

    #pragma once #include "student.h" #include "Teacher.h" typedef enum _EPersonType ...

  10. sql平时小总结

    sql练习:举例子: 1.CREATE TABLE IF NOT EXISTS zz0 (number INT(11)); CREATE TABLE IF NOT EXISTS zz1 (number ...