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

3608次浏览

今天继续介绍前端中的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(),可以如上面方法使用!具体就不介绍了,更多的用法大家可以查查资料!

Tags: jquery通配符data

相关文章: