jQuery学习

最新推荐文章于 2022-03-22 10:05:30 发布

Vivian小姐

最新推荐文章于 2022-03-22 10:05:30 发布

阅读量313

点赞数

分类专栏： JavaScript 文章标签： jquery javascript bootstrap

本文链接：https://blog.csdn.net/qq_43819274/article/details/115693443

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery学习

一、jQuery的概述

JS库
在这里插入图片描述
常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto

在这里插入图片描述

二、jQuery的基本使用

jQuery的下载：https://jquery.com/
引入jQuery代码

jQuery的入口函数

    <script>
        //jquery的入口函数 等待dom结构渲染完毕即可执行内部代码 不必等到所有外部资源加载完成
        //相当于原生js中的DOMContentLoaded 而不是load（等待页面文档、外部js、css、图片加载完）
        //第一种
        $(document).ready(function () {
            $('div').hide();
        })
        //第二种（推荐）
        $(function () {
            $('div').hide();
        })
    </script>

jQuery顶级对象
$是jQuery的别称，代码中可以使用jQuery代替 $
$是jQuery的顶级对象，相当于原生js中的window，把元素利用 $ 包装成jQuery对象，就可以调用jQuery的方法

jQuery对象和DOM对象

dom对象：使用原生js获取
jQuery对象：使用jQuery方式获取，本质：通过$把dom对象进行了包装，以伪数组的形式存储

var myDiv = document.querySelector('div'); //dom对象
$('div'); //jQuery对象

dom对象只能使用原生js属性和方法，jQuery对象只能使用jQuery方法

myDiv.style.display = 'none'; //使用原生方法
$('div').hide(); //使用jQuery方法

jQuery对象和dom对象的相互转换

三、jQuery常用API使用

1. 选择器

$('选择器')

在这里插入图片描述
层级选择器和css的写法一样

隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程
也就是说，把匹配到的所有元素进行循环遍历，执行相应的方法，不用再像原生一样使用for循环

$("div").css("background", "pink"); //可以一次性修改

jQuery的筛选选择器
在这里插入图片描述
jQuery筛选方法（重点）

重点掌握：parent()、children()、find()、siblings()、eq()
补充：返回指定祖先元素：$(".four").parents(".one");

//选择ul中的第三个li
//法一：使用选择器的方法
$("ul li:eq(2)").css("color", "pink");
//法二：使用筛选方法（更推荐，方便传入变量）
$("ul li").eq(2).css("color", "blue");

案例：下拉菜单

    <script>
        $(function () {
            // 鼠标经过 对于每个li都隐式绑定了事件
            $(".nav>li").mouseover(function () {
                //$(this)表示当前元素
                //show()显示元素 hide()隐藏元素
                $(this).children("ul").show();
            })
            // 鼠标离开
            $(".nav>li").mouseout(function () {
                $(this).children("ul").hide();
            })
        })
    </script>

补充知识点：事件切换
$("div").hover(function(){}, function(){}); 前面是mouseover的回调，后面是mouseout的回调，写法更加简单
$("div").hover(function(){}); 只有一个函数时，mouseover和mouseout都是这个回调函数

案例：排他思想的应用
在这里插入图片描述

    <script>
        $(function () {
            //隐式迭代 所有的按钮都绑定了点击事件
            $("button").click(function () {
                //当前元素背景颜色变化
                $(this).css("background", "pink");
                //其余兄弟去掉背景颜色 （排他） 隐式迭代
                $(this).siblings("button").css("background", "");
            })
        })
    </script>

其他知识：
$(this).index();可以获得当前索引

2. 样式操作 css

在这里插入图片描述

    <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>