1.语法
基础语法:$("selector").action();
2.文档就绪事件
$(document).ready(function(){
//相关代码
});
简写形式:
$(function(){
//相关代码
})
目的:防止函数事先运行
3.JQuery选择器
1.元素选择器
$("p").action();
2.ID选择器
$("#p").action();
3.类选择器
$(".p").action();
4.选取所有元素
$("*").action();
5.选取当前元素
$(this).action();
6.选取某类某元素
$("p.class").action(); //.class要在后面
7.选取第一个元素或者第n个元素
$("p:first").action();
$("p:nth(n)").action();
8.选取含有某两个标签的第n个元素
$("ul li:nth(n)").action();
9.选取含有属性的元素
$("[name]").action();
10.选取属性值等于某个特定值的标签元素
$("a [name='123']").action
11.选取所有含有某个属性的元素
$(":button").action();
12选取奇数或者偶数列
$("tr:even").action();
$("tr:odd").action();
13.引用独立的JQuery文件
<script src="xxx.js"></script>
4.JQuery事件
事件:对不同访问者的响应(调用的方法)。
比如:点击某个按钮
1.事件分类:键盘,鼠标,表单,文档窗口
2.语法:
$("p").action(function(){ });
实例:
单击隐藏:
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });
双击隐藏:
$(document).ready(function(){ $("p").dbclick(function(){ $(this).hide(); }); });
鼠标经过响应:
$(function(){ $("p").mouseenter(function(){ alert("双击事件"); }); });
悬浮事件:
$(document).ready(function(){ $("p").hover(function(){ alert("你已经悬浮"); }, function(){ alert("你已经离开"); } ); });
聚焦事件:
$(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#000"); } ); });