一、语法
$(document).ready( function (){
//开始写jquery代码
});
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="/jquery.min.js">
</script>
<script> //引入的js文件
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script> //jquery书写代码阶段
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>
二、选择器
1.jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
2.jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 css选择器https://www.runoob.com/cssref/css-selectors.html除此之外,它还有一些自定义的选择器。
3.jQuery 中所有选择器都以美元符号开头:$()。
例:
<script src="/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){ //给指定标签(按钮、元素)添加动作,此处为单击
$("p").hide(); //动作作用的对象,此处为p标签
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
其他标签汇总
$("*") | 选取所有的元素 |
$("p:first") | 选取第一个p标签元素 |
$("p.p1") | 选取class="p1"的p元素 |
$("a[target='blank']") | 选取target属性为blank的a标签 |
$("this") | 选取当前HTML元素 |
$("[href]") | 选取带有href属性的所有元素 |
$(":[button]") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
... | ... |
三、事件
1.什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
例:
在元素上移动鼠标。
选取单选按钮
点击元素
2.点击动作汇总
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
click 单击 | keypress 键盘按下 | submit 提交显示 | load 负荷 |
dblclick 双击 | keydown | change 改变警报 | resize 调整 |
monseenter 穿过元素 | keyup按键抬起 | focus聚焦 | scroll 滚动 |
hover 鼠标悬停 | blur失焦 | unload 卸载 |
<script>
$(document).ready(function(){
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
)
});
</script>