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基础(二)的更多相关文章

Web前端国际化之jQuery.i18n.properties
Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...
【前端】之jQuery基础知识
jQuery 简介在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中在标签下添加jQuery引用:&l ...
web前端知识大纲：系列二 css篇
web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...
web前端性能调优（二）
项目经过第一波优化之后APP端已基本已经符合我们的要求了,但是TV端还是反应比较慢,页面加载和渲染都比较慢了一点,我觉的还是有必要在进行一些优化,经过前面的优化,我们的优化空间已经小了一部分,不过还是 ...
Web前端基础(19):jQuery基础(六)
1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...
Web前端基础(18):jQuery基础(五)
1. 事件前面我们介绍完js的事件流的概念之后,相信大家对事件流也有所了解了.那么接下来我们看一下jquery的事件操作. 在说jquery的每个事件之前,我们先来看一下事件对象 . 1.1 事件对 ...
Web前端基础(17):jQuery基础(四)
1. jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
Web前端基础(16):jQuery基础(三)
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画方式一: $("div&quo ...
Web前端基础(14):jQuery基础(一)
1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

随机推荐

用函数式编程，从0开发3D引擎和编辑器（三）：初步需求分析
大家好,本文介绍了Wonder的高层需求和本系列对应的具体功能点. 确定Wonder高层需求业务目标 Wonder是web端3D开发的解决方案,包括引擎.编辑器,致力于打造开放.分享.互助的生态. ...
vue父组件传值给子组件
一.父传子方式一父传子主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收父组件 <template> <div id="container ...
c++-内联函数和函数重载和默认参数和函数指针
内联函数 C++ 内联函数是通常与类一起使用.如果一个函数是内联的,那么在编译时,编译器会把该函数的代码副本放置在每个调用该函数的地方. 对内联函数进行任何修改,都需要重新编译函数的所有客户端,因为编 ...
Dubbo环境搭建-管理控制台dubbo-admin实现服务监控
场景 Dubbo环境搭建-ZooKeeper注册中心: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103555470 在上面搭 ...
Graylog 笔记
安装基本上有3种方式,1 yum安装2 rpm安装3 docker安装 yum安装 yum安装,参照官方文档是最好的:http://docs.graylog.org/en/3.0/pages/ins ...
简单“三步”让你的网站支持https!
关于Let's Encrypt Let's Encrypt作为一个公共且免费SSL的项目逐渐被广大用户传播和使用,是由Mozilla.Cisco.Akamai.IdenTrust.EFF等组织人员发起 ...
bbbbbb
Blazor 机制初探以及什么是前后端分离,还不赶紧上车? 标签: Blazor .Net 上一篇文章我发了一个 BlazAdmin 的尝鲜版,这一次主要聊聊 Blazor 是如何做到用 C# 来写前 ...
Netty服务端NioEventLoop启动及新连接接入处理
一 Netty服务端NioEventLoop的启动 Netty服务端创建.初始化完成后,再向Selector上注册时,会将服务端Channel与NioEventLoop绑定,绑定之后,一方面会将服务端 ...
MySQL 是如何处理死锁的
MySQL(InnoDB)是如何处理死锁的一.什么是死锁官方定义如下:两个事务都持有对方需要的锁,并且在等待对方释放,并且双方都不会释放自己的锁. 这个就好比你有一个人质,对方有一个人质,你们俩去 ...
library: Vulnhub Walkthrough
网络主机探测: 端口主机扫描: ╰─ nmap -p1-65535 -sV -A -O -sT 10.10.202.136 21/tcp open ftp vsftpd 3.0.380/tcp ope ...

Web前端基础(15):jQuery基础(二)

1. jQuery选择器

1.1 基本选择器

1.2 层级选择器

1.3 基本过滤选择器

1.4 属性选择器

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

随机推荐

热门专题