`
sty2008boy
  • 浏览: 301515 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

JQuery页面前端遍历样例

 
阅读更多
 JQuery遍历1:CssClass遍历元素
将所有的checkbox设置为未选中,采用遍历的方法来完成 
控件如下

<button id="ClearPosition" type="button">清空职位</button>

<input type="checkbox"   class="jobPostaJoblist"/><span>导购/促销</span>
<input type="checkbox"   class="jobPostaJoblist"/><span>收银员</span>
 <input type="checkbox"   class="jobPostaJoblist"/><span>店长</span>             


JQUERY代码如下:


jobPostaJoblistSelected是checkbox被选中时的css

stopDefault函数用于中止默认的事件响应

 $("#ClearPosition").each(function(i) {
              $(this).click(function(e) {
                  $("input[class*='jobPostaJoblist']").each(function(i) {
                      $(this).attr("checked", false);
                      $(this).next().removeClass("jobPostaJoblistSelected");
                  });
                  return stopDefault(e);
              });
          });


          function stopDefault(e) {
              if (e && e.preventDefault) {
                  e.preventDefault();
              } else {
                  window.event.returnValue = false;
              }
              return false;
          }

 

 

 

 

 

JQuery遍历2:Table内元素
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:
$("*")

结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]  

同理 你可以取出table的所有
例如:table的id是“table1”
jQuery 代码:
$("#table *") 

 

$("table").find("tr").each(function(){
$(this).find("td").each(function(){
alert($(this).text());
});
});

 

 

 

JQuery遍历3:服务器端控件
$("#trTest td select");asp控件在程序加载前会将服务器控件编译成html控件
DropDownList 就会成为普通的select   
TextBox 是input type=text
但是id不会改
接下来你就应该明白了
$("#trTest td select").each(function () {
  //do something   
 }); 

 

 

 

JQuery遍历4:DIV内元素
jquery遍历特定ID的div并隐藏,实现代码如下:

$(document).ready(function(){
     var d = $("div");
     $(d).each(function(){
          var dId = $(this).attr("id");
          if(dId.indexOf('advice')>-1){
             $('#'+dId).hide();          
          }
         })
 });

 

分享到:
评论

相关推荐

    jquery 样例及特效介绍

    本教程将基于提供的"JQueryDemo"、"JqueryTabTest"、"JQueryTest"以及"JQuery特效"样例和效果,深入探讨jQuery的核心特性和常见应用。** ### 1. jQuery 的引入与基础用法 在HTML文件中,可以通过`&lt;script&gt;`标签...

    50 个jquery 样例 附源码

    9. **响应式设计**:jQuery 可以结合现代前端框架(如Bootstrap)实现响应式布局,动态调整页面元素以适应不同设备的屏幕尺寸。 10. **与原生JavaScript的互操作**:jQuery 能与原生JavaScript无缝集成,允许开发者...

    jquery用户前端简洁大气在线编辑器插件

    **jQuery前端在线编辑器插件详解** 在网页开发中,为用户提供友好的在线编辑功能是不可或缺的,这通常涉及到富文本编辑器的使用。本文将深入探讨一款基于jQuery的前端编辑器插件,该插件以其简洁大气的界面设计和...

    50个Jquery经典实例 50个Jquery经典实例

    jQuery作为一款强大的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax交互,极大地提高了前端开发效率。以下是基于这个主题的详细知识点讲解: 1. **jQuery选择器**:jQuery提供了丰富的选择器,如ID...

    jquery照片墙的demo

    本示例中的“jquery照片墙的demo”是利用jQuery实现的一种图片展示方式,通常被称为“瀑布流”布局,这种布局方式以多列并行、逐个填充的方式展示图片,使得页面视觉效果丰富且具有动态感。 首先,我们来详细解释...

    【叨、校长】一个基于Jquery的Metro布局

    开发者可以利用这些预定义的样式快速构建具有Metro风格的页面,但本案例中可能是通过jQuery来实现动态效果。 3. **布局原理**:Metro布局的核心是将内容组织成可自适应大小的格子,这些格子可以根据屏幕尺寸自动...

    jQuery仿qq音乐播放器代码.zip

    【jQuery仿qq音乐播放器代码.zip】是一个包含使用jQuery实现的QQ音乐播放器样例代码的压缩包。这个项目可能是为了帮助开发者理解如何利用JavaScript库jQuery来创建一个功能丰富的音乐播放器界面,模拟QQ音乐的用户...

    使用jQuery操作HTML的table表格的实例解析

    在信息技术领域中,HTML与jQuery作为前端开发中的关键技术,承担着构造网页结构和动态交互的重要职责。特别是HTML中的table元素,在呈现具有行列关系的数据时具有独特优势,而jQuery则提供了简便的方法来操作这些...

    Manning.jQuery.In.Action.2nd.Edition.Jun.2010.eBook-ELOHiM

    David Sills称其为“杰作”,指出书中丰富的实战代码和实验室页面是学习jQuery不可或缺的资源。David Hayden则认为它是学习jQuery基础知识和日常开发参考的绝佳选择。Joshua Heyer将其比作JavaScript的《风格要素》...

    jQuery带开关控制的进度条动画代码

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本主题聚焦于使用jQuery实现一个带有开关控制的进度条动画。这样的功能在网页应用中非常常见,比如加载指示...

    php+mysql+jquery做的通讯录

    jQuery则是一个强大的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax交互,极大地提高了网页的交互性和用户体验。 在这个通讯录系统中,PHP主要负责后端逻辑处理,如用户登录验证、数据的增删改查等...

    jQuery会员等级消费进度条代码.zip

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它...这个代码实例展示了如何巧妙地运用JavaScript和jQuery来打造富有吸引力的前端交互功能,对于Web开发者来说,这样的实践案例是提升技能和创新思维的良好素材。

    jquery导航条插件

    本话题将详细讲解基于jQuery的导航条插件的开发和应用,结合提供的文件名,我们可以推测这是一个包含完整样例的项目。 首先,`menu.css`是样式表文件,用于定义导航条的外观和布局。在CSS中,我们可能涉及到的选择...

    Repeater+Jquery实现表格列的隐藏,拖拉,位置交换

    在这个项目中,“Repeater+Jquery实现表格列的隐藏,拖拉,位置交换”是一个功能丰富的Web应用示例,主要涉及到前端与后端的结合,用于提升用户体验。 Repeater是ASP.NET中的一个服务器控件,它允许开发者创建动态...

    登录注册验证jq

    10. **文件`jquery-yanzheng`**:这个文件名可能是指一个包含jQuery验证代码的文件,可能包含了具体的表单验证逻辑和样例,供学习和参考。 总的来说,"登录注册验证jq"是一个涵盖前端开发基本技能的实践项目,通过...

    利用jquery制作google搜索一样的suggest控件

    jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。它的API设计简洁,易于理解和使用,使得开发者可以快速构建动态网页应用。 ### 2. Suggest控件原理 Suggest控件的核心是...

    jQuery实现的简单在线计算器功能

    jQuery是一个快速、小巧且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程。在这个文档中,将介绍如何利用jQuery实现一个简单在线计算器的功能,包括实现加、减、乘、除这四种基本的...

Global site tag (gtag.js) - Google Analytics