关于jquery 集合对象的 each和click方法的思考 -$(this)的认识

1, 很重要的是:

each: 是 **自动遍历 **集合中所有 item的, 是自动的;

click: 包括其他所有的 "事件", 如mouseX事件, keyX事件等, 都不是自动执行的.

jquery chm说得很清楚, 对于一个集合, 如 $("li"), 当给它绑定 click事件时, 所有匹配元素在 click事件发生时 , 执行fn, 也就是,

$("li").click(function(){...} = fn ); 是不会自动执行的, $("li")集合中, 的每一个匹配的 li, 都会在 click时绑定 fn. 也就是说, $(li)集合中的每一个元素, 只有在 click时, 才会去执行 fn

$(this): 是指执行fn的当前元素/ 当前上下文的元素 . 对于 each, 表示正在遍历的那个元素, 而对于 click等事件, this表示当前正在发生事件的那个元素. 是 $("li")(例子), 这个集合中, 当前正在被 click的那个匹配的元素, 不是所有的对象集合. 更不是, 对象集合中的每个元素. 哪一个元素被click, $(this)就是那个正在被 click的元素. 也就是: this = function(e){ e.target === this} 这个this, 就是当前正在发生的事件的target. 所以, 要实现多个li中, 当前被单击的那个li 改变背景色, 其他并列的li不改变颜色:

$("li").click(function(){

          $(this).css("background-color", "#ddd");   // 在里的this, 就是你当前正在单击的那个li,

          $(this).siblings().css("background-color", "#fff");

                    });

1. 用不着: 还去判断 this是哪个:  if($(this) === $(:focus)) {....}....

2. 用不着 在最后 再加上 return false; (只有each 才需要加上 return false=break; return true =continu; 是return true, 不只是 return!

2, 关于on和bind的区别?

动态元素和静态元素, 在html中, 原来就有的, 原来的html文档中, 就写了的,称为静态元素; 而通过 js产生的 , 在网页运行时, 开始时没有, 而是通过js在运行时产生的, 加入到dom中的, 称为动态元素.
如果直接用click, mouseX 等事件方法函数 , 不会对 "动态元素" 有效, 动态增加的元素li不会被绑定 click事件...
如果用bind 绑定的事件, 对于由 js产生的, 动态的, 后来再加入进来的(输入法准确率应该达到99%, 100次输入允许由一次错误...就需要看准了再选! ), 元素, 不会被绑定click事件, 只有原先 html中就有的静态的 html元素, 才能绑定有效.
用on绑定的事件, 对于动态的元素也有效果 , 后来增加的li元素, 也会被绑定 click等事件.
- 在使用on来绑定事件处理, 而且要对动态增加的元素也有效, 要注意: 在 on函数的原型中: on(events, [selector- "child"], [data], fn), 要使用data, 就得用函数名在on中, 而单独的将data 传递给fn的 event.data....
- 一定要使用on函数中的 selector, 这是一个过滤器, 而且是 "子元素"的过滤器. on函数的前面选择器一定要用 "父元素". 只有这样, 才能实现在动态增加的子元素上也能狗绑定click事件, 原因是, 对于动态增加的元素, 它会试着去找它的父元素, 然后再看过滤子selector...

单纯的直接用li元素集合, 是不行的, 因为动态增加的元素, 总是先去找父元素的容器...

要用父元素来选择, on后面用子元素来过滤, 才能在动态元素上, 绑定先前的事件

凡是以冒号: 开头的选择器, 筛选器, 都叫 "伪选择器", 如同超链接的伪类 a:active, a:hover等一样, "伪选择器"的前面最好要加上选择符, 加上其他选择器, 因为默认的伪选择器, 是全部选择器, 即: :pseudo-selector = = = *:pseudo..