博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2015.7.23 第十二课 课程重点(jq元素:获取、添加、删除、设置、绑定、显示隐藏、回调、动画)...
阅读量:6900 次
发布时间:2019-06-27

本文共 2540 字,大约阅读时间需要 8 分钟。

1、获取内容:

 

  text():获取文本内容。text获取的是文本内容,假设被指定的<div>里面还有各种标签,text也只获取里面的纯文本内容。

  html():获取括号内内容。而html则是获取里面的全部内容,包括标签也会一起打印出来。

 

  【例】

$(“#d1”).text(“aaaaa”);          //打印出 aaaaa

$(“#d1”).html(“<div>aaaa</div>”);    //打印出<div>aaaa</div>

 

2、添加元素:

 

$(A).append(B):给A标签里面,加入一个B。

$(A).appendTo(B):把A,加入到B标签里面。

$(A).after(B):在A标签的后面,加上一个B。

 

  【例】

$(“p:eq(1)”).append($(“a:eq(1)”));    //给页面中第二个p标签里面,加入页面中第二个a标签

$(“img:eq(1)”).appendTo(“p:eq(1)”);     //把页面中第二个img标签,加入到页面中第二个p标签里

$(“img:eq(1)”).after(“<p></p>”);      //在页面中第二个img标签后面,加入一个p标签

 

3、删除元素:

 

$(A).remove():把A标签整个的移除掉(练标签一起移除掉)。

$(A).empty():把A里面的内容全部清空(标签会保留)。

 

【例】

$("p:eq(1)").remove();    //给页面中第二个p标签连标签一起移除掉。

$(“p:eq(1)”).empty();      //把第二个p标签里面的内容清掉,保留标签。

 

4、获取/设置元素:

 

  val():获取到任何标签的value属性值。

  val(B):设置值为B,此时获取得到的val值就是B的内容。

 

  【例】

$("txt").val();        //获取到txt标签里面的value属性值。

$(“txt”).val("aaaa");      //设置txt标签的value属性值为aaaa。

 

5、绑定事件:

 

  bind():对于一个对象,可以用bind绑定多个事件。并且可以反复执行。

  unbind():解除绑定。

  one():对于一个对象,可以用one对它绑定一个事件,并且只执行一次。

 

  【例】

  $("img")

      .bind("click",function(){事件1})

      .bind("click",function(){事件2})

      .bind("click",function(){事件3})    //当我们点击img时,同时触发事件1、2、3;再点击img,再次触发事件123。

 

$(“p”).unbind(“click”);            //让p标签无法点击。

 

  $("div").one("click",function(){事件1});    //当我们点击div时,触发事件1;再点击div时,就不会触发事件了。

 

6、显示和隐藏:

 

  //左上到右下  

  show():显示元素,从左上到右下展开。(当括号内加入时间后,代表用多长时间展开。)

  hide():隐藏元素,从右下往左上收缩隐藏。(当括号内加入时间后,代表用多长时间收缩。)

  toggle():在显示show和隐藏hide之间交替执行,瞬间显示或者隐藏。可加入时间。

 

  //上下

  slideDown():显示元素,从上往下逐渐展开。

  slideUp():隐藏元素,从下往上收缩隐藏。

  slideToggle():在显示slideDown和隐藏slideUp之间交替执行,方式为上下伸缩。可加入时间。

 

  //透明

  fadeIn():渐变的显示出来。由透明到出现。

  fadeOut():渐变的隐藏掉。逐渐变透明最后消失。

 

 

 

  【例】

  $("#btn").click(function(){

    $("#d1").hide(2000);      

  })                  //当点击btn时,用1秒的时间从右下到左上隐藏d1

 

  $("#btn").click(function(){

    $("#d1").show(2000);      

  })                  //当点击btn时,用1秒的时间从左上到右下展开d1

 

  $("#btn").click(function(){

    $("#d1").toggle(2000);      

  })                  //当点击btn时,以2秒的速度左上到右下展开或隐藏d1(点击隐藏、再点击展开、……,交替执行)

 

 

7、回调函数:在现在的动作执行完后,立刻执行我们在里面定义的事件。

 

  【例】

  $("#btn").click(function(){

    $("#d1").hide(1000,function(){alert("aaa");});      

  })                  //当点击btn时,用1秒的时间右下到左上隐藏d1,然后打印出aaa

 

8、动画时间animate:

 

  animate:在多长时间内,从一个状态变到另一个状态。

 

  【例】

  $("#d1").css("position", "absolute").animate({ "top": "250px", "left": "300px" }, 2000,

          function () {

$("#d1").animate({ "top": "0px", "left": "600px" }, 2000);

        });

 

  //用2秒时间,从原来的位置,移动到绝对定位下的top:250px,left:300px的位置;然后用2秒时间,移动到top:0px,left:600px的位置。

 

转载于:https://www.cnblogs.com/59muyu/p/4676519.html

你可能感兴趣的文章
Eclipse下egit插件的使用
查看>>
[NOI2017]整数
查看>>
LINUX信息安全系统设计基础第一周学习总结
查看>>
xdebug对php程序性能分析
查看>>
surfaceview 透明
查看>>
osi七层模型
查看>>
转载:深度研习html(二)
查看>>
HA机制下的hadoop配置
查看>>
MySQL 5.5 新增SIGNAL异常处理
查看>>
回档|忠诚2|zkw线段树
查看>>
Away3D引擎学习笔记(二)CameraController相机控制的应用
查看>>
jq获取元素到底部的距离
查看>>
工作总结
查看>>
一个恶心的需求
查看>>
分类精度评价指标
查看>>
文件操作
查看>>
openssl编译时!遇见的问题
查看>>
Linux安全加固--精简启动项
查看>>
软件需求分析模板
查看>>
HDU - 5457 Hold Your Hand (Trie + 最小割)
查看>>