return false 阻止a标签的跳转
load()加载服务器上的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div class="head">
<a href="html/html.html">html</a>
<a href="html/css.html">css</a>
</div>
<div id="app">
</div>
<div class="footer">
footer
</div>
<script>
/*
return false 阻止a标签的跳转
*/
/*
load()加载服务器上的数据
*/
var htmls = ["html/html.html","html/css.html"];
$("#app").load(htmls[0])
$(".head a").click(function(){
$("#app").load(htmls[$(this).index()])
return false;
})
</script>
</body>
</html>
$(element).attr(value)获取a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
body{
height: 2500px;
}
.head{
top:0;
left:0;
height: 50px;
position: fixed;
}
div{
width:100px;
height: 100px;
background-color: red;
}
#html{
margin-top: 500px;
}
#css{
margin-top: 500px;
}
#js{
margin-top: 500px;
}
</style>
</head>
<body>
<p class="head">
<a href="#html">html</a>
<a href="#css">css</a>
<a href="#js">javascript</a>
</p>
<div id="html">
html
</div>
<div id="css">
css
</div>
<div id="js">
javascript
</div>
<script>
/*
$(element).attr(value)获取a标签
*/
$(".head a").click(function(){
var id = $(this).attr("href");
var offsetTop = $(id).offset().top;
console.log(offsetTop)
$("html,body").animate({scrollTop:offsetTop})
return false;
})
</script>
</body>
</html>
val
$(element).val() —获取value值
$(element).val(value) —改变value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<!--
$(element).val() --获取value值
$(element).val(value) --改变value值
-->
<input type="text" value="你">
<script>
var value = $("input").val("")
console.log(value)
</script>
</body>
</html>
jquery方法
each,map,filter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script>
// each,map,filter
var arr = $("li").filter(item=>{
console.log(item)
})
$("li").map((index,ele)=>{
return$(ele).html("good")
})
console.log(arr)
</script>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
