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

程序员文章站 2022-05-28 22:06:38

...

修改元素样式可以通过className和attr()修改元素类名之类的。
但jQuery提供了更好的方式：
4.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']))//获取相应的值
})

4.jQuery修改对象的内容和样式
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 i 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>')

})

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

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

下面是把什么内容插入到什么位置（即反方法）
4.jQuery修改对象的内容和样式

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

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

一词：abdicate 退位，放弃代替give up
NEXT:
jQuery事件，使页面对不同的访问者进行完美的响应。
4.jQuery修改对象的内容和样式

相关标签：前端小白入门 javascript jquery html

上一篇： python 包的使用（三）——turtle：使用海龟图形（turtle graphics）绘制图像

下一篇： 1.jQuery又是啥

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

获取和设置style

获取或设置位置和滚动

获取和设置元素内容

移动或插入元素

包裹元素

移除元素

复制和替换元素

处理表单元素值

PHP 读取和修改大文件的某行内容的代码

Word固定尺寸和悬浮对象中的内容制作双语和多语对照

Vue响应式添加、修改数组和对象的值

用js实现before和after伪类的样式修改的示例代码

Android 修改 TabHost 的颜色和样式

python对Excel修改内容和样式

对MathType公式的格式的样式、大小和间隔等进行批量修改

【MYSQL笔记3】MYSQL过程式数据库对象之存储过程的调用、删除和修改

asp.net 使用页适配器和重写Render对全站输出的页面的HTML内容进行修改，不会错乱

js坚持不懈之15：修改html内容和属性的方法