`
angangJonny
  • 浏览: 8648 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery操作页面元素

阅读更多
$("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text
var checkValue=$("#select_id").val();  //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 
jQuery设置Select选择的Text和Value:
语法解释:
$("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中
$("#select_id ").val(4);   //设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中


jQuery添加/删除Select的Option项:
语法解释:
 $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
 $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
 $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)
 $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
 $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option
 $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option
多选框checkbox: $("#chk1").attr("checked",'');//不打勾 
                            $("#chk2").attr("checked",true);//打勾 
  单选组radio:    $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 
下拉框select:   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 
获取一组radio被选中项的值 
var item = $('input[@name=items][@checked]').val(); 
获取select被选中项的文本 
var item = $("select[@name=items] option[@selected]").text(); 
select下拉框的第二个元素为当前选中值 
$('#select_id')[0].selectedIndex = 1; 
radio单选组的第二个元素为当前选中值 
$('input[@name=items]').get(1).checked = true; 
获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
 文本框,文本区域:$("#txt").attr("value"); 
多选框checkbox: $("#checkbox_id").attr("value"); 
单选组radio:        $("input[@type=radio][@checked]").val(); 
下拉框select:    $('#sel').val(); 

 

 

 

 

分享到:
评论

相关推荐

    Selenium WebDriver调用JQuery操作Select元素

    使用Selenium自带的API操作Select元素时页面可能出现上移或遮挡,导致元素操作失败; 介于此问题,可以使用JQuery来操作Select元素,具体实现见附件。

    jQuery页面上下滚动触发区块动画特效

    在这款特效中,jQuery被用来监听页面滚动事件,以及控制元素的动画展示。通过使用jQuery,开发者可以更方便地实现复杂的页面交互功能,而无需编写大量原生JavaScript代码。 ### 2. 页面滚动事件 页面滚动事件是...

    jQuery实现获取元素索引值index的方法

    更深入地了解jQuery,我们还可以学习相关的专题知识,如页面元素操作技巧、扩展技巧、常用插件的使用、拖拽特效、表格操作技巧、Ajax用法、经典特效、动画与特效用法以及选择器用法等。这些主题进一步拓展了jQuery的...

    jQuery实现页面滚动时元素智能定位

    **jQuery实现页面滚动时元素智能定位** 在网页设计中,有时我们需要某些元素(如通知、提示框或广告)始终保持在用户视野范围内,即使用户滚动页面也是如此。这种效果通常被称为“固定定位”或“智能定位”。jQuery...

    jQuery入门-1.0笔记

    ### jQuery操作页面元素 最后,jQuery还可以用来操作页面元素,包括修改内容、属性、样式等。比如,可以使用.html()方法来获取或设置匹配元素集合中第一个元素的HTML内容,.attr()方法来获取或设置属性值,.css()...

    jquery Manipulation元素操作

    《jQuery元素操作详解》 在Web开发中,jQuery库以其简洁、高效的API赢得了广大开发者喜爱,其中元素操作是jQuery的核心功能之一。这篇博客将深入探讨jQuery如何进行元素选择、操作和增强DOM(文档对象模型)的功能...

    jquery页面屏蔽器插件

    3. **JavaScript**:插件的核心逻辑由JavaScript编写,通过jQuery库与HTML元素进行交互,实现页面元素的可见性控制。 ### 文件结构 - **block_demo.html**:这是一个示例文件,演示了插件的使用方法,包括如何引入...

    jQuery仿京东页面制作,组件封装

    通过这些选择器,可以方便地对页面元素进行操作,如添加、删除或修改属性,以及改变其内容。 其次,项目中可能涉及到事件处理。jQuery提供了绑定事件的方法,如`$(element).click(function() {...})`用于绑定点击...

    jquery添加和删除元素

    jQuery通过选择器(Selectors)找到页面中的元素,然后对这些元素执行各种操作。比如,我们可以使用`$`符号来创建一个jQuery对象,并传入CSS选择器来选取元素。 添加元素: 在jQuery中,我们通常使用`append()`和`...

    拖动排序元素jquery插件

    本文将深入探讨“拖动排序元素”的jQuery插件,这是一款用于实现用户通过拖放操作来重新排序页面元素的强大工具。 标题中的“拖动排序元素jQuery插件”是指一个基于jQuery的插件,它的主要功能是允许用户通过直接...

    jquery实现页面局部刷新

    总结,jQuery为实现页面局部刷新提供了强大的工具,通过AJAX请求获取数据,然后结合DOM操作方法更新页面内容。结合良好的编程习惯和优化策略,可以创建出响应迅速、用户体验优良的Web应用。在实际项目中,可以根据...

    jQuery任意拖动页面中元素代码.zip

    "jQuery任意拖动页面中元素代码.zip"这个资源包含了一个名为DDSort.js的插件,这个插件允许用户在页面上自由地拖动元素,实现元素的排序功能,这在创建列表、网格或任何需要动态布局的项目时非常有用。 DDSort.js的...

    基于JQuery的DOM元素操作技术详解

    内容概要:本文档详细介绍了基于 JQuery 的 DOM 元素操作,涵盖了各种常见的网页元素操作技巧。具体如专业下拉列表赋值、文本框赋值、单选按钮设置默认选中项、遍历数组展示到页面、更改表格行的背景色以及跳转、...

    jquery应用子页面在父页面打开

    例如,我们可以使用`$("#iframeID").contents().find("selector")`来选择子页面中的元素,然后进行添加、删除或修改等操作。这里的`#iframeID`是`iframe`元素的ID,`"selector"`则是CSS选择器。 3. **通信机制**:...

    Jquery调用iframe父页面中的元素及方法

    通过上述示例和解释,我们可以看到在同源的情况下,使用jQuery操作iframe父页面中的元素和方法是可行的。这些操作对于动态加载内容到iframe以及进行父子页面间的交云非常有用。然而,对于跨域的问题,需要通过其他...

    jquery 监听页面按钮

    通过jQuery,监听页面按钮并响应用户操作变得非常容易。不仅可以直接绑定到按钮元素,还可以通过事件委托处理动态生成的元素。了解和掌握这些技术,可以帮助开发者创建出更加互动且用户体验良好的Web应用。 在这个...

    jquery动态页面加载进度条

    综上所述,"jquery动态页面加载进度条"插件结合了jQuery的DOM操作、事件处理、动画效果以及Ajax进度跟踪等多个技术点,旨在提升用户在等待页面加载过程中的体验。通过对这些知识点的深入理解和应用,开发者可以创建...

    jquery实现鼠标框选多个页面元素

    本示例探讨的是如何使用jQuery实现一个名为DrawSelect的插件,该插件允许用户通过鼠标框选页面上的多个元素。这个功能在数据分析、内容编辑或任何需要批量操作的场景中尤其有用。 首先,我们需要理解`index.html`是...

    jquery 查找iframe父级页面元素的实现代码

    这展示了jQuery在操作页面元素上的强大能力。 6. 跨站点测试: 文中提到,在进行测试时,发现chrome无法正常实现iframe元素操作,可能是因为测试环境没有配置为一个有效的站点。在开发过程中,确保测试环境与生产...

Global site tag (gtag.js) - Google Analytics