1.简介

jquery是js的框架，利用了选择器(借鉴了css的选择器)查找要操作的dom节点(dom对象)，将dom节点对象封装成jquery对象，调用jquery提供的方法或者属性操作dom节点。

目的: 1.简化代码 2.解决了兼容性问题

2.编程步骤

1.引入jquery.js文件<script src=""></script>
2.使用juqery提供的选择器查找节点，var $obj = $("#id")
3.调用jquery提供的属性或方法，操作该节点 $obj.css();

3.dom节点对象转成jquery对象

$(dom对象)

4.jquery对象转成dom对象

a.$(obj).get()[0]
b.$(obj).get(0)
c.$(obj)[0]

5.基本选择器

#id:id选择器
element:元素选择器
.class:类选择器
*:匹配所有元素
select1,select2...:组合选择器

6.查看dom节点数据

html(); 等同于 innerHTML
text(); innerText
val();  value
attr(); 获取dom节点属性值 attr("value")  attr("value","jack")
prop(); 获取dom节点属性值
​
若是自定义的属性，建议使用attr
若是标签自带的属性，建议使用prop

7.dom节点的操作

创建dom节点:$("标签") 比如:$("<span class=''>span-txt</span>")
a.添加
append(); 内部追加
prepend();内部前置
after();追加兄弟节点
before();前置兄弟节点
​
b.删除
remove();  $("#d1").remove();
remove(选择器);  $("#u1").remove("#li2");
empty();
​
c.复制
clone(); 只复制节点，不复制行为
clone(true); 复制节点，也复制行为

8.样式操作

attr("class","");   
addClass("");添加样式
removeClass("");移除样式
toggleClass("s1");样式切换
​
​
.s1{
  backgroud-color:red;
}

9.遍历节点

children();只考虑子元素，不考虑其他后代元素
next();下一个兄弟
prev();上一个兄弟
siblings();查找所有的兄弟节点

10.事件处理

a.事件绑定
  $obj.bind(事件类型，function(){});
  $obj.click(function(){});
  <a onclick=""></a>
b.合成事件
 $obj.hover(f1,f2);

11.动画

show("slow/fast/normal/1000");显示
hide();隐藏
fadeIn()/fadeOut();//改变元素的透明度实现隐藏 显示的效果
slideDown()/slideUp();//改变元素的高度实现隐藏 显示的效果
animate()；//自定义动画效果

12.jquery操作数组的方法

$(obj).each(function(index,obj){});//$(obj)-->jquery对象，返回的是数组
index：当前遍历的下表
obj:当前遍历的对象[是一个dom对象]   jquer对象还是dom对象??? 
​
1.length：数组长度
2.get(index)-->返回index下标所对应的元素--->dom对象
3.eq(index)-->返回index下标所对应的元素--->jquery对象
4.index(obj)-->返回obj对象的下标，可以传dom对象也可以传jquery对象

13.jquery对ajax的支持

json语法:{"属性名":属性值,"属性名":属性值}
get请求:list.do?page=1
post请求:send(page=1)
​
$.ajax({
    "url":"请求地址"，//list.do
    "type":"请求方式",//get[缺省值]/post
    "data":"请求参数",//"page=1&pageSize=2"/{"page":1,"pageSize":2}
    "dataType":"服务器返回的数据类型",//json,xml,js,text,html
    "success":function(data,txt){
         //data：服务器返回的数据,如果返回的数据类型是json，此处data已经被jquery转成js对象
        //txt:状态描述信息
    }
    "error":function(xhr,txt){
        //xhr：ajax对象
        //txt:状态描述信息
    }
    
});
​
​
简写:
$.get(url,[data],[callback],[type]);
url：请求地址
data:请求参数，可以是字符串拼接也可以是json格式的js对象
callback:成功的回调函数
type:服务器返回的数据类型
​
$.post(url,[data],[callback],[type]);
​

14.$obj.load();

$obj.load(url,[data],[callback]);
dom节点对象调用load方法，载入远程数据，插入到dom节点。

更多推荐

jQuery(详解)