jq节点操作

//1.创建节点

var aDiv = $(‘<div></div>‘);

aDiv.html(‘你爸‘);

aDiv.css(‘background‘,‘red‘);

//2.插入节点

//2.1 把aDiv拼接到.footer

//$(‘.footer‘).append(aDiv);

//aDiv.appendTo($(‘.footer‘));

//2.2 prepend

//把aDiv放在.footer前面

//$(‘.footer‘).prepend(aDiv);

//aDiv.prependTo($(‘.footer‘));

//2.3 after

//把aDiv放在.nav后面

//$(‘.nav‘).after(aDiv);

//aDiv.afterTo($(‘.nav‘));

//在所有的li后面 都插入一个aDiv

//$(‘li‘).after(aDiv);

//2.4 before

//把aDiv放在.nav前面

//$(‘.nav‘).before(aDiv);

//把aDiv放在#wrap前面

//aDiv.insertBefore($(‘#wrap‘));

//3.设置属性

// $(‘#wrap‘).attr(‘title‘,‘小龙女‘);

// $(‘img‘).attr({

// title:‘杨过‘,

// class:‘小龙女‘,

// src:‘尹志平‘,

// alt:‘古墓派‘

// });

//4.获取属性

//$(‘#wrap‘).attr(‘title‘);

//5.css() 设置或者返回匹配元素的样式属性

//设置

// $(‘.nav‘).css({

// height:‘100px‘,

// background:‘red‘,

// border:‘1px solid #ccc‘

// })

//获取.nav的背景颜色

//console.log($(‘.nav‘).css(‘background‘));

//6.height() 设置或返回匹配元素的高度

//知识获取或者设置盒模型的height

//$(‘.nav‘).height();//返回数值

//$(‘.nav‘).css(‘height‘);//返回数值+px

//7.width 同height

//8.offset()返回第一个匹配元素相对于文档的位置

//console.log($(‘.footer‘).offset());

//9.offsetParent()返回最近的定位祖先元素

//console.log($(‘#list‘).offsetParent());

//10.position()返回第一个匹配元素相对于父元素的位置

//console.log($(‘li‘).position());

//11.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移

//12.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移

// setTimeout(function(){

// console.log($(‘#wrap‘).scrollTop());

// },2000)

//设置滑动初始位置

$(‘#wrap‘).scrollTop(100);

时间: 2024-10-01 01:28:31

jq节点操作的相关文章

事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元

js节点操作

节点操作: 一.节点类型 根据DOM,XML文档中的一个成分都是一个节点. 二.节点操作 获取节点引用 1.方式一:   document.getElementById(): document.getElemengtByTagName(): 说明:这种方式直接查找节点,每次都会遍历文档中的所有节点,比较耗费内存,而且并不能体现出节点间的关系: 2.方式二:通过节点关系属性获得节点引用 方法:1.obj.childNodes:获取对象所有子节点,只包含次级节点:(eg:alert(wrap.chi

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. //创建一个节点  var box=$('<div id="box">节点</div>'); //将节点插入到&

(转载)html dom节点操作(获取/修改/添加或删除)

DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节

深入学习jQuery节点操作

× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的方法,此外,还扩展了包裹节点.本文将详细介绍jQuery节点操作 创建节点 创建节点的流程比较简单,包括创建节点.添加属性和添加文本.若应用原生方法,一般地,包括document.createElement().setAttribute()和innerHTML var ele = document.

笔记-[1]-DOM的节点操作详解.

DOM:文档对象模型 操作DOM基本就是操作DOM的元素节点. 节点的属性: 1:objElement.childNodes  :获取该元素对象的的节点集合,有length长度属性,在标准浏览器下使用,会辩认文本节点的节点,一般不用,有其他的更好的属性(children) 2:objElement.children :     获取该元素对象的的节点集合,有length长度属性,在ie8下和其他标准浏览器兼容,只获取元素节点. 3:obj.nodeType   :获取对象的节点类型,1为元素节点

jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div").css("background","pink"); 类操作 .addClass添加类   $("div").addClass("class"); .removeClass删除类   $("div).removeCla

jQuery DOM节点操作

一.创建节点 var box = $('<div id =box>节点</div>');  //创建一个节点 $('body').appended(box); //将节点插入<body>元素内部 二.插入节点 内部插入节点方法 append(content)     向指定元素后面插入节点content append(function (index,hml) {}) 使用匿名函数向指定元素后面插入节点content(html是原节点) appendTo(content)