jQuery选择器、属性操作、元素操作、位置尺寸操作、本地存储、事件、多库共存、插件等概括梳理

一、选择器

基础选择器	和css选择器一样格式：$('选择器')。
	通配选择器‘*’，
	标签：’ul‘
	id：‘#icon’
	类：‘.iocn’
	交集：‘ul.icon’
	并集：‘ul ,.icon')
层级选择器	子选择器：$('ul>li')
	后代选择器：$('ul li')
筛选选择器	：first第一个  $('li:first')
	:last最后一个$('li:last')
	:odd偶数个$('li:odd')
	奇数个:even$('li:even')
	选择第几个:eq(n)   $('li:eq(n)')
	：checked; 选择选中的选项  针对type为radio或者checked的input或者select的option
	父元素.parent();   $('li').parent();     如果要精准的选择某个元素，就需要在括号内再写选择标下，从此单元格开始往下雷同
	子元素.children(); $('li').children();
	后代选择器.find();     $('li').find();
	兄弟节点.sibling();   $('li').sibling();  除开自己意外的所有兄弟节点
	.prevtAll();   $('li').prevtAll();本元素之前的所有同级元素
	.nextAll();  $('li').nextAll();本元素之后的所有的同级元素
	.hasClass();  $('li').hasClass('icont');  检索元素是否含有.icon类，有则返回true，没有返回false
	.eq(n);   $('li').eq(n);  返回第n个li元素

二、属性操作

固有属性操作	element.prop('属性名')       获取元素对应属性名的属性值
	element.prop('属性名’，'值')      设置元素对应的属性名的值
自定义属性操作	element.attr('自定义属性名')   获取元素对应自定义属性名的属性值
	element.attr('属性名’，'值')      设置元素自定义属性名和值
数据缓存    （所有的值都是暂时的，页面刷新就没有了）	element.Date('name',value)    存储一个名为name的value给到元素内存里。也可以获取thml5中的data-index,得到的是数字型。
	element.Date('name')    获取一个名为name的value给到元素内存里。
文本属性	element.html（）；   相当于js中的  innerHtml();
	element.text();      相当于js中的innertext（）；
	elemet.val();   表单中的值获取和添加

三、样式操作 

操作类	element.removeClass('icon');   移除类
	element.addClass('icon');      增加类
	element.toggleClass('icon')     切换类   有就删除  没有就增加
操作css样式	单个样式设置操作    css（‘color’，‘red’）
	获取样式属性值     cass（‘color’）    只写属性即可
	多样式操作  css({     color : 'red',      'background-color' : 'blue',         'z-index' : 2;         position : 'relative' });

 四、元素操作

遍历元素
	遍历元素  element。each（function（i，event）{    元素操作           //i是索引号    event 是每个索引号下的元素 }）
	遍历对象和数组   $.each(arry/obf, function(i,event){         操作    //  i是数组元素的索引号  event是索引号对应的数组元素   对对象而言，i是对象的属性  event 是属性对应下的值。 })
创建元素	$('需要创建的元素及元素内容')   $（‘<li>可爱迷人的反派角色</li>)
增加元素	内部添加（添加的是子元素）	element.append('element/content');   从尾部开始添加
		element.prepend('element/content');  从头部开始添加
	外部添加（添加的是兄弟元素）	elemen.before(’element/content’）  往前开始添加同级元素
		element.affter('element/content')  往后开始添加同级元素
删除元素	element.remove();    删除匹配元素本身
	element.empty(); 删除适配元素的所有子节点
	element.html();  删除适配元素的内容

 

五、位置和尺寸操作

位置	offset（）     offset（）.left    offset().top      元素距离文档的偏移量和父元素无关
	position（）   position（）.left   position.top    距离有定位的父元素偏移量
	scrollTop（）   scrollLeft（）  元素被卷去的头部和做部分
尺寸	height（）；  width（）   元素content部分的宽高
	innerWidth();  innerHeight();   元素content   +padding  部分的宽高
	outerWidth（）；  outerHeight();  元素content+ padding +border部分的宽高
	outerWidth（true）；outerHeight（true）  元素content+padding+border+margin部分的宽高

 六、事件的监听和解绑

事件绑定
	多事件注册绑定element.on( 事件1：function（）{}， 事件2：function（）{}， …… )；	优点：1、可以进行多时间监听。 2、可以同个事件绑定相同事件处理 3、事件委派，可以监听动态创建元素
	单个事件注册  element.on('事件'，function（）{}）
	两个事件共用一个事件处理 element.on('事件1  事件2‘，function（）{})
	事件委托 element.on（‘事件',’委托的元素',function(){})
事件绑定one（）	one('事件‘，function（）{})     只能监听一次
事件的解绑	off（）  element.off()    如果参数为空，则解绑所有事件，否则写哪个事件就解绑哪个事件。
	解绑之间委托 .off('事件',‘委托元素’)

七、本地存储

localStorage.setItem('名','值')    本地存储的写入S	JOSN.stringify();转值为字符串对象
	JOSN.parse();转为数据对象
localStorage.getItem('名’);    本地存储的读取

 

八、多库共存 

用jQuery代替$的使用	jQuery('li');
$.onconflict();	var  s = $.onconflict();

 九、常用插件网站

jQuery插件库	http://www.jq22.com/
jQuery插件之家	jQuery之家-自由分享jQuery、html5、css3的插件库