首页 > 代码库 > jq节点操作

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);

jq节点操作