- jQuery
jQuery-添加元素 - append()-在被选中元素中插入内容【由下往上】
- prepend()-在被选中元素中插入内容【由上往下】
- after()-在被选元素之后插入内容
- before()-在被选元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$("#but1").click(function(){
$("#div1").append("hello");
$("#div1").append("<h2>hello</h2>");
$("#div1").append("<img src='avatar5.png'/>");
});
$("#but2").click(function(){
$("#div1").prepend("hello");
$("#div1").prepend("<h2>hello</h2>");
$("#div1").prepend("<img src='avatar5.png'/>");
});
$("#but3").click(function(){
$("#div1").after("hello");
$("#div1").after("<h2>hello</h2>");
$("#div1").after("<img src='avatar5.png'/>");
});
$("#but4").click(function(){
$("#div1").before("hello");
$("#div1").before("<h2>hello</h2>");
$("#div1").before("<img src='avatar5.png'/>");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="测试append" />
<input type="button" id="but2" value="测试prepend" />
<input type="button" id="but3" value="测试after" />
<input type="button" id="but4" value="测试before" />
<div id="div1"></div>
</body>
</html>
jQuery-删除元素
remove()-删除被选元素(及其子元素)【有过滤功能】
empty()-从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$("#but1").click(function(){
$("#div1").empty();
});
$("#but2").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="测试empty()" />
<input type="button" id="but2" value="测试remove()" /><br>
<div id="div1">
<img src="avatar5.png" >
</div>
</body>
</html>
jQuery-获取并设置CSS类
- addClass()-向被选元素添加一个或多个样式类
- removeClass()-从被选元素删除一个或多个类
- toggleClass()-对被选元素进行添加/删除类的切换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$("#but1").click(function(){
$("#div1").addClass("div1");
});
$("#but2").click(function(){
$("#div1").removeClass("div1");
});
$("#but3").click(function(){
$("#div1").toggleClass("div1");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="测试addClass()" />
<input type="button" id="but2" value="测试removeClass()" />
<input type="button" id="but3" value="测试toggleClass()" />
<div id="div1"></div>
</body>
</html>
- CSS()-设置或返回样式属性
css(样式属性名称)返回被选元素的指定样式属性值
css(样式属性名称,属性值)设置被选元素的具有这个样式。
css({样式属性名称,属性值,样式属性名称,属性值})设置被选元素具有一组样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$("#but1").click(function(){
//$("#div1").css({"width":"200px","height":"200px","background-color":"red"});
$("#div1").css({"background-color":"red","width":"300px","height":"300px"});
});
$("#but2").click(function(){
$("#div1").css("background-color","red");
$("#div1").css("width","300px");
$("#div1").css("height","300px");
});
$("#but3").click(function(){
$("#div1").css({"background-color":"red","width":"300px","height":"300px"});
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="css(属性名称)" />
<input type="button" id="but2" value="css(属性名称','属性值)" />
<input type="button" id="but3" value="css({样式属性名称:属性值,样式属性名称:属性值})" /><br>
<div id="div1"> </div>
</body>
</html>
面试题:
根据下边的html内容编写脚本语言(javascript或jquery)
<div>
<lable>姓名</lable><input type="text" name="userName" value="张宝"/>
<label>工号</label><input type="text" name="workCode" value=""/>
<input type="hidden" id="id" value="12df3aed2" />
</div>
1. 获取userName的input输入框的值,并将此值追加字符串”01”,再次回填到此输入框内
$("[name='userName']").val($("[name='userName']").val()+"01");
2. 将内容为工号的label标签的内容变为红色字体,并将字体大小设置为16px
$("label:last").css({"color":"red","font-size":"16px"});
jQuery each() 方法
认识javaScript的Dom对象
var javascriptDomObject=document.getElementById(“p5”);
[object HTMLParagraphElement]
认识Jquery对象
var jqueryObj=$("#p5");
[object Object]
转换
1.dom对象转换成jQuery对象
var javascriptDomObject=document.getelementByid(“p5”);
$(javascriptDomObject);
2.jquery对象转换成dom对象
var jqueryObj=$("#p5");
alert(jqueryObj.get());
语法:
$(selector).each(function(index,element))
必需。为每个匹配元素规定运行的函数。
index-被遍历出的每一个元素在数组中的位置
element-当前的元素【JavaScript的DOM对象】(也可以使用“this”选择器)
each()方法为每个匹配元素规定要运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
$("#but1").click(function(){
/*
$("p").each(function(index,element){
var si=index*10+10;
$(element).css("font-size",si+"px");
});
*/
$("p").each(function(index){
var si=index*10+10;
$(this).css("font-size",si+"px");
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="each" />
<p>测试用的p元素1</p>
<p>测试用的p元素2</p>
<p>测试用的p元素3</p>
<p>测试用的p元素4</p>
</body>
</html>