VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • Web前端基础(15):jQuery基础(二)

作者:@小灰灰
本文为作者原创,转载请注明出处:https://www.cnblogs.com/liuhui0308/p/11885585.html


回到顶部(go to top)

1. jQuery选择器

jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。

1.1 基本选择器

例子如下:

 

 


	
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div></div>
  9. <div id="box"></div>
  10. <div class="box"></div>
  11. <div class="box"></div>
  12. <div></div>
  13. <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
  14. <script type="text/javascript">
  15. //入口函数
  16. $(function(){
  17. //三种方式获取jquery对象
  18. var jqBox1 = $("#box");
  19. var jqBox2 = $(".box");
  20. var jqBox3 = $('div');
  21.  
  22. //操作标签选择器
  23. jqBox3.css('width', '100');
  24. jqBox3.css('height', 100);
  25. jqBox3.css('background-color', 'red');
  26. jqBox3.css('margin-top', 10);
  27.  
  28.  
  29. //操作类选择器(隐式迭代,不用一个一个设置)
  30. jqBox2.css("background", "green");
  31. jqBox2.text('哈哈哈')
  32.  
  33. //操作id选择器
  34. jqBox1.css("background", "yellow");
  35.  
  36. })
  37. </script>
  38.  
  39. </body>
  40. </html>

 

 

1.2 层级选择器

 

 

A B,获得A元素内部的所有的B元素。(祖先) -- 后代 

A > B,获得A元素下面的所有的B元素。(父子)

A + B,获得A元素同级下一个B元素。(兄弟) 

A ~ B,获得A元素同级所有的B元素。(兄弟)

 例子如下:


	
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="js/jquery-2.1.0.js"></script>
  7. <script>
  8. $(function () {
  9. //获取ul中的li设置为粉色
  10. //后代:儿孙重孙曾孙玄孙....
  11. var jqLi = $("ul li");
  12. jqLi.css("margin", 5);
  13. jqLi.css("background", "pink");
  14.  
  15. //子代:亲儿子
  16. var jqOtherLi = $("ul>li");
  17. jqOtherLi.css("background", "red");
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <ul>
  23. <li>111</li>
  24. <li>222</li>
  25. <li>333</li>
  26. <ol>
  27. <li>aaa</li>
  28. <li>bbb</li>
  29. <li>ccc</li>
  30. </ol>
  31. </ul>
  32. </body>
  33. </html>

 

 

1.3 基本过滤选择器

 

 


	
  1. :first 第一个
  2. :last 最后一个
  3. :not(...) 删除指定内容。例如:1234not(3) --> 124
  4. :even 偶数,从0开始计数 -- 操作索引号,页面显示奇数项
  5. :odd 奇数
  6. :eq(index) 等于index
  7. :gt(index) 大于index
  8. :lt(index) 小于index
  9. --------------------------------------------------------
  10. :header 获得标题(<h1>/<h2> ...)
  11. :animated 获得动画的
  12. :focus 获得焦点

例子如下:


	
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>基本过滤选择器</title>
  6. </head>
  7. <body>
  8. <ul>
  9. <li>哈哈哈哈,基本过滤选择器</li>
  10. <li>嘿嘿嘿</li>
  11. <li>天王盖地虎</li>
  12. <li>小鸡炖蘑菇</li>
  13.  
  14. </ul>
  15. </body>
  16. <script src="js/jquery-2.1.0.js"></script>
  17. <script type="text/javascript">
  18.  
  19. $(function(){
  20. //获取第一个 :first ,获取最后一个 :last
  21.  
  22. //奇数
  23. $('li:odd').css('color','red');
  24. //偶数
  25. $('li:even').css('color','green');
  26.  
  27. //选中索引值为1的元素 *
  28. $('li:eq(1)').css('font-size','30px');
  29.  
  30. //大于索引值1
  31. $('li:gt(1)').css('font-size','50px');
  32.  
  33. //小于索引值1
  34. $('li:lt(1)').css('font-size','12px');
  35.  
  36. })
  37. </script>
  38. </html>

 

 

1.4 属性选择器

 

 


	
  1. [属性名] 获得有属性名的元素。
  2. [属性名=值] 获得属性名等于值的元素
  3. [属性名!=值] 获得属性名不等于值的元素
  4. [...][...][...] 复合属性选择器,多个属性同时过滤。where...and...and...
  5. ---------------------------------------------------------
  6. [属性名^=值] 获得属性名以值开头的元素
  7. [属性名$=值] 获得属性名以值结尾的元素
  8. [属性名*=值] 获得属性名含有值的元素

例子如下:


	
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="box">
  9. <h2 class="title">属性元素器</h2>
  10. <!--<p class="p1">我是一个段落</p>-->
  11. <ul>
  12. <li id="li1">分手应该体面</li>
  13. <li class="what" id="li2">分手应该体面</li>
  14. <li class="what">分手应该体面</li>
  15. <li class="heihei">分手应该体面</li>
  16.  
  17. </ul>
  18.  
  19. <form action="" method="post">
  20.  
  21. <input name="username" type='text' value="1" checked="checked" />
  22. <input name="username1111" type='text' value="1" />
  23. <input name="username2222" type='text' value="1" />
  24. <input name="username3333" type='text' value="1" />
  25. <button class="btn-default">按钮1</button>
  26. <button class="btn-info">按钮1</button>
  27. <button class="btn-success">按钮1</button>
  28. <button class="btn-danger">按钮1</button>
  29.  
  30.  
  31. </form>
  32. </div>
  33. </body>
  34. <script src="js/jquery-2.1.0.js"></script>
  35. <script type="text/javascript">
  36.  
  37. $(function(){
  38. //标签名[属性名] 查找所有含有id属性的该标签名的元素
  39. $('li[id]').css('color','red');
  40.  
  41. //匹配给定的属性是what值得元素
  42. $('li[class=what]').css('font-size','30px');
  43. //[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
  44. $('li[class!=what]').css('font-size','50px');
  45.  
  46. //匹配给定的属性是以某些值开始的元素
  47. $('input[name^=username]').css('background','gray');
  48. //匹配给定的属性是以某些值结尾的元素
  49. $('input[name$=222]').css('background','greenyellow');
  50.  
  51. //匹配给定的属性是以包含某些值的元素
  52. $('button[class*=btn]').css('background','red')
  53.  
  54.  
  55. })
  56.  
  57. </script>
  58. </html>

出处:https://www.cnblogs.com/liuhui0308/p/11885585.html

 


相关教程