码迷,mamicode.com
首页 > Web开发 > 详细

JQuery语法,选择器和事件

时间:2017-04-15 18:58:39      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:选择器   button   style   目的   点击   分类   数列   round   function   

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

 

 

 

 

JQuery语法,选择器和事件

标签:选择器   button   style   目的   点击   分类   数列   round   function   

原文地址:http://www.cnblogs.com/comefuture/p/6715185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!