左边的是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. undefined&nbsp;reference&nbsp;to…

    照着GUN/Linux编程指南中的一个例子输入编译,结果出现如下错误: undefined reference to 'pthread_create' undefined reference to ' ...

  2. java socket发送xml报文

    ServerRun.java import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; pub ...

  3. GIT常用命令以及作用【备忘】

    git commit  提交一个修改 git branch branchName  新建一个branchName的分支 git merge branchName 将当前分支与branchName分支合 ...

  4. SQL中对数据截取替换

    REPLACE(要修改字段名,‘被替换的特定字符’,‘替换的字符’) 表结构和插入数据 CREATE DATABASE TEST GO USE TEST GO CREATE TABLE TestTab ...

  5. SQL Server 触发器触发器

    内容摘抄自http://www.cnblogs.com/hoojo/archive/2011/07/20/2111316.html,只供自己笔记使用 触发器是一种特殊类型的存储过程,它不同于之前的我们 ...

  6. Tensorflow训练结果测试

    代码参考(https://blog.csdn.net/disiwei1012/article/details/79928679) import osimport sysimport randomimp ...

  7. 11-内涵段子-爬虫(python+正则)

    爬取内涵段子,使用正则进行简单处理: #_*_ coding: utf-8 _*_ ''' Created on 2018年7月14日 @author: sss function:爬去内涵段子(静态网 ...

  8. MRPT - Mobile Robot Programming Toolkit

    1. https://www.mrpt.org/Building_and_Installing_Instructions#1_Prerequisites P1. error C2371: “int32 ...

  9. ubuntu14.04 安装PCL

    博客转自:https://blog.csdn.net/dwj6336736/article/details/76674018 系统安装 sudo add-apt-repository ppa:v-la ...

  10. Solidity开发、测试、部署

    这篇文章很详细的列举了几种方式来开始solidity开发: https://medium.com/@davekaj/solidity-tips-and-tricks-for-beginners-bui ...