jquery中的节点的操作

节点的操作

Dom 文档对象 模型 解决

一.插入节点

Append() 在每个匹配的元素中追加内容

Var  $li_1= “<li></li>”;

Var  $li_2 =”<li></li>”

$(“ul”).append($li_1).append($li_2); //添加到ul中rep

appendTo() 将所有匹配元素追加到指定元素中

$(“<b>asd</b>”).appendTo(p);  p 指<p></p>you

Prepend() 向每个匹配元素的内部前置内容

PrepenTo()将所有的匹配的元素前置到指定元素中

After() 在每个匹配元素后面插入内容

insertAfter ()将匹配的元素插到指定元素的后面

before() 在每个匹配元素前面插入元素

insertBefore()将匹配的元素插到指定元素的前面

二.DOM元素的插入与移动

InsertBefore()

insertAfter()

三.删除节点

Remove()

empty() 用于清除节点的文本       $("#p").empty()

四.复制节点

Clone() 复制节点 有一个参数 或无参数

五.替换节点ReportedWith()与ReplaceAll()的作用一样,替换的事件一样会消失

ReplaceWith(“<string>被替换新的文本</strign>”)

(“<string>被替换新的文本</strign>”).replaceAll();

六.包裹节点    将某一节点用其他的标签包裹起来 用wrap();方法实现的

Wrap()   WrapAlll()   wrapInner() 能够包裹节点;

$(“p”).wrap(“<b></b>”)用<b>标签把<p>元素包裹起来

Wrap(); 用于在文档插入而外的结构化标签 ,不会破坏其语义 例:

$(“p”).wrap(“<b></b>”) //用b标签将p包裹起来  ,效果将p的文本的字体加粗

Wrapall(); 将所有匹配的元素用一个元素包裹起来,不同于

Wrapinner();  是将每一个匹配的子元素的子内容{包括文本节点},用其他结构化的标签包裹起来

属性的操作

attr()属性的操作或设置

根据属性名称获取属性的值,如:(“元素名”).attr(“title”);//获取属性的title的值

设置属性的值 (“属性名”).attr(“属性名”:”属性值”);///设置属性的值,如果有多个用逗号隔开

removeAttr()删除属性//有参数,是指定的属性名删除,没参数删除所有的属性

追加样式

addClass()的方法追加样式

addClass() 追加样式 在调用一次addclass()

而Attr();会把前面的样式替换掉

removeClass()删除样式 带参数指定样式删除 删除多个用空格隔开   如果没有删除全部

切换样式

Toggle()交替一组动作

StoggleBtn.toggle( function()

{ //显示元素的代码

},function(){

//隐藏的代码

})

/// jquery 提供一个toggleClass(); 方法控制样式的重复切换 一个参数 : class的名称

ToggleClass() 进行显示/隐藏的切换

Toggle() ///无参数是默认是样式的切换

HasClass()可以用来判断元素是否含有摸个class,如果有返回true,如歌没有 false

Html()//以html文本解析后输出;

Text()   //以普通的文本输出

Next();//用于获取同辈的下一个元素

Height(0  wicdth() vla() css()……的用法差不多

Chiildren()获取所有匹配元素的子元素集合

Prev() 用于获取同辈紧邻的上一个元素

Siblings() 匹配同辈的所有的元素,不包括自己

Closest()  匹配 最近的元素,如果自己不匹配,往上“父元素”匹配,一级一级的匹配,如果匹配

scrollTop()  scrollleft()  滚动条的操作

时间: 2024-11-05 04:16:32

jquery中的节点的操作的相关文章

jQuery中属性节点的操作

1.attr() 用于读取或设置属性 -传递一个参数 读取属性 -传递两个参数 设置属性注意:无论找到多少元素都只会返回第一个元素指定的属性节点的值 但是会将所有的元素的属性节点的值都设置为指定的值 如果设置的属性节点不存在,那么就会给找到的所有的元素添加该属性节点 2.prop()方法     原文地址:https://www.cnblogs.com/qqinhappyhappy/p/11728900.html

jquery中对 iframe的操作

我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: 查找所有文本节点并加粗 HTML  代码: <p>Hello <a href="http://ejohn.org/">John</a>, how are  you doing?</p>jQuery  代码: $("p")

jQuery中删除节点方法remove()、detach()、empty()分析

jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并不会删除.举个栗子: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>remove和detach对

jquery 中json数组的操作 增删改

链接地址:http://blog.sina.com.cn/s/blog_86be5e2f0101bc3k.html 在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,查阅了下相关JS中数组的操作一试果然很爽. 记录下来. 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var

JQuery中寻找节点的方法

Query.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents(

jquery中对数组的操作

1.each  用于遍历对象和数组 1.1遍历数组 $.each(arr,function(index,value)) 1.2遍历json 回调函数中的index为对象成员,value为变量.如 {name:ll,age:24} name,age为对象成员,后者为变量 若要退出each则需要在回调函数中使用return false 实例: <script type="text/javascript">    var arr=[2,1,4,7,9,14,87,78];   $

JQuery 中 创建节点,修改节点属性

var content = $("<div></div>"); content.text("新建节点的内容"); //content.html("<b>hello</b>"); content.addClass("one"); content.css("background-color","red"); $("#content&q

jquery中包裹节点

1.介绍 2.程序 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 7

jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面: DOM Core(核心).HTML-DOM 和 CSS-DOM 1.查找节点: 查找元素节点: var $li = $("ul li:eq(1)"); var li_txt = $li.text(); 查找属性节点: var $p = $("p"); var p_title = $p.attr("title"); 注意: attr() 获取指定元素节点属性的值. 2.创建节点: 创建元素节点: var $li = $(&