Jquery框架是一个轻量级的JavaScript库，核心是JavaScript，该框架不仅兼容了css3还兼容各种浏览器（ie，firefox，chrome等）；使用jquery可以让代码写的少，但是可以做的多。
为什么引入jquery框架：
最初开发人员使用JavaScript+DHTM进行编程，传统的客户端编程，使得开发有冗长的代码，并且为了兼容不同浏览器要编写很多额外的代码来处理兼容性问题。而jquery的引入，可以让代码变得简练，节省了开发时间，还可以兼容多种浏览器。
Jquery的优势：
1、 容易上手。 2、拥有强大的选择器。 3、解决浏览器兼容。
4、完善的事件机制。 5、出色的Ajax封装 6、丰富的UI。
Jquery环境的搭建：
因为jQuery是一个JavaScript的脚本库，所有不需要特别的安装，我们要在页面<head></head>标签中，通过script标签引入jQuery库就可以使用了。
引入jQuery框架的语句如下：黄色处可以改变
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
jQuery的版本：
jQuery有两个系列版本：1.x和2.x
2.x：不再兼容ie6，7，8浏览器，目的是为了兼容移动端开发，由于减少了一些代码，使得该版本比jQuery1.x更小更快。
1.9以前：在意老版本IE用户的使用；
注意：jQuery每个系列版本又分为压缩版和开发版；
开发版：在开发过程中使用该版本，因为开发版便于代码修改和调试。
压缩版：项目上线发布时使用该版本，因为压缩版体积更小，效率更快。
验证jQuery是否引入成功？
在body键入：
<script type=”text/javaScript”>alert($)</script>
如果弹出下面的样式，即证明引入成功：
DOM对象和jQuery对象：
通过原生DOM提供的类似document.getElementById();等方法获取的DOM元素就是DOM对象。
通过标准的JavaScript操作DOM和jQuery操作DOM对比，发现：
1、通过jQuery方法包装后的对象，是一个类数组对象。他和DOM对象完全不一样，唯一相似的是它们都能操作DOM。
2、通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑 的开发，而不需要我们具体知道DOM节点的那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码更加精短。
jQuery库本质上是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，他们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。
jQuery对象转化为DOM对象：
方法一：利用数组下方方式获取。
Var $div=$(‘div’);//jQuery对象
Var div=$div[0];//转换为DOM对象
div.style.color=’red’;//操作DOM对象的属性
方法二：利用jQuery自带的get（）方法,本质就是利用第一种方法，只是包装起来了。
Var $div=$(‘div’);//jQuery对象
Var div=$div.get(0);//转换为DOM对象
div.style.color=’red’;//操作DOM对象的属性
DOM对象转化为jQuery对象：$(参数)是一个多功能的方法，通过传递不同的参数产生不同的作用；如果传递给$(DOM)函数的参数是一个DOM对象，jQuery就把这个DOM对象给包装成一个新的jQuery对象。
例子：var div=document.getElementsByTagName(‘div’);//DOM对象
Var $div=$(div);//jQuery对象
Var $first=$div.first();//找到第一个div对象
在开发过程中，相较于jQuery转化为DOM，开发中更多情况是把一个dom对象加工成jQuery对象，这样就可以方便的调用jQuery封装的方法了。
jQuery选择器
一个用来查找的ID，即元素的id属性；$(“#id”)
Id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。
注意：id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配的了相同的id，将只匹配id选择集合的第一个DOM元素；但这种行为不应该发生；有超过一个元素的页面使用相同的id是无效的。
2、类选择器
即通过class样式类名获取节点；$(“.class”);
类选择器相对于id选择器来说，效率会相对低一点，但是优势是可以多选。
jQuery内部使用JavaScript函数document.getElementsByName()来处理class的获取。并且把循环处理也封装了；
3、元素选择器
即根据给定的html标签名称选择所有元素；$(“element”);
jQuery内部使用JavaScript函数document.getElementsByTagName()来处理。
4、全选择器（*选择器）
jQuery中可以通过传递*选择器选中文档中的元素。
$(“*”); 相当于在css中写的*{。。。。。。}
小贴士：
Id，class，tag都可以通过原生的方法获取到对应的节点，但是使用原生态的方法，要考虑一个兼容问题：（jQuery为前端开发省了很多功夫）
A、ie会将注释节点实现为元素，所以ie中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的。、
B、getElementById的参数在ie8及较低的版本中不区分大小写；
C、ie7及较低版本中，表单元素中，如果表单A的name属性名用了另一个元素B的id名并且A在B之前，那么getElementById会选中A。
D、ie8及较低版本，浏览器不支持getElementsByClassName；
5、层级选择器
层级选择器的区别：
层级选择器之间的相似处和不同点：
A、层级选择器都要由一个参考节点
B、后代选择器包含子选择器的选择的内容
C、一般兄弟选择器包含相邻兄弟选择的内容
D、相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下。
6、基本筛选选择器
筛选选择器很多都不是css的规范，而是jQuery自己为了开发者的便利延展出来的选择器。
筛选选择器的用法与css的伪元素相似，选择器用“:”开头；
注意使用方法：
$(“.类名：first”)
或$(“#id:last”);等
7、内容选择器
基本筛选选择器，都是针对元素的dom节点，如果要通过内容过滤，jQuery提供了一组内容筛选选择器。
注意：
A、：contains与：has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素。
B、如果：contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
C、：parent与：empty是相反的，两者所涉及的子元素包含文本节点。
使用方法：
如：$(“.div:contains(‘:contains’)”);
$(“.div:has(span)”);
$(“a:parent”); //选中有内容的a标签
$(“a:empty”); //选中没有包含内容 的a标签
8、可见性筛选选择器
jQuery扩展方法
元素有显示状态和隐式状态，
$(“:visible”) //选择所有显示的元素
$(“:hidden”) //选择所有隐藏的元素
隐藏一个元素的几种方法：
Cssdisplay的值设置为none‘
Type=“hidden”的表单元素
宽度和高度都显示设置为0；
一个祖先元素是隐藏的，该元素是不会在页面上显示的
Cssvisibility的值是hidden
Cssopacity的值为0；
元素的visibility：hidden和opacity：0 都被认为是可见的，因为他们仍然占用空间。
使用方法：$(“#div1:visible”);等，div1有显示元素则返回true
9、属性筛选选择器
可以基于一个属性来定位一个元素，可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位。
使用注意：
$(‘元素[属性|=值]’)；
10、子元素筛选选择器
不常用（后两个n是从一开始的）
使用方法：$(‘.类名 标签：nth-child（2）’)
11、表单元素选择器
无论是提交还是传递数据，表单在动态交互页面的作用是非常重要的，jQuery中专门封装的了表单选择器。
除了input筛选选择器，几乎所有表单类别筛选器都对应一个input元素的type值，而且大部分表单类别筛选器都可以使用属性筛选器来替换
如$(‘:password’)==$(‘[type=password]’)
注意使用方法：
如：$(‘:input’) $(‘input:text’)
12、表单对象属性筛选选择器
使用方法：$(‘input:enabled’);或 $(‘option:selected’);;
有的浏览器:checked会错选<option>元素，所有$(‘input:checked’);保险
13、特殊选择器this
$(this)和this
（1）this在JavaScript中：this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法和属性的所有者。
例子：
Var immoc={
Name:”aaa”;
getName:function(){
return this.name;//这个this指向该方法所属的对象。Immoc
}
}
（2）在DOM中：this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用；
例子：给一个元素p绑定一个事件。
p．addEventListener（’click’,function(){
this.style.color=”red”;
p.sytle.color=”red”; this指代的就是p元素
},false）
这样操作不是很方便，因为要处理兼容问题
做法：
$(‘p’).click(function(){
var $this=$(this);
$this.css(‘color’,’red’);
});
也就是this，表示当前上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jQuery的上下文对象，可以调用jQuery的方法和属性值。
jQuery的属性与样式
一、.attr（）与.removeAttr()
这两个方法代替了DOM中操作特性的方法：getAttribute()，setAttribute()，removeAttribute()；这三个方法，并且解决的浏览器兼容问题；
attr() ：该方法用来获取和设置属性；
attr（属性名）：用来获取属性值
attr（属性名，属性值）：用来设置属性值
attr（属性名，函数值）：设置属性的函数值
attr（属性名：属性值，属性名1：属性值）：给指定元素设置多个属性值。
removeAttr（）：删除属性方法
.removeAttr(属性名)：为匹配的元素中 的每一个元素移除一个属性；
这两个方法的优点：
attr（）和removeAttr（）方法都是jQuery为了属性操作封装的，直接在一个jQuery对象上调用该方法，很容易对属性进行操作，还可以很好的处理浏览器兼容问题；
注意：
DOM中的两个概念：Attribute和Property属性
Attribute指的是DOM节点自带的属性，如html中常用到的id，class，title，align等。
Property指的是这个DOM元素作为对象，其附加的内容，如TagName，nodeName，defaultChecked，defaultSelected等，这些属性要使用.prop()方法进行取值或赋值。
总结：获取Attribute需要使用attr（）方法，而获取Property要使用prop（）方法。
二、html（）和.text()
.html()方法：
含义：获取集合中第一个匹配的html内容或设置每一个匹配元素的html内容，具体方法：
1、.html（）不传入值，就是获取集合中第一个匹配元素是html内容，得到是文档内容。
2、.html(htmlString)设置每一个匹配元素的html内容
3、.html（function（index，oldhtml））用来返回设置html内容的一个函数。
注意：
.html（）方法内容是使用DOM的innerHTML属性处理的，所以这个操作是针对整个html内容，而不仅仅是文本内容。
.text()方法
含义：得到匹配元素集合中每个元素的文本内容，包含他们的后代，或设置匹配元素集合中每个元素文本内容为指定的文本内容。
方法：
1、.text（）：不传值，得到匹配元素集合中每个元素的合并文本，包含他们的后代，得到的是文本内容。
2、.text（textString）:用于色绘制匹配元素内容的文本
3、.text（function（index,text））:用来返回设置文本内容的一个函数。
注意：.text()结果返回一个字符串，包含所有匹配元素的合并文本。
.html和.text的相同点与不同点：
1、.html与.text的方法操作是一样的，只是针对的处理对象不同。
2、.html处理的是元素内容，.text处理的是文本内容。
3、.html只能使用在html文档中，.text在xml和html文档中都能使用。
4、如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的。
5、火狐不支持innerText属性，用了textContent属性，.text()方法综合了两个属性的支持，所以可以兼容所有浏览器。
三、.val()函数
含义：该方法主要用于处理表单元素的值，如input，select，textarea等
.val():无参数，获取匹配的元素集合中第一个元素的当前值。
.val(value):设置匹配的元素集合中每个元素的值。
.val(function):一个用来返回设置值的函数。
注意：
1、通过.val()处理select元素，当没有选择项被选中，它返回null
2、.val()方法多用来设置表单的字段值。
3、如果select元素有multiple（多选）属性，并且至少一个选择项被选中，.val()方法返回一个数组，这个数组包含每个选中选项的值。
.html(),.text(),.val()的差异总结：
1、.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html（）是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的“value”值。其中.html()和.text()方法不能使用在表单元素上时，而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只能读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上，只能读取第一个表单元素的value值，但是.text（）和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2、.html（htmlString），.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换选中元素的内容。
3、.html(),.text(),.val()都可以 使用回调函数的返回值来动态的改变多个元素的内容。
四、添加样式.addClass()
通过动态的改变类名（class），可以让其修改元素呈现出不同的效果，在html结构中里，多个class是以空格分隔的，当一个标签，含有多个class时，DOM元素响应的ClassName属性获取的不是class名称的属性的数组而是含有空格的字符串，为了解决这个麻烦，jQuery封装了.addClass()方法，用于动态的增加class类名。
.addClass(类名) 方法
1、.addClass(类名)：为每个匹配元素所要增加的一个或多个样式
2、.addClass(function(index,当前类名))：这个函数返回一个或更多用于空格隔开的要增加的样式名。
注意：.addClass()方法不会替换一个样式类名，它只是简单的增加一个样式名到元素上。
五、删除样式 .removeClass()
从匹配的元素中删除全部或者指定的class
1、.removeClass([类名])：每个匹配元素移除一个或多个用空格隔开的样式名。
2、.removeClass(function(index,class)):一个函数，返回一个或多个将要被移除的样式名。
注意：如果一个样式类名作为一个参数，只有这个样式类会从匹配的元素集合中删除。如果没有样式名作为参数，那么所有样式类将被移除。
六、切换样式 .toggleClass()
该方法 的由来：
在做某些效果时，可能针对同一个元素的某个样式要不断的切换，也就是addClass与removeClass的互斥切换，如隔行换色。
该方法一次执行相当于
addClass，再次执行相当于removeClass、
.toggleClass()方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式，取决于这个样式类是否存在。即，如果存在就删除一个类，如果不存在就添加一个类。
方法：
1、.toggleClass(类名)：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。
2、.toggleClass(类名，switch):一个布尔值，用于判断样式是否应该被添加或移除。
3、.toggleClass([switch]):一个用来判断样式类添加还是删除的布尔值。
4、.toggleClass(function(index,class,switch)[.switch]):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数，接收元素的索引位置和元素旧的样式作为参数。
七、样式操作.css()
引出：通过JavaScript获取DOM元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中可是.css（）方法就可以动态的修改style属性了。
.css()方法：获取元素样式属性的计算值或者设置元素的css属性。
获取：
1、.css(propertyName):获取匹配的元素集合中的第一个颜色的样式属性的计算值；
2、.css(propertyName):传递一组数组，返回一个对象结果。
设置：
1、.css(propertyName,value):设置css
2、.css(propertyName,function):可以传入一个回调函数，返回取到对应的值进行处理。
3、.css(properties):可以传一个对象，同时设置多个样式。
注意：
1、浏览器属性获取方式不同，在获取某些值的时候，jQuery采用统一 的处理，如颜色采用rbg，尺寸采用px
2、.css()方法支持驼峰写法与大小写混合搭配的写法，内部做了容错处理。
3、当一个数只被作为值（value）的时候，jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如.css(“width”,50)与.css(“widht”,”50px”)是一样的效果
4、.css({‘属性名‘：‘属性值‘，‘属性名’：‘属性值’});
八、.css()方法和.addClass()方法区别？
1、可维护性：.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式，通过.addClass()我们可以批量的给相同的元素设置统一规则，动起来比较方便，可以统一的修改删除，如果通过.css()方法就需要指定每一个元素一一修改，日后维护也要一一的修改，比较麻烦。
2、灵活性：通过.css()方法可以动态的去修改一个样式的属性，不需要频繁的定义class类的规则，一般来说在不确定开始布局规则，通过动态生成的html代码结构中，都是通过.css()方法处理的。
3、样式值：.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性值，.css()可以获取指定的样式值。
4、样式的优先级：css的样式是有优先级，当外部样式，内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下：
外部样式<内部样式<内联样式
.addClass（）方法是通过增加ｃｌａｓｓ名的方式，那么这个样式是在外部文件或者内部样式中先定义好的。等需要的时候在附加到元素上。
而．ｃｓｓ（）方法处理的是内联样式，直接通过元素的ｓｔｙｌｅ属性附加到元素上。
所有通过．ｃｓｓ（）设置的样式属性优先级高于．ａｄｄＣｌａｓｓ方法。
总结：
．ａｄｄＣｌａｓｓ（）与．ｃｓｓ方法各有利弊，一般是静态结构，都确定了布局的规则，可以使用ａｄｄClass的方法，增加统一的类规则，如果是动态的ｈｔｍｌ结构，在不确定规则，或者经常变化的情况下，一般多考虑．ｃｓｓ（）方式。
扫一扫
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
