jQuery
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
1.什么是jQuery
jQuery是一个 javascript/Dom/Bom 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
2.jQuery对象与Dom对象的转换
1 jquery对象[0] => Dom对象 2 Dom对象 => $(Dom对象)
3.查找元素
3.1 选择器
基本选择器，直接找到某个或者某类标签： 1. id选择器 $(‘#id‘) 2. class选择器 $(".c1") 3. 标签选择器 $(‘a‘) 4. 组合选择器 $(‘a,.c2,#i10‘) 5. 层级选择器 $(‘#i10 a‘) 表示id为i10下面的所有a标签 $(‘#i10>a‘) i10 下面的所有孩子
基本筛选器：
$(n:first) n中的第一个标签
$(n:last) n中的最后一个标签
$(n:eq(i)) n中索引为i的标签
:first示例：
1 html 代码: 2 <ul> 3 <li>list item 1</li> 4 <li>list item 2</li> 5 <li>list item 3</li> 6 <li>list item 4</li> 7 <li>list item 5</li> 8 </ul> 9 jQuery 代码: 10 $(‘li:first‘); 11 结果: 12 [ <li>list item 1</li> ]
：eq()示例：
1 HTML 代码: 2 <table> 3 <tr><td>Header 1</td></tr> 4 <tr><td>Value 1</td></tr> 5 <tr><td>Value 2</td></tr> 6 </table> 7 jQuery 代码: 8 $("tr:eq(1)") 9 结果: 10 [ <tr><td>Value 1</td></tr> ]
属性选择器：
1 $(‘[alex]‘) 具有alex属性的所有标签 2 $(‘[alex="123"]‘) alex属性等于123的标签 3 4 示例： 5 <input type=‘text‘/> 6 <input type=‘text‘/> 7 <input type=‘file‘/> 8 <input type=‘password‘/> 9 10 $("input[type=‘text‘]") input下的type=‘text’的标签 11 $(‘:text‘) 表单专用的选择器，很快捷
CheckBox全选反选示例（注意引入jQuery）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <input id="i1" type="button" value="全选" /> 10 <input id="i2" type="button" value="取消" /> 11 <input id="i3" type="button" value="反选" /> 12 <table border="1"> 13 <thead> 14 <tr> 15 <th>选择</th> 16 <th>主机名</th> 17 <th>端口</th> 18 </tr> 19 </thead> 20 <tbody id="tb"> 21 <tr> 22 <td><input type="checkbox"></td> 23 <td>1.1.1.1</td> 24 <td>80</td> 25 </tr> 26 <tr> 27 <td><input type="checkbox"></td> 28 <td>1.1.1.2</td> 29 <td>80</td> 30 </tr> 31 <tr> 32 <td><input type="checkbox"></td> 33 <td>1.1.1.3</td> 34 <td>80</td> 35 </tr> 36 </tbody> 37 </table> 38 </div> 39 <script src="jquery-1.12.4.js"></script> 40 <script> 41 $(‘#i1‘).click(function () { 42 $(‘#tb input:checkbox‘).prop(‘checked‘,true); 43 }); 44 $(‘#i2‘).click(function () { 45 $(‘#tb input:checkbox‘).prop(‘checked‘,false); 46 }); 47 $(‘#i3‘).click(function () { 48 $(‘#tb input:checkbox‘).each(function () { 49 var v = $(this).prop(‘checked‘)?false:true; 50 $(this).prop(‘checked‘,v); 51 }); 52 }); 53 54 </script> 55 </body> 56 </html>
标签高度获取：
1 $(‘#i1‘).height(); //获取当前标签的高度； 2 $(‘#i1‘).innerHeight() ; //获取自身高度+padding； 3 $(‘#i1‘).outerHeight(); //参数：false--> 获取自身高度 + padding + border(默认false)； 4 $(‘#i1‘).outerHeight(true); //参数：true---> 获取自身高度 + padding + border + margin。
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 margin-top: 90px; 9 height: 300px; 10 width: 400px; 11 border: 2px solid red; 12 padding-top: 20px; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="i1"></div> 18 <script src="jquery-1.12.4.js"></script> 19 <script> 20 var v1 = $(‘#i1‘).height(); //获取当前标签的高度 21 var v2 = $(‘#i1‘).innerHeight() ; //获取自身高度+padding； 22 var v3 = $(‘#i1‘).outerHeight(); //参数：false--> 获取自身高度 + padding + border(默认false)； 23 var v4 = $(‘#i1‘).outerHeight(true); //参数：true---> 获取自身高度 + padding + border + margin； 24 console.log(v1); // 299.8 25 console.log(v2); // 319.8 26 console.log(v3); // 323 27 console.log(v4); // 413 28 </script> 29 </body> 30 </html>
以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段