文章目录
JQuery
公式:$(selector).action()
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="#" id="cli">点击</a>
<script type="text/javascript">
$('#cli').click(function(){
alert('成功弹出');
})
</script>
</body>
选择器
$('p')//标签选择器
$('#d1')//id选择器
$('.c1')//类选择器
....
事件
移动
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.d1{
width: 200px;
height: 200px;
border: 1px solid rosybrown;
}
</style>
</head>
<body>
mouse:<span id="s"></span>
<div class="d1">
移动看看
</div>
<script type="text/javascript">
//元素加载完毕后相应事件，也可以省略直接写function(){}
$(document).ready(function(){
$('.d1').mousemove(function(e){
$('#s').text('x:'+e.pageX+',y:'+e.pageY)
})
});
</script>
</body>
操作DOM
节点文本操作
<body>
<ul class="u">
<li id="li1">red</li>
<li id="li2">yellow</li>
</ul>
<script type="text/javascript">
//$('.u').text('haha');设置值
$('.u').text();//获得值
//$('.u').html('haha');设置值
//$('.u').html();//获得值
//$('.u').append('<li>brown</li>'); 追加li
</script>
</body>
$('.u li[id="li1"]').text();
>"red"
操作css
<script type="text/javascript">
$('.u li[name="li1"]').css({'color':'red','fontSize':'30px'});
</script>
显示和隐藏元素
$('.u li[name="li1"]').hide();
$('.u li[name="li1"]').show();
window
$(window).height();
>335
$(window).width();
>1536
如有不对的地方欢迎大家指出，共同进步！