jquery知识点积累

网上资源汇总学习：

jquery的选择器是CSS1-3,xpath的结合物。JQuery提取了这二种查询语言最好的部分，创造出了最终的jquery表达式查询语言。

xpath是一门在xml文档里查找信息的语言，xpath可以用来在xml文档中对元素和属性进行遍历。xpath使用路径表达式来选取xml文档中的节点或节点集。节点是沿着路径(path)或者步(step)来选取的。它是w3c的一个标准。

 

JQuery选择器执行效率：

1、最快：id选择器和元素标签选择器

例如：$("#id"),$("form"),$("input")

理由：jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。

2、较慢：class选择器
$(".classname"),取决于不同浏览器

firefox,safari,chrome,opera浏览器，原生方法getelementByClassName(),所以速度并不慢，但是IE5-8没有这个方法，所以

这个选择器在IE上会相当慢。

3、最慢的选择器：伪类选择器和属性选择器 $(":hidden"),$("attribute=value")

 

将jQuery对象缓存起来
把jQuery对象缓存起来 就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。
下面是一个jQuery新手写的一段代码：

 

1 2 3 4

$("#traffic_light input.on").bind("click", function(){  });     $("#traffic_light input.on").css("border", "1px dashed yellow");     $("#traffic_light input.on").css("background-color", "orange");     $("#traffic_light input.on").fadeIn("slow");

 

但切记不要这么做。
我们应该先将对象缓存进一个变量然后再操作，如下所示：

1 2 3 4 5

var $active_light = $("#traffic_light input.on");     $active_light.bind("click", function(){  });     $active_light.css("border", "1px dashed yellow");     $active_light.css("background-color", "orange");     $active_light.fadeIn("slow");

 

记住，永远不要让相同的选择器在你的代码里出现多次.
注：（1）为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上 $ 符号。
（2）上面代码可以使用jQuery的链式操作加以改善。如下所示：

 

1 2 3 4 5

var $active_light = $("#traffic_light input.on");     $active_light.bind("click", function(){  })                         .css("border", "1px dashed yellow")                         .css("background-color", "orange")                         .fadeIn("slow");

 

如果你打算在其他函数中使用jQuery对象，那么你必须把它们缓存到全局环境中。
如下代码所示：

// 在全局范围定义一个对象 (例如: window对象)

window.$my = {

head : $("head"),

traffic_light : $("#traffic_light"),

traffic_button : $("#traffic_button")

};

function do_something(){

// 现在你可以引用存储的结果并操作它们

var script = document.createElement("script");

$my.head.append(script);

// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.

$my.cool_results = $("#some_ul li");

$my.other_results = $("#some_table td");

// 将全局函数作为一个普通的jquery对象去使用.

$my.other_results.css("border-color", "red");

$my.traffic_light.css("border-color", "green");
}
//你也可以在其他函数中 使用它

 

 

 

冒泡
除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
当我们需要给多个元素调用同个函数时这点会很有用。
代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。
比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class
传统的做法是，直接选中input，然后绑定focus等，如下所示：

 

 

1 2 3 4 5

$("#entryform input").bind("focus", function(){         $(this).addClass("selected");     }).bind("blur", function(){         $(this).removeClass("selected");     });

 

当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码：

$("#entryform").bind("focus", function(e){
var $cell = $(e.target); // e.target 捕捉到触发的目标元素
$cell.addClass("selected");
}).bind("blur", function(e){
var $cell = $(e.target);
$cell.removeClass("selected");
});

 

 

这篇文章写的很好，上面的缓存和冒泡是截取的里面的，记录一下，：

http://www.frontopen.com/1077.html

http://www.open-open.com/bbs/view/1318473226718

 

转载于:https://www.cnblogs.com/dogs-tail-grassspace/p/4527925.html