什么是Jquery？
Jquery是一套javascript脚本库。
使用时需要先下载下来，并引用到项目中。
下载地址：http://jquery.com/download/
目前jquery分为 1.x 和 2.x两种版本， 2.x以上不再支持i8及以下浏览器。
Jquery语法
$(selector).action() 美元符开头 选择器名.执行的方法
jquery(document).read(function(){});//等同于load 文档加载完毕后运行的函数$(function(){});//简写
jquery对象与DOM对象
在DOM操作中，将一个按钮禁用
document.getElementById("btn").disabled=true;
上面执行了一个JavascriptDOM操作，如果这样使用jquery对象来调用DOM属性则会报错。
$("#btn").disabled=true;
解决办法：
1、可以使用jquery对象的attr方法实现
$("#btn").attr("disabled","true");
2、把Jquery对象转换成DOM对象
$("#btn")[0].disabled=true;
$("#btn").get(0).disabled=true;
使用$("").get(0) 或者$("")[0] 可以将jquery对象转换为DOM对象，然后再调用DOM的属性即可。
当然这只是操作一个元素，如果多个元素的话遍历集合，get(i)即可
$(":text").each(function(i){//$(this).get(i).disabled=true;//$(this).attr("disabled","true");});
同时也可以将DOM对象转换为jquery对象
varv = document.getElementById("btn");var$v = $(v);//使用$(dom);即可转换$v.attr("disabled","true");//然后使用jquery对象的attr方法即可
Jquery选择器
在DOM编程中，我们只能使用有限的函数根据id或者标签获得DOM对象。
在Jquery中，使用选择器可以获取页面上任意一个或一组对象。
$("#testId") 选取id为testId的元素 等同于document.getElementById("testId");
$符号在Jquery中代表对Jquery对象的引用。
$("#testId") 等同于 jquery("#testId");
选择器的种类
1、基础选择器
$("#divId") 选择id为divId的元素
$("p") 选择所有p标签
$(".red") 选择所有样式为red的元素
$("*") 选择所有元素
$("#divId , p , .red") 使用,逗号进行分割，然后拼成一个选择器，会同时选择这几个选择器。
2、层次选择器
$("#divId div") 选择id为divId 下的所有div
$("#divId>div") 选择id为divId 下的直接子节点div
$("#divId+div") 选择id为divId 的下一个同级div标签
$("#divId~div") 选择id为divId 的所有同级div标签
3、基本过滤器
$("tr:first") 选择表格的第一行
$("tr:last") 选择表格的最后一行
$("input:not(:checked)") 查找所有未选中的input元素
$("tr:even") 查找表格所有的偶数行 从0开始 2 4 6$("tr:odd") 查找表格所有的奇数行 1 3 5$("tr:eq(1)") 查找表格中的第二行 index从0开始
$("tr:gt(3)") 查找大于3的行
$("tr:lt(3)") 查找小于3的行
$(":header") 选择h1~h6的header标签
$(":animated") 选择所有动画元素
4、内容过滤器
$("div:contains('david')") 选择所有包含“david”的div元素
$("td:empty") 查找所有不为空的元素
$("div:has(p)") 查找所有包含p元素的div
$("td:parent") 查找含有子元素的td元素
5、可见性过滤器
$("tr:hidden") 查找所有不可见元素
$("tr:visible") 查找所有可见元素
6、属性过滤器
$("input[type]") 匹配所有包含type属性的input元素
$("input[name='sex']") 匹配所有name为sex的input元素
$("input[name!='sex']") 匹配所有name不等于sex的input元素
$("input[name^='ch']") 匹配所有name以ch开始的input元素
$("input[name$='t']") 匹配所有name以t结尾的input元素
$("input[name*='bai']") 匹配所有name包含‘bai’的input元素
$("input[name='sex'][type='checkbox']") 复合属性选择，匹配name为sex并且type为checkbox的input元素
7、子元素过滤器
$("ul li:nth-child(2)") 匹配ul的第2个子元素 从1开始 eq是0开始
$("ul li:first-child") 匹配第一个子元素
$("ul li:last-child") 匹配最后一个子元素
$("ul li:only-child") 查找ul中是唯一子元素的li
8、表单选择器
$(":input") 匹配所有input元素 包含select 、button、textarea、input。
$(":text") 匹配所有文本框
$(":passWord") 匹配所有密码框
$(":radio") 匹配所有单选按钮
$(":checkbox") 匹配所有复选框
$(":submit") 匹配所有提交按钮
$(":image") 匹配所有图像
$(":reset") 匹配所有重置按钮
$(":button") 匹配所有按钮
$(":file") 匹配所有文件域
9、表单过滤器
$("input:enabled") 所有可用的input元素
$("input:disabled") 所有不可用的input元素
$("input:checked") 所有选中的元素
$("select option:selected") 选中的下拉元素
操作元素
创建元素
在javascript中创建元素需要使用createElement，并且编写大量的js代码。
在jquery中创建元素使用 $(html代码) 来创建元素。
$("<a href="#">测试</a>") 这样就创建完毕了，然后指定需要添加到页面的位置即可。
$("<a href='#'>测试</a>").appendTo("body");//添加到body的末尾中
对应有一个append方法 $(位置).append(代码);
$("body").append("<span>abc</span>")
如果想创建到起始位置使用PRepend()方法
$("body").prepend("<h1>h1</h1>")//追加body中的 最前面
$("<h2>h2</h2>").prependTo("h1");//对应的prependTo()方法
插入元素
刚刚的操作都是添加到具体的标签中，可以添加到标签的前面和后面，在jquery中可以使用insertBefore()和insertAfter()插入到某个节点之前或之后。
//insertBefore$("<h3>h3</h3>").insertBefore("#deng");//插入到#deng上面//insertAfter$("<h4>h4</h4>").insertAfter("#deng");//#deng下面
也可以使用简写before()和after()，但更推荐上面的
//before$("#deng").before("<p>new</p>")//after 之后$("#deng").after("<p>new</p>")
删除元素
Jquery中删除元素有两种方法：empty()删除所有子节点、remove(selector) 筛选删除
//empty()$("body").empty();//清空body下的所有子节点//remove();$("p").remove();//把P都干掉$("a[href='#']").remove();//a href为#的全部删除
获取/修改属性
$("btn").attr("type");//获取type属性的值$("btn").attr("type","button");//设置type属性的值
操作样式
操作样式名：hasClass（是否存在）、removeClass（移除）、addClass（添加）、toggleClass（切换）
if($("#id").hasClass("red")){//hasClass 是否存在某样式名$("#id").removeClass("red");//removeClass 删除指定样式名}else{
$("#id").addClass("red");//addClass 添加指定样式名}
然后上面的这一系列判断 toggleClass自己可以完成
$("#btn").click(function(){
$("#id").toggleClass("red");//点一下添加 再点一下移除});
除了可以设置类名外还可以使用CSS()方法直接写入样式
//.css(样式名,值)$("div").css("height","100px").css("width","200px").css("border","1px solid #ccc");//.css({对象})$("div").css({
height:"200px",
width:"200px",
border:"2px solid #ccc"});
获得内容
text()、html()、val()
$("p").text();//获得或设置元素文本内容$("p").html();//获取或设置元素的内容包含html标记$("input").val();//设置或获取表单字段的值
操作尺寸
$("div").width();//获得或设置宽度$("div").height();//获得或设置高度$("div").innerWidth();//返回宽度 包含内边距$("div").innerHeight();//返回高度 包含内边距$("div").outerWidth();//返回宽度 包含内边距及边框$("div").outerHeight();//返回高度 包含内边距及边框
Jquery遍历
map循环
用于遍历一个数组，并且根据需要返回一个新数组。
语法：$.map(array,function(value,index){return value});
vararr=["a","b","c","d","e"];varnewArr = $.map(arr,function(value,index){//console.log(index+","+value); //索引 值returnvalue + "," +index;
});
console.log(newArr.length);//5 得到一个新数组
例：将一个数组中 大于3的数 翻三倍
vararr=[12,2,3,5,4];varnewArr = $.map(arr,function(value,index){if(value>3)
{returnvalue * 3;
}
});for(varitem = 0;item < newArr.length;item++)
{
console.log(newArr[item]);
}
each循环
遍历对象或数组，不返回内容。
语法：each(function(i){ return false;//结束遍历});
console.clear();varo = {name:"daviad",age:18,sex:"男"};
$.each(o,function(index,value){
console.log(index+ "," +value);returnfalse;//使用return false 停止循环});//name,daviad//age,18//sex,男
each()方法
console.clear();
$("a").each(function(i){//遍历所有a标签 打印所有href属性console.log($(this).attr("href"));
});
对应选择器的一些方法
$("td").parent();//返回直接父元素$("td").parents();//返回所有父元素及祖父元素$("td").parentsUnitl("tr");//返回td到tr的元素$("ul").children();//ul下的子节点$("div").find("p")//查找div下的所有p$("div").siblings()//除了自己所有同级元素$("div").next()//查找div同级下一个div 同胞元素$("div").nextAll()//查找div后的所有div$("div").prev()//div同级上一个div 同胞元素$("div").prevAll()//div同级上所有$("ul li").first()//第一个$("ul li").last()//最后一个$("ul li").eq(1)//第二个 从0开始$("p").filter(".cc")//p中没有cc类名的 全部过滤掉$("p").not(".cc")//p中不带cc类名的元素