jquery 父元素元素绑定点击事件 停止捕获 js 父元素 |
您所在的位置：网站首页 › 形容爱情的诗句美好 › jquery 父元素元素绑定点击事件 停止捕获 js 父元素 |
|
一、选取父级、子级元素 1、ParentNode（选取父级元素） 语法：子元素.parentNode; son.parentNode.style.backgroundColor ="yellow"; son.style.backgroundColor="red";
2、Children （选取子级元素） 语法：父元素.children；获取到的是一个伪数组。使用的时候需要加上下标，指定子元素。 father.children[0].style.backgroundColor="black";
二、元素的增删改 1、creatElement（生成元素） var oInput = document.createElement('input'); //在内存中生成这个元素 oInput.type= "button"; oInput.value="这是一个按钮"; //给这个元素赋上属性 document.body.appendChild(oInput); //在body尾部插入我们定义好的oInput
2、appendChild（尾部插入元素） 语法：父级元素.appendChild(需要插入的子元素) document.body.appendChild(oInput);
3、insertBefore（指定位置插入元素） 语法：父级元素.insertBefore（需要插入的元素，插在哪个元素前边） document.body.insertBefore(oInput,div1);
4、replaceChild（替换元素） 语法：父级元素.replaceChild（需要替换的元素，被替换的元素） document.body.replaceChild(oInput,div1);
5、removeChild（删除元素） 语法：父级元素.replaceChild（要删除的子元素） document.body.removeChild(div1);需要注意的是，removeChi如果想要删除自身元素并且不知道父元素，可以用parentNode选取父元素后再选择自己。 div1.parentNode.removeChild(div1);
6、innerHTML（获取父级元素底下的全部标签） 语法：父级元素.innerHTML console.log(div1.innerHTML); //获取div1下面的所有便签需要注意的是，修改innerHTML时，会将原有的元素清空，再重新赋值一遍，原有的元素绑定的事件将不再生效。 12321 div2.onclick = function(){ //div2是div原有的子元素 alert("onclick"); } div1.innerHTML += `新的span标签`; //此时div2的onclick事件失效
三、修改元素的属性 1、setAttribute（设置元素属性） 语法：元素.setAttribute（'属性'，'值'） div1.setAttribute('name','divName');
2、getAttribute(获取元素属性) console.log(div1.getAttribute('id')); //控制台打印div1的id值，一般常见的属性可以不用getAttribute就直接获取
3、removeAttribute（删除元素属性） 语法：元素.removeAttribute('属性') div1.removeAttribute('id');
4、hasAttribute（检测元素属性） 语法：元素.hasAttribute('属性')，如果有这个属性，返回true，没有返回false console.log(div1.hasAttribute('id'));四、操作元素的Class 1、className（获取类） 语法：元素.className，如果给它赋值就会覆盖原本的class，不赋值的话，它会返回元素class属性的值。 console.log(div1.className);
2.classList（类列表） 语法： 1、元素.classList.add('类名') div1.classList.add('box1');//添加一个类2、元素.classList.remove('类名') div1.classList.remove('box1');//删除一个类3、元素.classList.contains('类名') div1.classList.contains('box1');//检测类列表中有没有指定的类，有返回true，没有返回false4、元素.classList.toggle('类名') div1.classList.toggle('box1');//切换一个类，有就删除，没有就添加。
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |