经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery的加载和选择器用法简单示例
来源:jb51  时间:2019/5/14 8:32:33  对本文有异议

本文实例讲述了JQuery的加载和选择器用法。分享给大家供大家参考,具体如下:

JQuery加载

一般开发中不用原生的JavaScript而是用JQuery,开发效率比较高。

下面程序是原生和JQuery库的比较程序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. window.onload = function () {
  9. var oDiv = document.getElementById('div1');
  10. alert('原声弹出的' + oDiv);
  11. };
  12. $(document).ready(function () {//这是jquery的写法,作用和原生js的window.onload作用是一样的
  13. var $div = $('#div1');
  14. alert('jquery弹出的' + $div);
  15. });
  16. //下面是上面jQuery完整写法的简写
  17. $(function () {
  18. var $div = $('#div1');
  19. alert('jquery简写弹出的' + $div);
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div id="div1">这是一个div元素</div>
  25. </body>
  26. </html>
  27.  

虽然原生的js函数是写在前面的,但是实际上JQuery弹出之后才会弹出js的alert,因为window.onload是等标签加载完成之后,再渲染完之后才允许。ready是等标签加载完之后就运行,所以要快。

JQuery选择器

    * jquery可以快速的选择元素,选择规则和css样式相同,使用length属性判断是是否选择成功
        * $(#myid) 选择id为myid的网页元素
        * $('.myclass') 选择class为myclass的元素
        * $("li")   选择所有li元素
        * $("#ul1 li span")  选择id为ul1元素下的所有li下的span元素
        * $("input[name=first]")    选择name属性等于first的input属性
    *

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--不能直接撬开这里写-->
  7. <script type="text/javascript">
  8. /*
  9. * jquery可以快速的选择元素,选择规则和css样式相同,使用length属性判断是是否选择成功
  10. * $(#myid) 选择id为myid的网页元素
  11. * $('.myclass') 选择class为myclass的元素
  12. * $("li") 选择所有li元素
  13. * $("#ul1 li span") 选择id为ul1元素下的所有li下的span元素
  14. * $("input[name=first]") 选择name属性等于first的input属性
  15. *
  16. * 对选择集进行过滤
  17. * $("div").has("p") 选择包含p元素的div元素
  18. * $('div').not(".myclass") 选择class不等于myclass的div元素
  19. * $('div').filter('.myclass') 选择class等于myclass的元素
  20. * $('div').eq(5) 选择第六个div元素
  21. * */
  22. $(function () {
  23. var $div = $(#div1);
  24. var $div2 = $('.box');
  25. var $li = $('.list li');
  26. $div.css({'color': 'red'});
  27. $div2.css({'color': 'green'});
  28. $li.css({'color':'prink'});
  29. });
  30. </script>
  31. <!--<style type="text/css">-->
  32. <!--#div1{-->
  33. <!--color: red;-->
  34. <!--}-->
  35. <!--.box{-->
  36. <!--color: green;-->
  37. <!--}-->
  38. <!--.list li{-->
  39. <!--background-color: mediumspringgreen;-->
  40. <!--}-->
  41. <!--</style>-->
  42. </head>
  43. <body>
  44. <div id="div1">div1</div>
  45. <div class="box">div2</div>
  46. <div class="box">div3</div>
  47. <ul class="list">
  48. <li>1</li>
  49. <li>2</li>
  50. <li>3</li>
  51. <li>4</li>
  52. <li>5</li>
  53. <li>6</li>
  54. <li>7</li>
  55. <li>8</li>
  56. </ul>
  57. </body>
  58. </html>
  59.  

对选择集进行过滤

* $("div").has("p") 选择包含p元素的div元素
* $('div').not(".myclass") 选择class不等于myclass的div元素
* $('div').filter('.myclass') 选择class等于myclass的元素
* $('div').eq(5) 选择第六个div元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function () {
  9. var $div=$('div')
  10. $div.css({backgroundColor:'red'});
  11. $div.has('p').css({backgroundColor:"green"});
  12. $div.eq(4).css({textIndent:'20px'});
  13. })
  14. </script>
  15. </head>
  16. <body>
  17. <div>1</div>
  18. <div><p>2</p></div>
  19. <div>3</div>
  20. <div>4</div>
  21. <div>5</div>
  22. <div>6</div>
  23. <div>7</div>
  24. <div>8</div>
  25. </body>
  26. </html>
  27.  

判断是否选择到了元素

JQuery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0就是没找到元素,大于0就是找到了元素

  1. var $div1=$("#div1");
  2. alert($div1.length);
  3.  

手册上传至github。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看jb51专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号