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. ajax request 等请求的数据直接return

  2. mysql过期修改

    1.打开cmd 2.链接数据库如 mysql -h localhost -P 3306 -u root -proot 3.修改密码 mysql < set password for 用户名@lo ...

  3. Linux中的 date 使用

    01. 日期格式字符串列表 %H 小时(以00-23来表示). %I 小时(以01-12来表示). %K 小时(以0-23来表示). %l 小时(以0-12来表示). %M 分钟(以00-59来表示) ...

  4. 对JDK动态代理的模拟实现

    对JDK动态代理的模拟 动态代理在JDK中的实现: IProducer proxyProduec = (IProducer)Proxy.newProxyInstance(producer.getCla ...

  5. spring boot 2 + shiro 实现权限管理

    Shiro是一个功能强大且易于使用的Java安全框架,主要功能有身份验证.授权.加密和会话管理.看了网上一些文章,下面2篇文章写得不错.Springboot2.0 集成shiro权限管理 Spring ...

  6. 2019icpc徐州区域赛F

    F. The Answer to the Ultimate Question of Life, The Universe, and Everything. 我的第一道真·打表题 这次是真的打表啊,不是 ...

  7. 关于java基础、多线程、JavaWeb基础、数据库、SSM、Springboot技术汇总

    作者 : Stanley 罗昊 本人自行总结,纯手打,有疑问请在评论区留言 [转载请注明出处和署名,谢谢!] 一.java基础 1.多态有哪些体现形式? 重写.重载 2. Overriding的是什么 ...

  8. CSAPP：逆向工程【二进制炸弹】

    转载请注明出处:https://www.cnblogs.com/ustca/p/11694127.html 二进制炸弹任务描述 拓展:缓冲区溢出攻击 "二进制炸弹包含若干个阶段,每个阶段需要 ...

  9. variable '' of type '' referenced from scope '', but it is not defined 异常解决方法

    最近在做一个功能,通过拼接lamdba表达试来实现的功能,但测试时总是出现一个错误,如下图所示,网上也找不到答案,差点都放弃了.. 如上图图所示,我是想通过一个lamdba表达式(上图的IdField ...

  10. 简单的权限管理php

    转发自https://www.cnblogs.com/shenzikun1314/p/6604867.html#4262295 首先,要明白的基础理论是用户,角色,权限之间的关系是一对多,还是多对多. ...