2024年最新jQuery学习_jquery remove删除元素不彻底，2024年最新前端程序员面试题-优快云博客

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

前端路线图

vue.js的36个技巧

    <script>
        $(function () {
            console.log($('div').css("width")); //200px
            $('div').css("width", "300px"); //或者$('div').css("width", 300);
            $('div').css({ //属性名和数字属性值可以不加引号（也可以加）
                width: 300,
                height: 300,
                // 驼峰命名法
                backgroundColor: "red"
            })
        })
    </script>

在这里插入图片描述
链式编程操作
$(this).addClass("current").siblings().removeClass("current");
$(".tab_con .item").eq(index).show().siblings().hide();

注意：原生js的className会覆盖原来的类名，但是addClass是增加，不会影响原来的类名。

3. 效果

在这里插入图片描述

显示隐藏

显示：show([speed], [easing], [fn])
隐藏：hide([speed], [easing], [fn])
切换：toggle([speed], [easing], [fn])
一般情况我们都不加参数，动画效果挺丑的
在这里插入图片描述

滑动

下拉滑动：slideDown([speed], [easing], [fn])
上拉滑动：slideUp([speed], [easing], [fn])
切换滑动：slideToggle([speed], [easing], [fn])
一般使用也不加参数

重点：如果添加了很多动画效果可能会出现动画队列的现象，因此我们往往先停止动画stop()，再写动画效果
例如：$(this).children("ul").stop().slideToggle();

淡入淡出

淡入：fadeIn([speed], [easing], [fn])
淡出：fadeOut([speed], [easing], [fn])
淡入淡出切换：fadeToggle([speed], [easing], [fn])
修改透明度：fadeTo(speed, opacity, [easing], [fn]) speed和opacity必须写，opacity取值为0-1之间

自定义动画

语法：animate(params, [speed], [easing], [fn])
params：想要修改的样式属性，以对象的形式传递，必须写，属性名可以不用带引号，复合属性采用驼峰命名法

例子：

    <script>
        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>

4. 属性操作

获取元素固有属性：$("div").prop("属性")
修改固有属性：$("div").prop("属性", "属性值")
获取元素自定义属性：$("div").attr("属性")
修改元素自定义属性：$("div").attr("属性", "属性值")

数据缓存data() 数据存放在元素的内存里面，不显示在dom中
设置：$("span").data("uname", "vivian");
获取：$("span").data("uname");

获取自定义属性的方法：

<span index=1 data-index=1></span>

index是自定义属性，data-index是H5自定义属性
可以通过$("span").attr("index")获取index属性
可以通过$("span").attr("data-index")（返回字符串1）、$("span").data("index")（返回数字1）获取data-index属性

其他知识点：
change事件，当表单状态发生变化时触发：$("input").change(function(){});
:checked 获得当前复选框被选中的：$("input:checked").length 输出个数

5. 文本属性值

获取元素内容：$("div").html();
修改元素内容：$("div").html("123");
获取元素文本内容：$("div").text();
修改元素文本内容：$("div").text("123");
获取表单值：$("input").val();
修改表单值：$("input").val("123");

6. 元素操作

隐式迭代是对同一类元素做了同样的操作，如果想给同一类元素做不同操作，就要用到遍历
隐式迭代：$("div").css("color", "red");

（1）遍历

语法一：$("div").each(function(index, domEle){}); 更适合用来遍历元素

$("div").each(function(index, domEle) {
	//index 为当前元素的索引
	//domEle是当前dom对象，要使用jquery方法 必须先转成jquery对象
	$(domEle).css("color", arr[index]); //给不同的div赋值不同的颜色
})

语法二：$.each(object, function(index, element){}); 更适合用来遍历数组、对象

$.each(arr, function(index, element){
	
})

（2）创建

var li = $("<li>新创建的li</li>");

（3）添加

$("ul").append(li); 在元素的内部添加，放到最后，父子关系
$("ul").prepend(li); 在元素的内部添加，放到最前，父子关系
$("ul").after(li); 在元素的外部添加，放到后面，兄弟关系
$("ul").before(li); 在元素的外部添加，放到前面，兄弟关系

（4）删除

$("ul").remove(); 移除自己
$("ul").empty(); 移除所有子节点
$("ul").html(""); 移除所有子节点

四、jQuery事件

1. jQuery事件注册

$("div").click(function(){});
还有事件：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll

2. jQuery事件处理on/off

可以处理多个事件

$("div").on({
	click: function() {
		$(this).css("background", "purple");
	},
	mouseover: function() {
		$(this).css("background", "red");
	}
})

也可以这样写

$("div").on("mouseover click", function() { //多个事件添加同一个动作
	$(this).toggleClass("current");
})

on可以实现事件委托
on还可以实现动态绑定未来创建的元素 动态是指原来html结构中没有的元素

//click绑定在ul身上， 触发的对象是ul里面的li
$("ul").on("click", "li", function(){});

off解绑事件
$("div").off() 解绑div身上所有事件
$("div").off("click") 解绑click事件
$("ul").off("click", "li") 解绑事件委托

one() 只触发一次事件
$("div").one("click", function(){})

自动触发事件
法一：$("div").click();
法二：$("div").trigger("click");
法三：$("div").triggerHandler("click"); 不会触发元素的默认行为

3. jQuery事件对象

$("div").on("click", function(evetn){}); event就是事件对象，和传统的事件对象类似
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()

五、jQuery其他方法

1. jQuery拷贝对象extend

在这里插入图片描述
深拷贝时，原来复杂类型的数据如果不冲突的话，是合并，不是覆盖

2. 多库共存

在这里插入图片描述

3. jquery插件

在这里插入图片描述

bootstrap JS插件：
bootstrap框架也是依赖于jquery开发的，因此里面的js插件使用，也必须引入jQuery文件

六、jQuery尺寸、位置操作

1. jQuery尺寸

在这里插入图片描述

    <style>
 div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>

    <script>
        $(function () {
            //1. width() / height()
            console.log($("div").width()); //200
            // $("div").width(300); 修改

            //2. innerWidth() / innerHeight()
            console.log($("div").innerWidth()); //220

            //3. outerWidth() / outerHeight()
            console.log($("div").outerWidth()); //250

            //4. outerWidth(true) / outerHeight(true)
            console.log($("div").outerWidth(true)); //290

        })
    </script>