<div class="left first-div">与 <div class="left last-div">

在这里，就是给这个div标签一个类名。类用class表示，这个起了两个类名，分别是:left和 last-div，然后可以分别再给这两个类名规定样式，(也就是写css代码)。 这样做的好处是可以使 内容与样式 相分离， 易于以后的维护修改。 也就是常说的div+css。没有规定哪个用在哪里，你也可以用left在js调用类的时候试试看是不是一样。

index.html旁边还有一个imooc.css的文件

left是写在css文件里的样式

this,表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。

$(this)，代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值

查找所有 input, textarea, select 和 button 元素 $(':input')

匹配所有input元素中类型为text的input元素$('input:text')

匹配所有input元素中类型为password的input元素$('input:password')

匹配所有input元素中的单选按钮,并选中$('input:ratio')

匹配所有input元素中的复选按钮,并选中 $('input:checkbox')

1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

2. :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

3. 如果子元素只有一个的话，:first-child与:last-child是同一个

4.  :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

5. jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

查找class="first-div"下的第一个a元素:$('.first-div a:first-child')

查找class="first-div"下的最后一个a元素 $('.first-div a:last-child')

查找class="first-div"下的只有一个子元素的a元素$('.first-div a:only-child')

查找class="last-div"下的第二个a元素$('.last-div a:nth-child(2)')

查找class="last-div"下的倒数第二个a元素 $('.last-div a:nth-last-child(2)')

最佳回答

2016-11-06

$("div[name|='-']") ；//属性名字为name的div元素,name值等于"-"或者以name值"-"为连接符的元素

换一种，你更明白。

$("div[name|='test']") ；//属性名字为name的div元素,name值等于"test"、或者以name值"test"为连接符的元素(即匹配 name="test" 或者 name="test-xxx")

$("div[name='-']") ；//属性名字为name的div元素,name值等于"-"

 $("div[name=-]") ；与 $("div[name='-']") ；应该一样。

1. :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

$(":contains(text)")选择所有包含指定文本的元素。

$(":parent")选择所有含有子元素或者文本的元素。

$(":empty")选择所有没有子元素的元素

基本筛选选择器

例子：

1、匹配第一个元素 $(":first)。例:找到第一个div  $(".div:first)

2、匹配最后一个元素 $(":last")。例：找到最后一个div

$(".div:last")

3、匹配所有为偶数的元素 $(":even")。例：$(".div:even")

4、匹配所有为奇数的元素 $(":odd")。例：$(".div:odd")

5、选择单个索引为index的元素$(":eq（index）")。例：$(".div:eq(2)")

6、匹配集合中所有索引值大于给定index参数的元素 $(":gt(index)")。例：$(".div:gt(3)")

7、匹配集合中所有索引值小于给定index参数的元素$(":lt(index)")。例：$(".div:lt(3)")

8、:not 选择所有元素去除不匹配给定的选择器的元素

$(":not(selector)")。例：选中所有紧接着没有checked属性的input元素后的p元素$("input:not(checked)+p")

层级选择器：

子元素、后代元素、兄弟元素、相邻元素

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

后代选择器：$('ancestor descendent')

相邻兄弟选择器：$('prev+next') 选择紧接在prev后面的所有next元素

一般兄弟选择器：$('prev~sibling') 匹配prev后的所有兄弟元素

全选择器

$("*")

JS:document.getElementsByTagName(

元素选择器

JQ:$("element")(比如div标签下面有p标签，element为p）

JS:getElementsByTagName()(括号里面传入div

类选择器

JQ：$(".class")

JS：getElementsByClassName()

show()函数的意思
function show (ele) {
            if (ele instanceof jQuery) {//如果是jQuery元素
                $("#show").append('元素的长度的 = ' + ele.length) // 显示“元素的长度 = （ele的个数）”
            } else {//如果不是jQuery元素
                alert(ele+' 不是jQuery对象')
            }
        }
执行结果：元素的长度的 = 0元素的长度的 = 0元素的长度的 = 1元素的长度的 = 1元素的长度的 = 1元素的长度的 = 0为什么结果是这样：show( $("#div1:visible") ); //div1的CSS display值为none，所以获取不到visible的元素，结果为0show( $("#div2:visible") ); //div2的宽度和高度都显式设置为0 ，所以获取不到visible的元素，结果为0show(  $("#div3:visible") ); //div3的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局，结果1show( $("#div1:hidden") ); // 该元素hidden了，获取到一个hidden元素，结果1show($("#div2:hidden") ); // 该元素hidden了，获取到一个hidden元素，结果1show( $("#div3:hidden")); // 该元素是visible的，获取不到hidden元素，结果0

id选择器

$("#id")

jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取.

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个dom元素。但是这种行为不应该发生。

如果传递给$(dom)函数的参数是一个dom对象，Jquery方法会把这个dom对象包装成一个新的jquery对象

通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了.

通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象

，jQuery是一个类数组对象，而DOM（js）对象就是一个单独的DOM元素。

因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象。

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象，取出元素一