jquery笔记

1.设置span的高度

参考：http://blog.sina.com.cn/s/blog_70b0792b0100uqfl.html 

 行内(即inline，内嵌元素)对象会忽略width属性，FireFox和IE都遵循这个标准 

 常见的有a,span等都是内嵌元素

 

2. padding-right: 30px;

在对象的内容与对象的右边框之间插入空间(30px)

 

3.css选择符是从1开始的，Javascript数组是从0开始的

eg：$('tr:nth-child(even)').addClass('alt');even是指偶数行，这个选择符相对于元素的父元素而非当前选择的所有元素来计算位置

$('tr:even').addClass('alt');这个选择符选择的所有元素来计算位置

 

4.区别：JavaScript数组采用从0开始的编号方式，而CSS则是从1开始的，因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素的第1个子元素

a.jquery自定义选择符:odd和:even。

$('tr:even');//取得偶数行，从0开始编号

b.css选择符:nth-child()

$('tr:nth-child(even)');//取得偶数行，从1开始编号

 

5.jQuery自定义选择符

:odd, :even, :contains()，自定义表单选择符

值得注意的是:contains()选择符区分大小写

 

5.筛选函数filter()，实现隐式迭代能力，保持代码的简洁。

如果没有筛选函数filter(),就必须显示地遍历每个元素，对它们单独进行测试

filter()函数会迭代所有匹配的元素，对每个元素都调用传入的函数并测试函数的返回值。如果函数返回false，则从匹配

集合中删除相应元素；如果返回true，则保留相应元素

$("p").filter(function(index) {//保留子元素中不含有ol的元素。如果返回true，则保留

  return $("ol", this).length == 0;//从this中选出所有的ol对象(DOM对象)，并封装成jquery对象

});

 

6.next()方法只选择下一个最接近的同辈元素(1,同辈元素，2.最接近)。与其相反的是prev()只选择上一个最接近的同辈元素

 

7.nextAll()方法只选择后面所有同辈元素， 与其相反的是prevAll()

 

8.siblings()能够选择处于相同DOM层次的所有其他元素(1,相同DOM层，eg：head与body，2.所有元素)，无论这些元素处于当前元素之前

还是之后

 

9.访问DOM元素

jQuery对象能够提供隐式迭代和联缀能力。

尽管如此，我们仍然有很能需要在代码中直接访问DOM元素。Eg：可能需要为另一个JavaScript库提供一组元素的结果集合。或者可能不得不访问某个元素的标签名——通过DOM元素的属性，对于这些少见但合理的情形，jQuery提供了.get()方法。要访问jQuery对象的第一个DOM元素，可以使用.get(0)。

var  $myTagObj = $(‘my-element’);// jQuery对象

var myTagObj = $myTag.get(0); //DOM对象，将jQuery对象转换为DOM对象

var myTag = myTagObj.tagName;//获取标签名

为了进一步简化这些代码，jQuery还为.get()方法提供了一种简写方式。比如，可以将

$(‘my-element’).get(0)简写为$(‘my-element’)[0]

 

事件：

通过$(document).ready()机制能够很好地解决这个问题。每次调用该方法都会向内部的行为队列中添加一个新函数，当页面

加载完成后，所有函数都会被执行。而且，这些函数会按照注册它们的顺序依次执行

 

2.当给它传递一个函数作为参数时，jQuery会隐式调用.ready().

 

3.在某些情况下，可能有必要再同一个页面中使用多个JavaScript库。由于很多库都使用$标识符，因此就需要一种方式来避免名称冲突

 

4.removeClass()方法的参数是可选的，即当省略参数时，该方法会移除元素中所有的类。

 

5.使用addClass()，removeClass添加或删除一个不存在的类，不会出现异常。

 

6.简写的事件

$('#switcher button').on('click', function(){}); 可以简写成$('#switcher button').click(function(){})

 

7.toggleClass 如果存在就删除一个类，如果不存在就添加一个类

 

 

事件传播

 

1.CSS规范加入了一个名叫:hover的伪类选择符，这个选择符可以让样式表在用户鼠标指针悬停在某个元素上时，影响元素的外观。

这个味着选择符在某种程度上可以帮我们解决问题，但在这里，我们要介绍Jquery的.hover方法。这个方法可以让我们在鼠标

指针进入元素和离开元素时，通过JavaScript来改变元素的样式

 

使用.hover()也意味着可以避免JavaScript中的事件传播导致的头痛问题

 

2.problem: JavaScript中的事件传播？？？？？？？？？？

事件捕获与事件冒泡是"浏览器大战"时期分别由Netscape和微软提出的两种相反的事件传播模型

不同的浏览器开发着最初采用的是不同的事件传播模型。因而，最终出台的DOM标准规定应该同时使用这两种策略：首先，事件要从一般元素到具体

元素的逐层捕获，然后，事件再通过冒泡

 

 

3.区分"事件冒泡"与"事件捕获"

http://blog.sina.com.cn/s/blog_9d41dc5501010prf.html

 

4.行内(即inline，内嵌元素)对象会忽略width属性，FireFox和IE都遵循这个标准

常见的有a,span等都是内嵌元素

http://blog.sina.com.cn/s/blog_70b0792b0100uqfl.html

 

5.事件处理程序

 

6.jquery中先乘后除1.4的结果不一样，而在javaScript中会保持一样，什么原因????????????

 

7.多个<li>标签为什么显示为列表，因为<li>的display 默认为 'list-item';

  多个<a>标签为什么显示为水平，因为<a>的display 默认为 inline(行内元素，内嵌元素)

  

8,块级元素的 position = 'static',所以修改left属性是无效的。需要将postion修改为relative和absolue才会起作用

 

9.“回调函数” 与 “值回调”的区别？？？？？？？？？？？？？？？？？？？

值回调：其实就是给参数传入一个函数，而不是传入具体的值。这个函数会针对匹配的元素集合中每个元素都调用一次，调用后的返回值将作为属性

的值。例如，可以使用值回调来为每个元素生成唯一id值

 

10.rel 和 target 的关系  http://bbs.blueidea.com/thread-2720126-1-1.html

这个rel='external'只是一个替代target="_blank" 的属性

HTML:target=_blank:(a的默认值是_self)

_blank -- 在新窗口中打开链接

_parent -- 在父窗体中打开链接

_self -- 在当前窗体打开链接,此为默认值

_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

 

11.值回调其实就是给参数传入一个函数，而不是传入具体的值。这个函数会针对匹配的元素集中的每个元素都调用一次，调用后的这个返回将作为属性的值

a.可以使用 值回调 来为每个元素生成唯一的id值

id 可以使用 function(index, oldValue)  不知道是不是约定好的写法

 

 

12.大多数情况下，HTML属性与对应的DOM属性的作用都是一样的，jQuery可以帮我们处理名字不一致的问题。可以，有时候我们的确需要留意着两种的差异。某些DOM属性，例如：nodeNames, nodeType, selectedIndex和childNodes, 在HTML中没有对应的属性，因此通过.attr()方法就没有办法操作它们。此外，数据类型方面也存在差异，比如HTML中的checked属性是一个字符串，而DOM中的checked属性则是一个布尔值。对于布尔值属性，最后测试DOM属性而不是HTML属性，以确保跨浏览器的一致行为。

 

13.CSS3 border-radius 属性：向 div 元素添加圆角边框

 

14.html实体(html字符实体)：

http://www.w3school.com.cn/html/html_entities.asp

 

15.jQuery 1.9,jQuery2.0 beta, Migrate插件的一些注意事項

jquery1.9已经删除了toggle(function,function)方法。 如果想要继续使用这个方法，jQuery Migrate（迁移）插件可以恢复此功能

jquery2.0起,将只支持IE9+及其他HTML5浏览器。在IE6/7/8占有绝对比例的国度，虽然有点失落，但是好在高级浏览器的占有率在逐渐上升

 

 

16.attr 与 prop的关系