当前位置:  编程技术>jquery

Jquery中DOM操作方法

    来源: 互联网  发布时间:2014-10-04

    本文导语:  一,节点操作 一、查找节点  1、查找元素节点 ;利用Jquery的选择器  2、查找属性节点  ;利用Jquery的选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。Attri()方法的参数可以是一个,也可以是零...

一,节点操作

一、查找节点
 1、查找元素节点 ;利用Jquery的选择器
 2、查找属性节点  ;利用Jquery的选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。Attri()方法的参数可以是一个,也可以是零个。当参数是一个时,则是要查询的属性的名字。

二、创建节点
  1、创建元素节点
  第一 创建元素节点  第二将其插入文档中
  $(html)  --->创建节点   ,append()添加到文档中

  2、创建文本节点
  创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。

  3、创建属性节点
 创建属性节点与创建文本节点类似,也是之金额在创建元素节点时一起创建

三、插入节点
 

代码示例:
append()    向每个匹配的元素内部追加内容
appendTo()      与上诉追加相反
Perpend()      向每个匹配的元素内容前置内容   
perpendTo()    与上诉前置内容相反
After()          在每个匹配的元素之后插入内容
inserAfter()      与上诉插入相反
Before()          在每个匹配的元素之前插入内容
Insertbefore()      与上诉插入相反

四、删除节点
 

代码示例:
remove()      从DOM中删除所有匹配的元素,其后面的子节点也将同时删除 , 也可以设置其参数进行有选择性的删除
detach()      跟remove()不同的是,所有绑定的事件、附加的数据都会保留下来
empty()      并不是删除节点,而是清空节点。,也能清空所有后代的子节点。

五、复制节点
(通过鼠标拖动商品并将其放到购物车中)商品拖动就是用的复制节点
Clone() 复制节点后,被复制的新元素并不具有任何行为,如果需要新元素也具有复制功能,可以使用clone(true)

六、替换节点
 

代码示例:
replacewith()   将所有匹配的元素都替换成指定的HTML或DOM元素
replaceaAll()   与上诉方法作用相同,只是颠倒了replaceWith()的操作。

七、包裹节点
wrapAll() wrap()
将所有匹配的元素用一个元素来包裹,wrap()方法是将所有的元素进行单独的包裹。

wrapInner()方法
将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

属性操作
1获取属性和设置属性
获取  attr(name);
设置单个属性值  atrr(name,value) ;
设置多个属性值  attri(name:value ,name:value) ;

2 删除属性
removeAttr(name) 

样式操作

  1获取样式和设置样式

可以使用attr()来获取样式和设置样式

  $(“p”).attr(“class”)    

  $(“p”).attr(“class”,”hight”)   

  2追加样式

addClass()

多次使用addClass()样式,不会覆盖其原先的样式。使用attr()方法会覆盖其原先的样式

  3删除样式

removeClass(name) ,如果不带任何参数则就删除其所有的样式

  4切换样式

Toggle()方法主要是控制行为上的重复切换。

toggleClass()方法控制样式上的重复切换

5,判断是否含有某个样式
hasClass()可以用来判断元素是否含有某个class,如有,则返回TRUE,否则为FALSE
$(“p”).hasClass(“another”)   等价于 $(“p”).is(“.another”); 
 
设置和获取HTML、文本 和值
html() 用来读取或者设置某个元素中的HTML内容,设置时只需在括号里写入值即可
text()  用来读取或者设置某个元素中的TEXT内容,设置时只需在括号里写入值即可
val()  此方法类似JavaScript中的value属性,用来设置和获取元素的值,无论元素是文本框,还是下拉列表还是单选框,都可以返回元素的值,如果元素是多选,则返回一个包含所有选择的值的数组  设置时只需在括号里写入值即可

遍历节点
 

代码示例:
children() 获得子元素
next()  后面紧邻的同辈元素
prev()  前面紧邻的同辈元素
siblings() 前后所有的同辈元素
closest()  从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素
parent(),parents(),closest()之间的区别
parent()    获得集合中每个匹配元素的父级元素
Parents()    获得集合中每个匹配元素的祖先元素

CSS-DOM操作
Css()方法获取元素的样式属性  如 $(“p”).css(“color”);
也可以通过css()设置某个元素的单个样式 如$(“p”).css(“color”,”red”);
也可以同时设置多个样式属性 如$(“p”).css({“color”:”red” ,”fontSize”,”30px”});

设置透明度    $(“p”).css(“opacity”,”0.5”);
可以通过height()方法获取元素高度。 它的作用是取得匹配元素当前计算的高度值
Css()获取的高度跟样式有关,但是height()获取的高度跟样式设置无关的,是元素在页面中的实际高度
通过width()方法取得匹配元素的宽度值

元素定位
1offset()方法 获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效
position()方法 获取元素相对于最近的一个position样式属性设置为relative或者absolute的父节点的相对偏移,其中返回的对象包含两个属性,即top和left
scrollTop()方法和scrollLeft()方法
获取元素的滚动条距顶端和距左端的距离。
另外,可以为这两个方法指定一个参数,控制参数的滚动条到指定位置。
Jquery事件绑定类型比普通的JavaScript事件绑定类型少了”on”.


    
 
 

您可能感兴趣的文章:

  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jquery下拉select控件操作方法分享(jquery操作select)
  • Cookie操作插件 jQuery.Cookie
  • jquery链式操作、链式写法的小例子
  • 利用js(jquery)操作Cookie的方法说明
  • jQuery操作select option选项(增加 删除 修改)
  • jquery常用操作小结
  • JQuery操作DOM的笔记
  • jquery链式操作的正确使用方法
  • jQuery操作select下拉框的text值和value值的方法
  • JQuery 文本框操作的4个小例子
  • jquery加载完iframe的内容后才进行下一步操作的实现方法
  • jquery操作单选框radio的例子
  • 使用jquery实现IE下按backspace相当于返回操作
  • jquery cookie插件用法 jquery操作cookie的例子
  • 解决jquery操作checkbox火狐下第二次无法勾选问题
  • jquery操作checkbox示例分享
  • Jquery操作radio的小例子
  • jquery操作checkbox实现全选和取消全选
  • Jquery操作html标签及动态添加验证的例子
  • Jquery操作radio的简单实例
  • jQuery学习笔记之jQuery原型属性和方法
  • jquery中slideUp()方法与slideDown()方法
  • jQuery 滑动方法slideDown向下滑动元素
  • jquery中fadeIn()方法与fadeOut()方法(示例)
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jquery show()方法与hide()方法的小例子
  • jquery show()方法与hide()方法(示例)
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jQuery animate方法定位页面具体位置(示例)
  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery Virtual DOM Events Plugin
  • jquery对象和javascript对象即DOM对象相互转换
  • jquey笔记之dom对象与jquery对象互换的例子
  • jquery 获取dom固定元素 添加样式的简单实例
  • jquery实例-DOM操作方法 iis7站长之家
  • Jquery的ready和Dom的onload的区别分析
  • JQuery为页面Dom元素绑定事件及解除绑定方法
  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
  • jQuery 如何先创建、再修改、后添加DOM元素
  • Jquery方式获取iframe页面中的 Dom元素
  • jquery选择器排除某个DOM元素的方法(实例演示)
  • jQuery函数的第二个参数获取指定上下文中的DOM元素
  • jQuery 删除/替换DOM元素的几种方式
  • jQuery的DOM操作之删除节点示例
  • jQuery如何将选中的对象转化为原始的DOM对象
  • Jquery操作DOM对象的例子
  • 同域jQuery(跨)iframe操作DOM(实例讲解)
  • 同域jQuery(跨)iframe操作DOM(示例代码)
  • jquery实例-DOM操作方法
  • jQuery中Dom的基本操作小结
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3