Jquery学习
Posted 2312947032zyk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery学习相关的知识，希望对你有一定的参考价值。
首先去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 //标签选择器--获取文本并给文本设置字体颜色为blue 23 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学习的主要内容，如果未能解决你的问题，请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。
markdown 在WordPress中使用jQuery代码片段