JQuery语法，选择器和事件

Posted 2020-09-11 enternallove

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