JQuery教程之入门基础
- 语法
$(selector).action()
selector：选择器，类似css中的选择器
比如：
$('.buttons-tab a') --class为buttons-tab下的子元素aaction:执行动作，比如hide($('.content').hide())
- 事件
$(document).ready(function(){ ... }) 或 $(function(){ ... });--文档加载完后执行
$("p").dblclick(function(){ $(this).hide(); });--p元素的点击事件
- $(this)
当前元素的jquery对象
this表示当前元素
$(this)表示当前元素的jquery对象
<div >click to test</div>
function test(e) {
alert(e.id); //显示test1
$(e).hide();//隐藏元素
}
不能用e.hide()，因为hide是jquery对象的方法，只有jquery对象才能调用，使用$(e)把this转成jquery对象
this初始值为window对象
$(this)初始值为window对象转化而来的jquery对象
<div >click to test</div>
function test() {//两个alert的值是一个意思，都是窗口的高度
alert(window.innerHeight)
alert($(this).innerHeight());
}
- 实例
jquery可以方便对查询出来的多个结果批量操作
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<script>
$(function() {
$(".flex-item").click(function() {
$(".flex-item").removeClass("sel")
$(this).addClass("sel")
})
})
</script>
<style>
.flex-container {
display: flex;
color: white;
}
.flex-container .flex-item {
background-color: red;
width: 100px;
}
.flex-item.sel {
background-color: black;
}
</style>
</head>
<body >
<div class="flex-container">
<div class="flex-item sel">
1
</div>
<div class="flex-item">
2
</div>
<div class="flex-item">
3
</div>
</div>
</body>
</html>此处$(this)代表多个查询到的元素中当前选中的元素