此处使用html输出元素的长度为不可行，原因为：

使用html后面的输出量会覆盖之前的输出量

解决方法：可使用append

换成jQuery的做法:
$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

DOM中this就是指向了包含this这个html元素对象

相邻兄弟是指就靠着你的那个

一般兄弟是指靠着你的剩下的所有

.html()可以覆盖原来元素的内容

.html(function( index ,oldHtml){

return ""; 

})

index 可以获取元素的下标 ，oldHtml可以获取原来的值

$("parent > child")：子选择器

$("ancestor descendant")：后代选择器

$("prev + next") ： 相邻兄弟选择器

$(" prev  ~ siblings ")：一般兄弟选择器

jQuery子元素筛选选择器

:first-child选择所有父级元素下第一个元素

:last-child选择所有父级元素下倒数第一个元素

:only-child如果某个元素是其父元素的唯一子元素，那么他会被选中

:nth-child(1-n)选择的他们所有父元素的第n个子元素

:nth-last-child(1-n)与上面相反，从后往前数

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

$('div[name=p1]')： //查找所有div中，属性name=p1的div元素 $('div[p2]')： //查找所有div中，有属性p2的div元素 $('div[name|="-"]')//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素，或以连字符‘-’相连的前缀为字符“-”的div $('div[name~="a"]')     //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素，以空格风格的属性中有属性值a $('div[name^=imooc]') //查找所有div中，属性name的值是用imooc开头的 $('div[name$=imooc]') //查找所有div中，属性name的值是用imooc结尾的 $('div[name*="test"]')//查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[testattr!="true"]')//查找所有div中，有属性testattr中的值没有包含"true"的div

以下根据翻看所有评论和自己的思路具体总结：

不负责，仅供参考！

首先：文章主旨大致理解为三点：

第一：（大纲：)

此可见性塞选器其目的，是为查看标签内属性值（style），使我们自身是否能通过这两个方法而看见，而不是程序本身。

大纲细节：

1：visible是查看节点属性是否显示，显示则为0，不显示则为1。而它能见到的就是hidden为它打包的标签属性，因为hideen的隐藏是占据空间的，所以值就不为0，也就是说，它能被我们看到。

而默认值，还有元素值为0的时候，是没有空间占据的，也就是说不能被我们所见。

（注：这里所指的默认值和0的值不为我们所见，并非程序无法察觉和知晓，只是程序不让我们见到。）

hidden，即查看节点属性是否隐藏，隐藏则为0，反之为1.

而这里所说的祖先元素的隐藏，比如table标签中无法查见的tobdy标签就是这种类型。

而所指的元素可见性依赖于使用的样式，大白话翻译为：我们能不能看见这个属性，还要根据它自身的情况，就像是默认值和值为0一样，它自身虽然是隐藏的，但人家就是天生贵族，不让我们见。

第二：

关于编辑器中的代码：

1；首先我们知道js是可以在body中设置的，这一点就不说了。

2：body中主要做了什么？首先它搞了一个div的容器，其中包含三个儿子div，并且每一个儿子都有一个文本和自己的名字。

而为了测试他们的属性是否隐藏和显示，则在属性中分别设置了默认，值为0，还有hidden的打包属性和值为0.

3：在Body下它设置了一个函数，也就是方法，用于执行测试属性的值是否显示与隐藏。这是什么函数？是一个包含了形参（也就是调用值的方法）的 函数。

4：这个函数中的ele instanceof jQuery，就是说输入的值是不是jquery的实例或者说是不是它的人！

总的解读这个函数就是：

如果你是我的人，就将p标签给我调用，并在这标签中设置查看标签们属性的长度，也就是通过这个长度来确定好是不是显示和隐藏。

如果不是，不好意思，弹出对话框，你不是我的人。

三：

整个代码执行的时候，请在http中加上s，这个小编已经忘了好几节了。

祝大家愉快，共同努力！

加油！

even:选择索引值为偶数的元素，从 0 开始计数
odd: 选择索引值为奇数的元素，从 0 开始计数

last 最后的

child 小孩

nth 第n个

first 第一个

only 只有

:last-child 最后一个小孩

:first-child 第一个小孩

:only-child 只有一个小孩

:nth-last-child 倒数第n个小孩

jQuery基础 (一)—样式篇——简介 1、jQuery轻量级的JavaScript库，核心是JavaScript，兼容css和各种浏览器，核心理念是写得少做得多。 2、优势：容易上手，强大的选择器，节约开发时间，丰富的UI，完善的事件机制，Ajax的封装。 3、特性和方法：连试操作、回调函数、迭代器、延迟对象、队列...

解析：$( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器 $( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器 

类选择器
    
    <div class ="imooc">
        <P>class ="imooc"</p>
        <P>jquery选中</p>
    </div>
    <script>
      
        $(".imooc").css("boder","3px solid red")
    </script>