jQuery（一）

简介

1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

2、jQuery 库可以通过一行简单的标记被添加到网页中。

3、jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

为什么使用jQuery

1、一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

2、丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

3、链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

4、事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

5、Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

6、跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

7、插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery内容概括

  1. 选择器
  2. 筛选器
  3. 样式操作
  4. 文本操作
  5. 属性操作
  6. 文档处理
  7. 事件
  8. 动画效果
  9. 插件
  10. each、data、Ajax

下载链接：jQuery官网

中文文档：jQuery AP中文文档

jQuery对象

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

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

我们使用jQuery对象有两种方式，一种是直接在声明变量的时候在变量名前面直接加 "jQUery"，另一种就是在前面加 "$" ,通常为了使用的方便，我们都是使用 "$" 

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

 查找标签

1、选择器

在jQuery当中使用选择器可以对元素组或单个元素进行操作

 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器

jQuery 中所有选择器都以美元符号开头：$()。

①、id选择器

$("#id")

②、.class选择器

$(".className")

③、标签选择器

$("div")

④、层级选择器

x和y可以为任意选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

⑤、基本选择器

:eq(index)// 索引等于index的那个元素
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

自定义模态框：

使用jQuery实现弹出和隐藏功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #CCCCCC;
            z-index: 999;
            opacity: 0.7;
        }
        .modal {
            background-color: white;
            height: 300px;
            width: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -250px;
            border: 1px solid black;
            z-index: 1000;
        }

        p {
            text-align: center;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>

<div>
    <h1>海燕</h1>
    <p>在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>
</div>

<button id="b1">点我登录</button>

<div class="cover hide"></div>
<div class="modal hide">
    <form action="">
        <p>
            <label>用户名：
                <input type="text">
            </label>
        </p>
        <p><label>密码：&nbsp&nbsp&nbsp
             <input type="password">
        </label></p>
        <p>
            <input type="submit">
            <input type="button" id="cancel" value="取消">
        </p>
    </form>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    var b1Ele = $("#b1")[0];
    b1Ele.onclick = function () {
        $(".cover,.modal").removeClass("hide");
    };

    var cancelButton = $("#cancel")[0];
    cancelButton.onclick = function () {
        $(".cover,.modal").addClass("hide")
    }

</script>
</body>
</html>
View Code

⑥、属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

示例：

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

补充实例：

语法描述实例
$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素 在线实例

表单常用筛选：

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

示例：

$(":checkbox")  // 找到所有的checkbox

表单对象属性：

:enabled  #匹配可用的 input

:disabled #匹配不可用的 input
:checked  #匹配选中的 input
:selected #匹配选取的 input

示例：

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

jQuery选择器参考手册

 2、筛选器

下一个元素：

$("#id").next() # 返回被选元素的后一个同级元素
$("#id").nextAll() #返回被选元素之后的所有同级元素
$("#id").nextUntil("#i2") # 返回介于两个给定参数之间的每个元素之后的所有同级元素

上一个元素：

$("#id").prev() # 返回被选元素的前一个同级元素
$("#id").prevAll() # 返回被选元素之前的所有同级元素
$("#id").prevUntil("#i2") # 返回介于两个给定参数之间的每个元素之前的所有同级元素

父亲元素：

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

 

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

查找元素：

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

补充：

.first()// 获取匹配的第一个元素
.last()// 获取匹配的最后一个元素
.not()// 从匹配元素的集合中删除与指定表达式匹配的元素
.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

 菜单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单示例</title>
    <style>
        .menu {
            margin-left: 40%;
            text-align: center;
            color: black;
            width: 25%;
        }
        .title {
            padding: 10px 15px;
            border-bottom: 1px solid grey;
            background-color: coral;
        }

        .body>div {
            padding: 5px 10px;
            border-bottom: 1px solid grey;
            background-color: #ffdddd;
        }

        .hide {
            display:none;
        }
    </style>
</head>
<body>

<div class="menu">
  <div class="item">
    <div class="title">菜单一</div>
    <div class="body hide">
      <div>内容一</div>
      <div>内容一</div>
      <div>内容一</div>
      <div>内容一</div>
    </div>
  </div>
  <div class="item">
    <div class="title">菜单二</div>
    <div class="body hide">
      <div>内容二</div>
      <div>内容二</div>
      <div>内容二</div>
      <div>内容二</div>
    </div>
  </div>
  <div class="item">
    <div class="title">菜单三</div>
    <div class="body hide">
      <div>内容三</div>
      <div>内容三</div>
      <div>内容三</div>
      <div>内容三</div>
    </div>
  </div>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $(".title").click(function () {
        $(".body").addClass("hide");
        $(this).next().removeClass("hide");
    });
    
</script>


</body>
</html>
View Code

 

posted @ 2018-06-04 16:03  Sean_Yang  阅读(146)  评论(0)    收藏  举报