jQuery CSS control
<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 control
add tag
append (): Inserts selected elements in the end
prepend (): Inserts at the beginning of the selected element
after (): inserted after the selected elements
before (): insert content before the selected elements
Case:
<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 label
remove (): Delete the selected element (and its children)
empty (): delete the selected element from the sub-elements in
the case:
<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>
Sets or retrieves the HTML tags
text (): Set the selected element or returns the text content, the content is acquired in angle brackets
html (): returns the contents set or selected element (HTML tags)
Val (): Set the value of the field or return the form
case:
<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>
Add attributes and attribute values acquisition
attr ( 'placeholder', 'Please enter your user name')
attr ( 'placeholder')
Case:
<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>
Removing property
removeAttr ()
Case:
<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>
