GVKun编程网logo

javascript通过元素id和name直接取得元素的方法（js根据id获取对象）

17

如果您对javascript通过元素id和name直接取得元素的方法和js根据id获取对象感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解javascript通过元素id和name直接取得元素的

如果您对javascript通过元素id和name直接取得元素的方法和js根据id获取对象感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解javascript通过元素id和name直接取得元素的方法的各种细节，并对js根据id获取对象进行深入的分析，此外还有关于javascript full screen 全屏显示页面元素的方法_javascript技巧、javascript – 克隆a并将元素的name属性增加1、javascript – 如何使用jQuery访问元素id和其他属性？、javascript – 如何在div元素中更新html元素的id和名称？的实用技巧。

本文目录一览：

javascript通过元素id和name直接取得元素的方法（js根据id获取对象）

javascript通过元素id和name直接取得元素的方法（js根据id获取对象）

本文实例讲述了javascript通过元素id和name直接取得元素的方法。分享给大家供大家参考。具体分析如下：

我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化，貌似十分高深莫测，其实也不然。而且js本身自带了对于特殊元素的简便选取的方法，下面就为大家简单介绍下。

在html中，一般最直接的辨别html元素使用的是name和id属性，两者有着细微的不同：id必须页面唯一，但name可以有重复。

在js中如果id名称不和内置属性或全局变量重名的话，该名称自动成为window对象的属性，而在一个html页面中的最顶层环境中有:

rush:js;"> this === window

所以如果我们写一个如下的html元素代码就可以这样引用它：

rush:js;"> //可以这样引用 btn_ok.onclick = function(){}; //或者下面也是一样的 window.btn_ok.style = ...;

对于name属性来说，只有某些类型的html元素具有类似的方法，比如：form,img,iframe,applet,embed,object等。在这些元素中可以通过全局变量或者document的属性来访问特定name属性的元素；如果相同name属性的有多个元素，则返回一个NodeList的类似只读数组的对象,例如如下代码:

rush:js;">
pic_0 pic_1 pic_2
//我们可以这样引用name为pic的元素： for(x in pic) console.log(pic[x].alt); //或者是非"标准"语法each语句方式 for each(img in pic) console.log(img.alt);

希望本文所述对大家的javascript程序设计有所帮助。

javascript full screen 全屏显示页面元素的方法_javascript技巧

javascript full screen 全屏显示页面元素的方法_javascript技巧

一种最简单的方式，就是动态改变你想要全屏显示的部件的style，例如position变成absolute，height和width都设置成窗口大小，并且把背景颜色改成全白（为了遮住页面上其余的元素）。这样网页上就只能看到你要突出的部件了，视觉上就等同于全屏。同时利用javascript监听键盘事件，一旦用户按了ESc退出键，就恢复原来的样子。部分代码如下：

复制代码 代码如下:

document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) { //ESC键

            $(''.navbar-inner'').fadeIn(100);
            var maintable = document.getElementById("holder");
            maintable.style.position = "relative";
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable = document.getElementById("main");
            maintable.style.height = "100%";
            maintable.style.width = "100%";
            maintable.style.left = 0 + "px";
            maintable.style.top = 0 + "px";
            resizePlots();
        }       
    };


fullScreenClick: function () {

$(''.navbar-inner'').fadeOut(100);

var maintable = document.getElementById("holder");
maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style.zIndex = 5;
maintable.style.height = $(window).height() + "px";
maintable.style.width = $(window).width() + "px";
maintable.style.left = 0 + "px";
maintable.style.top = 0 + "px";
maintable = document.getElementById("main");
maintable.style.height = "90%";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 + "px";
maintable.style.top = $(window).height() * 0.02 + "px";
resizePlots();
},


但是这样做有个缺点，就是还需要手工按一下F11来达到真正的全屏。

下面有一种方法不用自己按F11的：

复制代码 代码如下:





欢迎微博互粉！


weibo.com/leavingseason


相信音乐，相信五月天




 

function requestFullScreen(element) {

    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { 
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { 
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}




这个可以支持大部分的浏览器。但是讨厌的IE还是不能支持HTML5的全屏功能，需要模拟按F11这个动作。读者可以在代码中看到。

还可以在代码里面退出全屏界面：

复制代码 代码如下:

function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

关于全屏显示，我还是很好奇，那么视频网站是如何做到对IE等浏览器都兼容的全屏功能的。如果有谁知道的话，还请分享一下，感激不尽。

 updated (2013/09/22)

很多时候，想在全屏切换的时候做一些自定义的事情。可以如下绑定事件：

复制代码 代码如下:

document.addEventListener("fullscreenchange", function () {
    doit();
}, false);

document.addEventListener("mozfullscreenchange", function () {
    doit();
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    doit();
}, false);

它会在每次进入或者退出全屏的时候，触发doit（）操作。

javascript – 克隆a并将元素的name属性增加1

javascript – 克隆a并将元素的name属性增加1

我要在表单中实现“添加新行”功能.表单的结构类似于： 
<table>
<tr>
     <td><input type="text" name="v1[label]" /></td>
     <td><input type="text" name="v1[observation]" /></td>
     <td><input type="text" name="v1[remarks]" /></td>
</tr>
<tr>
     <td><input type="text" name="v2[label]" /></td>
     <td><input type="text" name="v2[observation]" /></td>
     <td><input type="text" name="v2[remarks]" /></td>
</tr>
<tr>
    <td colspan="3">
       <input type="button" id="addrow" value="Add One More Row">&nbsp;
       <input type="submit" name="proceed" value="Submit" />
    </td> 
</tr>
</table>

如图所示,对于每一行,v []的数量都会增加. v1,v2 ……依此类推

我在寻找什么

单击“添加一行”按钮时,应执行以下操作

>在最后一行(带有的行)上方插入一个新行
纽扣)
> name属性值增加1(即v2 [label]变为
v3 [标签],v2 [观察]变成v3 [观察]等等
行

我做了什么

我最接近的是使用jQuery的clone().这确实完美地添加了行.但是我发现很难找到一种方法,每次单击按钮时都会将name属性的值增加1.

当下正在使用的jquERY

$('input:button[id="addrow"]').click(function(){

   var secondlast = $('table tr:last').prev('tr');
   secondlast.clone().insertBefore(secondlast);

});

如果我单击按钮两次,我将添加以下HTML

<tr>
     <td><input type="text" name="v2[label]" /></td>
     <td><input type="text" name="v2[observation]" /></td>
     <td><input type="text" name="v2[remarks]" /></td>
</tr>

<tr>
     <td><input type="text" name="v2[label]" /></td>
     <td><input type="text" name="v2[observation]" /></td>
     <td><input type="text" name="v2[remarks]" /></td>
</tr>

因此添加了一行,但name属性保留在v2,而第三和第四行应该是v3和v4.我理解clone()不能这样做,这就是为什么我在寻找替代方案.

解决方法

$('input:button[id="addrow"]').click(function(){
    var secondlast = $('table tr:last').prev('tr');
    var newClone = secondlast.clone();
    // find all the inputs within your new clone and for each one of those
    newClone.find('input').each(function() {
        var currentNameAttr = $(this).attr('name'); // get the current name attribute
        // construct a new name attribute using regular expressions
        // the match is divided into three groups (indicated by parentheses)
        // p1 will be 'v',p2 will be the number,p3 will be the remainder of the string
        var newNameAttr = currentNameAttr.replace(/^(v)(\d+)(.*)$/,function(match,p1,p2,p3) {
            return p1+(parseInt(p2)+1)+p3;
        });
        $(this).attr('name',newNameAttr);   // set the incremented name attribute 
    });
    // insert after is I assume what you want
    newClone.insertAfter(secondlast);
});

编辑

// you Could also simply increment any digit you find as Batman indicated
var newNameAttr = currentNameAttr.replace(/\d+/,function(match) {
    return (parseInt(match)+1);
});

javascript – 如何使用jQuery访问元素id和其他属性？

javascript – 如何使用jQuery访问元素id和其他属性？

我有JavaScript方法,当提交表单的特定类(mcb)时,它会起作用：

function BindCloseMessage() {
    $(".mcb").submit(function(event) {
        alert("closing..."); //Here I want to get the id of form
        event.preventDefault();
    });
}

代替警报调用,我需要访问其提交被调用的表单的id.我该怎么做？更好的是访问任何属性的提示……

谢谢

解决方法:

提交表单的ID将是

this.id

或者在jQuery中

$(this).attr('id') //although why type the extra letters?

javascript – 如何在div元素中更新html元素的id和名称？

javascript – 如何在div元素中更新html元素的id和名称？

我有以下HTML代码.它由Razor引擎生成.这是动态的.我的意思是下拉中的元素数量可能因用户而异.我需要使用新的id和新名称将此下拉列表完全复制到相同的下拉列表下方.我看了here,here,here和here.以下是我的HTML.我在代码中添加了注释以获得更多说明.

上一篇javascript实现的固定位置悬浮窗口实例（js 悬浮窗口）

下一篇javascript中in运算符用法分析（js in运算符）

相关文章