`

js jquery js的DOM与Jquery相互转换，js控制select的方法

jqueryjavascript 
阅读更多

来源：http://blog.csdn.net/songylwq/article/details/6635487

 

jquery与dom的转换

刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。

比如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：var $variab =jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab =DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。



jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中



DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById("v"); //DOM对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法

 

js控制select的option

 

JS select里添加一条OPTION<select id="abc">
<option></option>
</select>
<input type="button" name="button" value="按钮" onclick="dd();">
<script>
function dd(){
var cc = document.all["abc"];

//方法一：直接select 的最下面增加一条OPTION
cc.options.add(new Option('VALUE','key'));

//方法二:可以用 len 来控制OPTION的插入位置
//var len = cc.length;
//cc.options[len] = new Option('VALUE','key');

}
</script>

动态删除select中的所有options：
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option：
document.getElementById("ddlResourceType").options.remove(indx);
//就是这句不兼容了,Firefox是不懂 remove 这个方法的,所以会报错了,当然也移除不了了 动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
取值方面
function getvalue(obj)
{
var m=obj.options[obj.selectedIndex].value
alert(m);//获取value
var n=obj.options[obj.selectedIndex].text
alert(n);//获取文本
}
js删除select option
  1. for(i=0;i<templateId.options.length;i++)
  2. {
  3. if(templateId.options[i].selected)
  4. {
  5. templateId.options[i]=null;//付null即删除
  6. }
  7. }

 

1.动态创建select

function createSelect(){

var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

2.添加选项option

function addOption(){

//根据id查找对象，
var obj=document.getElementById('mySelect');

//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

3.删除所有选项option

function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;

}

4.删除一个选项option

function removeOne(){
var obj=document.getElementById('mySelect');

//index,要删除选项的序号，这里取当前选中选项的序号

var index=obj.selectedIndex;
obj.options.remove(index);
}

5.获得选项option的值

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

 

整个实例的完整代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<head>
<script language=JavaScript>
function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1=document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
function choice()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add(new Option("黄浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104"))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add(new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区","204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context").childNodes.length-1;
alert(x)
}
function remove()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
</script>
<body>
<div id="context">
<select id="area" onchange="choice()">
</select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>

 

改进版：在select中添加、修改、删除option元素

function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var word = document.createElement("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}
但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下： function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}


整个实例的完整代码如下：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>

用一个字符串创建一个数组方法:

<script language="javascript">

  1. </body>
    </html>
  2. <script>
  3. functionspli(){
  4. datastr="2,2,3,5,6,6";
  5. varstr=newArray();
  6. str=datastr.split(",");
  7. for(i=0;i<str.length ;i++ )
  8. {document.write(str[i]+"<br/>");}
  9. }
  10. spli();
  11. </script

 

 

分享到：
| Hibernate Annotation笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery 操作 Dom 标签 select

    ### Jquery 操作 Dom 标签 Select 在前端开发中，使用 jQuery 操作 DOM 元素是非常常见的需求之一。特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作，更是频繁出现。下面我们将详细介绍如何使用 ...

    jquery.editable-select

    jQuery 是一个广泛使用的 JavaScript 库，简化了 DOM 操作、事件处理、动画以及Ajax交互。`jquery.editable-select` 就是建立在 jQuery 之上，因此在使用前需要确保页面中已经引入了 jQuery。 2. **选择器的增强**...

    jQuery实现select样式美化 jQselect.js

    要使用jQselect.js，你需要在页面中引入jQuery库和该插件的脚本文件，然后通过jQuery的选择器找到要美化的目标`&lt;select&gt;`元素，并调用相应的初始化方法。例如： ```html &lt;script src="path/to/jquery.min.js"&gt; ...

    强大的jquery下拉分页选择插件SelectPage

    **jQuery库：jQuery与SelectPage.js插件** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery的核心特性包括选择器（用于快速定位HTML元素）、链式...

    jquery.selectlist.js插件实现的下拉框美化特效

    `jquery.selectlist.js`插件是基于JavaScript库jQuery构建的，jQuery是一个轻量级的、高性能的库，使得开发者能够更容易地进行DOM操作、事件处理、动画效果以及Ajax交互。通过利用jQuery的强大功能，`jquery.select...

    jquery.selectlist.js

    `jquery.selectlist.js`是一个专门用于优化Select下拉框的JavaScript插件，它主要目标是提高用户体验，尤其是在老旧的IE6及以上的浏览器中。在前端技术日新月异的今天，虽然许多现代浏览器已经提供了丰富的原生功能...

    jQuery多选下拉框插件

    4. **API控制**：提供API方法，如`selectAll`、`deselectAll`、`refresh`等，允许开发者在运行时动态控制多选框的行为。 5. **可配置性**：可以设置多个配置项，如是否开启搜索功能、是否启用拖放排序等。 **三、...

    jquery模拟select效果实现

    在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作等任务。在某些情况下，由于设计或交互需求，我们可能需要对原生的HTML元素进行自定义，例如模拟select下拉菜单的效果。...

    JQuery版的select下拉效果

    然后，调用`jquery.select.js`提供的方法将其转换为自定义下拉效果。例如，可以使用`.selectBoxIt()`方法： ```javascript $(document).ready(function() { $("#yourSelectId").selectBoxIt(); }); ``` 在这个...

    jQuery模拟Select下拉菜单选中添加代码.zip

    它可能包含一个或多个.js文件，其中定义了与Select相关的函数和方法。比如，可能会有一个`init()`函数用于初始化模拟下拉菜单，还有`showDropdown()`和`hideDropdown()`函数分别用于显示和隐藏下拉列表。此外，可能...

    jquery下拉框选择select美化插件FancySelect.js.zip

    在IT行业中，前端开发往往需要兼顾美观与交互性，而jQuery作为一款强大的JavaScript库，极大地简化了DOM操作，使得开发者可以轻松实现各种复杂的用户界面效果。在这个场景中，"jquery下拉框选择select美化插件...

    jQuery手机下拉框select

    - **`.selectmenu('refresh')`方法**：当DOM元素被动态添加或修改后，调用此方法可以重新渲染Select Menu。 ### 示例代码 ```html &lt;select id="mySelect" data-role="select"&gt; &lt;option value="option1"&gt;Option 1 ...

    jquery实现select带模糊搜索下拉选择框

    在网页开发中，`jQuery` 是一款非常流行的 JavaScript 库，它简化了DOM操作、事件处理、动画制作等任务。本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框，以提升用户在交互时的体验。 ...

    jQuery为动态生成的select元素添加事件的方法

    6. 动态添加元素到页面中：在需要的时候，使用jQuery的`.append()`方法将创建好的select元素添加到页面的指定容器中。这个操作会把新的HTML字符串插入到页面的DOM中，从而使得select元素变得可用。 7. 绑定事件到...

    js 可输入下拉框（jquery）

    在JavaScript和jQuery的世界里，"js 可输入下拉框（jquery）"是一个常见的交互设计需求，它结合了传统下拉框的简洁性与输入框的搜索功能，为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...

    [转]Jquery操作select 收藏

    5. **样式控制**：通过`.addClass()`, `.removeClass()`, 和 `.toggleClass()` 方法可以对select元素及其选项应用CSS样式。 6. **动画效果**：jQuery的动画功能可以增强用户体验。比如，你可以添加一个下拉框展开和...

    移动设备 select jquery插件

    使用此类插件时，开发者需要将插件的CSS和JS文件引入到项目中，然后通过jQuery选择器找到需要替换的`&lt;select&gt;`元素，调用插件方法对其进行初始化。例如： ```javascript $(document).ready(function() { $('select...

    jquery实现select互斥联动

    在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。在本示例中，我们将探讨如何使用jQuery实现“select”元素的互斥联动效果，这是一种常见的表单控件交互设计，常用于...

    cool的JQuery自定义select

    在"cool的JQuery自定义select"中，jQuery被用来动态地控制和展示select元素。这个插件通过CSS样式和JavaScript功能，将传统的select转换为具有自定义外观和交互效果的组件。 这个插件的主要特点可能包括： 1. **...

    jQuery Select下拉框美化特效.zip

    该特效主要基于JavaScript库jQuery实现，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。通过jQuery，开发者可以快速地为网站添加各种动态效果和交互功能。 这个...

Magicbox
Global site tag (gtag.js) - Google Analytics