jquery获取当前元素的classname

一般而言，JQuery可以利用attr来获取元素的属性值，

1、$("元素")attr("属性");                //获取指定属性的值

2、$("元素")attr("属性","属性值");//设置属性值

3、$("元素")removeAttr("属性");  //移除指定属性

不过在16中加入了prop，用法同attr相同。只是将上面中attr替换成prop即可,不过在获取checked等属性时，将会返回标准属性true/false，不会和之前的attr一样，返回checked或者“”。

而JQuery中获取类名的属性为class亦可以为className，因为在HTML DOM中没有class属性，而是className属性。在JQuery中，有对className作出关键字的转换。

扩展资料：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

参考资料：

JS通过id和class名称：documentgetElementById(IDname)或者documentgetElementsByClassName('ClassName');

兼容性：ID兼容，class 不兼容IE6,7,8

数量： 通过ID只能获取一个dom元素，通过class可以获取一组元素。

通用性：ID不能重复，class可以重复，所以class比较好用，这也是jQuery能被广泛应该的原因（选择器好）。

本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考，具体如下：

(function

($)

{

//

自定义itemtab事件

$fnbind

=

function(types,

data,

fn)

{

//

重载jQueryfnbind方法，用来截获绑定自定义事件的元素

if(typeof

types

==

'string'

&&

'itemtab'

==

types)

{

var

itemTouchStart

=

-1;

//

touchstart位置

var

itemTouchMove

=

-1;

//

touchend位置，值为-1时表示未触发

var

itemTriggerDistance

=

0;

//

拖动距离阀值，若大于该值则为拖动列表，若小于等于该值则为点击列表项

var

itemMoved

=

false;

//

列表是否为拖动状态

$(this)bind('touchstart',

function

(event)

{

if(!eventoriginalEventtoucheslength)

return

true;

itemMoved

=

false;

itemTouchStart

=

eventoriginalEventtouches[0]pageX;

//

记录起始位置

})bind('touchmove',

function

(event)

{

if(!eventoriginalEventtoucheslength)

return

true;

itemTouchMove

=

eventoriginalEventtouches[0]pageX;

//

当前拖动位置

//consolelog('touchmove:',

itemTouchStart,

itemTouchMove,

itemMoved);

if(Mathabs(itemTouchMove

-

itemTouchStart)

>

itemTriggerDistance)

{

itemMoved

=

true;

//

列表被拖动

}

})bind('touchend',

function

(event)

{

//consolelog('itemMoved:',

itemMoved);

if(itemMoved)

{

//

列表被拖动过，非点击 *** 作

return

true;

}

$(this)trigger('itemtab');

//

触发自定义事件

});

}

return

thison(

types,

null,

data,

fn

);

//

这种做法具有侵入性，多个类似的代码会相互覆盖，可采用深度复制方式调用原$fnbind方法

}

})(jQuery);

希望本文所述对大家jQuery程序设计有所帮助。

H5edu教育Html5为您解答：

1事件代理的原理和意义

实现原理是利用了浏览器的事件冒泡和事件源（target）。

在js中事件会冒泡到父级节点，所以我们可以在父级节点进行事件代理。例如一个使用jQuery的函数：

$("#tab td")click(function(){

$(this)css("background","red");

}) ;

上面的函数给一个tab的td加了一个单击事件，但是如果表格1000行，就得绑定1000次，

$("#tab")bind("click",function(ev)){

var $obj=$(evtarget);

$objcss("background","red");

}

以上用bind函数将click绑定到了tab上，从而实现事件代理。

2jQuery中的绑定函数

(1)bind()为每个匹配元素的特定事件绑定事件处理函数

$("#niu")bind('click',function(){

alert("hello niuniu");

});

此代码把id为niu的元素响应事件click，并显示警报。使用bind绑定多个事件时，可以这样

$("#niu")bind('mouseenter mouseleava',function(){

$(this)css("background","yellow");

});

$("#foo")bind({

click:function(){

},

mouseenter:function(){

}

});

(2)delegate()指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("table")delegate("td","click",function(){

$(this)toggleClass("chosen");

});

(3)on在选择元素上绑定一个或多个事件的事件处理函数

function greet(event) { alert("Hello"+eventdataname); }

$("button")on("click", { name: "Karl" }, greet);

$("button")on("click", { name: "Addy" }, greet);

(4)live给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

$("a")live("click", function() { return false; })

以上是常用的绑定函数。

技术文档引用：

自从live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，delegate() 事件将始终传播给其中包含的被委托元素；同时，任何在 DOM 树中，比这些元素低的元素上绑定的相同事件，在 delegate() 事件被调用的时候，也会被触发。因此，如果要在事件中阻止委托事件被触发，可以调用eventstopPropagation()或者返回false防止委派处理程序冒泡。

简单来说，bind()是直接绑定在元素上，而live()和delegate()则是通过冒泡的方式来绑定到元素上的。bind()方法只能给当前存在的元素绑定事件，对于事后采用JS方式新生成的元素无效，而live方法可以对后生成的元素也可以绑定相应的事件。

onclick="dianji(thisid)"    传入id到方法里

function dianji(id){

//这个就是id

}

万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。[1]

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。[2]

前言

一、DOM事件级别

DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。

1DOM 0级事件

elonclick=function(){}

当希望为同一个元素/标签绑定多个同类型事件的时候（如给上面的这个btn元素绑定3个点击事件），是不被允许的。DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。

2DOM 2级事件

eladdEventListener(event-name, callback, useCapture)

event-name: 事件名称，可以是标准的DOM事件

callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event

useCapture: 默认是false，代表事件句柄在冒泡阶段执行

IE9以下的IE浏览器不支持 addEventListener()和removeEventListener()，使用 attachEvent()与detachEvent() 代替，因为IE9以下是不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。

3DOM 3级事件

在DOM 2级事件的基础上添加了更多的事件类型。

UI事件，当用户与页面上的元素交互时触发，如：load、scroll

焦点事件，当元素获得或失去焦点时触发，如：blur、focus

鼠标事件，当用户通过鼠标在页面执行 *** 作时触发如：dblclick、mouseup

滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

文本事件，当在文档中输入文本时触发，如：textInput

键盘事件，当用户通过键盘在页面上执行 *** 作时触发，如：keydown、keypress

合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart

变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。

二、DOM事件模型和事件流

DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。

（1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

DOM事件捕获的具体流程

捕获是从上到下，事件先从window对象，然后再到document（对象），然后是html标签（通过documentdocumentElement获取html标签），然后是body标签（通过documentbody获取body标签），然后按照普通的html结构一层一层往下传，最后到达目标元素。

而事件冒泡的流程刚好是事件捕获的逆过程。

接下来我们看个事件冒泡的例子：

正如我们上面提到的onclick给元素的事件行为绑定方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。

三、事件代理(事件委托)

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

1优点

减少内存消耗，提高性能

假设有一个列表，列表之中有大量的列表项，我们需要在点击每个列表项的时候响应一个事件

如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。借助事件代理，我们只需要给父容器ul绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。

动态绑定事件

在很多时候，我们需要通过用户 *** 作动态的增删列表项元素，如果一开始给每个子元素绑定事件，那么在列表发生变化时，就需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，如果用事件代理就会省去很多这样麻烦。

2如何实现

接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上：

四、Event对象常见的应用

event preventDefault()

如果调用这个方法，默认事件行为将不再触发。什么是默认事件呢？例如表单一点击提交按钮(submit)跳转页面、a标签默认页面跳转或是锚点定位等。

很多时候我们使用a标签仅仅是想当做一个普通的按钮，点击实现一个功能，不想页面跳转，也不想锚点定位。

也可以通过JS方法来阻止，给其click事件绑定方法，当我们点击A标签的时候，先触发click事件，其次才会执行自己的默认行为

接下来我们看个例子：输入框最多只能输入六个字符，如何实现？

eventstopPropagation() & eventstopImmediatePropagation()

eventstopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。上面提到事件冒泡阶段是指事件从目标节点自下而上向window对象传播的阶段。

我们在例4的inner元素click事件上，添加eventstopPropagation()这句话后，就阻止了父事件的执行，最后只打印了'inner'。

stopImmediatePropagation 既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其它监听器被触发。而 stopPropagation 只能实现前者的效果。我们来看个例子：

如上所示，使用 stopImmediatePropagation后，点击按钮时，不仅body绑定事件不会触发，与此同时按钮的另一个点击事件也不触发。

eventtarget & eventcurrentTarget

老实说这两者的区别，并不好用文字描述，我们先来看个例子：

当我们点击最里层的元素d的时候，会依次输出:

从输出中我们可以看到，eventtarget指向引起触发事件的元素，而eventcurrentTarget则是事件绑定的元素，只有被点击的那个目标元素的eventtarget才会等于eventcurrentTarget。也就是说，eventcurrentTarget始终是监听事件者，而eventtarget是事件的真正发出者。

五、参考文章

DOM级别与DOM事件

DOM事件机制解惑

事件模型

JavaScript 事件委托详解

JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation

eventtarget和eventcurrentTarget的区别

原文： >

可以把动态生成的元素的事件委托给固定的父元素（比如$("#selects")）去处理，这样的话不管动态添加多少元素，最终都会把事件冒泡给父元素，父元素再根据target对象获取事件的委托方并作出相应处理。具体请自行百度“事件委托”或“事件代理”。

以上就是关于jquery获取当前元素的classname全部的内容，包括:jquery获取当前元素的classname、js如何获得本次事件的id或class名称、jQuery实现获取绑定自定义事件元素的方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！