jQuery入门基础知识学习笔记

JS学了一段时间，之后自己也做了一些小的东西（最近在做个人主页），做东西的过程中，大部分使用javascript来编写，可是有些地方还是会用到一些jquery，比如，事件委托、事件绑定这部分的时候使用javascript会很麻烦，而且还存在一些问题，这时使用jquery，只用一个函数就能解决问题。还有就是急忙完成，比较赶的时候会使用jquery。





啰嗦了大半天，小编的最终结论就是，jquery是用javascript封装的一个库，使用jquery能使用较少的代码，完成更强大的功能。说完了jquery的功能之后，现在就开始切入正题。

一、基础核心

１.关于＄

（１）页面元素的选择、内置的功能函数，都是用＄来起始地　

（２）＄　　／／jquery对象的内部实现，也就是其函数

（３）＄（）　／／jquery对象｛object，object｝

（４）＄（“＃ｉｄ”）　／／获取到ｉｄ节点，返回的是jquery对象｛object，object｝

（５）＄（“＃ｉｄ”）．ｃｓｓ（＇ｃｏｌｏｒ＇，＇ｒｅｄ＇）　／／获取到名为ｉｄ的节点，并给其设置行内CSS样式，返回的是jquery对象｛object，object｝，因此是可

（６）＄（＂＃ｉｄ＂）．ｇｅｔ（）；　　　　／／返回原生的DOM对象，可以批量处理

以实现代码的连缀功能

２.加载模式。

　　　我们使用＄（function（）｛｝）这种代码方式原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所 有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。 在延迟等待加载，JavaScript提供了一个事件为load，方法如下：

window.onload = function () {}; 　　//JavaScript等待加载

$(document).ready(function () {});　　 //jQuery等待加载



３、常规选择器

（１）.简单选择器

ａ．＄（＇ｄｉｖ＇）．ｃｓｓ（＇ｃｏｌｏｒ＇，＇ｏｒａｎｇｅ＇）；　　　　　　／／元素选择器，返回多个元素

ｂ．＄（＇＃ｂｏｘ＇）．ｃｓｓ（＇ｃｏｌｏｒ＇，＇ｏｒａｎｇｅ＇）；　　　　　／／ID选择器，返回单个元素

ｃ．＄（＇．ｂｏｘ＇）．ｃｓｓ（＇ｃｏｌｏｒ＇，＇ｏｒａｎｇｅ＇）；　　　　　／／类（ｃｌａｓｓ）选择器，返回多个元素

ｄ．＄（＇＃ｂｏｘ＞ｐ＇）．ｃｓｓ（＇ｃｏｌｏｒ＇，＇ｏｒａｎｇｅ＇）；　　　／／子选择器，兼容IE６＋

注：jquery内置有容错的功能，这样避免想JS那样每次对节点的获取进行有效的判断，从而带来不需要的麻烦

（２）.进阶选择器



（３）.高级选择器



说明：１.　$('#box p').css('color','red');

　　　　　$('#box').find('p').css('color','red');这两种方法等价，均是后代选择器

　　　２.　$('#box>p').css('color','red');

　　　　　$('#box').children('p').css('color','red');这两种方法等价，均是子选择器

　　　３.　$('#box+p').css('color','red');

　　　　　$('#box').next('p').css('color','red');　这两种方法等价，均是next选择器

　　　４.　$('#box~p').css('color','red');

　　　　　$('#box').nextAll('p').css('color','red');这两种方法等价，均是nextAll选择器

注：这几种写法均支持IE６在find()，children，next，nextAll这四个方法中如果不传参，就相当于传递了参数＊，即任何节点。但是不建议这样做，影响性能，还有可能在复杂的HTML结构中产生怪异的结果

　　　５.其他补充方法

　　　　　$('#box').prev('p').css('color','red'); //同级上一个元素

　　　　　$('#box').prevAll('p').css('color','red'); //同级上面的所有元素

　　　　　$('#box').prevUntil('p').css('color','red'); //同级的上非指定元素选定，遇到则停止

　　　　　$('#box').nextUntil('p').css('color','red'); //同级的下非指定元素选定，遇到则停止

　　　　　$('#box').siblings('p').css('color','red'); //同级的上下所有元素选定，集成了prevAll()和 nextAll()两个功效

４.过滤选择器

（１）.基本过滤器



（２）.内容过滤器



（３）.可见性过滤器



（４）.子元素过滤器



（５）.其他方法