一、说在前面

昨天 学习了kotlin的相关知识
今天 学习JQ

Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

二、JQ入门

1、jq的导入

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

2、jq的基本选择器

1）五种选择器：#id，.class，*所有的标签，select1，select2，selectN几种标签的并集，element元素选择器

2）案例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <link rel="stylesheet" href="../../css/style.css" />

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

        <script>

            $(function(){

                $("#btn1").click(function(){

                    $("#one").css("background-color","pink");

                });

                $("#btn2").click(function(){

                    $(".mini").css("background-color","pink");

                });

                $("#btn3").click(function(){

                    $("div").css("background-color","pink");

                });

                $("#btn4").click(function(){

                    $("*").css("background-color","pink");

                });

                $("#btn5").click(function(){

                    $("#two,.mini").css("background-color","pink");

                });

            });

        </script>

    </head>

    <body>

        <input type="button" id="btn1" value="选择为one的元素"/>

        <input type="button" id="btn2" value="选择样式为mini的元素"/>

        <input type="button" id="btn3" value="选择所有的div元素"/>

        <input type="button" id="btn4" value="选择所有元素"/>

        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>

        <hr/>

        <div id="one">

            <div class="mini">

                111

            </div>

        </div>

        <div id="two">

            <div class="mini">

                222

            </div>

            <div class="mini">

                333

            </div>

        </div>

        <div id="three">

            <div class="mini">

                444

            </div>

            <div class="mini">

                555

            </div>

            <div class="mini">

                666

            </div>

        </div>

        <span id="four">

        </span>

    </body>

</html>

3）案例演示

1>id选择器

2>class选择器

3>*选择所有

4>element选择器

5>select1，select2，selectN几种标签的并集

2、jq的层级选择器

1）知识点：四种层级选择器

1>返回值:Array<Element(s)> ancestor descendant 在给定的祖先元素下匹配所有的后代元素

2>返回值:Array<Element(s)> parent >  child 在给定的父元素下匹配所有的子元素

3>返回值:Array<Element(s)>   prev + next 匹配所有紧接在 prev 元素后的 next 元素

4>返回值:Array<Element(s)>  prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素

2)案例源码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>层级选择器</title>

        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>

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

        <script type="text/javascript">

            $(function(){

                $("#btn1").click(function(){

                    $("body div").css("background-color","gold");

                });

                $("#btn2").click(function(){

                    $("body>div").css("background-color","gold");

                });

                $("#btn3").click(function(){

                    $("#two+div").css("background-color","gold");

                });

                $("#btn4").click(function(){

                    $("#one~div").css("background-color","gold");

                });

            });

        </script>

    </head>

    <body>

        <input type="button" id="btn1" value="选择body中的所有的div元素"/>

        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>

        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>

        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

        <hr/>

        <div id="one">

            <div class="mini">

                111

            </div>

        </div>

        <div id="two">

            <div class="mini">

                222

            </div>

            <div class="mini">

                333

            </div>

        </div>

        <div id="three">

            <div class="mini">

                444

            </div>

            <div class="mini">

                555

            </div>

            <div class="mini">

                666

            </div>

        </div>

        <span id="four">

        </span>

    </body>

</html>

3）案例测试

1>返回值:Array<Element(s)> ancestor descendant 在给定的祖先元素下匹配所有的后代元素

2>返回值:Array<Element(s)> parent >  child 在给定的父元素下匹配所有的子元素

3>返回值:Array<Element(s)>   prev + next 匹配所有紧接在 prev 元素后的 next 元素

4>返回值:Array<Element(s)>  prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素

3、jq基本过滤器

1）常见的过滤器

1>返回值:jQuery  first() 获取第一个元素

2>返回值:jQuery  last() 获取最后个元素

3>返回值:Array<Element(s)>  :even 匹配所有索引值为偶数的元素，从 0 开始计数

4>返回值:Array<Element(s)>  :odd 匹配所有索引值为奇数的元素，从 0 开始计数

2)案例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>层级选择器</title>

        <link rel="stylesheet" href="../../css/style.css" type="text/css"/>

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

        <script>

            $(function(){

                $("#btn1").click(function(){

                    $("body div:first").css("background-color","red");

                });

                $("#btn2").click(function(){

                    $("body div:last").css("background-color","red");

                });

                $("#btn3").click(function(){

                    $("body div:odd").css("background-color","red");

                });

                $("#btn4").click(function(){

                    $("body div:even").css("background-color","red");

                });

            });

        </script>

    </head>

    <body>

        <input type="button" id="btn1" value="body中的第一个div元素"/>

        <input type="button" id="btn2" value="body中的最后一个div元素"/>

        <input type="button" id="btn3" value="选择body中的奇数的div"/>

        <input type="button" id="btn4" value="选择body中的偶数的div"/>

        <hr/>

        <div id="one">

            <div class="mini">

                111

            </div>

        </div>

        <div id="two">

            <div class="mini">

                222

            </div>

            <div class="mini">

                333

            </div>

        </div>

        <div id="three">

            <div class="mini">

                444

            </div>

            <div class="mini">

                555

            </div>

            <div class="mini">

                666

            </div>

        </div>

        <span id="four">

        </span>

    </body>

</html>

3）案例测试

1>返回值:jQuery  first() 获取第一个元素

2>返回值:jQuery  last() 获取最后个元素

3>返回值:Array<Element(s)>  :even 匹配所有索引值为偶数的元素，从 0 开始计数

4>返回值:Array<Element(s)>  :odd 匹配所有索引值为奇数的元素，从 0 开始计数

4、属性选择器（以id为例）

1）案例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>层级选择器</title>

        <link rel="stylesheet" href="../../css/style.css" />

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

        <script>

            $(function(){

                $("#btn1").click(function(){

                    $("div[id]").css("background-color","red");

                });

                $("#btn2").click(function(){

                    $("div[id='two']").css("background-color","red");

                });

            });

        </script>

    </head>

    <body>

        <input type="button" id="btn1" value="选择有id属性的div"/>

        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>

        <hr/>

        <div id="one">

            <div class="mini">

                111

            </div>

        </div>

        <div id="two">

            <div class="mini">

                222

            </div>

            <div class="mini">

                333

            </div>

        </div>

        <div id="three">

            <div class="mini">

                444

            </div>

            <div class="mini">

                555

            </div>

            <div class="mini">

                666

            </div>

        </div>

        <span id="four">

        </span>

    </body>

</html>

2）案例测试

1>包含id属性

2>id属性 = “特定值”

2.8 学习总结 之 JQ初识的更多相关文章

  1. Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念

    Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念 进入到了Linux学习之CentOS第三篇了,这篇文章主要记录下对linux文件系统的初步认识,以及用户组.用户权限.文 ...

  2. Linux学习之CentOS(二)--初识linux的一些常用命令

    Linux学习之CentOS(二)--初识linux的一些常用命令 在VM上安装完了CentOS6.4以后,看着linux系统成功跑起来,心里小激动了一把......但是前方学习的道路还很遥远... ...

  3. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  4. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  5. shell编程学习之使用jq对json数据进行提取

    shell编程学习之使用jq对json提取 jq命令允许直接在命令行下对JSON进行操作,包括分片.过滤.转换等 ,jq是用C编写,没有运行时依赖,所以几乎可以运行在任何系统上.预编译的二进制文件可以 ...

  6. 我们一起学习WCF 第一篇初识WCF（附源码供对照学习）

    前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...

  7. 学习web安全之--初识安全

    随笔:随着互联网行业的飞速发展,互联网行业可谓日新月异,然而在繁华的背后,大多的互联网公司对于网络安全还是处于无重视,不作为的阶段,而作为一个程序员,如果也对信息安全视而不见的话,那将是这个公司的噩梦 ...

  8. JavaWeb学习总结第一篇--初识JavaWeb

    JavaWeb学习总结(一)-- 初识JavaWeb 一:Web相关概念 Web程序也就是一般所说的网站,由服务器.客户端浏览器和网络组成.Web程序的好处就是使用简单,不需要安装.学习,有一台电脑. ...

  9. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

随机推荐

  1. Spark程序编译报错error: object apache is not a member of package org

    Spark程序编译报错: [INFO] Compiling 2 source files to E:\Develop\IDEAWorkspace\spark\target\classes at 156 ...

  2. 从Facebook、苹果到外卖平台，“阴谋论”推动巨头企业不断蜕变

    不可否认的是,在互联网向前加速推进的过程中,巨头企业和独角兽扮演着重要角色.它们以多元创意和深厚技术.资金实力,一步步改造着大众的互联网生活.而在此前,人们对巨头企业.独角兽的态度是颇为依赖的.但自从 ...

  3. DRF项目之序列化器和视图重写方法的区别

    我们,都知道,DRF框架是一款高度封装的框架. 我们可以通过重写一些方法来实现自定义的功能. 今天,就来说说在视图中重写和序列化器中重写方法的区别. 在视图中重写方法: 接收请求,处理数据(业务逻辑) ...

  4. redhat 7.6 用户和组

    用户 useradd   user1     //新建用户user1 userdel   user1   //删除用户user1 userdel  -r   user1     //删除用户并且删除h ...

  5. Day11 - J - Brave Game HDU - 1846

    十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻.今天,大家选择上 ...

  6. macOS 微信多开插件

    macOS版本微信默认只能开一个,安装 WeChatTweak-macOS 插件即可实现多开. 效果图 安装步骤打开终端输入一下命令: git clone https://github.com/Sun ...

  7. 「CQOI2011」动态逆序对

    「CQOI2011」动态逆序对 传送门 树套树. 删除一个位置的元素带来的减损数等于他前面大于它的和后面小于它的,然后这个直接树状数组套主席树维护一下就好了. 参考代码: #include <c ...

  8. JVM 学习笔记 - 带你掌握JVM类加载机制

    前言 往期JVM系列: 精美图文带你掌握 JVM 内存布局 本节主要内容: 类的生命周期 类加载阶段描述 数组类和非数组类在加载阶段的差别 父子类初始化顺序 接口的初始化 JVM如何处理 多线程同时初 ...

  9. sqlserver 取数据常用

    sqlDataReader: public SqlDataReader GetAuth_CourtListByAuth(int autIntNo) { // Create Instance of Co ...

  10. 解决vue更新默认值时出现的闪屏问题

    在Vue项目中,对于一个展示用户个人信息的页面.有以下需求,需要判断用户个人信息是否填充过,如果填充过,需要在页面中展示已填充项(未填充项不展示):如果未填充过,需要在页面中显示另外一种元素(提示用“ ...