- 语法
$(selector).action()
selector：选择器，类似css中的选择器
比如：
$('.buttons-tab a') --class为buttons-tab下的子元素a
action:执行动作，比如hide($('.content').hide())
- 事件
$(document).ready(function(){ ... }) 或 $(function(){ ... });--文档加载完后执行
$("p").dblclick(function(){ $(this).hide(); });--p元素的点击事件
- $(this)
当前元素的jquery对象
this表示当前元素
$(this)表示当前元素的jquery对象
<div id="test1" onclick="test(this)">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 id="test1" onclick="test()">click to test</div>
function test() {//两个alert的值是一个意思，都是窗口的高度
alert(window.innerHeight)
alert($(this).innerHeight());
}
- 实例
jquery可以方便对查询出来的多个结果批量操作
<!DOCTYPE html> <html lang="en"> <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 style=" 100%"> <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)代表多个查询到的元素中当前选中的元素