利用Jquery对动态元素进行操作
来源:互联网 发布:淘宝信誉刷钻平台 编辑:程序博客网 时间:2024/05/12 07:39
今天写了一点jquery的代码,姑且先存放的博客上吧。
默认样式是这样的,需要的是click其中的td时实现对其内容的修改,而blur后显示的是修改后的内容:
单击url 的td元素之后是这样的:
单击method的td元素之后是这样的:
需求很简单,是对动态添加的表格进行样式处理,这里是对URL和method的区域进行样式的更改,因为元素本身是动态添加上,所以很多地方需要注意。
对于未来元素的监听,这里是用到了live, 另外用delegate和on也是可以,这里不赘述。
“>”这个选择器可是发挥了大用处,这里选的是父元素的所有后代元素,因为要为所有的子元素添加监听。所以说对于关系比较复杂的布局,用一些比较明确的选择器还是必要的。另外对于属性选择器记得属性的值要加‘’而不是“”,单双引号可谓失之毫厘,差之千里。
jquery对于添加DOM元素跟js异曲同工。
.html()跟js的innerHTML是一样的作用,可以直接个更改dom结构。.val()获取的是input与select的value值。text()获取的则是内部的文本不包含标签的值。这三个方法都可以对相应的内容进行更改。
整个部分最令人纠结的莫过于select标签的添加,提醒一句,select添加是不能直接更改元素的innerHTML来实现,即使这样更改,option根本不能算是option的子元素,浏览器提示报错。就乖乖的用DOM来操作吧。
看代码吧:
var flag = 0, flag1 = 0;$("#tablelist > tr > td[class = 'api_url']").live("click", function () { if(flag == 0) //flag=0说明是第一次单击 { flag =1; url = $(this).text(); var str = "<div class='ui form'><div class='field'><textarea rows='2' class='api_url' ></textarea></div></div>" $(this).html(str); $(this).find("textarea").val(url); $(this).find("textarea").focus(); }});$("#tablelist > tr > td[class = 'api_url']").live("blur", function () { flag = 0; var newurl = $(this).find("textarea").val(); $(this).html(newurl); });
//method修改$("#tablelist > tr > td[class = 'api_method']").live("click", function () { if(flag1 == 0) //flag=0说明是第一次单击 { url = $(this).text(); flag1 =1; var selector = $("<select></select>"); selector.className = "ui dropdown"; selector.id = "method"; selector.name = "method"; selector.append('<option value="post">post</option>'); selector.append('<option value="get">get</option>'); selector.append('<option value="put">put</option>'); selector.append('<option value="delete">delete</option>'); $(this).html(selector); $(this).find("select").val(url); $(this).find("select").focus(); }});$("#tablelist > tr > td[class = 'api_method']").live("blur", function () { flag1 = 0; var newurl = $(this).find("select").val(); $(this).html(newurl); });
- 利用Jquery对动态元素进行操作
- 利用DOM对HTML元素进行操作
- 通过 jQuery,对 CSS 元素进行操作。
- 在前台利用jquery对dom元素进行排序
- jQuery 对动态生成元素进行事件绑定
- 利用jquery对动态生成的文本进行求和计算
- jquery对DOM元素操作
- jQuery对元素内容操作
- jQuery对元素值操作
- jQuery 对Select 进行操作
- jQuery 对表格进行操作
- jQuery对节点进行操作
- JQuery对HTML进行操作
- jquery对class进行操作
- jquery学习 - 对动态创建的元素进行事件响应(bind, live, delegate)
- jquery学习 - 对动态创建的元素进行事件响应(bind, live, delegate)
- jquery对iframe的元素进行遍历
- 对元素进行拖拽操作
- Android学习第三天————ListView组件
- 让Android项目健壮的几个建议
- 从今天起让自己做一条每天都有梦想的咸鱼
- 对大数据信息挖掘、分析的浅显认识
- 将drawable设置到imageview里
- 利用Jquery对动态元素进行操作
- java代码实现贪心算法删除数字问题
- AutoLayout代码中修改约束遇到的坑
- leetcode -- Insertion Sort List -- 重点,需要优化
- 使用Jprofiler远程监控Tongweb应用服务器
- 今天看到一篇文章,觉得甚有道理
- php一些小知识点总结
- SqlServer发送邮件
- hdu1171Big Event in HDU(母函数)