属性和样式操作

1 元素属性操作

1.1 属性

attr(name|pro|key,val|fn)可以获取自定义

设置或返回被选元素的属性值可以自定义

没有添加,有就修改

1	$('#myImg').attr('src', '../../dist/images_one/meinv02.jpg');

查看

1	console.log($('#myImg').attr('src'))

删除

1	$('#myImg').attr('src', '');

<h1>图片懒加载</h1>
	<hr>
	<div class="imglist">
		<img loadpic='../../dist/images_one/1.jpg'>
		<img loadpic='../../dist/images_one/2.jpg'>
		<img loadpic='../../dist/images_one/3.jpg'>
		<img loadpic='../../dist/images_one/4.jpg'>
	</div>
	<script src="../jquery-3.3.1.js"></script>
	<script>
		//console.log($('.imglist img').attr('loadpic'))
		//单次定时
		setTimeout(function(){
		     //   同js的foreach 值是相反的
			$('.imglist img').each(function(index, item){
				$(item).attr('src', $(item).attr('loadpic'))
			})
		}, 2000)
	</script>

removeAttr(name)

从每一个匹配的元素中删除一个属性

prop(n|p|k,v|f) (只能内置)

获取在匹配的元素集中的第一个元素的属性值(只能内置)

removeProp(name)

用来删除由.prop()方法设置的属性集

1.2 class

addClass(class|fn)

为每个匹配的元素添加指定的类名

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类

toggleClass(class|fn[,sw])

如果存在（不存在）就删除（添加）一个类

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true

1.3 代码、文本、值

html([val|fn])

取得第一个匹配元素的html内容

text([val|fn])

取得所有匹配元素的内容

val([val|fn|arr])

获得匹配元素的当前值

2 元素样式操作

2.1 设置CSS

css(name|pro|[,val|fn])

访问匹配元素的样式属性

2.2 元素位置

offset()

获取匹配元素在当前视口的相对偏移

拿到位置

1	console.log($('.inner').offset().left, $('.inner').offset().top)

可以设置位置

$('#btn').click(function(){
			//只有offset 才能设置 设置的时候里面是个对象
			$('.inner').offset({left:10, top:10})
		})

position()

获取匹配元素相对父元素的偏移

scrollLeft()

获取匹配元素相对滚动条顶部的偏移

scrollTop()

获取匹配元素相对滚动条左侧的偏移

<button id="left_btn"> < </button>
	<button id="right_btn"> > </button>
	<script src="../jquery-3.3.1.js"></script>
	<script>
		$(function(){
			$('#left_btn').on('click', function(){
				console.log($('#box').scrollLeft())
				//$('#box').scrollLeft(800);//是把 scrollLeft 设置为800
				//把srollLeft 设置为原点  scrollleft是滚动条距左边的的距离  以此来改变滚动的位置
				$('#box').scrollLeft($('#box').scrollLeft() + 800);
			});
			$('#right_btn').on('click', function(){
				$('#box').scrollLeft($('#box').scrollLeft() - 800 )
			})
			
		})
	</script>

2.3 元素尺寸

内容的大小

widht()

取得第一个匹配元素当前计算的宽度值（px）

height()

取得匹配元素当前计算的高度值（px)

设置

1	$('#box').width(300); //设置内容的宽是300

内容大小+padding

innerWidth()

匹配元素内部区域宽度（包括补白、不包括边框）

innerHeight()

匹配元素内部区域高度（包括补白、不包括边框）

内容大小+padding+border 实际大小

outerWidth()

匹配元素外部宽度（默认包括补白和边框）

outerHeight()

匹配元素外部高度（默认包括补白和边框）

还可以设置

1	$('#box').outerWidth(300) //设置盒子总的宽是 300