只因小黑子的JavaScript入土过程的问题探讨

JS的问题探讨

一.JS的选择器有哪些及怎么用

javascript选择器是什么意思呢？

• JS选择器主要用来获取HTML页面中的元素，将页面中的元素保存到一个对象中，然后就可以对这些对象的属性值进行相应操作，以实现一些动态效果，以达到页面的生动，易用。
• 需要注意的一点是操作的一定是对象，直接将元素当做对象使用是不行的。
• JS选择器是将对象对应的元素的属性直接进行操作，所以其改变的style的值是直接改变行间样式，优先级远高于CSS样式，所以使用时应注意与已经完成的CSS样式的取舍。

js中原生的选择器主要有以下四种

1. document.getElementById()
2. document.getElementsByClassName()
3. document.getElementsByTagName()
4. document.getElementsByName()

（1）document.getElementById()

Id选择器
通过Id属性来获取对象
案例：

<p id="op">这是一个p标签</p>
  <script>
   var od = document.getElementById("op")
  </script>

这样就可以从HTML中获取到一个Element对象，并且可以对其进行操作。

（2）document.getElementsByClassName()

ClassName选择器
通过ClassName属性获取对象

案例：

  <p class="c1">这是一个p标签</p>
  <p class="c1">这是一个p标签</p>
  <a class="c1">这是一个a标签</a>
  <span class="c1">这是一个span标签</span>
  <script>
    var oc = document.getElementsByClassName("c1")
    console.log(oc)
  </script>

类名选择器获取到的是HTMLCollection对象，它是一个类似于数组的对象，如果需要选择具体的某一个Element对象，则需要做类似于取数组元素的操作，如下案例：

  <p class="c1">这是一个p标签</p>
  <p class="c1">这是一个p标签</p>
  <a class="c1">这是一个a标签</a>
  <span class="c1">这是一个span标签</span>
  <script>
    var oc = document.getElementsByClassName("c1")[0]
    console.log(oc)
  </script>

这样就可以获取到其中具体的某一个Element对象，就可以对此Element对象进行具体操作

（3） document.getElementsByTagName()

TagName选择器
通过元素名称来获取对象

TagName选择器获取到的内容与ClassName选择器一样，是HTMLCollection对象，所以，如果需要选择具体的某一个Element对象，也需要做类似于取数组元素的操作

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
  <script>
	var oli = document.getElementsByTagName("li")
    console.log(oli)
  </script>

（4） document.getElementsByName()

Name选择器
通过Name属性来获取对象

Name选择器主要用于form标签等需要name属性的标签的获取，获取到的是NodeList对象，此类对象与HTMLCollection对象相似，所要获取的具体对象操作也类似于数组

二、JS选择器较为繁琐怎么运用好

JQuery的选择器完全是继承了css选择器的风格,以下展示帮助快速回忆

1. 基本选择器

id选择器：$("#id名")

元素选择器: $("元素名")

类选择器: $(".类名")

群组选择器: $("选择器1,选择器2,.......,选择器n")

*选择器: $("*")选择所有元素

2.层级选择器

层次选择器,就是能过元素之间的层次关系来获取元素.常见的层次关系包括:父子、后代、兄弟、相邻。

$（"M N")后代选择器，选择M元素内部后代N元素

$（"M＞N")子代选择器,选择M元素内部子代N元素

$（"M~N")兄弟选择器,选择M元素后所有的同级N元素

$（"M+N")相邻选择器,选择M元素相邻的下一个元素

3. 属性选择器

HTML元素通常包含很多属性，JQuery的属性选择器就是把各种属性作为选择器。

$("selector[attr]")选择包含给定属性的元素

$("selector[attr='value']")选择给定的属性是某个特定值的元素

$("selector[attr!='value']")选择所有含有指定的属性,但属性不等于特定值的元素

$("selector[attr*='value']")选择给定的属性是以包含某些值的元素

$("selector[attr^='value']")选择给定的属性是以某些值开始的元素(比较少用)

4. 伪类选择器

伪类选择器也称作过滤选择器。

JQuery伪类选择器都是以英文冒号“：”开头，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素。

简单伪类选择器元素

• ：not(selector)选择除了某个选择器之外的所有元素
• ：first或first()选择某元素的第一个元素（非子元素）
• ：last或last()选择某元素的最后一个元素（非子元素）
• ：odd选择某元素的索引值为奇数的元素
• ：even选择某元素的索引值为偶数的元素
• ：eq(index)选择给定索引值的元素，索引值index是一个整数，从0开始
• ：lt(index)选择所有小于索引值的元素，索引值index是一个整数，从0开始
• ：header选择h1~h6的标题元素：focus选取当前具有焦点的元素
• ：root选择页面的根元素
• ：animated选择所有正在执行动画效果的元素

子元素伪类选择器

• ：first-child选择父元素的第1个子元素
• ：last-child选择父元素的最后1个子元素
• ：nth-child(n)选择父元素下的第n个元素或奇偶元素，n的值为"整数|odd|vevn
• ：only-child选择父元素中唯一的子元素（该父元素只有一个子元素）
• ：first-of-type选择同元素类型的第1个同级兄弟元素
• ：last-of-type选择同元素类型的最后1个同级兄弟元素
• ：nth-of-type选择同元素类型的第n个同级兄弟元素，n的值可以是"整数|odd|even"
• ：onlt-of-type匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）

可见性伪类选择器

• ：hidden选取所有不可见元素
• “：hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。
• ：visible选取所有可见元素

内容伪类选择器

内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。

• ：contains(text)选择包含给定文本内容的元素
• ：has（selector)选择含有选择器所匹配元素的元素
• ：empty选择所有不包含子元素或者不包含文本的元素
• ：parent选择含有子元素或者文本的元素（跟：empty相反）

表单伪类选择器

• : Input选择所有input元素
• ：button选择所有type="button"的input元素
• ：submit选择所有type="submit"的input元素
• ：reset选择所有type="reset"的input元素
• ：text选择所有单选文本框
• ：textarea选择所有多行文本框
• ：password选择所有密码文本框
• ：radio选择所有单选按钮
• ：checkbox选择所有复选框
• ：image选择所有图像域
• ：hidden选择所有隐藏域
• ：file选择所有文件域

表单属性伪类选择器

• ：enabled选择所有可用input元素
• ：disabled所有禁用的input元素
• ：selected选择所有被选中的option元素
• ：checked选择所被选中的表单元素，一般用于radio和checkbox

三、JavaScript语言精粹的铁路图怎么看

铁路图（railroad diagram)，又叫语法图(syntax diagrams)，是一种表示形式语法的方式，是巴科斯范式和扩展巴科斯范式的图形化表示。
规则如下:

1. 从左边界开始，沿着轨道到右边界。
2. 沿途，你在圆框中遇到的是字面量，在方块中遇到的是规则或描述。
3. 任何沿着轨道能走通的序列都是合法的。
4. 任何不能沿着轨道走通的序列都是非法的。
5. 末端只有一个竖条的铁路图，表示允许在任意一对符号中插入空白。而在末端有两个竖条的铁路图则不允许。

以函数字面量为例：

• 简单说一下，函数字面量定义了函数值。它可以有一个可选的名字，用于递归调用自己。他可以指定一个参数列表，这些参数就像变量一样，在调用时有传递实际参数初始化。函数的主体包括变量定义和语句。

注意:圆角向内表示循环，向外则不循环。或者将左下弧理解为出口，右下弧理解为入口。

具体案例：

解读L:

1、空

2、从name和=之间绕行
定义 var name;

3、中间横向语句
定义var name = expression;

4、在expression和;之间循环
var name, name,...,name;
var name = expression, name = expression,..., name = expression;

5、在分号之后循环
var name = expression;
var name = expression;
....