运用js文件中的js/jquery.min.js方法和$字符,用function方法进行调用
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var q=$("#a")
console.log(q)
var w=$(".b")
console.log(w[0].innerText)
var e=$("p")
console.log(e)
})
</script>
</head>
<body>
<div id="a">
第一
</div>
<div class="b">
第二
</div>
<p>p标签1</p>
<p>p标签2</p>
<p>p标签3</p>
</body>
</html>
用click点击事件进行一个盒子(Div)的各种显示与修改
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#cont{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<script>
$(function(){
$("#cont").click(function(){
$(this).css("color","#000000")
})
//宽
$("#k").click(function(){
$("#cont").css("width","500px")
})
//高
$("#g").click(function(){
$("#cont").css("height","500px")
})
//隐藏
$("#y").click(function(){
$("#cont").fadeOut(2000)
})
//显示
$("#x").click(function(){
$("#cont").fadeIn(2000)
})
//切换
$("#q").click(function(){
$("#cont").slideToggle(2000)
})
})
</script>
<body>
<button id="k">变宽</button>
<button id="g">变高</button>
<button id="y">隐藏</button>
<button id="x">显示</button>
<button id="q">切换</button>
<div id="cont">
</div>
</body>
</html>