jquery鼠标点击,jquery鼠标点击名字自动切换

jquery怎么判断鼠标点击的是哪个div

通过JQ获取当前div的索引值可判断。

十余年的龙州网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整龙州建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“龙州网站设计”,“龙州网站推广”以来,每个客户项目都认真落实执行。

假设有多个div,举个例子:

$('div').on('click',function(){

var index = $(this).index($('div'));//索引值

//通个上面的index可以区分是哪个div

})

jquery模拟鼠标点击动作

trigger(type,[data])

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

你也可以触发由bind()注册的自定义事件

返回值 jQuery

参数

type (String) : 要触发的事件类型

data (Array) : (可选)传递给事件处理函数的附加参数

示例

提交第一个表单,但不用submit()

jQuery 代码:

$("form:first").trigger("submit")

--------------------------------------------------------------------------------

给一个事件传递参数

jQuery 代码:

$("p").click( function (event, a, b) {

// 一个普通的点击事件时,a和b是undefined类型

// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"

} ).trigger("click", ["foo", "bar"]);

--------------------------------------------------------------------------------

下面的代码可以显示一个"Hello World"

jQuery 代码:

$("p").bind("myEvent", function (event, message1, message2) {

alert(message1 + ' ' + message2);

});

$("p").trigger("myEvent", ["Hello","World!"]);

=====================================================================

triggerHandler(type,[data])

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.

返回值 jQuery

参数

type (String) : 要触发的事件类型

data (Array) : (可选)传递给事件处理函数的附加参数

示例

如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作。

HTML 代码:

button id="old".trigger("focus")/button

button id="new".triggerHandler("focus")/buttonbr/br/

input type="text" value="To Be Focused"/

jQuery 代码:

$("#old").click(function(){

$("input").trigger("focus");

});

$("#new").click(function(){

$("input").triggerHandler("focus");

});

$("input").focus(function(){ $("spanFocused!/span").appendTo("body").fadeOut(1000); });

jquery鼠标点击事件是什么?

定义和用法:

当点击元素时,会发生 click 事件。

当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。

click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。

1、click事件:点击鼠标左键时触发

$('p').click(function(){});

示例:

123 $('p').click(function(){        alert('click function is running !');       });

2、dbclick事件:迅速连续的两次点击时触发

$('p').dbclick(function(){});

示例:

123 $("button").dblclick(function(){ $("p").slideToggle();});

3、mousedown事件:按下鼠标时触发

$('p').mousedown(function(){});

示例

123 $("button").mousedown(function(){ $("p").slideToggle();});

4、mouseup事件:松开鼠标时触发

$('p').mouseup(function(){});

示例:

123 $("button").mouseup(function(){ $("p").slideToggle();});

5、mouseover事件:鼠标从一个元素移入另一个元素时触发

mouseout事件:鼠标移出元素时触发

$('p').mouseover(function(){});

$('p').mouseout(function(){});

示例:

123456 $("p").mouseover(function(){ $("p").css("background-color","yellow");});$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4");});

6、mouseenter事件:鼠标移入元素时触发

mouseleave事件:鼠标移出元素时触发

$('p').mouseenter(function(){});

$('p').mouseleave(function(){});

示例

123456 $("p").mouseenter(function(){ $("p").css("background-color","yellow");});$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});

7、hover事件

$('p').hover(

function(){},

function(){}

);

示例

123456789 $(".table_list tr").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

8、toggle事件:鼠标点击切换事件

$('p').toggle(

function(){},

function(){}

);

示例

12345678 $("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");}

jquery鼠标点击事件

$(".inpt").click(function(){

$this.addClass("on");

});

$("*").not(".inpt").click(function(){

$this.removeClass("on");

});

其实你可以去看看jq的hover函数

$(".inpt").hover(

function(){

$this.addClass("on");

},function(){

$this.removeClass("on");

}

);

Jquery鼠标移入和移出、点击事件,点击变色,鼠标移出又变回原来的样式

你只要明白事件触发的顺序就知道原因了:当你鼠标移到div上的时候,触发mouseenter事件,点击的时候触发click事件,然后鼠标移走触发mouseleave事件。

例如:var

test=0;

$("#div1").delegate("a",

"mouseenter",

function()

{

test=1;

}).delegate("a",

"mouseleave",

function()

{

test=2;

});

$("#div1").delegate("a",

"click",

function()

{

test=3;

});

当你鼠标移动到div上点击之后鼠标再移走,最后触发的事件是mouseleave事件,此时test是2而不是三。你可以测试一下

jquery如何实现鼠标点击事件(如同手风琴效果,但是点击一次被点击的背景变化,点击第二次恢复到原来背景

ul

lih4123/h4div class="hidden"aaa/div/li

lih4456/h4div class="hidden"bbb/div/li

/ul

script type="text/javascript"

$("li").click(function(event){

$(this).toggleClass("show");

$(this).find("div").toggle();

$(this).siblings().find("div").hide();

$(this).removeClass("show");

})

/script

这是我写的例子 能否满足你的要求

参考资料: 


文章名称:jquery鼠标点击,jquery鼠标点击名字自动切换
本文地址:http://hbruida.cn/article/dsijocj.html