前端小测 |
您所在的位置：网站首页 › sub属性是什么属性 › 前端小测 |
前端小测
|
我得了2分，难受，明明感觉是3分的 哈哈 分析其实这个题目就是对伪类进行了一定考察，我太菜了，呜呜呜 第一问：获取所有匹配required必选的单选框元素 我的答案 var requiredInputAll = document.querySelectorAll("input[type='radio'][required]")正解 let disabledArr = document.querySelectorAll('[type="radio"]:required');为什么？ 首先input确实是不用加的因为type='radio'属性就已经可以了:required伪类选择器，IE10+支持。和[required]属性选择器的区别,暂时还没找到，找到补充第二问：获取所有匹配display禁用态的单选框元素 我的答案：其实我当时写的时候是不找到还可以有伪类这个东西的 var disabledInputAll = [] var disabledInputPart_1 = document.querySelectorAll("input[disabled]") var disabledInputAll = [...disabledInputPart_1] var disabledFieldsetInput = document.querySelectorAll("fieldset[disabled]") // console.log([].slice.call(disabledFieldsetInput)[0]) Array.from(disabledFieldsetInput).forEach(item => { Array.from(item.querySelectorAll("input[type='radio']")).forEach(item => { if (!disabledInputAll.includes(item)) { disabledInputAll.push(item) } }) })正解：简单粗暴明了 let disabledArr = document.querySelectorAll('[type="radio"]:disabled');为什么？ 因为fieldset标签类的表达元素会继承fieldset的属性，所以当设置了disabled的时候他的子元素都会被设置 总结：:disabled伪类，IE9+支持。和[disabled]属性选择器的区别，有些表单元素本身没有[disabled]属性，但是，自身是处于应用态的。这就是:disabled伪类设计的原因之一 第三问：获取所有checked选中态的单选框元素 我的答案 var checkedInputAll = document.querySelectorAll('input[checked]')正确答案 var checkedInputAll1 = document.querySelectorAll('input:checked')为什么？ :checked伪类，IE9+支持。和[checked]属性选择器的区别，有些单复选框虽然有[checked]属性，但是本身并不是选中态。这就是:checked伪类设计的原因之一 HTML：单选框name相同只可以选择一个，但是当我们写了2个后 宅猪 西红柿 莫默JS var checkedInputAll = document.querySelectorAll('input[checked]') var checkedInputAll1 = document.querySelectorAll('input:checked') console.log(checkedInputAll.length, 'checkedInputAll--------------------') // 2 console.log(checkedInputAll1.length, 'checkedInputAll--------------------') // 1看输出结果是不一样的，所以我的分啊 第四问：获取ID为removeDisabled的按钮元素, 点击改按钮移除所有单选框元素的disabled禁用效果 我的答案：这个题目我应该是对了，但是就是谢的好像有点捞 var removeDisabled = document.getElementById('removeDisabled') disabledInputPart_1.forEach(item => { item.removeAttribute('disabled') }) disabledFieldsetInput.forEach(item => { item.removeAttribute('disabled') })大佬的写法(我真的太菜了，其实意思是一样的) // 这个是第二问的答案 const radiolist2 = document.querySelectorAll('[type=radio]:disabled'); // 第四问 const btn = document.querySelector('#removeDisabled'); btn.addEventListener('click',()=>{ [...radiolist2].forEach(el=>{ const fieldset = el.closest('fieldset:disabled'); if (fieldset) { fieldset.disabled = false; } if (el.disabled) { el.disabled = false; } }); })为什么？ Element.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null 第五问 答案 [type=radio]:invalid { outline: 3px dashed red; }最优正解 [type=radio]:invalid { outline: dashed red; }为什么？ :invalid CSS 伪类 表示任意内容未通过验证的 或其他 元素outline：的默认大小为3px |
【本文地址】