jQuery快速入门

一、JQuery介绍

1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2、JQuery使用户能够更方便处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能极大地简化JavaScript编程。

二、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库包含功能

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTMLDOM遍历和修改
AJAX
Utilites

四、jQuery版本支持

1.x:兼容IE768，使用最为广泛的，官方只做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版。目前该版本是官方主要更新维护的版本。

五、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语法

通过jQuery,您可以选取（查询，query）HTML元素，并对它们执行“操作”(actions)。

JQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

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

没有符号定义jQuery
选择符(selector)“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作

示例：

$(this).hide()-隐藏当前元素
$("p").hide()-隐藏所有段落
$("p.test").hide()-隐藏所有class = "test"的段落
$("#test").hide()-隐藏所有id="test"的元素

七、jQuery选择器

参考文档：https://www.w3cschool.cn/jquery/xs75ofnl.html

jQuery选择器

jQuery选择器允许您对HTML元素组或单个进行操作。
jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素。它基于以及存在的CSS选择器，它还有一些自定义的选择器。
jQuery中所有选择器都以美元符号开头：$()。

id选择器

jQuery #id选择器通过HTML元素的id属性的id属性选取指定的元素。

页面中的元素的id应该是唯一的，所以您要在页面中选取唯一的元素需要通过#id选择器。

通过id选取元素语法如下：

$("#id")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>

<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另一个段落</p>

</body>
</html>

HTML示例代码

执行结果：

标签选择器

jQuery标签选择器基于标签名选取元素。

在页面中选取所有的<p>标签

$("p")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>

<h2>这是一个标题</h2>
<p>标签选择器，这是一个段落</p>
<p>标签选择器，这是另一个段落</p>

</body>
</html>

HTML示例代码

执行结果

class类选择器

jQuery类选择器可以通过指定的class查找元素。

语法如下：

$(".test")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类选择器</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>

<h1 class="test">这是一个标题</h1>
<p class="test">这是一个段落</p>
<p>这是另外一个段落。</p>
</body>
</html>

HTML示例代码

运行结果：

CSS选择器

jQuery CSS选择器可用于改变HTML元素的CSS属性。

示例一：把所有的p标签的背景颜色改为红色

$("p").css("background-color","red");

示例二：选取所有元素(标签)

$("*")

示例三：选取当前HTML元素

$("this")

示例四：选取第一个<p>元素

$("p:first")

示例五：选取class为intro的<p>元素

$("p.intro")

示例六：选取第一个<ul>元素的第一个<li>元素

$("ul li:first")

示例七：选取每个<ul>元素的第一个<li>元素

$("ul li:first-child")

示例八：选取带有href属性的元素

$("[href]")

示例九：选取所有target属性值等于"_blank"的<a>元素

$("a[target='_blank']")

示例十：选取所有target属性值不等于"_blank"的<a>元素

$("a[target!='_blank']")

示例十一：选取所有type="button"的<input>元素和<button>元素

$(":button")

示例十二：选取偶数位置的<tr>元素

$("tr:even")

示例十三：选取奇数位置的<tr>元素

$("trod")

<div class="c1">
    <a href=""></a>
    <p class="c2"></p>
    <p class="c3"></p>
    <div class="c4"></div>
    <p class="c5"></p>
</div>
<div class="c6">
    <a href=""></a>
    <a href=""></a>
</div>

#查找满足条件的第一个
$('div>p:first');
#找出div标签子集中的第一个p标签,
#jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)]

#查找满足条件的最后一个
$('div>p:last');
#找出div标签子集中最后一个p标签
#jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)]

#查找索引号为指定数字的元素
$('div>p:eq(2)');
#找出div标签子集中的第三个p标签
#jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)]

#匹配所有索引值为偶数的元素，从 0 开始计数
$('div>p:even');
#找出div标签子集中的索引为偶数的p标签，取出class=c2,class=c5的p标签。
#jQuery.fn.init(2) [p.c2, p.c5, prevObject: jQuery.fn.init(1)]

#匹配所有索引值为奇数的元素，从 0 开始计数
$('div>p:odd');
#找出div标签子集中的索引为奇数的p标签，取出class=c3的p标签。
#jQuery.fn.init [p.c3, prevObject: jQuery.fn.init(1)]

#匹配所有大于给定索引值的元素
$('div>p:gt(1)');
#jQuery.fn.init [p.c5, prevObject: jQuery.fn.init(1)]

#匹配所有小于给定索引值的元素
$('div>p:lt(1)');
#jQuery.fn.init [p.c2, prevObject: jQuery.fn.init(1)]

#选取后代中包含一个或多个指定标签的标签
$('div:has(a)');
#jQuery.fn.init(2) [div.c1, div.c6, prevObject: jQuery.fn.init(1)]

更多示例一

#找出所有满足not条件的标签
<label>篮球
    <input type="checkbox" checked name="hobby" id="i1">
</label>
<label >足球
    <input type="checkbox" name="hobby" id="i2">
</label>
$('label>input:not(:checked)');
#选出没有checked属性的input标签
#w.fn.init [input#i2, prevObject: w.fn.init(1)]

#示例代码
<p class="c1"></p>
<p class="c1"></p>
<p id="d1"></p>
<ul>
    <li id="d2"></li>
    <li id="d3">
        <a href=""></a>
    </li>
</ul>

#找到所有后代中不含a标签的li标签
$("li:not(:has(a))")
#Query.fn.init [li#d2, prevObject: jQuery.fn.init(1)]

#找到不含class=c1的p标签
$('p:not(.c1)');
#jQuery.fn.init [p#d1, prevObject: jQuery.fn.init(1)]

更多示例二

交集选择器，选择两个条件同时成立的标签

$("div.c1")        #选择class=c1的div标签

并集选择器，选择满足以下条件中任意一个的所有标签

$("#d,.c1,p")      #选择id=d的标签，具有class=c1的标签，标签是p的标签。

层级选择器

#后代选择器
$("a b");        #处于a标签级别下的所有b标签，用空格分开。

#子类选择器
$("a.b");        #处于a标签级别下一级别的所有b标签。


#毗邻单一弟弟选择器
$("a+b");       #与a标签同一级别的紧挨着a标签的b标签。

#毗邻多个弟弟选择器
$("a~b");      #与a标签同一级别的位于a标签之后的所有b标签。

属性选择器

#示例代码
<p class="c1"></p>
<p class="c1"></p>
<p id="d1"></p>

#选取带有该属性的指定标签
$('p[class]');
#jQuery.fn.init(2) [p.c1, p.c1, prevObject: jQuery.fn.init(1)]


#选取该属性值等于指定值的标签
$('p[id="d1"]');
#Query.fn.init [p#d1, prevObject: jQuery.fn.init(1)]

##选取该属性值不等于指定值的标签
$('p[class!="c1"]');
#jQuery.fn.init(2) [p#d1, p.c2, prevObject: jQuery.fn.init(1)]