js表单元素checked、radio被选中的两种办法-遁地龙卷风

0.环境

  <input type=”checkbox”  value=”lol”/>lol

  var lol = document.getElementsByTagName(“input”)[0];

1.层次采用器-子元素拔取器

1.HTML DOM

  a.lol.checked = true;

    属性的值可以不是lol,只要转为布尔值的时候为true就可以,取值时只有true、false几种  

    不会增多checked标记

  b.lol.click();

    不会追加checked标记,那时lol.checked的值为true

<body>

2.DOM core

  lol.setAttribute(“checked”,”checked”);

  元素扩大了checked标记,这时lol.checked的值为true

  <input type=”checkbox”  checked=“checked” value=”lol”/>lol

  其实checked标记,存在即采用,下面的写法就足以实现默认选中

  <input type=”checkbox”  checked  value=”lol”/>lol

  在浏览器解析文本的时候就默认选中.

 

<div>

      <p>lol</p>

      <div>

           <p></p>

      </div>

</div>

</body>

alert($(“div>p”).length);//2

//逐层遍历符合的因素
alert($(“body>div>p”).length)//1

//会定位到body的子div,然后定位子p

2.内容过滤器-has

<html>

<body>

<div id=”dnf”>
  <p class=”lol”>123</p>
  <p>123</p>
  <p>123</p>
</div>

</body>

</html>

var a = $(“#dnf p:has(.lol)”).length //这样是得到不到的
var b = $(“#dnf:has(p):has(.lol)”).length

var c= $(“has(.lol)”).length
alert(a);//0
alert(b);//1

alert(c);//3

has过滤器过滤的是儿孙元素

“#dnf
p:has(.lol)”的情趣是是否有如此的p元素,它是采取id为dnf的后人元素,且改p元素的后生元素中有采纳class为lol的因素

“#dnf:has(p):has(.lol)”的情趣是是否有诸如此类的要素,它的id是dnf,且后代元素中有p元素,且有class为lol的因素”
html body div

“:has(.lol)”
的情致是是否有诸如此类的因素,它的子孙元素中有class为lol的要素,从html标签开首逐层遍历

3.情节过滤拔取器-empty

<div></div><!–能够被找到–>

<div><!–不得以被找到,有文件元素–>

</div>

4.应用了class为lol的div元素

$(“div.lol”)

5.子元素拔取器,这里已:nth-child()为例

要素的选料是基于元素在父元素中的地点或唯一性决定的

(1)

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</body>
$(“ul li:nth-child(2n)”).css(“background”,”red”);
$(“li:nth-child(2n)”).css(“background”,”red”);
六个语句的功能等同,因为具有li元素的父元素都是ul

(2)
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>   
  </ul>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</body>
$(“ul li:nth-child(2n)”).css(“background”,”red”);

//ul下的li,innerText为2,4为红色
$(“li:nth-child(2n)”).css(“background”,”red”);

//ul下的li,innerText为2,4为红色
//innerText为6,7,8,9的li的父元素是body,6在body中是第2个因素,所以innerText为6的li背景象为粉色
///当然innerText为8的li背景象也为黑色

未完待续!

迎接补充指正!

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website