jQuery dom操作

Go to comments

jQuery dom操作

DOM是JS中非常重要的部分，很多的功能都离不开DOM操作，特别是一些交互的功能

先回顾一下之前JS原生的DOM操作有哪些？

获取一个元素后，添加一个元素、生成一个元素、删除一个元素，也就是对应DOM对象或者说元素，进行增删改查是必须基本的操作，

另外还有DOM元素身上的一些属性，添加一个class、获取一个class，添加一个title、添加一id等等这些属于属性的操作，还有文本的一些操作都属于DOM操作的范

一、class属性

.addClass()

.removeClass()

.hasClass()

.toggleClass()

1、添加class

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    .weight{font-weight:bold; color:red;}
    .red{background: #ff8c8c;}
    .green{background: #008c8c;}
    .blue{background: skyblue;}
    .active{background: orange;}
</style>
<title>class操作</title>
</head>
<body>

	<div class="set-color">
		<ul>
			<li>first</li>
			<li class="green weight">second</li>
			<li class="blue weight">third</li>
		</ul>
	</div>

<script>

    $('.set-color li:first').addClass('red');

</script>
</body>
</html>

2、移除class

不设置参数，移除所有的class，移除第二个li元素所有的class

$('.set-color li:eq(1)').removeClass();

// 全部移除了<li class="">second</li>

设置参数可以选择性的移除class，移除第二个li元素身上的weight

$('.set-color li:eq(1)').removeClass('weight');

// 移除了weight <li class="green">second</li>

3、检查元素身上有没有某个class

检测最后一个li元素，有没有的某个class的名字，返回的是布尔值

console.log(
	$('.set-color li:last').hasClass('blue'), // true
	$('.set-color li:last').hasClass('red') // false
);

做切换效果的时候，可以做判断有没有这个class，如果没有填加class，有就不添加

4、切换class

在添加active与删除active之间进行切换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    .active{background: orange;}
    .weight{font-weight:bold; color:red;}
</style>
<title>toggleClass()</title>
</head>
<body>

    <div class="add-event">
        <p class="active">点击切换class</p>
    </div>

<script>

    $('.add-event .active').click(function(){

        $(this).toggleClass();

    });

</script>
</body>
</html>

就是在有与没有.actvie之间进行切换

如果设置一个参数（.weight），就变成了.weight有与没有之间切换

$('.add-event p').click(function(){

	$(this).toggleClass('weight');

});

二、DOM插入现有元素内

.append()

.appendTo()

.prepend()

.prependTo()

.text()

.html()

1、.append()

原生JS需要创建（create）一个标签再用appendChlid插入，jquery不需要创建，直接在写一个标签插入

<div class="insideAdd">
	<p>P元素</p>
</div>

<script>

$('.insideAdd').append('<h2>插入一个H2标签</h2>');

/*
<div class="insideAdd">
    <p>P元素</p>
    <h2>插入一个H2标签</h2>
</div>
*/
</script>

也可以插入页面上的DOM元素进行插入

<div class="insideAdd">
	<p>P元素</p>
	<h2>H2标签</h2>
</div>

<script>

$('.insideAdd').append( $('.insideAdd p') );

/*
<div class="insideAdd">
    <h2>H2标签</h2>
    <p>P元素</p>
</div>
*/
</script>

选中p元素再插入，其实是被剪切而不用是复制，再插入到最后的位置（跟原生的方法是一样的）

2、.appendTo()

jquery自己的方法（append to意思是插入到），创建一个h2元素插入到.insideAdd里面

<div class="insideAdd">
    <p>P元素</p>
</div>

<script>

$('<h2>插入一个H2标签</h2>').appendTo('.insideAdd'); // h2元素插入到父级

/*
<div class="insideAdd">
	<p>P元素</p>
	<h2>插入一个H2标签</h2>
</div>
*/
</script>

手册上的例子

h2将被移动到目标中（不是克隆），并返回一组新的插入后的元素集合

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<script>

console.log(
	$('h2').appendTo($('.container'))
) // init [h2, prevObject: init(1), context: document]

/*
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2>
</div>
*/
</script>

3、.prepend()

append是插入到后面，prepend方法是插入到前面，语法是一样的

<div class="insideAdd">
	<p>P元素</p>
</div>

<script>

$('.insideAdd').prepend('<h2>插入一个H2标签</h2>');

/*
<div class="insideAdd">
    <h2>插入一个H2标签</h2>
    <p>P元素</p>
</div>
*/
</script>

4、.prependTo()

<div class="insideAdd">
	<p>P元素</p>
</div>

<script>

$('<h2>插入一个H2标签</h2>').prependTo('.insideAdd');

/*
<div class="insideAdd">
    <h2>插入一个H2标签</h2>
    <p>P元素</p>
</div>
*/
</script>

html() 和 text()放到后面，

上面是往元素内部插入，下面是往元素外部插入

三、DOM 插入现有元素外

.after()

.insertAfter()

.before()

.insertBefore()

1、.after()

选中父元素里面的h2子元素，在h2元素的外面插入。其实就是在h2兄弟节点下面插入

<div class="outsideAdd">
    <h2>H2标签</h2>
</div>

<script>

$('.outsideAdd h2').after('<p>插入的P标签</p>');

/*
<div class="outsideAdd">
    <h2>H2标签</h2>
    <p>插入的P标签</p>
</div>
*/
</script>

2、insertAfter()

<div class="outsideAdd">
    <h2>H2标签</h2>
</div>

<script>

$('<p>插入的P标签</p>').insertAfter('.outsideAdd h2');

/*
<div class="outsideAdd">
    <h2>H2标签</h2>
    <p>插入的P标签</p>
</div>
*/
</script>

3、.before()

在h2标签的上面插入

<div class="outsideAdd">
    <h2>H2标签</h2>
</div>

<script>

$('.outsideAdd h2').before('<p>插入的P标签</p>');

/*
<div class="outsideAdd">
    <p>插入的P标签</p>
    <h2>H2标签</h2>
</div>
*/
</script>

4、.insertBefore()

<div class="outsideAdd">
    <h2>H2标签</h2>
</div>

<script>

$('<p>插入的P标签</p>').insertBefore('.outsideAdd h2');

/*
<div class="outsideAdd">
    <p>插入的P标签</p>
    <h2>H2标签</h2>
</div>
*/
</script>

5、总结

内部插入：是找到父级，给父元素添加子元素

外部插入：是找到元素插入兄弟节点

6、.html()方法与.text()方法

JS原生的方法既可以获取也可以设置，

jquery提供的这两个方法也同样也是可以获取可以设置

获取

<div class="wrap">
	<p>这个一行内容文字</p>
</div>

<script>

console.log( $('.wrap').html() ); // <p>这个一行内容文字</p>

console.log( $('.wrap').text() ); // 这个一行内容文字

</script>

设置

设置的内容当做参数

<div class="wrap">
	<p>这个一行内容文字</p>
</div>

<script>

$('.wrap').html('<h2>设置的h2标签</h2><p>设置的p标签</p>');

/*
<div class="wrap">
    <h2>设置的h2标签</h2>
    <p>设置的p标签</p>
</div>
*/
</script>

原来的内容被设置的内容替换了

text()方法设置的标签被转义成纯文本

<div class="wrap">
	<p>这个一行内容文字</p>
</div>

<script>

$('.wrap').text('<h2>设置的h2标签</h2><p>设置的p标签</p>');

// <div class="wrap">&lt;h2&gt;设置的h2标签&lt;/h2&gt;&lt;p&gt;设置的p标签&lt;/p&gt;</div>
</script>

四、插入并包裹现有内容

.wrap()

.wrapAll()

.wraplnner()

.unwrap()

1、wrap()

在每个匹配元素的外层包上一个html元素

<div class="wrap">
    <span>first</span>
    <span>second</span>
    <span>third</span>
</div> 

<script>

$('.wrap span').wrap('<p style="padding:20px;width:200px;border:1px solid #ff8c8c;">'); // wrap里面的标签不需要闭合

// $('.wrap span').wrap('<p style="padding:20px;width:200px;border:1px solid #ff8c8c;"></p>');

</script>

手册

<p>Hello</p>
<p>cruel</p>
<p>World</p>

<script>

$("p").wrap(document.createElement("div"));

</script>

2、wrapAll()

在所有匹配元素外面包一层HTML结构

<div class="wrap">
    <span>first</span>
    <span>second</span>
    <span>third</span>
</div>

<script>

$('.wrap span').wrapAll('<p style="padding:20px;width:200px;border:1px solid #008c8c;">')

</script>

3、.wrapInner()

在匹配元素里的内容外包一层结构。

<div class="wrap">
    <span>first</span>
    <span>second</span>
    <span>third</span>
</div>
<script>

$('.wrap span').wrapInner('<strong>');

/*
<div class="wrap">
    <span>
		<strong>first</strong>
	</span>
    <span>
		<strong>second</strong>
	</span>
    <span>
		<strong>third</strong>
	</span>
</div>
*/
</script>

陈老师课里的代码

<div class="wrap">
    <span>first</span>
    <span>second</span>
    <span>third</span>
</div>

<script>

$('.wrap span').wrap('<li>'); // 每个span外面套上一层li
$('.wrap li').wrapAll('<ul>'); // 所有li外面套上一层ul
$('.wrap span').wrapInner('<strong>'); // 每个span内容加一个strong标签

/*
<div class="wrap">
    <ul>
        <li><span><strong>first</strong></span></li>
        <li><span><strong>second</strong></span></li>
        <li><span><strong>third</strong></span></li>
    </ul>
</div>
*/
</script>

4、.unwrap()

将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

unwrap()不是用来包裹的，不需要给它任何的参数

<div class="wrap">
    <ul>
        <li><span><strong>first</strong></span></li>
        <li><span><strong>second</strong></span></li>
        <li><span><strong>third</strong></span></li>
    </ul>
</div>

<script>

$('.wrap li').unwrap();

/*
<div class="wrap">

        <li><span><strong>first</strong></span></li>
        <li><span><strong>second</strong></span></li>
        <li><span><strong>third</strong></span></li>
    
</div>
*/
</script>

五、DOM移除

从DOM树中删除元素

.remove()

.empty()

.detach()

.unwrap()

1、.remove()

将匹配元素集合从DOM中删除（注：同时移除元素上的事件及jQuery数据）

删除选中的h2元素，返回值是一个数组集合

<div class="wrap">
    <h2 class="title">标题</h2>
    <ul>
        <li>first</li>
        <li class="sec">second</li>
        <li>third</li>
    </ul>
    <div class="footer">页脚</div>
</div> 

<script>

var result = $('.wrap .title').remove();

console.log(result); // init [h2.title, prevObject: init(1), context: document, selector: '.wrap .title']

console.log(result[0]); // <h2 class="title">标题</h2>

</script>

remove()方法还可以接收参数

<div class="wrap">
    <h2 class="title">标题</h2>
    <ul>
        <li>first</li>
        <li class="sec">second</li>
        <li>third</li>
    </ul>
    <div class="footer">页脚</div>
</div> 

<script>

var result = $('.wrap ul li').remove('.sec');

console.log(result); // init(3) [li, li.sec, li, prevObject: init(1), context: document, selector: '.wrap ul li']
console.log(result[1]); // <li class="sec">second</li>

/*
<div class="wrap">
    <h2 class="title">标题</h2>
    <ul>
        <li>first</li>
        
        <li>third</li>
    </ul>
    <div class="footer">页脚</div>
</div>
*/
</script>

手册

<p>Hello</p>
how are
<p>you?</p>

<script>

  $("p").remove();

</script>

2、.empty()

清空就是干掉所有的子元素

<div class="wrap">
    <h2 class="title">标题</h2>
    <ul>
        <li>first</li>
        <li class="sec">second</li>
        <li>third</li>
    </ul>
    <div class="footer">页脚</div>
</div>

<script> 

$('.wrap ul').empty();

/*
<div class="wrap">
    <h2 class="title">标题</h2>
    <ul></ul>
    <div class="footer">页脚</div>
</div>
*/
</script>

手册的例子，清空标签内的文本

<div class="container">
	<div class="hello">Hello</div>
	<div class="goodbye">Goodbye</div>
</div>

<script>

$('.hello').empty();

</script>

3、.detach()

将匹配元素集合的父集元素删除，保留自身（和兄弟元素，如果存着）在原来的位置

用detach()方法删除footer标签后再添加回去，之前绑定的点击事件还在

<div class="wrap">
    <h2 class="title">标题</h2>
    <ul>
        <li>first</li>
        <li class="sec">second</li>
        <li>third</li>
    </ul>
    <div class="footer">页脚</div>
</div>

<script>

$('.wrap .footer').click(function(){ // 1.给footer绑定一个点击事件

    alert('点击事件绑定好了');

});

var result = $('.wrap .footer').detach(); //2. 删除footer

setTimeout(function(){ // 3.一秒钟后把删除的元素，用返回值添加回去

    $('.wrap').append(result);

}, 1000);

.detach()方法和remove()方法是一样，都是用来删除元素也都有返回值，返回值也是删除的那个元素，但是一点不同

对比使用.remove()方法，删除后再添加，点击事件失效了

<div class="wrap">
    <h2 class="title">标题</h2>
    <ul>
        <li>first</li>
        <li class="sec">second</li>
        <li>third</li>
    </ul>
    <div class="footer">页脚</div>
</div>

<script>

$('.wrap .footer').click(function(){
    alert('点击事件绑定好了');
});

var result = $('.wrap .footer').remove();

setTimeout(function(){
    $('.wrap').append(result);
}, 1000);

手册上的例子

<p style="background:yellow;margin:6px0;">Hello</p>
how are
<p style="background:yellow;margin:6px0;">you?</p>
<button>Attach/detach paragraphs</button>

<script>
    $("p").click(function(){
      $(this).toggleClass("off");
    });
    var p;
    $("button").click(function(){
      if ( p ) {
        p.appendTo("body");
        p = null;
      } else {
        p = $("p").detach();
      }
    });
</script>

4、unwrap和empty相反

empty是清空子级，

unwrap是删除父级

六、复制元素和DOM替换

克隆

.clone() 创建一个匹配的元素集合的深度拷贝副本

替换

.replaceAll() 用集合的匹配元素替换每个目标元素

.replaceWidth() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

1、.clone()克隆（复制）

<div class="wrap-first">
    <p>这是一段被克隆的文字</p>
</div>
<div class="wrap-second"></div>

<script>

$('.wrap-first p').click(function(){
    alert('添加一个点击事件');
});

$('.wrap-first p').clone().appendTo('.wrap-second'); // 克隆后点击事件没有了

/*
<div class="wrap-first">
    <p>这是一段被克隆的文字</p>
</div>
<div class="wrap-second">
    <p>这是一段被克隆的文字</p>
</div>
*/

</script>

加上参数true，点击事件也一起克隆了

$('.wrap-first p').click(function(){
    alert('添加一个点击事件');
});

$('.wrap-first p').clone(true).appendTo('.wrap-second');

2、.replaceAll()

创建一个h3元素，替换h2元素

<div class="wrap">
    <h2 class="title">要被替换的标题</h2>
    <p class="name">名字</p>
    <h2>这也是标题</h2>
</div>

<script>

$('<h3>这是替换后的标题</h3>').replaceAll('.wrap .title');

/*
<div class="wrap">
    <h3>这是替换后的标题</h3>
    <p class="name">名字</p>
    <h2>这也是标题</h2>
</div>
*/
</script>

replaceAll()和appendTo()有点像，可以用创建的标签，也可以用页面上已有的标签，相当于剪切的功能

<div class="wrap">
    <h2 class="title">要被替换的标题</h2>
</div>
<div class="second">
    <h3 class="name">用来替换的P元素</h3>
</div>

<script>

$('.second .name').replaceAll('.wrap .title');

/*
<div class="wrap">
    <h3 class="name">用来替换的P元素</h3>
</div>
<div class="second">
    
</div>
*/
</script>

3、.replaceWidth()是被动替换

.replaceAll()和.replaceWith()功能一样，但是目标和源相反

<div class="wrap">
    <h2 class="title">要被替换的标题</h2>
</div>

<script>

$('.wrap .title').replaceWith('<h3 class="name">替换的H3元素</h3>');

/*
<div class="wrap">
    <h3 class="name">替换的H3元素</h3>
</div>
*/
</script>

七、通用属性操作

通用使用属性的使用率是非常高的

.attr() 获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性

.prop() 获取匹配的元素集中第一个元素的属性（property）值为匹配的元素设置一个或多个属性（properties）

.removeAttr() 为匹配的元素集合中的每个元素中移除一个属性（attribute）

.removeProp() 为集合中匹配的元素删除一个属性（property）

.val() 获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值

1、.attr()

获取src属性，只获取第一个img元素身上的属性

<div class="main">
    <img domain="ruyic" src="/images/img_01.jpg" alt="这是一张图片">
    <img domain="ruyic" src="/images/img_02.jpg" alt="这是一张图片">
</div>

<script>

var path = $('.main img').attr('src');

console.log(path); // /images/img_01.jpg

</script>

设置属性

把title属性添加到所有img元素身上

$('.main img').attr('title', '这是一张美食图片');

/*
<div class="main">
    <img domain="ruyic" src="/images/img_01.jpg" alt="这是一张图片" title="这是一张美食图片">
    <img domain="ruyic" src="/images/img_02.jpg" alt="这是一张图片" title="这是一张美食图片">
</div>
*/

还可以设置多个属性

$('.main img').attr({
    class:' delicious',
    style: 'width:100px'
});

/*
<div class="main">
    <img domain="ruyic" src="/images/img_01.jpg" alt="这是一张图片" class="delicious" style="width:100px">
    <img domain="ruyic" src="/images/img_02.jpg" alt="这是一张图片" class="delicious" style="width:100px">
</div>
*/

修改src属性，两张图片同时被修改

$('.main img').attr('src', 'http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');

/*
<div class="main">
    <img domain="ruyic" src="http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png" alt="这是一张图片">
    <img domain="ruyic" src="http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png" alt="这是一张图片">
</div>
*/

2、.prop()

prop()跟attr()类似也是获取、设置某一个元素身上的属性的，但是有一些小区别

第一区别

prop()获取的src属性是绝对路径，

after()获取的是相对路径，也就是说src写的是什么获取的就是什么

console.log( $('.main img').prop('src') ); // http://127.0.0.1:5500/images/img_01.jpg

第二个区别

prop()取不到img标签上自定义的属性

console.log(
    $('.main img').attr('domain'), // ruyic
    $('.main img').prop('domain')  // undefined
)

元素自有的id属性可以设置，自定义属性并没有添加到DOM标签身上，但是会添加到DOM对象身上

$('.main img').prop({
    id:'My',
    first:'第一', 
});

3、.removeAttr()

原生的属性、自定义的属性都可以删除。两个img标签上的domain属性都被删除了

$('.main img').removeAttr('domain');

/*
<div class="main">
    <img src="/images/img_01.jpg" alt="这是一张图片">
    <img src="/images/img_02.jpg" alt="这是一张图片">
</div>
*/

3、.removeProp()

删除的是DOM对象身上的属性，并不是DOM标签身上的属性

$('.main img').removeProp('alt');

下面证明prop()添加的属性在DOM对象上

$('.main img').prop('index' ,5);

console.log( $('.main img').prop('index') ); // 5

添加的index属性在标签上看不到，但是在DOM对象上能打印出来

4、removeProp()

删除的是DOM对象身上的属性

$('.main img').prop('index' ,5);

$('.main img').removeProp('index');

console.log( $('.main img').prop('index') ); // undefined

5、val()

获取表单元素的值

<div class="main">
	<input type="text" value="这是一个输入框的值">
</div>

<script>

console.log( $('.main input').val() ); // 这是一个输入框的值

</script>

设置input属性

$('.main input').val('设置input的value属性');

八、CSS属性

css属性获取设置的就是盒模型当中的一些属性尺寸，宽高、位置、距离等

.css()

.height()

.width()

.innerHeight()

.innerWidth()

jQuery.cssNumber()

.outerHeight()

.outerWeidth()

.offset()

.position()

.scrollTop()

.scrllLeft()

1、css属性

获取css属性，获取到的是计算后的值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css属性</title>
<style>
.box{
	border: 1px solid #008c8c;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<div class="box">
    <h2></h2>
    <p></p>
    <div></div>
</div>

<script>

console.log(
    $('.box').css('border'), // 1px solid rgb(0, 140, 140)
    $('.box').css('height'), // 20px
)

</script>

</body>
</html>

为什么我们没有设置高度，但是能获取到值呢？

因为h2标签、p标签有margin，还有一个默认的字体大小，把div的高度给自动撑开了

设置css属性

$('.box h2').css('width','200px')
    .css('height','200px')
        .css('background', 'yellow')
            .text('插入一个标题');

// 也可以设置多个css属性
$('.box h2').css({
    color:'green',
    fontSize:'32px',
    'line-height': '100px',
});

获取盒模型信息

<div class="box">
    <h2></h2>
    <p></p>
    <div></div>
</div>

<script>

// 通过css设置一些盒模型的属性
$('.box p').css({
    width: '200px',
    height: '200px',
    padding: '20px',
    margin: '20px auto',
    border: '2px solid #f00'
});

// 获取盒模型信息
console.log(
    $('.box p').width(), // 200
    $('.box p').height(), // 200
    $('.box p').innerWidth(), // 240(包括padding)
    $('.box p').innerHeight(), // 240
    $('.box p').outerWidth(), // 244（包括width、margin、border）
    $('.box p').outerHeight(), // 244
)

</script>

2、.offset()

获取位置信息

offset()方法会返回left、top两个属性，这个两个属性返回的信息是相对于documnent，也就相对是html元素

<div class="box">
    <p></p>
</div>

<script>

// $('body').css({
//     margin:0,
//     padding:0
// });

$('.box').css({
    border: '1px solid #008c8c',
    height:'300px',
    width: '300px',
    padding: 0,
    position: 'relative', // 父级box设置为相对定位，offset是相对文档，这里可以不设置
}); 

$('.box p').css({
    width: '100px',
    height: '100px',
    background: '#f00',
    margin:0,
    position: 'absolute', // 子级p设置为绝对定位
    left:'100px', // 设置偏移量
    top:'100px', // 设置偏移量
});


console.log(
    $('.box p').offset().left, // 109
    $('.box p').offset().top, // 109
    $('.box p').offset().right, // undefined
    $('.box p').offset().buttom // undefined
);

</script>

left值是相对于document，body默认的margin:8 + box元素边框1 + 加偏移量100 = 109

注意，left和top不是相对于父级，是相对于文档top和left

设置位置信息

<div class="box">
    <p></p>
</div>

<script>

$('.box').css({
    border: '1px solid #008c8c',
    height:'300px',
    width: '300px',
    padding: 0,
    position: 'relative',
    // top:'300px',
    // left:'300px'
}); 
$('.box p').css({
    width: '100px',
    height: '100px',
    background: '#f00',
    margin:0,
    position: 'absolute',
});

$('.box p').offset({
    left:200,
    top:300
});
// left是相对于document文档
// top也是相对于document文档

console.log(
    $('.box p').offset().left, // 200
    $('.box p').offset().top, // 300
)

</script>

3、.position()

1).相对于有定位的父级，父级必须设置定位

2).不接收任何的参数

3).只返回left属性和top属性

<div class="box">
    <p></p>
</div>

<script>

$('.box').css({
    border: '1px solid #008c8c',
    height:'300px',
    width: '300px',
    padding: 0,
    position: 'relative', // 这里必须设置，不然相对于的是document文档
}); 
$('.box p').css({
    width: '100px',
    height: '100px',
    background: '#f00',
    margin:0,
    position: 'absolute',
});

$('.box p').offset({
    left:200,
    top:300
});

console.log(
    $('.box p').position().left, // 191 
    $('.box p').position().top, // 291
)

</script>

总结：

offset()是相对于document

position()是相对于父级

4、滚动

页面document有滚动，所以要先获取document

获取滚动条的位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>滚动</title>
</head>
<body>

<div style="height:1000px;width:1000px;"></div>

<script>

console.log(
    $(document).scrollTop(),
    $(document).scrollLeft(),
)

</script>
</body>
</html>

设置滚动条的位置

一般是我们点击了某一个元素，或者是进行了某一项操作之后，让滚动条到某一个位置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>滚动</title>
</head>
<body>

<div style="height:1000px;width:1000px;"></div>

<script>


setTimeout(function(){
    $(document).scrollTop(300);
    $(document).scrollLeft(200);
}, 2000);


</script>
</body>
</html>

这样滚动有些生硬，后面用jquery动画方法，滚动的会细腻些