一路繁花似锦绣前程
失败的越多,成功才越有价值

导航

 

一、入门 

<!--
1、入口函数
    $(function () {
    })
2、获取选择器匹配对象
    $("选择器")、$("html")
3、jquery和js对象转换
    jquery -> js:$("选择器")[索引]、$("选择器").get(索引)
    js -> jquery:$(js对象)
4、事件
    $("选择器").click():单击
    $("选择器").dblclick():双击
    $("选择器").mouseenter():鼠标移入
    $("选择器").mouseleave():鼠标移出
    $("选择器").mousedown():鼠标向下点击
    $("选择器").mouseup():鼠标向上松开
    $("选择器").hover():移入移出
    $("选择器").focus():获得焦点
    $("选择器").blur():失去焦点
    $("选择器").on():绑定事件
    $("选择器").off():解绑事件
5、css
    $("选择器").css():css属性
6、属性、文本、内容、表单值
    $("选择器").attr():dom自定义属性属性
    $("选择器").removeAttr():删除dom自定义属性属性
    $("选择器").prop():dom固有属性
    $("选择器").removeProp():删除dom固有属性
    $("选择器").text():dom文本
    $("选择器").html():dom内容
    $("选择器").val():表单值
7、节点
    $("选择器").append():元素下一级子节点末尾添加元素(appendTo与之相反)
    $("选择器").prepend():元素下一级子节点开头添加元素(parentTo与之相反)
    $("选择器").after():元素后添加元素(insertAfter与之相反)
    $("选择器").before():元素前添加元素(insertBefore与之相反)
    $("选择器").remove():删除元素
    $("选择器").empty():清空子元素
    $("选择器").clone():克隆对象
8class
    $("选择器").addClass():添加class
    $("选择器").removeClass():删除class
    $("选择器").toggleClass():判断class存在则删除,不存在则添加
9、尺寸
    $("选择器").width():宽度
    $("选择器").height():高度
10、遍历父节点
    $("选择器").parent():上一级父节点
    $("选择器").parents():所有父节点
    $("选择器").parentsUntil("选择器"):选择器匹配的所有父节点
11、遍历子节点
    $("选择器").children():所有子节点
    $("选择器").find("选择器"):选择器匹配的所有子节点
12、遍历同胞节点
    $("选择器").siblings():所有同胞节点
    $("选择器").next():下一个同胞节点
    $("选择器").nextAll():以下所有同胞节点
    $("选择器").nextUntil("选择器"):选择器匹配的以下所有同胞节点
13、显示隐藏
    $("选择器").hide():隐藏
    $("选择器").show():显示
    $("选择器").toggle():判断隐藏则显示,显示则隐藏
14、淡入淡出
    $("选择器").fadeOut():隐藏
    $("选择器").fadeIn():显示
    $("选择器").fadeToggle():判断隐藏则显示,显示则隐藏
15、滑入滑出
    $("选择器").slideUp():隐藏
    $("选择器").slideDown():显示
    $("选择器").slideToggle():判断隐藏则显示,显示则隐藏
16、遍历
    $("选择器").each(函数(索引,对象))
    $.each($("选择器"),函数(索引,对象))
17、插件
    $.fn.extend({fun:function(){}}):$("选择器").fun()
    $.extend({fun:function(){}}):$.fun()
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="iddiv">iddiv</div>
<div class="classdiv">classdiv</div>
<script>
    $(function () {
    })
</script>
</body>
</html>

 

二、jquery实例

https://www.runoob.com/jquery/jquery-examples.html

posted on 2020-09-02 14:34  一路繁花似锦绣前程  阅读(126)  评论(0编辑  收藏  举报