一应俱全剖析DOM操作和jQuery达成选项移动操作代码共享,DOM操作和jQuery完成选项移动操作的简约实例

DOM:

DOM:

1、JavaScript脚本放在何地才好? 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM选项移动操作</title>
  <style>
    select {
      width: 100px;
      height: 85px;
    }

    div {
      display: inline-block;
      width: 50px
    }
  </style>
</head>
<body>
     <select id="unsel" size="5" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select>
    <div>
      <button onclick="move(this.innerHTML)">>></button>
      <button onclick="move(this.innerHTML)">></button>
      <button onclick="move(this.innerHTML)"><</button>
      <button onclick="move(this.innerHTML)"><<</button>
    </div>
    <select id="sel" size="5" multiple>
    </select>
  <script>
    function $(id){
      return document.getElementById(id);
    }
    var unsel=null;//保存所有备选国家列表
    var sel=[];//保存已选中的国家列表
    window.onload=function(){
      unsel=$("unsel").innerHTML
              .replace(/<\/?option>/g," ")
              .match(/\b[a-zA-Z]+\b/g);
    }
    function move(inner){
      switch (inner){
        case ">>"://全部右移
          sel=sel.concat(unsel);
          unsel.length=0;
          sel.sort();
          break;
        case "<<"://全部左移
          unsel=unsel.concat(sel);
          sel.length=0;
          unsel.sort();
          break;
        case ">"://选中项右移
          var opts=document.querySelectorAll("#unsel option");
          //从后向前遍历每个option
          for(var i=opts.length-1;i>=0;i--){
            if(opts[i].selected){
            //删除unsel中i位置的1个元素,直接压入sel
              sel.push(unsel.splice(i,1)[0]);
            }
          }
          sel.sort();
          break;
        case "<"://选中项左移
          var opts=document.querySelectorAll("#sel option");
          for(var i=opts.length-1;i>=0;i--){
            if(opts[i].selected){
              unsel.push(sel.splice(i,1)[0]);
            }
          }
          unsel.sort();
          break;
      }
      show();
    }
    function show(){//将两个数组,更新到select元素中
      $("unsel").innerHTML="<option>"
                +unsel.join("</option><option>")
                +"</option>";
      $("sel").innerHTML="<option>"
                +sel.join("</option><option>")
                +"</option>";
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>DOM选项移动操作</title>
<style>
select {
width: px;
height: px;
}
div {
display: inline-block;
width: px
}
</style>
</head>
<body>
<select id="unsel" size="" multiple><option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>China</option><option>Cuba</option><option>Denmark</option><option>Egypt</option><option>France</option><option>Greece</option><option>Spain</option></select>
<div>
<button onclick="move(this.innerHTML)">>></button>
<button onclick="move(this.innerHTML)">></button>
<button onclick="move(this.innerHTML)"><</button>
<button onclick="move(this.innerHTML)"><<</button>
</div>
<select id="sel" size="" multiple>
</select>
<script>
function $(id){
return document.getElementById(id);
}
var unsel=null;//保存所有备选国家列表
var sel=[];//保存已选中的国家列表
window.onload=function(){
unsel=$("unsel").innerHTML
.replace(/<\/?option>/g," ")
.match(/\b[a-zA-Z]+\b/g);
}
function move(inner){
switch (inner){
case ">>"://全部右移
sel=sel.concat(unsel);
unsel.length=;
sel.sort();
break;
case "<<"://全部左移
unsel=unsel.concat(sel);
sel.length=;
unsel.sort();
break;
case ">"://选中项右移
var opts=document.querySelectorAll("#unsel option");
//从后向前遍历每个option
for(var i=opts.length-;i>=;i--){
if(opts[i].selected){
//删除unsel中i位置的个元素,直接压入sel
sel.push(unsel.splice(i,)[]);
}
}
sel.sort();
break;
case "<"://选中项左移
var opts=document.querySelectorAll("#sel option");
for(var i=opts.length-;i>=;i--){
if(opts[i].selected){
unsel.push(sel.splice(i,)[]);
}
}
unsel.sort();
break;
}
show();
}
function show(){//将两个数组,更新到select元素中
$("unsel").innerHTML="<option>"
+unsel.join("</option><option>")
+"</option>";
$("sel").innerHTML="<option>"
+sel.join("</option><option>")
+"</option>";
}
</script>
</body>
</html>

1.当稍微函数
需调用才试行或许某一件事件需触发才推行的本子,我们能够将脚本放在HTML的head部分中,那样能够保险脚本在另向外调拨运输用在此之前曾经被加载。

jquery:

jquery:

2.当页面加载时
需施行的脚本能够放在HTML的body部分,那类脚本平时被用来变化页面的剧情。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项移动操作</title>
  <script src="jquery.min.js"></script>
  <style>
    select {
      width: 100px;
      height: 85px;
    }

    div {
      display: inline-block;
      width: 50px
    }
  </style>
</head>
<body>
  <select id="first" size="5" multiple>
    <option>Argentina</option>
    <option>Brazil</option>
    <option>Canada</option>
    <option>Chile</option>
    <option>China</option>
    <option>Cuba</option>
    <option>Denmark</option>
    <option>Egypt</option>
    <option>France</option>
    <option>Greece</option>
    <option>Spain</option>
  </select>
  <div>
    <button id="add">></button>
    <button id="add_all">>></button>
    <button id="remove"><</button>
    <button id="remove_all"><<</button>
  </div>
  <select id="second" size="5" multiple>
  </select>

  <script>
      $("#add").click(function(){
        // 将左边被选中的选项,移到右边去
        $("#first>option:selected").appendTo($("#second"));
      });
      $("#add_all").click(function(){
        $("#first>option").appendTo($("#second"));
      });
      $("#remove").click(function(){
        $("#second>option:selected").appendTo($("#first"));
      });
      $("#remove_all").click(function(){
        $("#second>option").appendTo($("#first"));
      });
      // 双击事件
      $("#first").dblclick(function(){
        $("#first>option:selected").appendTo($("#second"));
      });
      $("#second").dblclick(function(){
        $("#second>option:selected").appendTo($("#first"));
      });
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>选项移动操作</title>
<script src="jquery.min.js"></script>
<style>
select {
width: px;
height: px;
}
div {
display: inline-block;
width: px
}
</style>
</head>
<body>
<select id="first" size="" multiple>
<option>Argentina</option>
<option>Brazil</option>
<option>Canada</option>
<option>Chile</option>
<option>China</option>
<option>Cuba</option>
<option>Denmark</option>
<option>Egypt</option>
<option>France</option>
<option>Greece</option>
<option>Spain</option>
</select>
<div>
<button id="add">></button>
<button id="add_all">>></button>
<button id="remove"><</button>
<button id="remove_all"><<</button>
</div>
<select id="second" size="" multiple>
</select>
<script>
$("#add").click(function(){
// 将左边被选中的选项,移到右边去
$("#first>option:selected").appendTo($("#second"));
});
$("#add_all").click(function(){
$("#first>option").appendTo($("#second"));
});
$("#remove").click(function(){
$("#second>option:selected").appendTo($("#first"));
});
$("#remove_all").click(function(){
$("#second>option").appendTo($("#first"));
});
// 双击事件
$("#first").dblclick(function(){
$("#first>option:selected").appendTo($("#second"));
});
$("#second").dblclick(function(){
$("#second>option:selected").appendTo($("#first"));
});
</script>
</body>
</html>

3.当页面加载后
需及时推行的本子,大家能够献身最终,文书档案加载之后实施。所幸的是,Jquery有事件控制,所以,那有个别大家能够下载
head 引用的外界文件中。

如上那篇DOM操作和jQuery达成选项移动操作的简便实例正是作者分享给大家的全体内容了,希望能给大家二个参照,也盼望大家多多辅助脚本之家。

以上所述是笔者给大家介绍的DOM操作和jQuery完结选项移动操作代码分享的全体内容,希望对大家有着支持!

2、jquery的常用函数

你也许感兴趣的稿子:

  • 浅谈jQuery 选用器和dom操作
  • 八面驶风剖判DOM操作和jQuery完毕选项移动操作代码分享
  • 亚洲城ca88唯一备用,jQuery基础知识点计算(DOM操作)
  • jQuery 中的 DOM 操作
  • jquery对dom节点的操作【推荐】
  • jQuery原理类别-常用Dom操作详解

您恐怕感兴趣的篇章:

  • 浅谈jQuery 采取器和dom操作
  • DOM操作和jQuery完结选项移动操作的大约实例
  • jQuery基础知识点计算(DOM操作)
  • jQuery 中的 DOM 操作
  • jquery对dom节点的操作【推荐】
  • jQuery原理类别-常用Dom操作详解

如:children() 、parent()、each()、text()、html()、val()、next();

 

<ul class="level-1"> 

<li class="item-i">I</li> 

<li class="item-ii">II 

<ul class="level-2"> 

<li class="item-a">A</li> 

<li class="item-b">B 

<ul class="level-3"> 

<li class="item-1">1</li> 

<li class="item-2">2</li> 

<li class="item-3">3</li> 

</ul> 

</li> 

<li class="item-c">C</li> 

</ul> 

</li> 

<li class="item-iii">III</li> 

</ul>

a、children()

遍历DOM树,找寻钦命成分的直接子节点;此方法仅在DOM树中向下遍历一层 

// jquery 

$('ul.level-2').children().css('background-color', 'red'); 

$('ul.level-2').children('.item-*').css('background-color', 'red');

b、parent()

腾飞遍历DOM树,用于寻找各样钦命成分的第一手亲成分。那么些和children()函数的遍历范围是均等的,都以遍历一层。

$(‘li.item-a’).parent().css(‘background-color’, ‘red’);

c、each()

巡回访谈集结中的每一个元素。

//数组的遍历 

var arr = ["Test1", "Test2", "Test3"]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //二维数组的遍历 

var arr = [ 

["Test1", "Test2", "Test3"], 

["Test4", "Test5", "Test6"], 

["Test7", "Test8", "Test9"] 

]; 

$.each(arr, function (i, item) { 

alert(i); 

alert(item); 

}); //遍历json数据 

var obj = { "1": "Test1", "2": "Test2", "3": "Test3", "4": "Test4", "5": "Test5", "6": "Test6" }; 

$.each(obj, function (i, item) { 

alert(i); 

alert(item); 

});

4、text() 函数

text()是jquery对象的一个方法,用于访谈钦命成分的公文内容。它合併钦赐成分的文件内容,并以字符串的款型重临。能够用来赋值。

5、html() 函数  

从钦命成分中的第二个因素获得html内容,以字符串的款型再次来到。能够用来赋值。

区分:text() 与 html() 函数的不相同

有别于一:text()函数可用以xml 文书档案 和 html 文书档案,而 html()
只可以用来html文书档案。

区分二:html()函数不止突显文本,输出的还包蕴标签对和文件,而text()唯有文本。

6、val()函数  

归来或安装被选成分的值,成分的值是由此 value 属性设置的。该方式好多用于
input 成分。如若该方法未安装参数,则赶回被选成分的当下值。

7、next()函数  拿到相称成分集合中每一个成分相邻的亲生成分。假如提供选取器,则取回相配该选择器的下贰个同胞成分。

3、对dom的操作

如:prepend() , prependTo() , clone() , append() , appendTo() , before()
, insertBefore() , after() , insertAfter() ,remove() , detach() ,
empty() , replaceWith() , replaceAll() , wrap() , wrapAll() ,
warpInner()

上述那篇jquery对dom节点的操作【推荐】便是笔者分享给我们的全体内容了,希望能给大家五个参照,也目的在于大家多多协理脚本之家。

你可能感兴趣的小说:

  • 浅谈jQuery 选取器和dom操作
  • DOM操作和jQuery完毕选项移动操作的简约实例
  • 一应俱全分析DOM操作和jQuery完毕选项移动操作代码分享
  • jQuery基础知识点总括(DOM操作)
  • jQuery 中的 DOM 操作
  • jQuery原理种类-常用Dom操作详解

相关文章