jquery选择器的问题,_百度知道
jquery选择器的问题,
假设有一个table每个td都有三个属性data-iddata-fielddata-table&tddata-id=&3931&data-type=&date&data-field=&contract_date&data-table=&contract&class=&edit&&&/td&&t...
假设有一个 table 每个td 都有三个属性 data-id data-field data-table&td data-id=&3931& data-type=&date& data-field=&contract_date& data-table=&contract& class=&edit&&&/td&&td data-id=&3936& data-type=&date& data-field=&contract_date& data-table=&contract& class=&edit&&&/td&&td data-id=&3936& data-type=&date& data-field=&contract_date& data-table=&contract& class=&edit&&&/td&&td data-id=&2222& data-type=&date& data-field=&contract_date& data-table=&contract& class=&edit&&&/td&这里列举同一列四个td单元格 其中有两个单元格是一样的 来字于三条不同的数据 在同一行的 data-id的值都是一样的通常我们使用选择器 只用一个条件就能锁定单元格 最简单的是 $('#id')如果我用$('td[data-id=3936]')获取的是 这两行所有的内容 而不只是这两个单元格 因为 同一行的
data-id值都一样 我要怎么样 在$('td[data-id=3936]')后面加什么筛选条件来 锁定我要选择的这两个单元格 条件只能从 data-field 和 data-table里选择
我使用$('td[data-id=3936]').find('td[data-field=date]');这样并不管用
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
AliBBoy3知道合伙人
来自电脑网络类芝麻团
采纳数：288
获赞数：114
擅长：暂未定制
参与团队：
你应该要这样用 $(td).data(&id&) 去抓取资料，这是 jQuery 较正规的用法等你抓出来后在去判断是否是你要的。但如果要直接抓取那个 td ，可以直接把 data-id 改成真的 id 参数，不懂可以私信问我。
沧G海G一G粟知道合伙人
来自电脑网络类芝麻团
沧G海G一G粟
采纳数：122
获赞数：111
参与团队：
$('td[data-id=3936]').filter('td[data-field=date]')
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。jquery选择器需要注意的问题
转载 &更新时间：日 17:02:53 & 投稿：hebedich
本文讲述的是jquery选择器结果是数组时需要主要的一个问题，并详细分析了产生此问题的原因，这里记录下来，小伙伴们在项目中使用的时候要注意一下。
我们先来看段代码，很简单,如下
&div id="div1"&
&&& &span&111&/span&
&&& &span&222&/span&
&&& &span&333&/span&
&&& &button id="button1"&clear&/button&
$(function() {
&&&& $("#button1").click(function() {
&&&&&&&& $("#div1 span").html("aaa");
$("#div1 span")获得三个对象的数组
1.如果执行 $("#div1 span").html("aaa"),则数组内的所有对象都会改变.如下图
2.如果执行$("#div1 span").html(),只取值的话,则只会取数组第一个对象的值
所以如果选择器获得是一个数组,要对数组每个元素都进行操作时,最好用each().
另外还有些注意事项
选择器中含有特殊符号的注意事项选择器中含有“.”、“#”、“(”或“]”等特殊字符根据W3C的规定，属性值中是不能含有这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符，如果按照普通的方式去处理出来的话就会出错。
解决此类错误的方法是使用转义符转义。
&div id="id#b"&bb&/div&
&div id="id[1]"&cc&/div&
不能这样写：
$('#id#b');& $('#id[1]');
应该使用转义符号：
$('#id\\#b');&&&&&& //转义特殊字符“#”
$('#id\\[1\\]');&&& //转义特殊字符“[ ]”
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&nbsp&#8250&nbsp&nbsp&#8250&nbsp
jquery中几种选择器的效率问题
jQuery是目前非常流行的Javascript库之一，随着jQuery应用程序的逐渐增多，其性能优化问题是程序员们不可忽视的，我们知道在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。
例如有一段HTML代码：
　　1.总是从ID选择器开始继承
以下是引用片段：
&div id=&content&&
&form method=&post& action=&#&&
&h2&交通信号灯&/h2&
&ul id=&traffic_light&&
&li&&input type=&radio& class=&on& name=&light& value=&red& /& 红色&/li&
&li&&input type=&radio& class=&off& name=&light& value=&yellow& /& 黄色&/li&
&li&&input type=&radio& class=&off& name=&light& value=&green& /& 绿色&/li&
&/ul& &input class=&button& id=&traffic_button& type=&submit& value=&Go& /&
　　如果采用下面的选择器，那么效率是低效的。
以下是引用片段：
var traffic_button = $(&#content .button&);&
　　因为button已经有ID了，我们可以直接使用ID选择器。如下所示：
以下是引用片段：
var traffic_button = $(&#traffic_button&);
　　当然 这只是对于单一的元素来讲。如果你需要选择多个元素，这必然会涉及到 DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。如下所示：
以下是引用片段：
var traffic_lights = $(&#traffic_light input&);
　　2.在class前使用tag(标签名)
　　在jQuery中第二快的选择器是tag(标签)选择器( 比如：$(&head&) )。跟ID选择器累时，因为它来自原生的getElementsByTagName()方法。继续看刚才那段HTML代码：
以下是引用片段：
&div id=&content&&
&form method=&post& action=&#&& &h2&交通信号灯&/h2&
&ul id=&traffic_light&&
&li&&input type=&radio& class=&on& name=&light& value=&red& /& 红色&/li&
&li&&input type=&radio& class=&off& name=&light& value=&yellow& /& 黄色&/li&
&li&&input type=&radio& class=&off& name=&light& value=&green& /& 绿色&/li&
&input class=&button& id=&traffic_button& type=&submit& value=&Go& /&
　　比如需要选择红绿单选框，那么可以使用一个tag name来限制(修饰)class ，如下所示：
以下是引用片段：
var active_light = $(&input.on&);&
　　当然也可以结合 就近的ID，如下所示：
以下是引用片段：
var active_light = $(&#traffic_light input.on&);&
　　在使用tag来修饰class的时候，我们需要注意以下几点：
　　（1）不要使用tag来修饰ID，如下所示：
以下是引用片段：
var content = $(&div#content&);&
　　这样一来，选择器会先遍历所有的div元素，然后匹配#content。
　　（2）不要画蛇添足的使用ID来修饰ID，如下所示：
以下是引用片段：
var traffic_light = $(&#content #traffic_light&);
　　3.将jQuery对象缓存起来
　　把jQuery对象缓存起来就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。下面是一个jQuery新手写的一段代码：
以下是引用片段：
$(&#traffic_light input.on&).bind(&click&, function(){ ... });
$(&#traffic_light input.on&).css(&border&, &1px dashed yellow&);
$(&#traffic_light input.on&).css(&background-color&, &orange&);
$(&#traffic_light input.on&).fadeIn(&slow&);&
　　但切记不要这么做。我们应该先将对象缓存进一个变量然后再操作，如下所示：
以下是引用片段：
var $active_light = $(&#traffic_light input.on&);
$active_light.bind(&click&, function(){ ... });
$active_light.css(&border&, &1px dashed yellow&);
$active_light.css(&background-color&, &orange&);
$active_light.fadeIn(&slow&);&
　　记住，永远不要让相同的选择器在你的代码里出现多次：
　　（1）为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上$符号。
　　（2）上面代码可以使用jQuery的链式操作加以改善。如下所示：
以下是引用片段：
var $active_light = $(&#traffic_light input.on&);
$active_light.bind(&click&, function(){ ... })
.css(&border&, &1px dashed yellow&)
.css(&background-color&, &orange&)
.fadeIn(&slow&);
　　如果你打算在其他函数中使用jQuery对象，那么你必须把它们缓存到全局环境中。如下代码所示：
以下是引用片段：
　　// 在全局范围定义一个对象 (例如: window对象)
window.$my = { head : $(&head&), traffic_light : $(&#traffic_light&), traffic_button : $(&#traffic_button&) }; function do_something(){
// 现在你可以引用存储的结果并操作它们
var script = document.createElement(&script&);
$my.head.append(script);
// 当你在函数内部操作是, 可以继续将查询存入全局对象中去. $my.cool_results = $(&#some_ul li&);
$my.other_results = $(&#some_table td&);
// 将全局函数作为一个普通的jquery对象去使用. $my.other_results.css(&border-color&, &red&);
$my.traffic_light.css(&border-color&, &green&); }
//你也可以在其他函数中 使用它 4.对直接的DOM操作进行限制
　　这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。例如，你想动态的创建一组列表元素，千万不要这样做,如下所示：
以下是引用片段：
var top_100_list = [...],
// 假设这里是100个独一无二的字符串 $mylist = $(&#mylist&);
// jQuery 选择到 &ul& 元素 for (var i=0, l=top_100_list. i&l; i++){ $mylist.append(&&li&& + top_100_list[i] + &&/li&&); }&
　　我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：
以下是引用片段：
var top_100_list = [...],$mylist = $(&#mylist&), top_100_li = &&;
// 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list. i&l; i++){ top_100_li += &&li&& + top_100_list[i] + &&/li&&; }
$mylist.html(top_100_li);&
　　注：记得以前还看过一朋友写过这样的代码：
以下是引用片段：
for (i = 0; i & 1000; i++) {
var $myList = $('#myList');
$myList.append('This is list item ' + i);
　　你应该已经看出问题所在了。
　　5.冒泡
　　除非在特殊情况下, 否则每一个js事件（例如:click, mouseover等。）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次。 比如，我们要为一个拥有很多输入框的表单绑定这样的行为：当输入框被选中时为它添加一个class传统的做法是，直接选中input，然后绑定focus等，如下所示：
以下是引用片段：
$(&#entryform input&).bind(&focus&, function(){
$(this).addClass(&selected&); }).bind(&blur&, function(){
$(this).removeClass(&selected&);
　　当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码：
以下是引用片段：
$(&#entryform&).bind(&focus&, function(e){
var $cell = $(e.target);
// e.target 捕捉到触发的目标元素
$cell.addClass(&selected&);
}).bind(&blur&, function(e){
var $cell = $(e.target); $cell.removeClass(&selected&); });&
　　通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。在上面代码中，父级元素扮演了一个调度员的角色，它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听，那么现在的你肯定知道哪里做错了。同理，在Table操作时，我们也可以使用这种方式加以改进代码：普通的方式：
以下是引用片段：
$('#myTable td').click(function(){
$(this).css('background', 'red'); });
　　改进方式：
以下是引用片段：
$('#myTable').click(function(e) {
var $clicked = $(e.target);
$clicked.css('background', 'red'); });
　　假设有100个td，在使用普通的方式的时候，你绑定了100个事件。在改进方式中，你只为一个元素绑定了1个事件，至于是100个事件的效率高，还是1个事件的效率高，相信你也能自行分辨了。
　　6.推迟到 $(window).load
　　jQuery对于开发者来说有一个很诱人的东西，可以把任何东西挂到$(document).ready下。尽管$(document).rady 确实很有用， 它可以在页面渲染时，其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。它会在所有的html(包括&iframe&)被下载完成后执行。
以下是引用片段：
$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
　　一些特效的功能，例如拖放，视觉特效和动画，预载入隐藏图像等等，都是适合这种技术的场合。
　　7.压缩JavaScript
　　压缩和最小化你的JavaScript文件。压缩之前，请保证你的代码的规范性，否则可能失败，导致Js错误。
　　8.尽量使用ID代替Class
　　前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。看下面的一个例子：
以下是引用片段：
// 创建一个list var $myList = $('#myList');
var myListItems = '&ul&';
for (i = 0; i & 1000; i++) {
myListItems += '&li class=&listItem' + i + '&&This is a list item&/li&';
//这里使用的是class
} myListItems += '&/ul&';
$myList.html(myListItems);
// 选择每一个 li for (i = 0; i & 1000; i++) {
var selectedItem = $('.listItem' + i); }&
　　在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。接着我们做一个对比，用ID代替class：
以下是引用片段：
// 创建一个list var $myList = $('#myList');
var myListItems = '&ul&';
for (i = 0; i & 1000; i++) { myListItems += '&li id=&listItem' + i + '&&This is a list item&/li&';
//这里使用的是id }
myListItems += '&/ul&';
$myList.html(myListItems);
// 选择每一个 li for (i = 0; i & 1000; i++) {
var selectedItem = $('#listItem' + i);
　　在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。
　　9.给选择器一个上下文
　　jQuery选择器中有一个这样的选择器，它能指定上下文。
　　jQuery( expression, context ); 通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。
　　普通方式：
以下是引用片段：
$('.myDiv')&
　　改进方式：
以下是引用片段：
$('.myDiv' , $(&#listItem&) )&
　　10.慎用 .live()方法（应该说尽量不要使用）
　　这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为 新增的DOM元素 动态绑定事件。但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。例如有这么一段代码:
以下是引用片段：
&script type=&text/javascript& &
$(function(){ $(&p&).click(function(){
alert( $(this).text() ); });
$(&button&).click(function(){
$(&&p&this is second p&/p&&).appendTo(&body&); });
}) &/script& &body& &p&this is first p&/p&
&button&add&/button& &/body&&
　　运行后，你会发现新增的p元素，并没用被绑定click事件。你可以改成.live(&click&)方式解决此问题，代码如下：
以下是引用片段：
$(function(){ $(&p&).live(&click&,function(){
//改成live方式
alert( $(this).text() ); });
$(&button&).click(function(){ $(&&p&this is second p&/p&&).appendTo(&body&); });})
　　但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：
以下是引用片段：
$(function(){ $(&p&).click(function(){
alert( $(this).text() ); });
$(&button&).click(function(){
$(&&p&this is second p&/p&&).click(function(){
//为新增的元素重新绑定一次
alert( $(this).text() );
}).appendTo(&body&); }); })&
　　虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，特别是在频繁的DOM操作中，这点非常明显。
　　11.子选择器和后代选择器
　　后代选择器经常用到，比如：$(&#list p&);后代选择器获取的是元素内部所有元素。而有时候实际只要获取子元素，那么就不应该使用后代选择器。应该使用子选择器，代码如下：
以下是引用片段：
$(&#list & p&);&
　　12.使用data()方法存储临时变量
　　下面是一段非常简单的代码：
以下是引用片段：
$(function(){
var flag =
$(&button&).click(function(){
$(&p&).text(&true&);
$(&p&).text(&false&);
　　改用data()方式后，代码如下：
以下是引用片段：
$(function(){
$(&button&).click(function(){
if( $(&p&).data(&flag&) ){
$(&p&).text(&true&);
$(&p&).data(&flag&,false);
$(&p&).text(&false&);
$(&p&).data(&flag&,true);
上一篇： JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验，同时也提高了开发人员构造丰富客户端UI的效率。JQuery本身提供了丰富的操作，但是，有时候我们需要根据我们自己的业务和系统特色（风
下一篇： 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 一、变量的作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函jQuery 参考手册 - 选择器
jQuery 参考手册 - 选择器
jQuery 选择器
$(&#lastname&)
id=&lastname& 的元素
$(&.intro&)
所有 class=&intro& 的元素
所有 &p& 元素
.class.class
$(&.intro.demo&)
所有 class=&intro& 且 class=&demo& 的元素
$(&p:first&)
第一个 &p& 元素
$(&p:last&)
最后一个 &p& 元素
$(&tr:even&)
所有偶数 &tr& 元素
$(&tr:odd&)
所有奇数 &tr& 元素
$(&ul li:eq(3)&)
列表中的第四个元素（index 从 0 开始）
$(&ul li:gt(3)&)
列出 index 大于 3 的元素
$(&ul li:lt(3)&)
列出 index 小于 3 的元素
:not(selector)
$(&input:not(:empty)&)
所有不为空的 input 元素
$(&:header&)
所有标题元素 &h1& - &h6&
所有动画元素
$(&:contains('W3School')&)
包含指定字符串的所有元素
$(&:empty&)
无子（元素）节点的所有元素
$(&p:hidden&)
所有隐藏的 &p& 元素
$(&table:visible&)
所有可见的表格
$(&th,td,.intro&)
所有带有匹配选择的元素
$(&[href]&)
所有带有 href 属性的元素
$(&[href='#']&)
所有 href 属性的值等于 &#& 的元素
$(&[href!='#']&)
所有 href 属性的值不等于 &#& 的元素
$(&[href$='.jpg']&)
所有 href 属性的值包含以 &.jpg& 结尾的元素
$(&:input&)
所有 &input& 元素
$(&:text&)
所有 type=&text& 的 &input& 元素
$(&:password&)
所有 type=&password& 的 &input& 元素
$(&:radio&)
所有 type=&radio& 的 &input& 元素
$(&:checkbox&)
所有 type=&checkbox& 的 &input& 元素
$(&:submit&)
所有 type=&submit& 的 &input& 元素
$(&:reset&)
所有 type=&reset& 的 &input& 元素
$(&:button&)
所有 type=&button& 的 &input& 元素
$(&:image&)
所有 type=&image& 的 &input& 元素
$(&:file&)
所有 type=&file& 的 &input& 元素
$(&:enabled&)
所有激活的 input 元素
$(&:disabled&)
所有禁用的 input 元素
$(&:selected&)
所有被选取的 input 元素
$(&:checked&)
所有被选中的 input 元素解决自定义$(id)的方法与jquery选择器$冲突的问题
转载 &更新时间：日 23:34:00 & 投稿：mdxy-dxy
最近网站改版，原来的js都是原生js，因为当前比较jquery而且他的组件也比较多，使用方便，所以我们也采用了jquery但跟原来的$(id)冲突，经过网络很多人的推荐我们选择了这个方法
一般就是改自己的函数名：
比较省事也简单，直接批量替换就可以了。
先上代码：
代码如下:var $= function (id) { return "string" == typeof id ? document.getElementById(id) : };
这段代码是模仿jquery自定义id选择器的方法，但是因为jquery选择器也是用的这个“$”,如果你引用jquery并且使用这个方法，那么页面就会报错，解决大办法就是修改自己的方法把"$"改成"getId(id)";
代码如下:ar getId = function (id) { return "string" == typeof id ? document.getElementById(id) : };
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具