文档章节

jquery--DOM操作基础

前端老手
 前端老手
发布于 10/18 22:45
字数 1188
阅读 11
收藏 0

本文转载于:专业的前端网站jquery--DOM操作基础

元素的访问

  1. 元素属性操作

    • 获取:attr(name);$("#my").attr("src");
    • 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg");
      •  多个属性;attr({key1:value1,key2:value2});$("#myImg").attr({src:"images/1.jpg",title:"示例图片"});
      •  函数;attr(key,function(index){...});index是当前元素的索引,函数可返回字符串作为元素的属性值
    • 删除:removeAttr(name);
  2. 内容操作

    • html();获取元素的html内容
      •   html(val);设置元素的html内容
    • text();获取文本内容
      •   text(val);设置文本内容
  3. 元素值操作

    • val();获取元素的value值
    • val(value);设置元素的value值
    • val().join(",");获取select标记中多项值
    • val(array);数组形式,设置元素被选中
  4. 元素样式操作

    • 直接设置;.css(name,value);name为样式名,value为对应的参数值;$("p").css("font-size","16");
    • 增加css类;addClass(classname);$("div").addClass("clsDiv");
      •   addClass(class1 class2 ...);多个类,空格隔开
    • 类别切换:toggleClass(name);单击切换,再单击恢复
    • 删除类:removeClass();移除所有类别
      • removeClass(class);移除元素的某一个class类

创建元素节点

  1. 动态创建页面元素

    •  $(html);参数html是动态创建dom元素的html标记字符串;var $div = $("<div>hello world</div>");
      •  tips:var $str 和 var str 区别;$是jquery的一个标识,作为jquery的实例变量;两者本身意义一样;
  2. 复制节点

    •   clone();仅仅复制元素
    •   clone(true);复制元素,包括元素的行为方法
  3. 替换节点

    •  replaceWith(content);替换内容
    • replaceAll(selector);替换的元素,替换后的元素的事件消失;
  4. 遍历元素

    •   each(function(index){...});使用this可获取该元素的属性或设置某属性
      •   $("img").each(function(index){ this.title = this.alt; });
  5. 删除元素

    • empty();清空页面元素
    • remove();删除页面元素,传入参数,可删除某指定元素

 

 

    

节点插入

  1. 内部插入

    •  append(content);插入content内容

    •  append(function(index,html){...});插入函数返回的内容;index是对象索引,html是元素原来的html
      •   $("div").append(relHtml);function relHtml (){ var $str = "<p>hello world</p>"; return $str;}   
    • appendTo(content);将方法前部分内容插入到后部分中
      •   $("span").appentTo($("div"));即将span的内容插入到div中
  2.  外部插入

    •  after(content);向元素外部的后面插入内容
      •   after(function);向元素外部的后面插入函数返回的内容
    •  before(content);向元素外部的前面插入内容 
    •  insertAfter() ;将元素的内容插入到另一个元素的后面
    •  insertBefore();

      

事件

  1.  事件机制

    • 事件触发
      •  捕获阶段
      •    冒泡阶段:子元素触发事件后,回向父元素或上级元素传递,使得父级的事件也被触发;
        •  阻止冒泡方法:.stopPropagation()或 return false;
  2.  事件载入

    •  ready();$(document).ready(function(){...});
    • ready()和onLoad()的区别:
      • ready();页面dom元素加载完成执行
      • onLoad();全部元素加载完成执行 
    • 简写:$(function(){...});
  3.  事件绑定

    •  直接绑定事件;$(".btn").click(function(){...});
    • bind()绑定;bind(type,[data],func);type-事件类型,[data]-event.data属性传递给事件对象,func-处理函数
      •  $(".btn").bind("click",function(){...});
    • bind()绑定多个事件;
      •  $(".btn").bind({focus:function(){...},change:function(){...}});
  4.  切换事件 

    • hover(over,out);浮动切换,鼠标移出移进来样式改变;
      •  $("title").hover(function(){alert("over")},function(){alert("out")}); 
    •  toggle(func1,func2,func3,...);单击依次调用函数
  5.   移除事件 

    • unbind(type,func);移除绑定事件,该事件之前已经触发的行为结果不会被移除
      • 无参,移除所有绑定事件 
      • 有type,移除type事件
      • 有func,移除指定type中的func函数
  6. 鼠标事件

    • mouseenter();经过被元素触发,不冒泡  
    • mouseleave();移开被选元素触发,不冒泡 
    • mouseover();经过被选元素以及子元素都触发
    • mouseout();移开被选元素以及子元素触发
    • mousemove();移入被选元素内后,在移动1px都会触发
  7.  其他事件

    • one(type,[data],func);为所选择的元素绑定,但只触发一次
    • trigger(type,[data]);dom加载后自动触发指定类型事件 

    

jquery动画和特效

  1.  显示,隐藏

    • show();可加入默认字符slow,normal,fast改变速度,也可直接传数值,可有回调函数
    • hide();
      •  $("div").show(2000,function(){...});
  2.     
    •  toggle();切换元素样式,可见/隐藏
      •   toggle();
      •   toggle(switch);布尔值判断
      •   toggle(speed,func); 
  3. 滑动,改变元素的高度

    • slideUp(speed,func); 
    • slideDown(speed,func);
    • slideToggle(speed,func);切换滑动
  4. 淡入淡出,改变元素的透明度

    •  fadeIn();淡入,即显示
    •  fadeOut();淡出,即隐藏
    •  fadeTo(speed,opacity,func);改变透明度到opacity值
  5. 自定义动画

    • animate();

 

  


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=hikhjk2k2jab

前端老手
粉丝 10
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
jQuery零基础入门——(二)Selector选择器

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎回到我们的jQuery零基础...

JandenMa
2018/07/01
67
0
网站如何做到完全不需要 jQuery ?

来源:阮一峰 jQuery 是现在最流行的 JavaScript 工具库。 据统计,目前全世界 57.3% 的网站使用它。也就是说,10 个网站里面,有 6 个使用 jQuery。如果只考察使用工具库的网站,这个比例就...

红薯
2013/05/12
21.1K
110
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
2018/06/18
71
0
dom对象和jQuery对象的区别

1.jQuery对象和DOM对象 在第一次学习Jquery的时候也许大家都不是很清楚Jquery对象和DOM对象两者之间的关系,下面就解释两点,便于对Jquery和Dom加深理解 DOM对象,即是我们用传统的方法(java...

DockOne
2014/07/30
114
0
jQuery零基础入门——(五)操作DOM

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 jQuery强大的选择器,最终目的是...

JandenMa
2018/07/14
22
0

没有更多内容

加载失败,请刷新页面

加载更多

BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
15分钟前
4
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
14
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
3
0
API常见接口(下)

system类 StringBuilder和StringBuffer 包装类 1.System类 (java.lang包中) 提供了大量的静态方法,可以获取与系统相关的信息或系统级操作。 常用方法: public static long currentTimeMi...

Firefly-
昨天
4
0
MySQL系列:一句SQL,MySQL是怎么工作的?

对于MySQL而言,其实分为客户端与服务端。 服务端,就是MySQL应用,当我们使用net start mysql命令启动的服务,其实就是启动了MySQL的服务端。 客户端,负责发送请求到服务端并从服务端获取数...

杨小格子
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部