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. [FPGA] Verilog 燃气灶控制器的设计与实现

    燃气灶控制器的设计与实现 一.引述 本次实验所用可编程器件型号为MAXII EPM1270T144C5(其引脚表见本人另一博文:可编程实验板EPM1270T144C5使用说明),通过可编程实验板实现一 ...

  2. 3、看源码MVC中的Controllr的Json方法

    无论ViewResult还是JsonResult都继承ActionResult,ActionResult里只有一个方法ExecuteResult 1.Controllr的Json方法 实际上是new ...

  3. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  4. JavaWeb 实现简单登录、注册功能

    1.首先创建一个简单的动态Javaweb项目 2.然后手动建立文件目录: 项目创建好之后,在src下建几个包: controller:控制器,负责转发请求,对请求进行处理,主要存放servlet: d ...

  5. threejs 绘制辅助网格

    GridHelper.js可以帮助绘制一个xz平面网格,它没有提供更多的参数,所以不能用于生成xy网格. xy网格实现代码如下: var size = 6000; var divisions = 50 ...

  6. Linux命令学习-cat命令

    Linux中,cat命令的全称是concatenate,主要用于显示文件内容. 查看centos系统版本 cat /etc/centos-release 查看文件 gogs.log 的内容 cat g ...

  7. 【每天一题】LeetCode 0028. 字符串匹配

    开源地址:https://github.com/jiauzhang/algorithms 题目描述 * https://leetcode-cn.com/problems/implement-strst ...

  8. .NET面试题解析(9)-SQL语言基础及数据库基本原理

    见面试题 1. 索引的作用?她的优点缺点是什么? 2. 介绍存储过程基本概念和 她的优缺点? 3. 使用索引有哪些需要注意的地方? 4. 索引碎片是如何产生的?有什么危害?又该如何处理? 5. 锁的目 ...

  9. Android TeaScreenPopupWindow多类型筛选弹框

    多类型筛选弹框.多数据筛选.多样化diy.单选or多选.必藏 (Multiple Type Screening Boxes, Multiple Data Screening, Diversified ...

  10. Mac环境下执行npm install报权限错误解决办法

    1. 一般情况 sudo npm install 注:这相当于windows系统中的 以管理员身份执行,加上sudo后会要求你输入苹果账号密码,而且在输入的时候是没有字符提示的,密码输入完直接按回车就 ...