版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84405322
修改元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.b10 {
border: 10px solid #000;
}
.m10 {
margin: 10px;
}
.p10 {
padding: 10px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="box" id="demo">div</div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('#demo');
element.addClass('red'); //向匹配的元素添加指定的类名
element.removeClass('b10 m10 p10'); //从匹配的元素中删除指定的类名
element.addClass(function (index, className) {
console.log(index);
console.log(className);
return 'red';
});
element.removeClass(function (index, className) {
console.log(index);
console.log(className);
return 'red';
});
if (element.hasClass('hide')) { //存在执行removeClass，反之执行addClass
element.removeClass('hide');
} else {
element.addClass('hide');
}
element.toggleClass('hide'); //匹配到制定的元素就移除，反之就添加
$('li').each(function(index) {
$(this).toggleClass('red', index % 3 === 0);
});
element.css('width', 200); //修改css的样式
element.css({
'background-color': 'red',
height: 200,
border: '10px solid #000',
marginTop: 100,
mArGinLeft: 100,
width: '+=200'
});
element.css('height', function(index, value) {
console.log(value);
return parseInt(value, 10) + 50;
});
console.log(element.width()); //内容的宽
console.log(element.height());
console.log(element.innerWidth()); //内容+内边距
console.log(element.innerHeight());
console.log(element.outerWidth()); //内容+内边距+边框
console.log(element.outerHeight());
console.log(element.outerWidth(true)); //内容+内边距+边框+外边距
console.log(element.outerHeight(true));
console.log(element.offset()); //返回距离文档的距离
console.log(element.position()); //返回距离最近的父元素的距离，没有返回距离文档的距离
console.log(demo.scrollTop()); //获取距离滚动条顶部的距离
console.log(demo.scrollLeft()); //获取距离滚动条左侧的距离
demo.scrollTop(300); //设置滚动条的距离
demo.scrollLeft(100);
var elements = $('li');
console.log(elements.html()); //返回html中的内容
console.log(elements.text()); //返回匹配元素的内容
console.log(elements.html('<strong>123</strong>')); //设置html中的内容
console.log(elements.text('<strong>123</strong>')); //设置匹配元素的内容
});
</script>
</body>
</html>
移动和插入元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h2>title</h2>
<ul>
<li class="item1">新闻标题-1</li>
<li class="item2">新闻标题-2</li>
<li class="item3">新闻标题-3</li>
<li class="item4">新闻标题-4</li>
<li class="item5">新闻标题-5</li>
<li class="item6">新闻标题-6</li>
<li class="item7">新闻标题-7</li>
<li class="item8">新闻标题-8</li>
<li class="item9">新闻标题-9</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('ul');
element.append('<li>append</li>') //在ul中的最后面插入
element.prepend('<li>prepend</li>') //在ul中的最前面插入
element.after('<li>after</li>') //在ul的后面插入
element.before('<li>before</li>') //在ul的前面插入
$('h2').appendTo(element); //将所选元素插入到指定元素的后面
});
</script>
</body>
</html>
包裹元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
<div class="item"></div>
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
<a href="#">link5</a>
<a href="#">link6</a>
<a href="#">link7</a>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('p');
element.wrap($('.item')); //将item复制，包裹住p
$('a').wrap('<p></p>'); //每个a外面包裹一个p
$('a').wrapAll('<p></p>'); //所有的a被一个p包裹
element.wrapInner('<div class="box"></div>'); //p包裹住添加的元素
element.unwrap(); //打开包裹
});
</script>
</body>
</html>
移除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
p {
font-size: 12px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veritatis.</p>
<div class="item"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('p');
element.on('click', function () {
$(this).css('fontSize', '+=5')
}).data('data', 'demo')
element.remove(); //移除所有匹配元素(事件和数据删除)
element.detach(); //从DOM中移除(事件和数不删除)
element.empty(); //删除匹配元素集合中的所有子节点(移出元素内容)
});
</script>
</body>
</html>
复制和替换元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h2>title</h2>
<div class="item">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<ul>
<li class="item1">新闻标题-1</li>
<li class="item2">新闻标题-2</li>
<li class="item3">新闻标题-3</li>
<li class="item4">新闻标题-4</li>
<li class="item5">新闻标题-5</li>
<li class="item6">新闻标题-6</li>
<li class="item7">新闻标题-7</li>
<li class="item8">新闻标题-8</li>
<li class="item9">新闻标题-9</li>
</ul>
<script src="/jquery-1.12.4.js"></script>
<script>
$(function() {
var element = $('ul');
$('h2').clone().appendTo(element) //创建匹配的元素集合的副本
$('h2').replaceWith('<p>hello</p>'); //替换匹配到的元素
$('<p>hello</p>').replaceAll($('li')); //替换所有的li
});
</script>
</body>
</html>
处理标段元素的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<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">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<p>
<select name="multiSelect" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($('[name=text]').val()); //获取文本框的值
console.log($('[name=radio]:checked').val()); //获取单选按钮的值
console.log($('[name=select] option:selected').val()); //获取select的值
console.log($('[name=multiSelect]').val()); //获取multiSelect多选的值
console.log(
$('[name="checkbox"]:checked').map(function () { //获取多选按钮的值
return $(this).val();
}).toArray()
);
$('[name=text]').val('text') //设置文本框的值
$('[name=select]').val('2') //设置select的值
$('[name=radio]').val(['1']) //设置单选按钮的值
$('[name=checkbox]').val(['2']) //设置多选按钮的值
$('[name=multiSelect]').val(['1', '2']) //设置multiSelect多选的值
})
</script>
</body>
</html>