Jquery选择器中使用变量实现动态选择例子


Posted in Javascript onJuly 25, 2014

例子一:

<table>
  <tr>
    <th>用户名</th>
    <th>状态</th>
  <tr>
  <tr>
    <td>张三</td>
    <td data-uid="10000">正常</td>
  <tr>
  <tr>
    <td>李四</td>
    <td data-uid="10001">冻结</td>
  <tr>
  <tr>
    <td>王二麻子</td>
    <td data-uid=10002>冻结</td>
  <tr>
</table>

<script type="text/javascript">
$(document).ready(function(){
  var uid = 1001;
  $("td[data-uid = "+ uid +"]").html('正常');
}
</script>

例子二:

<script type="text/javascript">
 $(function(){
  alert(123);
  var v=4;
  var test=$("input[type='radio'][value='"+v+"']");//直接拼接字符串就可以了
  console.info(test);
  var testValue=test.attr({"checked":true});
  console.info(testValue);
 }); 
 </script>
 
 <body>
  This is my JSP page. <br>
  <table>
 <tr>
 <td>性别:</td>
 <td>
  <input name="sex" type="radio" value="0"/>男 0
  <input name="sex" type="radio" value="1"/>女 1
  <input name="sex" type="radio" value="2"/>女 2
  <input name="sex" type="radio" value="3"/>女 3
  <input name="sex" type="radio" value="4"/>女 4
 </td>
 </tr>
  </table>
 </body>

例子三、jQuery中选择器参数使用变量应该注意的问题

这是原来的代码

var li_index = $(this).index();

var $content_index = li_index + 2;

var $content_progress = $(“div.content:eq(” + $content_index + “)”);

var $newavalue = $(this).find(“a”).attr(“name”);

var $resource = $(this).find(“a”).html().replace(“首页”,$newavalue);

var $afterresource = $resource.replace($newavalue,””);

var $afterresource = $newavalue + $afterresource.replace(“首页”,$newavalue);

实现的是关键词替换,不过到第三行时候不执行了,调试啊,替换啊,都不行。 从早上到刚才一直在各种群里面发问,终于 …… 俺们大本营 的Lomu大神一阵见血:

你的写法不对

要连接符

$(“div.content:nth-child($content_index)”);

改为

$(“div.content:nth-child(” + $content_index + “)”);

关键是外面有引号

有引号被当字符串处理了

说真的现在感觉,有些基础的东西出错,光靠自己调试根本找不出问题所在。比如刚才那个 + 号,我看书就没见过。出现这种错误百度也不知道什么关键词。真不知道  选择器 里面用变量 还要用到+号,那个《锋利的jQuery 》也没有明确的说 选择器 里面用变量 还要用到+号,包括我们的w3cschool。

Javascript 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
Vue-Router的使用方法
Sep 05 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 #Javascript
js星星评分效果
Jul 24 #Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 #Javascript
js创建对象的区别示例介绍
Jul 24 #Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 #Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 #Javascript
技术男用来对妹子表白的百度首页
Jul 23 #Javascript
You might like
php session应用实例 登录验证
2009/03/16 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
pandas object格式转float64格式的方法
2018/04/10 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python实现区域填充的示例代码
2021/02/03 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
经典演讲稿范文
2013/12/30 职场文书
旅游个人求职信范文
2014/01/30 职场文书
论语读书笔记
2015/06/26 职场文书
2016情人节宣传语
2015/07/14 职场文书