jQuery学习知识总结（一）

目录

一、选择器

二、事件

三、隐藏与显示

四、淡入淡出

五、滑动

六、动画

七、jQuery与HTML

1、获取内容与属性

2、添加元素

3、删除元素

八、jQuery与CSS

九、jQuery 尺寸

---

一、选择器

（1）元素选择器：$("p")
（2）id选择器：$("#box1")
（3）类选择器：$(".box2")

---

二、事件

• 单击：click()

$("p").click(function(){
    alert("hello");
});

• 双击：dblclick()

$("p").dblclick(function(){
    alert("Hello, dblclick");
});

• 鼠标穿过：mouseenter()

$("p").mouseenter(function(){
    alert("Hello, mouseenter");
});

• 鼠标离开：mouseleave()

$("p").mouseleave(function(){
    alert("Hello, mouseleave");
});

• 鼠标在元素上方，并按下鼠标键：mousedown()

$("p").mousedown(function(){
    alert("Hello, mousedown");
});

• 在元素上松开鼠标按钮：mouseup()

$("p").mouseup(function(){
    alert("Hello, mouseup");
});

• 鼠标悬停：hover()

$("p").hover(function(){
    alert("Hello, hover");
});

• 当元素获取焦点时：focus()

$("#inp").focus(function(){
    alert("Hello, focus");
});

• 当元素失去焦点时：blur()

$("#inp").blur(function(){
    alert("Hello, blur");
});

---

三、隐藏与显示

• 隐藏：hide()

$("#btn").click(function(){
    $("p").hide();
    //$("p").hide(speed,callback);
});

• 显示：show()

$("#btn").click(function(){
    $("p").show();
    //$("p").show(speed, callback);
});

• 隐藏与显示切换：toggle()

$("#btn").click(function(){
    $("p").toggle();
    //$("p").toggle(speed, callback);
});

speed:slow、fast、毫秒，callback:隐藏或显示之后执行的函数名称

---

四、淡入淡出

• 淡入（隐藏到可见）：fadeIn()

div{
    display:none;
}

$("#btn").click(function(){
    $("div").fadeIn();
    //$("div").fadeIn(speed, callback);
});

• 淡出（可见到隐藏）：fadeout()

$("#btn").click(function(){
    $("div").fadeout();
    //$("div").fadeOut(speed, callback);
});

• 淡入淡出切换：fadeToggle()

$("#btn").click(function(){
    $("div").fadeToggle();
    //$("div").fadeToggle(speed, callback);
});

• 把被选元素逐渐改变至给定的不透明度

$("#btn").click(function(){
    $("div").fadeTo("slow",0.15);
    //$("div").fadeTo(speed,opacity,callback);
});

---

五、滑动

• 向下滑动：slideDown()

div{
    display:none;
}


$("#btn").click(function(){
    $("div").slideDown();
    //$("div").slideDown(speed, callback);
});

• 向上滑动：slideUp()

$("#btn").click(function(){
    $("div").slideUp();
    //$("div").slideUp(speed, callback);
});

• 向上向下滑动切换：slideToggle()

$("#btn").click(function(){
    $("div").slideToggle();
    //$("div").slideToggle(speed, callback);
});

六、动画

• 创建自定义动画：animate()

div{
    position: absolute;
}


$("#btn").click(function(){
    $("div").animate({left:'100px',opacity:'0.7'});
    //$("div").animate({params},speed, callback);
});

• 停止动画或效果：stop()

div{
    position: absolute;
}


//向下滑动
  $("#btn1").click(function(){
    $("#box").slideDown(3000);
  });

//停止滑动
  $("#btn2").click(function(){
    $("#box").stop();
  });

七、jQuery与HTML

1、获取内容与属性

（1）内容：

• 元素的文本内容：text()

$("#btn").click(function(){
  $("p").text("1111111");
});

• 元素的内容：html()

$("#btn").click(function(){
  $("p").html("<b>hello</b>");
});

• 表单字段的值：val()

<input type="text" id="inp" value="你好呀">


$("#btn").click(function(){
    $("#inp").val("hello");
});

（2）属性：attr()

$("#btn").click(function(){
   $("#inp").attr("placeholder","hello")
  });

2、添加元素

（1）元素内部结尾插入指定内容：append()

$("p").append("我是添加在元素内部结尾的！");

（2）元素内部开头插入内容：prepend()

$("p").prepend("我是添加在元素内部开头的！");

（3）元素之后插入内容：after()

$("p").after("我是添加在元素之后的！");

（4）元素之前插入内容：before()

$("p").before("我是添加在元素之前的！");

3、删除元素

（1）删除被选元素（包括子元素）：remove()

$("#div").remove();
//过滤被删除元素（删除类为delete的所有p元素
$("p").remove(".delete");

（2）从被选元素中删除子元素：empty()

$("#div").empty();

八、jQuery与CSS

（1）添加一个或多个类：addClass()

.Color{
    color: red;
}
.box{
    background-color:blue;
}



$("button").click(function(){
    $("h1,p").addClass("Color");
    $("div").addClass("box");  
});

（2）删除一个或多个类：removeClass()

$("button").click(function(){
    $("div").removeClass("box");  
});

（3）进行添加删除类切换操作：toggleClass()

$("button").click(function(){
    $("div").toggleClass("box");  
});

（4）设置样式属性：css()

//设置单个属性
$("div").css("background-color","yellow");
//设置多个属性
$("div").css({"background-color":"yellow","font-size":"200%"});

九、jQuery 尺寸

（1）宽度（不包括内边距、边框或外边距）：width()

（2）高度（不包括内边距、边框或外边距）：height()

（3）宽度（包括内边距）：innerWidth()

（4）高度（包括内边距）：innerHeight()

（5）宽度（包括内边距和边框）：outerWidth()

（6）高度（包括内边距和边框）：outerHeight()