经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery基础
来源:cnblogs  作者:悦耳pn  时间:2019/10/25 8:46:43  对本文有异议
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>jquery基础/选择器</title>
  8. <script src="jquery.min.js"></script>
  9. <style>
  10. .box{
  11. width: 100px;
  12. height: 100px;
  13. background: pink;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="box">
  19. </div>
  20.  
  21. <ul>
  22. <li>大比分输给</li>
  23. <li>那我如果不我</li>
  24. <li>那我</li>
  25. <li>引号6额</li>
  26. <li>了就人工</li>
  27. </ul>
  28.  
  29. <script>
  30. // jQuery是将原生js里常用的一些功能进行封装
  31.  
  32. // $(function () { });是等待页面的dom元素全部加载完毕,再执行代码 是jquery的入口函数
  33. $(function () {
  34. $('.box').hide();
  35. // 用原生js获取到的对象就是dom对象, 【 dom对象只能使用原生js的属性和方法】
  36. var mydiv = document.querySelector('.box');
  37. // document.querySelector(css selectors)返回文档中匹配的第一个元素
  38. console.dir(mydiv);
  39. // 用jquery方式获取到的对象就是jquery对象, 【 jquery对象只能使用jquery方法】 jquery对象是以数组形式存储的
  40. $('.box');
  41. console.dir($('.box'));
  42. // dom对象和jquery对象相互转换///////////////////////////////
  43. var myvideo = document.querySelector('video');// dom对象
  44. $(myvideo);// dom对象转jquery对象
  45.  
  46. // jquery对象转dom对象 方法一:$('div')[index] index是索引号; 方法二:$('div').get(index) index是索引号
  47. $('video')[0];
  48. $('video').get[0];
  49. // jquery设置样式: $('div').css('属性','值');
  50.  
  51. // jquery指定,筛选选择器 :first :last :odd选择索引号为奇数的元素 :even选择索引号为偶数的元素
  52. $('ul li:first').css('color','red');
  53. $('ul li:eq(1)').css('color','orange');// :eq(index) 索引号从0开始
  54.  
  55. // jquery筛选方法:
  56. $('li').parent(); //parent()查找父元素 返回的是最近一级的父元素
  57. $('ul').children('li');//children()查找最近一级的子元素
  58. $('ul').find('li');//find()相当于后代选择器
  59. $('li:first').siblings('li');// siblings()查找兄弟节点,不包括自身
  60. $('li:eq(1)').nextAll('li');// nextAll()查找当前元素之后的所有同辈元素
  61. $('li:eq(1)').prevtAll('li');// prevtAll()查找当前元素之前的所有同辈元素
  62. $('li:eq(2)').hasClass('box');// 检查当前元素是否又某个特定类,有就返回true
  63. // $(this).index()得到当前索引号
  64.  
  65. // eq()去获取相应索引号所对应的元素 index()获取某元素的索引号
  66.  
  67. // 【jquery动画效果:】
  68. // 显示show(['speed](slow/normal/fast)','[easing(用来指定切换效果:'默认swing先缓慢变化再快速变化再慢下来/linear每一时刻的速度都是相同的')]','[fn(回调函数,在动画完成时执行的函数,每个元素执行一次)]','time'); 显示时的速度和动画时常,如果没有任何参数就是直接显示
  69. //隐藏hide()
  70. // 滑动:slideDown() slideUp() slideToggle() 滑动切换,点一下下拉,再点一下上拉
  71. // 淡入淡出效果:fadeIn() fadeOut() fadeToggle() fadeTo(speed,opacity,easing,[fn])修改元素透明度【speed和opacity必须写】
  72. // 自定义动画:animate(params[表示想要更改的样式属性 必须写 符合属性采用驼峰命名法 属性名可以不加引号],speed,easing,[fn]);
  73.  
  74. // 【动画队列:动画一旦触发就会执行,如果短时间多次触发动画就可能出现动画排队效果】:stop()停止动画或效果。stop【必须写到动画或者效果的前面】相当于停止上一次的动画。实现不管触发多少次动画,只执行最后的s一次动画效果
  75.  
  76. // hover(over/out)事件切换 over--mouseenter out---mouseleave
  77.  
  78.  
  79. // 链式编程
  80. // $('span').eq(index).show().siblings().hide();让当前元素显示,让当前元素的兄弟元素隐藏
  81.  
  82. // 修改样式:.css({key:'value',key:'value'});属性名可以不加引号,属性值时数字也可以不加引号
  83.  
  84. // 通过操作类名来修改样式的方法比较多用 类名的样式写在css中.操作类名不影响原有的类名
  85. // 【操作类名,可以在类名里定义一些属性和值,要不要这些属性取决于有没有类名】
  86. // 添加类:$('').addClass('类名'); [注意类名不要加点]
  87. // 删除类:$('').removeClass('类名');
  88. // 切换类:如果没有该类名就给它加上,如果有就给它去除 $('').toggleClass('类名'); 即可以实现,在点击事件中,第一下加上类名,再点一下移除 可以实现动画效果
  89.  
  90. // 设置或获取元素的固有属性值:【设置属性值prop('属性',属性值) 获取属性值prop('属性')】 【元素的自定义属性用prop()获取不到 通过attr()获取】
  91.  
  92. // 数据缓存 data() 数据缓存在data()里面,不会改变dom元素 当页面刷新,数据也会被移除
  93.  
  94. // 获取文本值内容: $('div').html(); 相当于innerHTML 修改内容 $('div').html('属性值'); 获取或者修改文本内容,不包含标签text() 获取或设置表单/textarea的value值 val()
  95.  
  96.  
  97. // 节流阀 互斥锁:用来保证在任何时刻都只有一个线程访问该对象
  98.  
  99. // toggleClass('类名') 如果存在该类名就删除它,如果不存在该类名就添加它
  100. });
  101. </script>
  102. </body>
  103. </html>

 

原文链接:http://www.cnblogs.com/677a/p/11732395.html

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

本站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号