javascript操作HTML标签集合

最新推荐文章于 2024-09-12 10:48:49 发布

原创最新推荐文章于 2024-09-12 10:48:49 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

JavaScript 同时被 2 个专栏收录

33 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

javascript操作HTML元素集合

一、radio篇

备注：radio标签的name值一样的时候，只能就是单选按钮，不一样的时候，就是多选按钮

1、根据radio的name获取当前处于选中状态的radio的value

radio排版：

<input type="radio" name="image" checked="checked" value="13年">13年航空影像<br>
 <input type="radio" name="image" value="16年">16年航空影像<br>
 <input type="radio" name="image" value="19年">19年航空影像<br>

获取value值的函数：

//根据radio的anme值获取当前check状态的radio值
function getRadioValue(name){
    // method 1 
	var radio = document.getElementsByName(name);
	for (i=0; i<radio.length; i++) {
		if (radio[i].checked) {
			return radio[i].value
		}
	}
    return "undefined";  
}

2、单选radio的点击切换事件

由于单选radio的事件，只能几个之间切换，选中状态的radio，再点击也仍然是选中状态，因此可以用onchange事件，获取当前选中的目标

<div class="radioMenuClass"><input type="radio" name="time" value="1" checked="checked" onchange="radioChangeHandle('1')" />1D </div>
            <div class="radioMenuClass"><input type="radio" name="time" value="2" onchange="radioChangeHandle('2')" />1W </div>
            <div class="radioMenuClass"><input type="radio" name="time" value="3" onchange="radioChangeHandle('3')" />1Q </div>

二、DIV篇

1、多个div点击事件，调用同一个函数，怎么知道点击的是哪个div

	<div id="popupDiv1" onclick="closeHandle(this.id)"></div>
    <div id="popupDiv2" onclick="closeHandle(this.id)"></div>

function closeHandle(item) {
		console.log('11111111111111',item)
		document.getElementById(item).style.display='none'
	}

2、获取当前点击Div在屏幕上的位置

js获取div相对屏幕的坐标位置

var  x=document.getElementById('resultItem') .getBoundingClientRect().x
var y=document.getElementById('resultItem') .getBoundingClientRect().y
//getBoundingClientRect()返回的结果如下：

bottom: 659
height: 72
left: 59
right: 477
top: 587
width: 418
x: 59
y: 587

三、select下拉菜单

1、获取当前select菜单选中的项目

select组织：

 <select id="mySelect" value="湖北" style="width: 120px;height: 35px;font-size: 18px;display: block;border: 1px solid #50c48f;" onchange="GetVal(this)">
              <option value="湖北">湖北</option>
              <option value="北京">北京</option>
              <option value="安徽">安徽</option>
              <option value="浙江">浙江</option>
              <option value="江苏">江苏</option>
              <option value="湖南">湖南</option>
              <option value="山东">山东</option>
              <option value="山西">山西</option>
              <option value="海南">海南</option>
              <option value="广东">广东</option>
              <option value="广西">广西</option>
              <option value="黑龙江">黑龙江</option>
              <option value="辽宁">辽宁</option>
              <option value="吉林">吉林</option>
              <option value="河南">河南</option>
              <option value="河北">河北</option>
              <option value="贵州">贵州</option>
              <option value="福建">福建</option>
              <option value="澳门">澳门</option>
              <option value="内蒙古">内蒙古</option>
              <option value="宁夏">宁夏</option>
              <option value="青海">青海</option>
              <option value="四川">四川</option>
              <option value="上海">上海</option>
              <option value="陕西">陕西</option>
              <option value="台湾">台湾</option>
              <option value="香港">香港</option>
              <option value="新疆">新疆</option>
              <option value="西藏">西藏</option>
              <option value="云南">云南</option>
              <option value="甘肃">甘肃</option>
              <option value="江西">江西</option>
              <option value="天津">天津</option>
          </select>

JS代码：

 function GetVal(obj) {
           //获取选中的项目的索引
            var index = obj.selectedIndex;
            //代表的是选中项的的value
            var val = obj.options[index].value;
             //获取选中项的text
            var text= obj.options[index].text;
    
       }

2、通过以下script代码jquery来获取选中的value和text

$("#mySelect").val(); //获取选中记录的value值
$("#mySelect option:selected").text(); //获取选中记录的text值

3、运用new Option("文本","值")方法添加选项option

var obj = document.getElementById("mySelect");
obj.add(new Option("4","4"));   //插入新的选项

4、删除所有选项option

var obj = document.getElementById("mySelect");
obj.options.length = 0;

5、删除选中选项option

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index);

6、修改选中选项option

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改对应的值
obj.options[index].selected = true; //保持选中状态

7、删除select

var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除当前对象

8、select选择的响应事件

$("#mySelect").change(function(){ //添加所需要执行的操作代码})

9、.动态创建select

function createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

10、添加选项option

function addOption(){
//根据id查找对象，
var obj=document.getElementByIdx_x('mySelect');
//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

11、删除所有选项option

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

12、.删除一个选项option

function removeOne(){
var obj=document.getElementByIdx_x('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

13、获得选项option的值

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;

14、获得选项option的文本

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

15、修改选项option

var obj=document.getElementByIdx_x('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

16、删除select

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