4.jQuery修改对象的内容和样式

修改元素样式可以通过className和attr()修改元素类名之类的。
但jQuery提供了更好的方式：
在这里插入图片描述

$(function () {
    
    
	var element = $( '#demo ' );
	element.addClass( 'red b10 m10 p10')
	element.removeClass( 'red m10 p10 ')
	//也可以加函数，removeClass也一样，他们都是批量操作
	element.addClass(function(index，className){
    
    
		console.log(index)
		console.log(className)
		return 'red'//返回什么就对应增加什么
	})
	//也可以有选择的进行
	if( element.hasclass( 'hide ' )){
    
    
		element.removeClass('hide');
	}else{
    
    
		element.addClass('hide');	
	}
	//用toggleClass可以代替上面的，更好的切换
	element.toggleClass('hide');
	element.toggleClass('hide red');//分别测试有hide/red没有，有删除，没有增加	
	
	$('li').each(function(index){
    
    
		$(this).toggleClass( 'red b10'，index % 3=== 0);
	})

})

获取和设置style

.css(name,value)

s(function () {
    
    
	var element = $('#demo ' );
	element.css( "width ", 200);
	element.css({
    
    
		"background-color " : 'red ' ,
		height: 200,
		border: '10px solid #000 ',
		marginTop: 100,
		width:'-=100'
		//对于多个单词组成的属性名可以用驼峰式也可以用引号括起来
	});
	element.css('height',function(index,value){
    
    
		console.log(value)//value有单位
		return parseInt(value,10)+50
	})

	console.log(element.css('height'))//获取相应的值
	console.log(element.css(['height','width']))//获取相应的值
})

在这里插入图片描述
width(value)
height(value)
他们获取的值是没单位的，都是针对第一个元素本身的宽度和高度

console.log(element.width())
console.log(element.height())

innerHeight(value)
innerWidth(value)
以上两种包含内边距，不包含边框和外边距

console.log(element.innerHeight())
console.log(element.innerWidth())

outerWidth(value)
outerHeight(value)
包含内边距和边框，外边距则不一定
传入一个Boolean参数为true则包含外边距，否则不包括

console.log(element.outerHeight(true))
console.log(element.outerWidth(false))

获取或设置位置和滚动

offset(coordinates)获取第一个元素
返回一个对象，整型的属性，top和left，以px为单位，只对可见元素有效

position()和offset类似，但又有不同，它获取的是离元素最近的具有相对定位的relative的父集元素。如果找不到，则和文档距离。

.box {
    
     position: relative; width: 100px; height: 100px;background: #ccc;margin: 20px; overflow: hidden; }/*overflow克服margin塌陷*/
.item {
    
     position: relative; width: 50px; height: 50px; background: red;margin: 20px; }

克服margin塌陷，可以触发BFC

那BFC是啥？

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。

W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

简单来说，OFFSET相对于文档，position相对于父元素

scrollLeft(value)
scrollTop(value) 常用上下滚动

console.log(demo.scrollTop())
console.log(demo. scrollLeft())
//改变滚动条位置
demo .scrollTop(300)
demo . scrollLeft(100)
console.log(demo.scrollTop())
console.log(demo. scrollLeft())

设置scrollTop为0回到顶部
还可以设置滚动的位置来触发一些效果

获取和设置元素内容

用于获取和设置html
html()
html(content)
用于获取和设置文本（即使写了html代码也是做文本处理）
text()
text(content)

$(function (){
    
    
	var elements = $('li ');
	console.log(elements.html()); //只对第一个
	console.log(elements.text());//对所有
	
	console.log(elements.html('<strong>test</strong>')); 
	console.log(elements.text('<strong>test</strong>'));
})

考虑到安全就使用text，那什么叫安全呢？
例如：

console.log(elements.eq(0).html( '<script>alert(123)\/script>'));
//这里用到转义字符，因为这行代码写在script里，我这里没写
//假如不是alert(),是其他的需要用户输入的，就可能存在安全问题，黑客输入恶意代码等

必要的时候，例如我们可以确保安全，可以使用html(),否则选择text更好，过滤用户的输入。

移动或插入元素

例如要给列表中的所有新闻后面插入一个阅读更多的超链接。

$(function () {
    
    
	var elements = $( 'li ');
	elements .append(" <a href="#">阅读更多...</a>')
	elements .prepend(" <a href="#">阅读更多...</a>')
	//插入在元素的内部的后面和前面
	elements .before(" <a href="#">阅读更多...</a>')
	elements .after(" <a href="#">阅读更多...</a>')
	//插入在元素的外部的后面和前面

	//移动h2到ul里
	var element = $('ul');
	element.append($('h2'))
//也可以传一大串
element.append('<p>p1</p>',['<p>p2</p>',$('h2 ')],'<p>p3/p>')

})

在这里插入图片描述

上面都是在什么元素后面插入什么内容

下面是把什么内容插入到什么位置（即反方法）
在这里插入图片描述

element.append($('h2'))
$('h2').appendTo(element);
//两者效果一样，主要看个人习惯，传参数的不同

包裹元素

例如把p元素用div(之前没有)包裹

$( function (){
    
    
var element = $("p");
element.wrap('<diw class="box"></div>' );
})

把p元素用类为.item的div(之前有)包裹

$( function (){
    
    
	var element = $("p");
	element.wrap($('.item'));
})
//它是复制了一份去包裹

它是针对所有p元素单独一个一个去包裹。
但有时我们只想针对这些所有的p包裹在一个div下

$( function (){
    
    
	var element = $("p");
	element.wrapAll($('.item'));
})
//此时是包裹在一个下

当只想包裹元素的内容时用wrapInner()

$( function (){
    
    
	var element = $("p");
	element.wrapInner($('.item'));
})
//此时p不动，内容改为被.item包裹

取消包裹用unwrap(),移除元素的一个父元素

$( function (){
    
    
	var element = $("p");
	element.wrap($('.item'));
	element.unwrap();
})
//此时效果不变

移除元素

remove([selector])

$( function (){
    
    
	var element = $("p");
	element.remove();
	console.log(element);//虽然移除了但还是存在，只是element上绑定的各种事件和数据等会删除
})

$( function (){
    
    
	var element = $("p");
	element.click(function(){
    
    
		$(this).css('fontSize','+=5')
	}).data('demo','demo')
	element.remove();//remove后element还可以用
	element.appendTo($('.item'));//事件消失
	console.log(element.data());//没有
})

如果想保留事件和数据用detach([selector])

	element.detach();//remove后element还可以用
	element.appendTo($('.item'));//事件还有
	console.log(element.data());//用

remove和detach都把元素删的很干净，但如果想保留元素，只是把元素内容清除干净，用empty()

var element = $("p");
element.empty();//里面的内容（子节点和文本节点）没了，但元素p还在

复制和替换元素

clone([Even,[deepEven]])
普通只复制自己，深度复制是复制了它本身及所有子元素等

$( function (){
    
    
	var element = $("u1");
	$('h2').clone().appendTo(element);
})

$(function (){
    
    
	var element = $( 'ul');
	
	$('.item').data('item','item');
	$('p').data('p','p');
	
	$('.item').clone(true,false).appendTo(element);
	//普通复制，若要深度复制，两个都为true或直接写一个，若不写默认false
	console.log($('ul .item').data())
	console.log($('ul p').data()
})

replaceWith(content)匹配的替换成指定的

$(function (){
    
    
	var element = $( 'ul');
	$('h2').replaceWith('<p>hello</p>');
})

replaceAll(target)上面的反方法

$(function (){
    
    
	var element = $( 'ul');
	$('<p>hello</p>').replaceAll('h2');
})

执行了破坏性操作：
appendTo()
prependTo()
insertBefore()
insertAfter()
replaceAll()
如果想继续使用先前选择的，要先用end()结束破坏操作

处理表单元素值

val()设置值
val(value)获取值
对于多选框，单选框，下拉选择框这些值的操作会有一些小小的不同，容易出错。

<form>
	<p><input type="text" name="text"></p>
	<p>
		<input type="radio" name="radio" value="1"> radio1
		<input type="radio" name="radio" value="2"> radio2
	</p>
	<p>
		<input type="checkbox" name="checkbox" value="1"> checkbox1
		<input type="checkbox" name="checkbox" value="2"> checkbox2
	</p>
	<p>
		<select name="select" style="width: 200px">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
	</p>
	<p>
		<select name="multiSelect" multiple style="width: 200px">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
	</p>
</form>

$(function (){
    
    
	console.log($('[name="text"]').val();
	//如何文本框里没输入值，则为空，输入了则可以获取
	console.log($('[name="radio"]').val();//无论选择什么还是不选择都是1，因为使用方法错了
	console.log($('[name="radio"]:checked').val();
	//此时没选择是undefined，选择了则返回相应值
	console.log($('[name="select"]').val();//没问题
	console.log($('[name="select"]:option:selected').val();//这样更精确

	console.log($('[name="multiSelect"]').val();
	//没选返回null，选择1个或多个都是返回数组
	console.log($('[name="checkbox"]:checked').val();//选择一个或不选时没问题，选择多个时则会出现问题了
	
	//这样解决
	console.log(
		$( '[name="checkbox "] : checked ' ).map( function(){
    
    
		return s(this).val()
		}).toArray()
	);

})

设置值

console.log($('[name="text"]').val('123'));
console.log($('[name="select"]').val('2'));
console.log($('[name="radio"]').val(['2']));
console.log($('[name="radio"]').val([1]));
console.log($('[name="multiSelect"]').val([1,2]));

在这里插入图片描述

一词：abdicate 退位，放弃代替give up
NEXT:
jQuery事件，使页面对不同的访问者进行完美的响应。
在这里插入图片描述