jQuery控制CSS
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//前面设置div样式的简便写法
$('#div1').css('width':200,'height':200,'background-color':red);
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button id='btn'>点击</button>
</body>
jQuery控制HTML
添加标签
append()：在被选元素的结尾插入内容
prepend()：在被选元素的开头插入内容
after()：在被选元素之后插入
before()：在被选元素之前插入内容
案例：
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//在末尾添加内容
$('ul').append('<li>计算机基础实践</li>');
//在开头添加内容
$('ul').prepend('<li>计算机基础实践</li>');
//在ul后添加内容
$('ul').after('<li>计算机基础实践</li>');
//在第三个li前添加内容
$('li:eq(2)').before('<li>计算机基础实践</li>');
//删除第三li标签内容
$('li:eq(2)').remove();
//删除整个ul标签（及其里边的li标签）
$('ul').remove();
//删除ul标签里边的所有li标签（ul标签还存在）
$('ul').empty();
});
});
</script>
</head>
<body>
<ul>
<li>java基础入门到精通</li>
<li>javaWeb基础入门到精通</li>
<li class='show'>javaEE框架基础入门到精通</li>
<li>mysql数据库入门到精通</li>
</ul>
<button id="btn">点击</button>
</body>
删除标签
remove()：删除被选元素（及其子元素）
empty()：从被选元素中删除子元素
案例：
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//删除第三li标签内容
$('li:eq(2)').remove();
//删除整个ul标签（及其里边的li标签）
$('ul').remove();
//删除ul标签里边的所有li标签（ul标签还存在）
$('ul').empty();
});
});
</script>
</head>
<body>
<ul>
<li>java基础入门到精通</li>
<li>javaWeb基础入门到精通</li>
<li class='show'>javaEE框架基础入门到精通</li>
<li>mysql数据库入门到精通</li>
</ul>
<button id="btn">点击</button>
</body>
设置或获取HTML标签的内容
text():设置或返回所选元素的文本内容, 获取的是尖括号中的内容
html():设置或返回所选元素的内容（包括HTML标记）
val():设置或返回表单字段的值
案例：
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//获取span标签的内容
var txt=$('span').text();
console.log(txt);
//设置span标签的内容
var txt=$('span').text('jquery好强大');
console.log(txt);
//获取HTML标签的内容,获取整个ul标签的内容，包括li标签文字
console.log($('ul').html());
//获取表单内容
console.log($('#username').val());
//设置表单内容
$('#username').val('szl');
});
});
</script>
</head>
<body>
<ul>
<li>java基础入门到精通</li>
<li>javaWeb基础入门到精通</li>
<li class='show'>javaEE框架基础入门到精通</li>
<li>mysql数据库入门到精通</li>
</ul>
<input type="text" name="username" id="username" value="szl"></input>
<span>jquery</span>
<button id="btn">点击</button>
</body>
添加属性与获取属性值
attr(‘placeholder’,‘请输入用户名’)
attr(‘placeholder’)
案例：
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//设置输入框提示内容
$('#username').attr('placeholder','请输入用户名');
//获取属性内容
console.log($('#username').attr('placeholder'));
});
});
</script>
</head>
<body>
<ul>
<li>java基础入门到精通</li>
<li>javaWeb基础入门到精通</li>
<li class='show'>javaEE框架基础入门到精通</li>
<li>mysql数据库入门到精通</li>
</ul>
<input type="text" name="username" id="username"></input>
<span>jquery</span>
<button id="btn">点击</button>
</body>
移除属性
removeAttr()
案例：
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//给按钮添加点击事件
$('#btn').click(function(){
//移除username标签中的placeholder属性
$('#username').removeAttr('placeholder');
});
});
</script>
</head>
<body>
<ul>
<li>java基础入门到精通</li>
<li>javaWeb基础入门到精通</li>
<li class='show'>javaEE框架基础入门到精通</li>
<li>mysql数据库入门到精通</li>
</ul>
<input type="text" name="username" id="username" placeholder="请输入用户名"></input>
<span>jquery</span>
<button id="btn">点击</button>
</body>
来源：CSDN
作者：来一杯java压压惊
链接：https://blog.csdn.net/ShiZaolin/article/details/104416963