一、jQuery的概述
1.什么是jQuery？
jQuery （javaScriptQuery）JavaScript 代码库；官方网站：http://jquery.com/。
2.jQuery的特点：
1）选择器功能强；
2）操作简单；
3）浏览器兼容功能强；
4）动画效果强；
3.jQuery的版本：
1）x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)；
2）x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)；
3）x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。
4.认识jQuery的$：
（1）“$”的作用：
1）相当于window.onload=function(){ }；
2）功能比window.onload更强大：
window onload一个页面只能写一个,但是可以写多个$() 而不冲突；
window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等）；
3）完整形式是$(document).ready(…….)；
4）$(selector)：选择器，jQuery具有强大的选择器功能。
二、jQuery的选择器
1.对象之间的转换：
1）DOM对象转换成jQuery对象：$(DOM对象)。
2）jQuery对象转换成DOM对象：jQuery对象[index]。
2.基本选择器：
1）标签选择器 $(“a”)；
2）ID选择器 $(“#id”) $(“p#id”)；
3）类选择器 $(“.class”) $(“h2.class”)；
4）通配选择器 $("*")；
（1）html()和val()方法之间的区别
1）html()是用来读取元素的HTML内容（包括其Html标签）， 对应js中的innerHTML；
2）val()是用来读取表单元素的"value"值；
3）text()用来读取元素的纯文本内容，包括其后代元素 对应js中的innerText text()方法不能使用在表单元素上；
3.后代选择器和父子选择器：
（1）两者的区别：
1）ancestor descendant：后代选择器可以选择作为某个元素后代的元素；
2）parent > child：父子选择器只能选择作为某个元素直系子元素的元素。
（2）prev + next：
匹配所有紧接在 prev 元素后的 next 元素。
（3）prev ~ siblings：
匹配 prev 元素之后的所有 siblings 元素。
4.表单选择器：
（1）div：first：获取第一个元素；
（2）:last()：获取最后个元素；
（3）:even()：匹配所有索引值为偶数的元素，从 0 开始计数；
（4）：odd：匹配所有索引值为奇数的元素，从 0 开始计数；
（5）:lt(index)：匹配所有小于给定索引值的元素；
（6）:gt(index)：匹配所有大于给定索引值的元素；
5.属性选择器：
（1）type属性等于text：$("input[type=text]")；
（2） name属性用z开头的：$("input[name^=z]")；
（3）name属性同d结尾的：$("input[name$=d]")；
（4）name属性中包含p 的元素：$("input[name*=p]"；
（5）复合属性选择器，需要同时满足多个条件时使用：$("input[type=text][name^=z]")；
（6）获得form表单中的所有的表单项：var inp= $(":input")；
（7）获得标签名称是input 的所有的标签对象：$("input")；
（8） input标签 type属性等于text所对应的对象：$(":text")；
（9）获得含有checked属性的对象：$("input:checked")；
三、jQuery操作样式
1.获得css样式的方式：
（1）获得div对象：var div =$("#div1")；
（2）获得css样式：
var wid=div.css("width")；
var hi=div.css("height")；
var bg=div.css("backgroundColor")；
2.操作css样式的方式：
（1）方式一：
通过键值对：div.css({key1:value1,key2:value2})；
（2）方式二：
通过添加类的方式添加css样式：$("ID").addClass("div")；
四、jQuery操作元素的属性
1.获得元素属性值：
（1）获取元素对象：var tex=$("#ID")；
（2）获得元素对象的属性：
var te=tex.attr("type");
var cl =tex.attr("class");
（3）获得元素固有的属性值：var val =tex.attr("value");
（4）获得文本框实时输入的值：var val2=tex.val();
2.操作元素的属性：
（1）attr(属性名|键,值)：设置或返回被选元素的属性值。
（2）removeAttr(name)：从每一个匹配的元素中删除一个属性；
（3）prop(属性名|键,值)：获取在匹配的元素集中的第一个元素的属性值。
3.jQuery操作文本和值:
（1）html(val|function(index, html))：取得第一个匹配元素的html内容；可以识别里面的html代码。
（2）text(val|function(index, html))：取得所有匹配元素的内容；识别不了里面的HTML代码。
（3）val（val/function(index, value)）：获得匹配元素的当前值；获得文本的值。
（4）没有参数时获得元素对象的内容；有参数时操作元素对象的内容。
网友评论