我的学习方法：先入门，后进阶！本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。详细介绍页面 http://demo.jb51.net/html/jquery/jQuery-Selector.html</p><p><b><br /><b> </p><p><title>jQuery-Selectors</title> </p><p>.div<br />{<br /> width:95%;<br /> margin-left:15px;<br /> margin-top:15px;<br /> margin-right:15px;<br /> padding-left:5px;<br /> padding-top:5px;<br /> padding-bottom:5px;<br /> background-color:#ccc;<br /> border:#999 1px solid;<br /> line-height:30px;<br /> font-size:13px;<br /> font-family:微软雅黑;<br />}<br />.blue{color:Blue;}<br />.green{color:Green;}<br />.button{border:green 1px solid;width:100px;}<br />.xiaobiao{ font-weight:bold;}<br />.red_test{background-color:red; color:White; width:300px; height:30px;}<br />.li_test{border:#000 1px solid;} </p><p></b> </p><p>jQuery-Selectors(选择器)的使用(一、基本篇)<br />本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！<br /> <br />本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。<br /> <br />您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com <br /> <br />由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！<br /> <br />您可以到jQuery官网来学习更多的有关jQuery知识。<br /> <br /><strong>版权所有：白夜 博客 转载请保留出处和版权信息！</strong> </p><p>1. #id用法<br /> <br />定义：根据给定的ID匹配一个元素。<br /> <br />返回值：Element<br /> <br />参数：id (String) : 用于搜索的，通过元素的 id 属性中给定的值<br /> <br />实例：将ID为”div_red”的DIV的边框改为红色<br /> <br />代码：$(“#div_red”).css(“border”,”red 2px solid”); //点击按钮一将执行这句代码 </p><p>DIV ID=”div_red” </p><p>扩展：#id中的id可以是页面任何元素的id,如input,btuuon,div,table,span等等 </p><p>2. element用法<br /> <br />定义：根据给定的元素名匹配所有元素。<br /> <br />返回值：Array<Element><br /> <br />参数：element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。<br /> <br />实例：将页面<P>标记内的文字颜色改为红色<br /> <br />代码：$(“p”).css(“color”,”red”); //点击按钮二将执行这句代码 </p><p>P标记1 ID=”p1″</p><p>P标记2 无ID</p><p> </p><p>扩展：参数值可以是页面任何元素，如div,button,div,table,tr,td,p,h1,span,input </p><p>3. .class用法<br /> <br />定义：根据给定的类（样式名称）匹配元素。 <div class="pagination"><a title="Page"> <b>1</b>/<b>2</b> </a> <b>1</b> <a href="/cos/2020/0516/509360_2.shtml">2</a> <a href="/cos/2020/0516/509360_2.shtml">下一页</a> <a href="/cos/2020/0516/509360_2.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0310/1096524.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/ap/58/08/1096524.jpg" src="https://www.easck.com/d/file/ap/58/08/1096524.jpg"></div> <div class="txtInfo"><h3>Office升级后，如何继续使用Outlook 2003</h3><div class="extr clearfix"><p><span class="time fl">2023-03-10</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094418.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271649582849.jpg"></div> <div class="txtInfo"><h3>USB调试在哪里打开 手机USB调试模式设置大全</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0223/1093232.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg" src="https://www.easck.com/d/file/p/2023/02-23/202302231116431832.jpg"></div> <div class="txtInfo"><h3>一步一步学Nero Burning ROM</h3><div class="extr clearfix"><p><span class="time fl">2023-02-23</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0222/1093019.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg" src="http://hard.onlinedown.net/images/ys/20040826sxf9.jpg"></div> <div class="txtInfo"><h3>DVD刻录势如破竹，品牌盘片大刀阔斧</h3><div class="extr clearfix"><p><span class="time fl">2023-02-22</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090649.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121518491726.jpg"></div> <div class="txtInfo"><h3>蚂蚁Chrome中国版抢票攻略</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090603.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg" src="https://www.easck.com/d/file/p/2023/02-12/20230212115340685.jpg"></div> <div class="txtInfo"><h3>千牛云盘怎么免费扩容 千牛云盘免费扩容教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0119/1087414.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg" src="https://www.easck.com/d/file/p/2023/01-19/202301191502541032.jpg"></div> <div class="txtInfo"><h3>gzip是什么文件?gzip文件怎么打开?</h3><div class="extr clearfix"><p><span class="time fl">2023-01-19</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086996.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172311405014.jpg"></div> <div class="txtInfo"><h3>美图秀秀营造光晕朦胧意境</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086991.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301172235124856.jpg"></div> <div class="txtInfo"><h3>美图秀秀教程之点亮绚丽夜景倒影</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086793.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg" src="https://www.easck.com/d/file/p/2023/01-17/20230117113306957.jpg"></div> <div class="txtInfo"><h3>美图淘淘教程之快速美化百张宝贝图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0516/509360.shtml", "title": "jQuery Selectors(选择器)的使用(一、基本篇)-易采站长站", "description": "我的学习方法：先入门，后进阶！本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 详细介绍页面 http://demo.", "pubDate": "2020-05-16 T 18:46:21+08:00", "upDate": "2020-05-16 T 18:46:21+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0516/509360.shtml", "wapUrl":"https://www.easck.com/cos/2020/0516/509360.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>
