图片1.png
选择器
1.格式
$("div").css("样式");
$(".box").css("样式");
$("#box").css("样式");
例如：
$("div").css({"width":"100px","height":100,"
background":"red"});（设置样式）
2.得到样式
$(".box").css("width")
3.语法
如果只想设置一个样式，逗号隔开
$("选择器").css("backgroundColor","blue");
如果想设置很多样式，就写JSON对象
$("选择器").css(JSON);
$("div").css({"width":"100px","height":100,"
background":"red"})
还支持+=写法
$("p:eq(5)").css("width","+=20px");
动画问题animate
jQuery内部含有一个运动框架，特别牛逼！
$("选择器").animate(终点JSON,动画时间,回调函数);
$(".box").animate({"left":900},4000,function(){
alert("运动完成")
})；
批量添加监听、节点关系
1$(".circles ol li").mouseenter(function(){
//自己变红，自己的兄弟恢复为橙色
$(this).css("background-color","red").siblings().css("background-color","orange");
});
siblings()表示兄弟节点
$()函数
1.原生对象问题
【注意】选择出来的东西，是一个类数组对象，是jQuery自己的对象，这个jQuery对象后面不能跟着原生JS的语法：
$("#box").style.backgroundColor = "red";（不能实现）
因为.style.backgroundColor是原生JS语法，$()原则的对象是jQuery对象，不能跟着原生。
所以，如果想把jQuery对象，转为原生JS对象，要加[0]就行了：
$("#box")[0].style.backgroundColor = "red";
2.引号问题
$("选择器")
【注意】引号不能丢，在jQuery世界中，只有三个东西不能加引号，其他必须加引号！！！
$(this)
$(document)
$(window)
3.筛选器
$("p") 所有的p
$("p:first") 第一个p
$("p:last") 最后一个p
$("p:eq(3)") 下标为3的p
$("p:lt(3)") 下标小于3的p
$("p:gt(3)") 下标大于3的p
$("p:odd") 下标是奇数的p
$("p:even") 下标是偶数的p
事件监听
jQuery颠覆了我们的行文习惯：
$(".box1").click(function(){
//点击box1之后做的事情
});
事件名一律不写on。特别的，鼠标进入改成了mouseenter，鼠标离开改为了mouseleave。
jQuery实现
1.拖拽
实现拖拽要用的就是jQueryUI这个插件，这是一个官方插件，用来实现：
Draggable： 拖拽
Droppable： 拖放
Resizable：改变尺寸
Selectable： 可选择
Sortable：可排序
插件的意思是，我这个插件包依赖你的
jQuery：
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
一条语句能实现拖拽：
$("div").draggable();
重要的参数，参数都以用JSON来配置
$("div").draggable(JSON);
文档：
[http://api.jqueryui.com/](http://api.jqueryui.com/)
$("p").draggable({
axis: "x", //约束在某个轴上
containment: "parent", //在父盒子中拖拽
grid : [100], //步长
drag : function(event, ui){ //事件，值就是ui.position.top
console.log(ui.position.left,ui.position.top);
}
});
窗口的卷动事件
$(document).scroll(function()
{
var iTop = $(document).scrollTop();
$("div").animate({"top":iTop+200},70);
})
