把最近学习的前端框架jQuery整理一下。你可能听说过jQuery，因为他是JavaScript世界中使用最广泛的一个库。

江湖传言，全世界大约有80~90%的网站直接或间接地使用了jQuery。鉴于它如此流行，又如此好用，所以每一个入门JavaScript的前端工程师都应该了解和学习它。

一、什么是jQuery？

1.jquery是由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

2.jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

3.它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

4.jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

5.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择

二、什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()

       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$

所以，$variable = jQuery对象，variable = DOM对象（variable指的是变量）。通过$variable[0]，可以将jQuery对象转为DOM对象，比如：$("#test").html()和$("#test")[0].innerHTML

就是一个意思。

jQuery的基础语法：$(selector).action()

三、寻找元素(选择器和筛选器)

3.1 选择器

前端操作元素的两个步骤，就是找到这个元素，然后操作他，首先看一下jQuery是怎么寻找元素的：

选择器 实例 选取

基本选择器
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素

基本筛选器
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
     
:header $(":header") 所有标题元素 <h1> - <h6>
:animated   所有动画元素
     
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
     
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素

属性选择器
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素

表单选择器
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
 
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

3.1.1 左侧菜单练习

根据上面的选择器，做了一个简单的左侧菜单练习，大概的功能就是点击菜单选项，下面的子选项就显示，其他菜单选项的子选项就隐藏：

首先，我们把基本的标签都写好，设置好初始状态：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .back{

            height: 600px;

            width: 100%;

        }

        .menu{

            float: left;

            width: 30%;

            height: 600px;

            background-color: blue;

        }

        .content{

            float: left;

            width: 70%;

            height: 600px;

            background-color: #84a42b;

        }

        .m{

            line-height: 40px;

            background-color: mediumaquamarine;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="back">

    <div class="menu">

        <div class="item">

            <div class="m" >菜单一</div>

            <div class="con">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

            <div class="m" >菜单二</div>

            <div class="con hide">

                <div>222</div>

                <div>222</div>

                <div>222</div>

            </div>

        </div>

        <div class="item">

            <div class="m" >菜单三</div>

            <div class="con hide">

                <div>333</div>

                <div>333</div>

                <div>333</div>

            </div>

        </div>

    </div>

    <div class="content">

    </div>

</div>

</body>

</html>

现在的状态是这样：

但是这只是静态的，点击菜单二没有任何反应。下一步，我们应该要给三个菜单标签绑定点击事件了，就是点击他之后，其他两个下面的子标签要隐藏：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .back{

            height: 600px;

            width: 100%;

        }

        .menu{

            float: left;

            width: 30%;

            height: 600px;

            background-color: blue;

        }

        .content{

            float: left;

            width: 70%;

            height: 600px;

            background-color: #84a42b;

        }

        .m{

            line-height: 40px;

            background-color: mediumaquamarine;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="back">

    <div class="menu">

        <div class="item">

            <div class="m" onclick="show(this)">菜单一</div>

            <div class="con">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

            <div class="m" onclick="show(this)">菜单二</div>

            <div class="con hide">

                <div>222</div>

                <div>222</div>

                <div>222</div>

            </div>

        </div>

        <div class="item">

            <div class="m" onclick="show(this)">菜单三</div>

            <div class="con hide">

                <div>333</div>

                <div>333</div>

                <div>333</div>

            </div>

        </div>

    </div>

    <div class="content">

    </div>

</div>

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

<script>

    function show(ele) {

        //首先我们要把点击的菜单下面并列的div标签找到，通过.next(),

        //然后移除hide属性

        $(ele).next().removeClass('hide');

        //第二步就是把其他的菜单下面并列的div标签加上这个hide属性

        //我的思路是先找到父级，然后找父级的兄弟级，然后是兄弟级下面子级中有class=con的

        //注意con前面要加上那个点

        $(ele).parent().siblings().children('.con').addClass('hide');

    }

</script>

</body>

</html>

下面是一个切换table的练习，可以试着做一下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            width: 60%;

            margin: auto;

        }

        .menu{

            background-color: #5689ff;

            line-height: 40px;

        }

        .content{

            background-color: yellowgreen;

            height: 300px;

        }

        .menu li{

            display: inline-block;

            color: #f9f9f9;

        }

        .current{

            background-color: dimgrey;

            color: orangered;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

      <div class="tab_outer">

          <ul class="menu">

              <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>

              <li xxx="c2" onclick="tab(this);">菜单二</li>

              <li xxx="c3" onclick="tab(this);">菜单三</li>

          </ul>

          <div class="content">

              <div id="c1">内容一</div>

              <div id="c2" class="hide">内容二</div>

              <div id="c3" class="hide">内容三</div>

          </div>

      </div>

</div>

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

      <script>

          function tab(ele) {

              var index = $(ele).attr('xxx');

              $('#'+index).removeClass('hide').siblings().addClass('hide');

              $(ele).addClass('current').siblings().removeClass('current');

          }

      </script>

</body>

</html>

3.2 筛选器

在上面两个练习中，还是出现了没有讲到的筛选器，下面说一下筛选器：

3.2.1 过滤筛选器

下面这几个是常用的基本筛选器，在上面的表中也可以找到，所以上面表格中的内容背都要背下来。

$("li").eq(2)                        也可以写为$("li:eq(2)"),就是所有li标签的第3个，index从0开始

   $("li").first()                      也可以写为$("li:first"),就是所有li标签中的第一个

   $("ul li").hasclass("test")          列表中，有class="test"的li标签

3.2.2 查找筛选器

      $("div").children(".test")

.children()返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选

$("div").find(".test") 

.find()方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。

<div class="outer">outer

    <div class="inner">

        inner

        <p>inner p</p>

    </div>

    <p>alex</p>

</div>

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

<script>

    $(".outer").children("p").css("color","red");

    // $(".outer").find("p").css("color","red");

</script>

.children()和.find()

最后结果：

                               

　　.siblings(expr) ---查找所有兄弟（包括哥哥和弟弟）

　　.next(expr) ---查找紧挨着的弟弟

　　.nextAll(expr) ---查找所有的弟弟

　　.nextUntil(expr) ---查找所有弟弟，直到碰到符合expr条件，不包含符合expr条件的那个元素

　　.prev(expr) ---查找紧挨着的哥哥

　　.prevAll(expr) ---查找所有哥哥

　　.prevUntil(expr) ---查找所有哥哥，直到碰到符合expr条件，不包含符合expr条件的那个元素

注：expr是指可选的参数，包含用于匹配元素的选择器表达式。

<ul class="test">

    <li class="begin">1111</li>

    <li>2222</li>

    <li>3333</li>

    <li>4444</li>

    <ul>

        <li>aaaaaaaaaaaaaa</li>

    </ul>

    <h2>hahaha</h2>

    <li>4444</li>

    <li id="end">5555</li>

    <li>6666</li>

</ul>

测试代码

$("li:eq(1)").siblings().css("color","red")     //让第二个li的所有兄弟改变颜色，如果不加eq(1),所有的都变红

$("li").eq(2).next().css("color","red");      //让第三个li后面的弟弟变色

$("li").eq(2).nextAll().css("color","red");      //让第三个li后面所有的弟弟变色

$("li").eq(2).nextUntil("#end").css("color","red");      //让第三个li后面所有的弟弟变色，直到出现一个id是end的弟弟为止，这个弟弟不变色

.prev的用法也是一样的，就是换成了前面的哥哥。

$(".test").parent()     获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）

     $(".test").parents()    获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）

     $(".test").parentUntil()     获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素

经过了前面的学了，这三个大概都能猜到怎么用了：

<div class="outer">outer

    <div class="inner">

        inner

        <p>inner p</p>

    </div>

    <p>pengfy</p>

</div>

测试代码

console.log($(".outer .inner p").parent().html())       //p标签打印父元素中的内容

$(".outer .inner p").parents().css("color","red");       //p标签祖先元素都变色

这里如果也打印的话，你会发现找到的祖先元素已经到了html标签了

$(".outer .inner p").parentsUntil("body").css("color","red");

这里暂时看不出差别，试着打印一下内容就清楚了，这里只到了outer类这一层。

下一篇会介绍操作元素，操作属性等内容。

前端jQuery学习（一）的更多相关文章

  1. 前端jquery学习--03

    1.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. web前端开发学习：jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  3. python学习之路前端-jQuery

    jQuery简介      JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safa ...

  4. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  5. Web前端的学习介绍(截止今天还有Bootstrap没有学，要腾点时间解决掉)

    Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...

  6. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

  7. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  8. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  9. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

随机推荐

  1. 浅谈jpa、hibernate与spring data jpa三者之间的关系

    1.解释hibernate之前先了解下什么是orm,orm是object relation mapping,即对象关系映射,object可以理解成java实体类Entity,relation是关系型数 ...

  2. C语言实现常用数据结构——堆

    #include<stdio.h> #include<stdlib.h> #define CAPACITY 20 /*堆有两个性质: * 1.结构性:堆必须是一颗完全二叉树 * ...

  3. 网站压力测试工具 Webbench简单介绍

    Webbech能测试处在相同硬件上,不同服务的性能以及不同硬件上同一个服务的运行状况.Webbench的标准测试可以向我们展示服务器的两项内容:每秒钟相应请求数和每秒钟传输数据量.Webbench不但 ...

  4. 附005.Kubernetes身份认证

    一 Kubernetes访问 1.1 Kubernetes交互 与Kubernetes交互通常有kubectl.客户端(Dashboard).REST API请求. 1.2 API访问流程 用户使用k ...

  5. 全自动Landsat影像温度反演软件开发

    许久没有更新遥感类软件开发了,都有点生疏了,这一次我带来了一个老的算法,新的东西, 为什么这么说呢,我们知道Landat8.Landsat5等影像,单个影像去做温度反演,并没有什么太大的难度, 但是呢 ...

  6. kali 源文件 更改和使用 更新日期：2018.04.21

    我的公众号,正在建设中,欢迎关注: 0x01 源文件格式: kali下常用的更新命令有: apt-get install update和apt-get install upgrade,update是下 ...

  7. 记录一次关于Cookie、Json中文乱码的解决方法

    今天工作上遇到一个问题,需要把一个对象集合List<Model>存入一个Cookie,按照原来都封装方法存入都ok,但是到取值都时候中文会变成乱码. 首先,我们可以确认Json和Cooki ...

  8. 【dockerFile配置jvm 启动参数】dockerFile 参数解释

    最近比较忙,实际也没有用得上.仅仅记录几个链接: Dockerfile reference:https://docs.docker.com/engine/reference/builder/#usag ...

  9. HTTP协议之应用

    通过对http协议的理解.我们可以根据这些特性来进行一些应用. 1.我们可以根据http请求的头信息refer信息,我们可以来做网站的防盗链.refer记录访问到目标网站的上次访问路径.这样我们可以来 ...

  10. 【朝花夕拾】Android自定义View篇之（一）View绘制流程

    前言 转载请申明转自[https://www.cnblogs.com/andy-songwei/p/10955062.html]谢谢! 自定义View.多线程.网络,被认为是Android开发者必须牢 ...