[关闭]
@MRsunhuimin 2019-08-18T10:44:22.000000Z 字数 2026 阅读 158

JQuery(08.15)

web

作者:孙慧敏

1. 介绍

  • js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。
  • jquery是一个快速、简洁的JavaScript框架,极大的简化了javascript编程。

2. 使用过程

  • 先复制jquery,引入js包中
  • 然后再写<script src="js/jquery-1.12.4.js"type="text/jscript"></script>
  • 最后还要写<script>代码<script>

3. 语法

3.1 获取表单元素的值(val())

  • $(选择器).val(); //获取

  • $(选择器).val(值); //赋值

3.2 获取元素下所有内容(html())

  • .html();//获取
  • .html("XXXX");//赋值

3.3 获取元素下文本内容

  • .text();//获取
  • .text(w);文本内容); //赋值

3.4 操作元素CSS属性

操作单个CSS

  • $(选择器).css(属性,值); //改变

  • $(选择器).css(属性); //获取

操作多个CSS

  • $(选择器).css({属性1:值1,属性2:值2}); //改变

3.5 类型转换

  • js转jquery:$(js对象);
  • jquery转js:(选择器).get(0)或(选择器)[0]

3.6 操作class属性

  • //addClass 添加class样式
    $(".div1").addClass("div1");

  • //removeClass 删除class样式
    $(".div1").removeClass("div1");

3.7 操作属性

  • (选择器).attr(HTML属性,值); //改变属性值

3.8 隐藏与显示

  • 隐藏:hide(显示时间<毫秒>,函数)显示元素
  • 显示:show(显示时间<毫秒>,函数)显示元素
  • 切换:toggle(显示时间<毫秒>,函数) 隐藏与显示
  • 遍历
  1. $(选择器).each(function(下标,值){
  2. //代码块
  3. });
  4. $.each(数组名,function(下标,值){
  5. //代码块
  6. });

4. jquery事件

4.1 表单提交事件(submit)

  1. $(选择器).submit(function(){
  2. return true; //true提交 false禁止提交
  3. });

4.2 单击事件(click)

  1. $(选择器).click(function(){
  2. });

4.3 键盘按下事件(keydown)

  1. $(window).keydown(function(k){
  2. k.keyCode //获取键盘按下后对于的键值
  3. });

4.4 获取光标事件(focus)

  1. $(选择器).focus(function(){
  2. });

4.5 光标离开事件(blur)

  1. $(选择器).blur(function(){
  2. });

4.6 元素内容被改变事件(change<用于html的下拉框中>)

  1. $(选择器).change(function(){
  2. });
4.7 动态生成元素,并绑定事件(on)
  1. $("body").on(要绑定的事件,目标元素,函数);
  2. 如:
  3. $("body").on("click","#a1",function(){
  4. //代码块
  5. });

5. 补充

    document.getElementById("div")和$("#div")对象是同一个,但是前者是原生的,后者是封装的(拥有自己的方法和属性),两者不能相互调用,除非类型转换

6. 练习

  1. //动态生成元素
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title></title>
  7. </head>
  8. <body>
  9. <div>
  10. <p>a</p>
  11. <p>b</p>
  12. <p>c</p>
  13. </div>
  14. <button>create</button>
  15. </body>
  16. <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
  17. <script>
  18. $(function(){
  19. //添加点击事件
  20. $("p").click(function(){
  21. $(this).text('click');
  22. })
  23. //创建一个新节点
  24. $("button").click(function(){
  25. var p ="<p>new</p>";
  26. $("div").append(p);
  27. })
  28. /*结果证明,click并没有绑定到新的节点上。
  29. 如果需要给动态的元素绑定事件,需要使用到on()
  30. on()方法,可以给未来的元素绑定事件
  31. 使用方法:
  32.    1、先选中动态生成元素的父元素
  33.    2、然后绑定事件
  34.    3、再选中子类
  35. 可以理解为给div下的p元素包括未来的p元素绑定click事件,这是比较通俗易懂的理解,详细内容可以看文档的具体说明*/
  36. $("div").on("click","p",function(){
  37. $(this).text("click");
  38. });
  39. });
  40. </script>
  41. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注