JQuery学习入门

一、添加事件

1、页面加载完成事件

$(document).ready(function() {})

2、为元素添加点击事件

$(".className").on("click", function() {})

3、为元素添加鼠标浮动事件

$(".className").hover(function() {
//浮动
}, function() {
//取消浮动
})

4、为下拉框添加选择事件

$(".selectName").change(function() {})

5、为列表添加遍历事件

$(".ulName").each(function() {})

二、操作类名

1、判断元素是否拥有类名，返回true或false

$(".className").hasClass(".className")

2、为元素添加类名

$(".className").addClass(".className")

3、为元素移除类名

$(".className").removeClass(".className")

4、为元素添加或移除类名（有则删，无则加）

$(".className").toggleClass(".className")

三、寻找元素

1、父级元素

$(".className").parent()

2、子级元素

$(".className").children()

3、寻找子级元素

$(".className").children().find()

四、修改元素属性

1、为元素添加节点属性

$(".className").attr("title", "titleName")

2、为元素添加对象属性

$(".className").prop("checked", true)

3、修改元素CSS样式

$(".className").css("color", "red")

五、操作元素内容

1、读取或修改元素的HTML内容

$(".className").html()

2、读取或修改元素的纯文本内容，不能用于表单元素

$(".className").text()

3、读取或修改表单元素的值

$(".className").val()

4、移除元素的所有内容，包括所有文本和子节点

$(".className").empty()

六、添加/删除节点

1、在元素的开头插入节点

$(".className").append()

2、在元素的结尾插入节点

$(".className").prepend()

3、在元素之前插入节点

$(".className").before()

4、在元素之后插入节点

$(".className").after()

5、删除节点

$(".className").remove()

七、获取/设置元素尺寸

1、获取元素宽度、高度

let width = $(".className").width();

let height = $(".className").height();

2、设置元素宽度、高度

$(".className").width(400);

$(".className").height(300);

八、显示/隐藏元素

1、显示元素

$(".className").show()

2、隐藏元素（元素不占位）

$(".className").hide()

3、显示元素

$(".className").css("visibility", "visible")

4、隐藏元素（元素占位）

$(".className").css("visibility", "hidden")

5、显示元素

$(".className").css("display", "block")

6、隐藏元素（元素不占位）

$(".className").css("display", "none")

7、显示元素（向下滑动）

$(".className").slideDown()

8、隐藏元素（向上滑动）

$(".className").slideUp()

九、高级查询

以列表项浮动显示相应的DIV为例

 

    $(".ul li").hover(function () {
        $(this).toggleClass('hover');
        $(".showPanel").find("div").eq($(this).index()).show();
    }, function () {
        $(this).toggleClass('hover');
        $(".showPanel").find("div").eq($(this).index()).hide();
    });