JQuery语法，选择器和事件-优快云博客

本文介绍了JQuery的基础语法、文档就绪事件、选择器及事件处理等内容。覆盖了基本语法使用、各类选择器详解以及常用事件的绑定方法。

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");
}
);
});

转载于:https://www.cnblogs.com/comefuture/p/6715185.html