首页 > 代码库 > 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节点操作