首先去jQuery的官网下载jQuery包：
https://jquery.com/download/
随后导入所需的项目中：
在head中进行引用：
1 <head>2 ????<meta charset="UTF-8">3 ????<title>Title</title>4 ???<script src="static/jquery-3.3.1.min.js"></script>5 </head>
jQuery的一般形式：
1 <script type="text/javascript">2 ?????????$(function () {3 ??????????????//此处写jQuery代码4 ?????????})5 </script>demo测试：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script src="static/jquery-3.3.1.min.js"></script> 7 </head> 8 <body> 9 ????<div id="jid"><p>我是jQuery通过id选择器获取的</p></div>10 ????<p class="jclass">我是jQuery通过class 类选择器获取的</p>11 ????<h1>我是jQuery标签选择器</h1>12 ????<script type="text/javascript">13 ????????//$(document).ready(function () {})14 ?????????$(function () {15 ?????????????//id选择器--获取元素和文本16 ?????????????var jid = ?$("#jid")17 ?????????????console.info(jid.html()) //获取div内的元素（）18 ?????????????console.info(jid.text()) //获取div内的文本19 ?????????????//类选择器--给字体设置为红色20 ?????????????var jclass = ?$(".jclass")21 ?????????????jclass.css("color","red")22 ?????????????//标签选择器--获取文本并给文本设置字体颜色为blue23 ?????????????var jbq = $("h1")24 ?????????????jbq.css({25 ????????????????????"color":"blue",26 ????????????????????"background-color":"#98bf21",27 ????????????????????})28 ?????????????console.info(jbq.text())29 ?????????})30 ????</script>31 </body>32 </html>实验结果：
层次选择器包括：后代选择器、子选择器、相邻元素选择器、同辈元素选择器来选中页面中的元素
- ancestor descendant：在给定的祖先元素下匹配所有的后代元素
- parent > child：在给定的父元素下匹配所有的子元素
- prev + next ：匹配所有紧接在 prev 元素后的 next 元素
- prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素
主要代码：
1 ?$(function () { 2 ????????????var l1 = $("#uu a") //后代选择器 3 ????????????l1.css(‘color‘,‘red‘) 4 ????????????var l2 = $(‘#uu>li‘).text(); ?//字节点选择器 5 ????????????console.info(l2) 6 ????????????var l3 = $(‘#h+li‘); ?//直接后兄弟选择器 7 ????????????l3.css(‘background-color‘,‘yellow‘) 8 ????????????var l4 = $(‘#d~li‘); ?//后兄弟选择器 9 ????????????l4.css("background-color","orange");10 ????????}) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script src="static/jquery-3.3.1.min.js"></script> 7 </head> 8 <body> 9 ????<ul id="uu">10 ????????<a ?id=‘a1‘ ?href="">被风吹过的夏天</a>11 ????????<h3>壁纸种类</h3>12 ????????<li id="h">风景</li>13 ????????<li>护眼</li>14 ????????<li>四季</li>15 ????????<li id="d">汽车</li>16 ????????<li>游戏</li>17 ????????<li><a href="">更多</a></li>18 ????</ul>19 ????<script>20 ????????$(function () {21 ????????????var l1 = $("#uu a") //后代选择器22 ????????????l1.css(‘color‘,‘red‘)23 ????????????var l2 = $(‘#uu>li‘).text(); ?//字节点选择器24 ????????????console.info(l2)25 ????????????var l3 = $(‘#h+li‘); ?//直接后兄弟选择器26 ????????????l3.css(‘background-color‘,‘yellow‘)27 ????????????var l4 = $(‘#d~li‘); ?//后兄弟选择器28 ????????????l4.css("background-color","orange");29 ????????})30 ????</script>31 </body>32 </html>截图：
《三、过滤索引选择器》
根据索引获取元素，常见的有如下几个：
- :even 匹配所有索引值为偶数的元素，从 0 开始计数
- :first 获取第一个元素
- :last 获取最后个元素
- :odd 匹配所有索引值为奇数的元素，从 0 开始计数
- :eq(index) 匹配一个给定索引值的元素
- :gt(index) 匹配所有大于给定索引值的元素
- :lt(index) 匹配所有小于给定索引值的元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script src="static/jquery-3.3.1.min.js"></script> 7 </head> 8 <body> 9 <table border="1px solid " cellspacing="0px" cellpadding="0px" width="80%" height="100px">10 ????<tr>11 ????????<td>张三</td>12 ????????<td>张三</td>13 ????????<td>张三</td>14 ????????<td>张三</td>15 ????</tr>16 ????<tr>17 ????????<td>李四</td>18 ????????<td>李四</td>19 ????????<td>李四</td>20 ????????<td>李四</td>21 ????</tr>22 ????<tr>23 ????????<td>张三</td>24 ????????<td>张三</td>25 ????????<td>张三</td>26 ????????<td>张三</td>27 ????</tr>28 ????<tr>29 ????????<td>李四</td>30 ????????<td>李四</td>31 ????????<td>李四</td>32 ????????<td>李四</td>33 ????</tr>34 </table>35 <ul>36 ????<li>AAA</li>37 ????<li>BBB</li>38 ????<li>CCC</li>39 ????<li>DDD</li>40 ????<li>EEE</li>41 ????<li>FFF</li>42 </ul>43 <script type="text/javascript">44 ????$(function () {45 ?????????$("tr:even").css("background",‘red‘) //选中表格的奇数行46 ?????????$("tr:odd").css("background",‘yellow‘) //选中表格的偶数行47 ?????????$("li:first").css("background",‘#871‘) //选中列表的第一行48 ?????????$("li:eq(2)").css("background",‘blue‘) //选中列表的第2行，索引从0开始49 ?????????$("li:gt(2)").css("background",‘grey‘)//选中列表的大于第2行的，索引从开始0开始50 ?????????$("li:nth-child(2)").css("background",‘green‘)//选中列表的第2行，索引从开始1开始51 ????????$("li:last").css("background",‘pink‘) //选中列表的最后一行52 ????})53 </script>54 </body>55 </html>截图：
《四、属性选择器》
属性选择器，顾名思义，根据属性值来选取元素，大概有以下几种情况：
$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。
源代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script src="static/jquery-3.3.1.min.js"></script> 7 </head> 8 <body> 9 <form action="">10 ????<input type="text" name="name1"> <br>11 ????<input type="password" name="pwd"> <br>12 ????<input type="email" name="ep"> <br>13 ????<input type="number" name="pwda"> <br>14 </form>15 <script type="text/javascript">16 ????$(function () {17 ????????//选取含有属性并且属性值为text的表单元素18 ?????????$("input[type=‘text‘]").css("border",‘1px solid red‘)19 ????????//选取含有属性并且属性值以p开头的表单元素20 ?????????$("input[name^=‘p‘]").css("border",‘1px solid blue‘)21 ????????//选取含有属性并且属性值以p结尾的表单元素22 ?????????$("input[name$=‘p‘]").css("background",‘#871‘)23 ????})24 </script>25 </body>26 </html>截图:
Jquery学习
原文地址：https://www.cnblogs.com/2312947032zyk/p/10355757.html