2022-08-26 第五组赖哲栋学习笔记

JS库

开发中，会引入很多的.js文件----->别人写好的js文件，我们拿来直接用

JQuery.js-----濒临淘汰，经典
React.js------30%市场
Angular.js----最难
Vue.js--------主流

JQuery

文档就绪函数

当页面的文档部分加载完毕之后，要执行的函数

$(document).ready(function () {
     alert("!!!");
});
//简写
$(function () {
    alert("!!!");
});
//通过箭头函数实现
$(() => {
    alert("!!!");
})

选择器

通过id选择器抓取-----返回值是固定的一个

<div id="div1"></div>
<script>
    $(() => {
    	let div = $("#div1");
    	console.log(div);
	})
</script>

通过类选择器抓取-----返回值是一堆

<div id="div1" class="div1"></div>
<script>
    $(() => {
    	let div = $(".div1");
    	console.log(div);
	})
</script>

通过标签选择器抓取---返回值是一堆

<div id="div1" class="div1"></div>
<script>
    $(() => {
    	let div = $("div");
    	console.log(div);
	})
</script>

*号选择器----返回值是所有标签

层级选择器

父元素子元素----div里的p，后代
父元素>子元素----直接子元素
父元素+子元素----相邻

过滤选择器

标签:first---获取第一个元素
标签:last----获取最后一个元素
标签tr:eq(index)--获取给定位置的元素
标签:gt(index)----大于给定位置
标签:lt(index)----小于给定位置
标签:not(selector)---除了selector以外的所有选择器

内容选择器

标签:empty----匹配所有不包含子元素的选择器
标签:parent---含有子元素的父元素

属性选择器

标签[name]---包含name属性的元素
input[type=text]---文本框
input[type!=text]---除了文本框的其他

事件

window.onload和JQuery文档就绪函数的区别？分别什么时候触发？

区别：window.onload----BOM

JQuery文档就绪函数----DOM

JQuery文档就绪函数在页面加载完毕之后触发，浏览器解析完HTML标签
window.onload除了解析完HTML标签之外，等到浏览器创建好DOM对象
JQuery文档就绪函数可以执行多次
window.onload只能执行一次，写在最后面的

window.onload = function () {
    console.log("window");
}
$(function () {
    console.log("jquery");
})
window.onload = function () {
    console.log("window1");//window1会覆盖window
}
$(function () {
    console.log("jquery1");//jquery和jquery1都能显示
})

事件的操作

click()----单击事件
blur()-----失去焦点
mouseover()--鼠标悬停
change()----改变事件
live()---它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的

添加事件

前提条件：新增的事件必须放在一个标签内----->标签必须原原本本存在于HTML页面上

<body>
    <button id="btn1" onclick="">按钮1</button>
    <button id="btn2" onclick="fun()">按钮2</button>
    <div id="btns"></div>//存放新增按钮的标签
    <script src="./jquery-1.9.1.js"></script>
    <script>
        $(() => {
            $("#btn1").click(() => {
                $("<button id='cr'>创建</button>").appendTo($("#btns"));
            });
        })
        function fun() {
            $("#cr").click(() => {
                alert("cr")
            });
        };
    </script>
</body>

方法

<body>
    <div id="container">
        <p id="p123">123</p>
	</div>
    <script src="./jquery-1.9.1.js"></script>
    <script>
        $(() => {
            /*
                appendTo()：参数是一个JQuery元素
                prependTo()：在之前追加
            */
            $("<p>234</p>").appendTo($("#container"))//追加到目标容器之后(容器内)
            $("<p>345</p>").prependTo($("#container"))//追加到目标容器之前(容器内)
            $("<p>456</p>").insertAfter($("#container"))//插入到目标容器之后(容器外)
            $("<p>567</p>").insertBefore($("#container"))//插入到目标容器之前(容器外)
            $("#p123").replaceWith($("<p>666</p>"))//替换
            // $("<span>000</span>").replaceAll($("p"));//替换所有

            // 在内部的后面追加
            $("#container").append($("<p>100</p>"));
            $("#container").prepend($("<p>200</p>"));

        	//在容器外追加
            $("#container").after($("<p>5000</p>"));
            $("#container").before($("<p>6000</p>"));

            //清空标签内的所有内容
            // $("#container").empty()
            //清空指定标签
            // $("p").remove()
        })
    </script>
</body>

jQuery HTML / CSS 方法

html()相当于 innerHTML：设置或返回被选元素的内容
text()相当于 innerText：设置或返回被选元素的文本内容
val()相当于 input.value：设置或返回被选元素的属性值（针对表单元素）
attr()：设置或返回被选元素的属性/值
prop()：设置或返回被选元素的属性/值
addClass()：向被选元素添加一个或多个类名（如需添加多个类，请使用空格分隔类名）
removeClass()：方法从被选元素移除一个或多个类（如果没有规定参数，则该方法将从被选元素中删除所有类）
toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换----->该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之

隐藏/显示

toggle() 方法来切换 hide() 和 show() 方法----->显示被隐藏的元素，并隐藏已显示的元素
hide() 和 show() 方法来隐藏和显示 HTML 元素

$(() => {
    $("#btn1").click(() => {
        $("#div1").hide(5000, () => {
            alert("div已经隐藏了");
        });
    });
    $("#btn2").click(() => {
        $("#div1").show(5000);
    });
    $("#btn3").click(() => {
        $("#div1").toggle(5000);
    });
});

淡入淡出

fadeIn() 用于淡入已隐藏的元素
fadeOut() 方法用于淡出可见元素
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
- 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
- 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

$(() => {
    $("#btn4").click(() => {
        $("#div2").fadeOut(5000);
    });
    $("#btn5").click(() => {
        $("#div2").fadeIn(5000);
    });
    $("#btn6").click(() => {
        $("#div2").fadeToggle(5000);
    });
    $("#btn7").click(() => {
        $("#div2").fadeTo(1000, 0.5);
    });
});

滑动

slideDown() 方法用于向下滑动元素
slideUp() 方法用于向上滑动元素
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
- 如果元素向下滑动，则 slideToggle() 可向上滑动它们
- 如果元素向上滑动，则 slideToggle() 可向下滑动它们

 $(() => {
     $("#btn8").click(() => {
         $("#div3").slideUp(5000);
     });
     $("#btn9").click(() => {
         $("#div3").slideDown(5000);
     });
     $("#btn10").click(() => {
         $("#div3").slideToggle(5000);
     });
 });

posted on 2022-08-26 21:05 小赖的博客阅读(24) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

2022-08-26 第五组 赖哲栋 学习笔记

JS库