关于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..