jQuery

图片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);
        })