JS学了一段时间,之后自己也做了一些小的东西(最近在做个人主页),做东西的过程中,大部分使用javascript来编写,可是有些地方还是会用到一些jquery,比如,事件委托、事件绑定这部分的时候使用javascript会很麻烦,而且还存在一些问题,这时使用jquery,只用一个函数就能解决问题。还有就是急忙完成,比较赶的时候会使用jquery。啰嗦了大半天,小编的最终结论就是,jquery是用javascript封装的一个库,使用jquery能使用较少的代码,完成更强大的功能。说完了jquery的功能之后,现在就开始切入正题。
一、基础核心
1.关于$
(1)页面元素的选择、内置的功能函数,都是用$来起始地
(2)$ //jquery对象的内部实现,也就是其函数
(3)$() //jquery对象{object,object}
(4)$(“#id”) //获取到id节点,返回的是jquery对象{object,object}
(5)$(“#id”).css('color','red') //获取到名为id的节点,并给其设置行内CSS样式,返回的是jquery对象{object,object},因此是可
(6)$("#id").get(); //返回原生的DOM对象,可以批量处理
以实现代码的连缀功能
2.加载模式。
我们使用$(function(){})这种代码方式原因是我们jQuery库文件是在body元素之前加载的,我们必须等待所 有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。 在延迟等待加载,JavaScript提供了一个事件为load,方法如下:
window.onload = function () {}; //JavaScript等待加载
$(document).ready(function () {}); //jQuery等待加载
3、常规选择器
(1).简单选择器
a.$('div').css('color','orange'); //元素选择器,返回多个元素
b.$('#box').css('color','orange'); //ID选择器,返回单个元素
c.$('.box').css('color','orange'); //类(class)选择器,返回多个元素
d.$('#box>p').css('color','orange'); //子选择器,兼容IE6+
注:jquery内置有容错的功能,这样避免想JS那样每次对节点的获取进行有效的判断,从而带来不需要的麻烦
(2).进阶选择器
(3).高级选择器
说明:1. $('#box p').css('color','red');
$('#box').find('p').css('color','red');这两种方法等价,均是后代选择器
2. $('#box>p').css('color','red');
$('#box').children('p').css('color','red');这两种方法等价,均是子选择器
3. $('#box+p').css('color','red');
$('#box').next('p').css('color','red'); 这两种方法等价,均是next选择器
4. $('#box~p').css('color','red');
$('#box').nextAll('p').css('color','red');这两种方法等价,均是nextAll选择器
注:这几种写法均支持IE6在find(),children,next,nextAll这四个方法中如果不传参,就相当于传递了参数*,即任何节点。但是不建议这样做,影响性能,还有可能在复杂的HTML结构中产生怪异的结果
5.其他补充方法
$('#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()两个功效
4.过滤选择器
(1).基本过滤器
(2).内容过滤器
(3).可见性过滤器
(4).子元素过滤器
(5).其他方法