1. jQuery选择器

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

1.1 基本选择器

例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div></div>

    <div id="box"></div>

    <div class="box"></div>

    <div class="box"></div>

    <div></div>

    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>

    <script type="text/javascript">

        //入口函数

        $(function(){

            //三种方式获取jquery对象

            var jqBox1 = $("#box");

            var jqBox2 = $(".box");

            var jqBox3 = $('div');

            //操作标签选择器

            jqBox3.css('width', '100');

            jqBox3.css('height', 100);

            jqBox3.css('background-color', 'red');

            jqBox3.css('margin-top', 10);

            //操作类选择器(隐式迭代，不用一个一个设置)

            jqBox2.css("background", "green");

            jqBox2.text('哈哈哈')

            //操作id选择器

            jqBox1.css("background", "yellow");

        })

    </script>

</body>

</html>

1.2 层级选择器

A　B，获得A元素内部的所有的B元素。(祖先) -- 后代

A　>　B，获得A元素下面的所有的B元素。(父子)

A　+　B，获得A元素同级下一个B元素。(兄弟)

A　~　B，获得A元素同级所有的B元素。(兄弟)

例子如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

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

    <script>

        $(function () {

            //获取ul中的li设置为粉色

            //后代：儿孙重孙曾孙玄孙....

            var jqLi = $("ul li");

            jqLi.css("margin", 5);

            jqLi.css("background", "pink");

            //子代：亲儿子

            var jqOtherLi = $("ul>li");

            jqOtherLi.css("background", "red");

        });

    </script>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <ol>

        <li>aaa</li>

        <li>bbb</li>

        <li>ccc</li>

    </ol>

</ul>

</body>

</html>

1.3 基本过滤选择器

:first      第一个

:last       最后一个

:not(...)   删除指定内容。例如：1234：not(3) --> 124

:even       偶数，从0开始计数 -- 操作索引号，页面显示奇数项

:odd        奇数

:eq(index)  等于index

:gt(index)  大于index

:lt(index)  小于index

--------------------------------------------------------

:header     获得标题（<h1>/<h2> ...）

:animated   获得动画的

:focus      获得焦点

例子如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

    </head>

    <body>

        <ul>

            <li>哈哈哈哈，基本过滤选择器</li>

            <li>嘿嘿嘿</li>

            <li>天王盖地虎</li>

            <li>小鸡炖蘑菇</li>

        </ul>

    </body>

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

    <script type="text/javascript">

        $(function(){

            //获取第一个 :first ,获取最后一个 :last

            //奇数

            $('li:odd').css('color','red');

            //偶数

            $('li:even').css('color','green');

            //选中索引值为1的元素 *

            $('li:eq(1)').css('font-size','30px');

            //大于索引值1

            $('li:gt(1)').css('font-size','50px');

            //小于索引值1

            $('li:lt(1)').css('font-size','12px');

        })

    </script>

</html>

1.4 属性选择器

[属性名]        获得有属性名的元素。

[属性名=值]    获得属性名等于值的元素

[属性名!=值]    获得属性名不等于值的元素

[...][...][...]    复合属性选择器，多个属性同时过滤。where...and...and...

---------------------------------------------------------

[属性名^=值]    获得属性名以值开头的元素

[属性名$=值]    获得属性名以值结尾的元素

[属性名*=值]    获得属性名含有值的元素

例子如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

         <div id="box">

            <h2 class="title">属性元素器</h2>

            <!--<p class="p1">我是一个段落</p>-->

            <ul>

                <li id="li1">分手应该体面</li>

                <li class="what" id="li2">分手应该体面</li>

                <li class="what">分手应该体面</li>

                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked" />

                <input name="username1111" type='text' value="1" />

                <input name="username2222" type='text' value="1" />

                <input name="username3333" type='text' value="1" />

                <button class="btn-default">按钮1</button>

                <button class="btn-info">按钮1</button>

                <button class="btn-success">按钮1</button>

                <button class="btn-danger">按钮1</button>

            </form>

        </div>

    </body>

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

    <script type="text/javascript">

        $(function(){

            //标签名[属性名] 查找所有含有id属性的该标签名的元素

            $('li[id]').css('color','red');

            //匹配给定的属性是what值得元素

            $('li[class=what]').css('font-size','30px');

            //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

            $('li[class!=what]').css('font-size','50px');

            //匹配给定的属性是以某些值开始的元素

            $('input[name^=username]').css('background','gray');

            //匹配给定的属性是以某些值结尾的元素

            $('input[name$=222]').css('background','greenyellow');

            //匹配给定的属性是以包含某些值的元素

            $('button[class*=btn]').css('background','red')

        })

    </script>

</html>

Web前端基础(15):jQuery基础(二)的更多相关文章

  1. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  2. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  3. web前端知识大纲：系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

  4. web前端性能调优（二）

    项目经过第一波优化之后APP端已基本已经符合我们的要求了,但是TV端还是反应比较慢,页面加载和渲染都比较慢了一点,我觉的还是有必要在进行一些优化,经过前面的优化,我们的优化空间已经小了一部分,不过还是 ...

  5. Web前端基础(19):jQuery基础(六)

    1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...

  6. Web前端基础(18):jQuery基础(五)

    1. 事件 前面我们介绍完js的事件流的概念之后,相信大家对事件流也有所了解了.那么接下来我们看一下jquery的事件操作. 在说jquery的每个事件之前,我们先来看一下事件对象 . 1.1 事件对 ...

  7. Web前端基础(17):jQuery基础(四)

    1. jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  8. Web前端基础(16):jQuery基础(三)

    1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画 方式一: $("div&quo ...

  9. Web前端基础(14):jQuery基础(一)

    1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

随机推荐

  1. 【CHRIS RICHARDSON 微服务系列】事件驱动的数据管理-5

    编者的话 |本文来自 Nginx 官方博客,是「Chris Richardson 微服务」系列的第五篇文章.第一篇文章介绍了微服务架构模式,并且讨论了使用微服务的优缺点:第二和第三篇描述了微服务架构模 ...

  2. c++-多态小案例

    多态小案例 C面向接口编程和C多态 函数类型语法基础 函数指针做函数参数(回调函数)思想剖析 函数指针做函数参数两种用法(正向调用.反向调用) 纯虚函数 抽象类 抽象类基本概念 抽象类在多继承中的应用 ...

  3. Dubbo简介与基本概念

    场景 分布式系统的发展演变以及RPC简介: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103555049 Dubbo简介 Ap ...

  4. MySQL数据库Group by分组之后再统计数目Count(*)与不分组直接统计数目的区别

    简述问题“统计最新时刻处于某一状态的设备的数量” 1. 首先子查询结果,可以看到每个设备最新的状态信息 2.1 在子查询的基础上,对设备状态进行分组,进行统计每个状态的设备数量 2.1.1 可以看到处 ...

  5. QT获取linux下的当前用户名

    故事背景:客户端启动的时候需要加载机器/home/xx/test.jpg的图片作为背景图,但是有的机器用户名叫AAA,有的机器名叫BBB,所以我需要获取当前用户的home目录 技术调研:QStanda ...

  6. Netty面试题和解答(一)

    基础 TCP和UDP的区别? TCP是面向连接的(在客户端和服务器之间传输数据之前要先建立连接),UDP是无连接的(发送数据之前不需要先建立连接) TCP提供可靠的服务(通过TCP传输的数据.无差错, ...

  7. 收到一个神盾局的offer，怎么样？

    漫威十一年系列总结性的电影<复联4>正在热映,而衍生出的一部和漫威宇宙关联的美剧<神盾局特工>,今年我也在陆陆续续地看.一开始预期的是一部特工加一些科幻或魔幻元素的剧集,就图看 ...

  8. Dubbo学习系列之十（Sentinel之限流与降级）

    各位看官,先提个问题,如果让你设计一套秒杀系统,核心要点是啥???我认为有三点:缓存.限流和分离.想当年12306大面积崩溃,还有如今的微博整体宕机情况,感觉就是限流降级没做好,"用有限的资 ...

  9. python3读取图像并可视化的方法（PIL/Pillow、opencv/cv2）

    原图: 使用TensorFlow做图像处理的时候,会对图像进行一些可视化的操作.下面,就来列举一些我知道的图像读取并可视化的方法. 1. Pillow模块 1.1 Pillow模块的前生 Pillow ...

  10. 48-创建 overlay 网络

    上一节我们搭建好实验环境,配置并运行了consul,今天开始创建 overlay 网络. 在 host1 中创建 overlay 网络 ov_net1: -d overlay 指定 driver 为 ...