jQuery框架

一、优势

1、隐式迭代。
当用jQuery 找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回的元素。相反，jQuery 里的方法都被设计成自动操作对象集合，这使得大量的循环结构变得不再必要，从而大量的减少了代码量。
2、链式操作方式。
jQuery 最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作，可以直接连写而无需重复获取对象。
3、可靠地事件处理机制。
jQuery的事件处理机制吸收了Javascript事件处理函数的精华，使jQuery在处理事件绑定的时候相当可靠。
4、强大的选择器。
jQuery支持CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。

二、jQuery选择器

1、基本选择器

$("#btn");
$(".btn");
$("btn");
$("*");

2、层次选择器

$("ul li");
$("ul>li");
$(".li3+li");//相邻的；
$(".li3~li");// 匹配.li3之后的所有兄弟元素；

3、过滤选择器
（1）简单过滤

$("ul>li : first");
$("ul>li:last");
$("ul>li:even");//获取所有索引值为偶数的元素
$("ul>li:odd");//获取所有索引值为奇数的元素
$("ul>li:gt(1)");获取所有大于指定索引值的元素
$("ul>li:lt(1)");获取所有小于指定索引值的元素
$("ul>li:eq(2)");//获取指定索引值的元素
$("ul>li:not(.li3)");

（2）内容过滤

$("li:contains('2')")；//获取包含给定文本的元素
$("div:empty")；//获取文本的空元素
$("div:parent")；//获取含有子元素的文本
$("div:has('span')")；//获取含有匹配器所匹配元素的元素；

（3）可见性过滤选择器

$(".btninput:visible")；//选择所有可见元素
$(".btninput:hidden")；//选择所有不可见元素

（4）属性过滤选择器

$("button[id][class]")；
$("button[id='btn'][class='btn1']")；

（5）子元素过滤选择器

$("ul>li:nth-child(2)")；
$("ul>li:first-child")；
$("ul>li:last-child")；
$("div>p:only-child")；

（6）表单元素属性过滤

$("input[type='checkbox']:enabled")；//选取所有可用元素
$("input[type='radio']:checked")；//选择所有被选中的元素
$("#sel").change(function (){
console.log($("#sel>option:selected"));//在下拉框中选取被选中的元素
});

三、DOM元素的基本操作

一、操作元素属性
1、 attr设置
2、 prop获取（几乎所有属性值都可以拿到）
3、 一次设置多个属性

.arr({
	width:”100px”，
	value:”你好”，
})

4、 获取值只能一个一个获取。
5、 删除元素属性

.removeAttr();
.removeProp();

移除的是自定义属性，不能移除原属性
二、元素内容的操作
Js 中使用的是innerHTML innerText;
(当前元素的html)（当前元素的文本值）
Jquery中html();text();
三、操作表单元素的value值 (获取或设置表单元素的值)

val() ;//不带参获取，带参设置

四、操作dom元素的css

css();获取或设置元素的样式
css(“属性”,”属性值”)；设置
css(“属性”)；获取（获取到的都是rgb值）

//同时设置多个属性

.css({
	
})

五、类名称的追加

AddClass(1 2 3);
removeClass(1 2 3);移除类名称
removeClass();全部移除；

类的切换

togggleClass();//移除原有的，或添加新的

六、jquery操作子父节点的问题

.children()[index]；找父元素里面的子节点
eq（index）;根据索引找元素
.first();
.last();
.first().siblings(e);同胞兄弟元素；
.prev(e);前一个元素;
.prevAll(e);前面的所有
.next(e);前一个元素
.nextAll(e);前面的所有
filter();过滤元素  把一个元素从一堆中选出来
is();判断当前对象是谁//返回true和false

六、jquery里面的尺寸问题

$(window).width() 可视区域
$(window).innerWidth()包括内间距
$(window).outerWidth()包括内间距和边框