jquery选择器通配符及事件监听和data用法介绍

今天继续介绍前端中的jquery,在前端中，jquery用的最多，功能也很强大，今天继续对其进行介绍，关于jquery的其他文章，请看jquery

今天主要介绍jquery的三块内容：

jquery选择器通配符

jquery选择器中的通配符经常用到，大致的用法总结如下：

$("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 $("input[name^='code']");//name属性以code开始的所有input标签 $("input[name$='code']");//name属性以code结束的所有input标签 $("input[name*='code']");//name属性包含code的所有input标签

关于如下input

<input type="text" name="code[0]" id="haorooms[0]" />

请不要用

$("#haorooms[0]")

进行选择，这样通常会出现问题，特别是select的时候。要用如下方式

$("input[id^='haorooms']") 或者 $("input[name^='code']")

这样效率上面不如直接ID，但是不会出错，假如上面的name和id都没有后缀[0]，那么推荐直接用Id选择器来选择！

jquery事件监听

前面我的一篇文章总结前端面试过程中最容易出现的问题 ，中提到jquery的bind(),live(),delegate(),on() 区别，不知道大家查了没有。现在做监听，通常不用live（）了，一般用on（）

如下方式

$("#haorooms").on("click",".action",function(){})

#haorooms父亲元素，通常不是动态的，固定元素。而class action可以是动态添加的，也可以是静态的，用on做了一个事件监听！

jquery的data用法介绍

我之前很多时候用的是attr,假如你的attr设置的是data，用data更方便！

直接看例子：

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> $("div").data("role") === "page"; $("div").data("lastValue") === 43; $("div").data("hidden") === true; $("div").data("options").name === "John";

jquery 的data()，可以如上面方法使用！具体就不介绍了，更多的用法大家可以查查资料！