jQuery基础知识总结_jquery使用场景-CSDN博客

本文链接：https://blog.csdn.net/aDiaoYa_/article/details/125249418

文章目录

异步请求局部刷新——ajax

1、概念

Ajax即Asynchronous Javascript And XML”(异步JavaScript和XML)。
Ajax不是一种新的编程语言，而是把原有的技术整合到一起，多种技术综合应用。
同步：发送一个请求，需要等待服务器响应结束之后，才能发送第二个请求！
异步：发送一个请求，无需等待服务器的响应，即可发送第二个请求！
（图片源于网络）

2、功能

Ajax可以使js异步访问服务器。
Ajax可以实现页面局部刷新，接收到数据后只更新相应部分的内容。
应用场景：1、用Ajax进行数据验证——用户输入信息数据验证；2、用Ajax自动更新页面——热点新闻，天气预报等。

3、原理

通过在后台与服务器进行少量数据交换，Ajax就可以实现网页异步更新。
浏览器注册页面—(通过js事件)—>Ajax引擎—(发送请求)—>服务器处理业务—(响应)—>Ajax引擎—(解析数据)—>注册页面
ajax使用时需要学习一个对象：XMLHttpRequest，这个我暂时没了解到。
XMLHttpRequest 详解

$.ajax({
	type:  //要使用的请求方式
	url:  //要使用的请求路径 
	contentType: //要传递的数据类型
	data:  //要拼接的数据
	dataType:  //数据类型
	success: function(data){ //成功时的方案 
		
	},
	error: function(data){ //失败时的方案
		
	}
})

初识jQuery

jQuery是一个优秀的JavaScript库，里面封装了很多预定义的对象和函数。其核心思想是：“写的更少，但做的更多”。

jQuery的特性：

HTML 元素快速选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

jQuery的介绍

1、jQuery使用方式

<!-- 引入jQuery的函数库文件 -->
<!-- 压缩后的jQuery库 -->
 <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<!-- 未压缩的jQuery库 -->
<script src="jquery.js"></script>

2、文档就绪测试

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1、jquery的基本使用</title>
    <!-- jquery文件的引入 -->
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 隐藏div
        // $('div').hide();

        // 1、等着页面DOM加载完毕再去执行js代码
        // $(document).ready(function () {
        //     $('div').hide();
        // })

        // 2、等着页面DOM加载完毕再去执行js代码
        $(function () {
            console.log($('div'));
            $('div').hide();
        })
    </script>
</body>
</html>

jQuery函数

1、jQuery入口函数

//写法一：
$(function () {
...//此处就是页面DOM加载完成的入口
});
//写法二：
$(document).ready(function () {
...//此处就是页面DOM加载完成的入口
});

不同于原生js中的load事件：

两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
JQ入口允许存在多个，且并行存在，都会生效；
JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。

2、jQuery函数参数

jQuery库只提供了一个叫jQuery的函数，该函数中以及该元素的原型中定义了大量的方法。jQuery函数具有四种参数：

  1）选择器（字符串）
     jQuery函数通过该选择器获取对应的DOM，然后将这些DOM封装到一个人jQuery对象中并返回。
     
  2）DOM对象（即Node实例）
      jQuery函数将该DOM封装成jQuery对象并返回。
      
  3）HTML文本字符串
      jQuery函数根据传入的文本创建好HTML元素并封装成jQuery对象并返回。
       $("<div class="one">one</div>");

  4）一个匿名函数    
      $(function(){});
      当文当加载完毕之后jQuery函数调用匿名函数。

jQuery选择器

1、基本选择器

//元素选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
//id选择器
$("#one") -- 选中id为one的元素
$("p#demo") -- 选取所有 id="demo" 的p元素
//class选择器
$(".mini") -- 选中所有class值为mini的元素
$(".test") -- 选中所有class值为test的元素
//属性选择器
$("[href]") -- 选取所有带有 href 属性的元素
$("[href='#']") -- 选取所有带有 href 值等于 "#" 的元素

2、层级选择器

   //后代选择器   .one .two   
   //   两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
   $('.one .two')
   //子代选择器   .one>.two
   //   两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。
   $('.one>.two')

3、兄弟选择器

   //下一个兄弟选择器   .one+.two
      $('.one+.two')
   //之后所有子代选择器  .one~.two
      $('.one~.two')

jQuery过滤器

1、jQuery first() 方法：
first()这个方法为返回被选择的元素的第一个元素
2、jQuery last() 方法：
last()这个方法为返回被选择的元素的最后一个元素
3、jQuery eq() 方法：
eq()这个方法为返回被选择的元素中带有指定索引号的元素
4、jQuery filter() 方法：
filter()这个方法为你自己设定一个范围，不在这个范围内的元素会被删除，在范围内的元素则会被返回
5、jQuery not() 方法：
not()这个方法为返回不在范围内的全部元素

在这里插入图片描述
简单的使用代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5、jQuery基本和层级选择器</title>
    <script src="./jquery.min.js"></script>
    <style>
        #iam {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="iam">我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol</li>
        <li>我是ol</li>
        <li>我是ol</li>
        <li>我是ol</li>
        <li>我是ol</li>
        <li>我是ol</li>
    </ol>
    <ul>
        <li>我是ul</li>
        <li>我是ul</li>
        <li>我是ul</li>
        <li>我是ul</li>
        <li>我是ul</li>
        <li>我是ul</li>
    </ul>
    <div>
        <span>今天也要加油喔！</span>
    </div>
    <script>
        $(function () {
            // id选择器
            $('#iam').hide();
            // 类选择器
            $('.nav').css('background', 'pink');
            // 层级选择器
            $('div span').css('color', 'skyblue');
            // 全选选择器
            console.log($('*'));
            // 标签选择器
            console.log($('div'));
            // 基本过滤选择器
            $("ul li:first").css("color", "red");

            $("ol li:last").css("color", "blue");
            // 获取到的索引是从0开始的
            $("ul li:eq(3)").css("color", "green");
            // 奇数
            $("ol li:odd").css("background", "skyblue");
            // 偶数
            $("ul li:even").css("background", "orange");
        })
    </script>
</body>
</html>

jQuery事件

1、事件语法

$('p').click();
$('p').click(function() {
...//事件触发后执行的代码！
});

常用的事件：

click()  //-- 单击事件
$("p").click( function(){ $(this).hide(); });
dblclick() // -- 双击事件
$("p").dblclick(function(){ $(this).hide(); });
mouseenter()// -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave()// -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
hover() //-- 光标悬停事件
$("#p1").hover( 
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
//可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });

2、事件处理

   on()
   //   在选定的元素上绑定一个或多个事件处理函数。
   off()
   //   移除一个事件处理函数。
   trigger()
   //   根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

on()用法：

//写法一：多事件绑定，完成相同任务
$('.box').on('click mouseenter', function () {
	alert(11);
});
//写法二：多事件绑定，完成不同任务
$('.box').on({
	mouseenter: function () {
		$(this).css('background', 'skyblue');
	},
	click: function () {
		$(this).css('background', 'purple');
    },
    mouseleave: function () {
         $(this).css('background', blue);
   	}
});
//写法三：事件委派
$('ol').on('click','li', function () {
	alert(11);
});

on()方法优势：

可以绑定多个事件，多个处理时间处理程序；
可以事件委派操作，把原来加在子元素上的事件绑定在父元素上；
动态创建的元素，click()没有办法绑定事件，on()可以给未来动态生成的元素绑定事件。

off()用法：


$('p').off()  //解绑p元素所有事件处理程序
$('p').off('click')  //解绑p元素上面的点击事件
$('p').off('click','li')  //解绑事件委托

trigger()用法：

element.click()
element.trigger('事件')

用法小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>好久不见</p>
    </div>
    <script>
    //on()绑定点击和鼠标经过事件
        $('.box').on('click mouseover', 'p', function () {
            console.log(123);
            $('.box').css('background', 'skyblue');
        })
        //off()解绑鼠标经过事件
        $('.box').off('mouseover', 'p');
        //trigger()自动触发点击事件
        $('p').trigger('click');
    </script>
</body>
</html>

jQuery属性

用attr来获取属性，prop获取特性
属性指的是“name，id”等等，特性指的是“selectedIndex, tagName, nodeName”

1、attr()用法

1、单属性访问：attr(属性名）
用于从第一个匹配元素中获取第一个属性的值，如果元素没有相应的属性，则返回undefined。

    <input type="checkbox" value="123" checked>任务一
    <input type="checkbox" value="456" checked>任务二
    <input type="checkbox" value="789" checked>任务三
    <div></div>
    <script>
        console.log($('input').attr('value'));
        console.log($('div').attr('class'));
    </script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/65b96f957a2c4630872a71aa32a4867b.png2、
2、单属性修改：attr(属性名,属性值）
设置属性的值（为所有匹配的元素设置一个属性值。）

    <input type="checkbox" value="123" checked>任务一
    <input type="checkbox" value="456" checked>任务二
    <input type="checkbox" value="789" checked>任务三
    <div index="888"></div>
    <script>
        $('input').attr('value', 'nihao');
        console.log($('input').attr('value'));
        $('div').attr("index", "666");
        console.log($('div').attr('index'));
    </script>

在这里插入图片描述
3、attr(属性名,函数值）
设置属性的函数值（为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

    <input type="checkbox" value="123" title="000">任务一
    <input type="checkbox" value="456" checked>任务二
    <input type="checkbox" value="789" checked>任务三
    <div index="888" alt="000"></div>
    <script>
        // 把title属性的值设置为value属性的值
        $('input').attr('value', function () { return this.title })
        console.log($('input').attr('value'));
        console.log($('input').attr('title'));
    </script>

在这里插入图片描述
4.attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性

    <input type="checkbox" value="123" title="000">任务一
    <input type="checkbox" value="456" checked>任务二
    <input type="checkbox" value="789" checked>任务三
    <div index="888" alt="000"></div>
    <script>
        $('input').attr({ value: 'nihao', title: '666' });
        console.log($('input').attr('value'));
        console.log($('input').attr('title'));
    </script>

在这里插入图片描述
5、删除属性：removeAttr(属性名）

    <input type="checkbox" value="123" title="000">任务一
    <input type="checkbox" value="456" checked>任务二
    <input type="checkbox" value="789" checked>任务三
    <div index="888" alt="000"></div>
    <script>
        $('input').removeAttr('value');
        console.log($('input').attr('value'));
    </script>

在这里插入图片描述

2、prop()用法

一般来说，我们都是使用attr来获取标签属性，但有时也会有获取不到的情况，这个时候可以使用prop()来获取，比如表单元素的checked属性。

    <form action="" id="fm">
        家庭成员：<input type="checkbox" id="one"><label for="one">爷爷</label>
        <input type="checkbox" checked>奶奶
        <input type="checkbox">妈妈
        <input type="checkbox">爸爸
        <input type="checkbox">弟弟
        <input type="checkbox">妹妹<br><br>
    </form>
    <script>
        $(function () {
            var at = $('input:eq(1)').attr('checked');
            console.log(at);
            var pr1 = $('input:eq(1)').prop('checked');
            console.log(pr1);
            var pr2 = $('input:eq(2)').prop('checked');
            console.log(pr2);
        })
    </script>

在这里插入图片描述
小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户同意案例</title>
    <script src="./jquery.min.js"></script>
    <style>
        input.submit {
            background: #69b946;
            display: inline-block;
            height: 52px;
            width: 306px;
            text-align: center;
            cursor: pointer;
            font: 22px/52px "微软雅黑";
            color: #fff;
            border-radius: 3px;
            border-style: solid;
            border-width: 1px;
            border-color: transparent;
        }
        input.disabled {
            background: #f4f9fd;
            color: #888;
            cursor: default;
            border-color: #d0dae3;
            cursor: default;
            outline: none;
        }
    </style>
</head>
<body>
    <form action="https://blog.csdn.net/?spm=1001.2101.3001.4477">
        <input id="kuang" type="checkbox" />
        <label for="kuang">同意"服务条款"和"用户须知"、"隐私权相关政策"</label>
        <br><br>
        <input type="submit" disabled="disabled" class="submit disabled" id="btn" />
    </form>
    <script>
        $(function () {
            $('#kuang').click(function () {
                var checked = $('#kuang').prop('checked');
                if (checked == true) {
                    $('#btn').attr({
                        "disabled": false,
                        class: "submit"
                    });
                } else {
                    $('#btn').attr({
                        "disabled": true,
                        class: "submit disabled"
                    });
                }
            });
        })
    </script>
</body>
</html>

3、val()用法

针对表单元素的value属性的值，在jq里面单独封装了一个方法，本身使用attr()也是不能正确获取的。当val()函数有参数时，修改value()值；无参时，返回value值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>val()函数</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <input type="text" id="text" value="请输入内容..." />
    <input type="button" value="Click" id="btn" />
    <script>
        $(function () {
            $('#btn').click(function () {
                // 方式1：attr行不通
                var value1 = $('#text').attr("value");
                console.log(value1);
                // 方式2：prop保险安全
                var value2 = $('#text').prop("value");
                console.log(value2);
                // 方式3：val();
                var value3 = $('#text').val();
                console.log(value3);
            });
        });
    </script>
</body>
</html>

4、.html()控制标签内容

jq对象.html();
括号里面写参数，代表修改，不写代表获取

html属性中有两个方法，一个有参，一个无参。

//1、无参html()：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String
html页面代码：<div><span>你好</span></div>
jquery代码：$(“div”).html();
//结果：<span>你好</span>（获取子标签和文本内容）

//2.有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
html页面代码：<div></div>
jquery代码：$(“div”).html(“<p>我爱你中国</p>”);
//浏览器显示出来的结果是:我爱你中国（也就是说浏览器能识别我们插入进去的标签）

5、text()控制标签内容

text属性中有两个方法，一个有参，一个无参

//1. 无参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String。
html页面代码：<p><span>你好<span><div> 很好</div></p>
jquery代码：$(“p”).text();
//结果：你好  很好（只选取标签下面的文本，标签不会被识别识别出）

//2.有参text（val）：设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体).返回一个jquery对象。
html页面代码：<div>Paragraph.</div>
jquery代码：$(“div”).text(“<b>哈哈，我会被完整输出</b> new text.”);
//结果: <p><b>哈哈，我会被完整输出</b> new text.</p> （html标签不会被浏览器识别，而是当作字符串来输出）

jQuery效果

1、显示隐藏

show()——([speed,[easing],[fn]])参数都可以省略，无动画直接显示；
——speed:三种预定速度之一的字符串(“slow”,“nomal”，“fast”)或表示动画时长的毫秒数值（如:1000）；
——easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”；
——fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
hide()
toggle()

2、滑动

slideDown()
slideUp()
slideToggle()

3、淡入淡出

fadeIn()——([speed],opacity,[easing],[fn]])参数都可以省略，无动画直接显示；
——speed:三种预定速度之一的字符串(“slow”,“nomal”，“fast”)或表示动画时长的毫秒数值（如:1000）；
——opacity:透明度必须写，取值0~1之间；
——easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”；
——fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
fadeOut()
fadeToggle()
fadeTo()

效果小案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery效果</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>上下切换滑动</button>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换滑动</button>
    <button>修改透明度</button>
    <div></div>

    <script>
        $(function () {
            $('button').eq(0).click(function () {
                // 下拉滑动
                $('div').slideDown();
            })
            $('button').eq(1).click(function () {
                // 上拉滑动
                $('div').slideUp(500);
            })
            $('button').eq(2).click(function () {
                // 上下切换滑动
                $('div').slideToggle(200);
            })
            $('button').eq(3).click(function () {
                // 淡入效果
                $('div').fadeIn();
            })
            $('button').eq(4).click(function () {
                // 淡出效果
                $('div').fadeOut(500);
            })
            $('button').eq(5).click(function () {
                // 淡入淡出切换滑动
                $('div').fadeToggle(200);
            })
            $('button').eq(6).click(function () {
                // 修改透明度
                $('div').fadeTo(1000, 0.5);
            });
        })
    </script>
</body>

</html>

4、自定义动画

animate()——(params,[speed],[easing],[fn])
——params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
——speed:三种预定速度之一的字符串(“slow”,“nomal”，“fast”)或表示动画时长的毫秒数值（如:1000）；
——opacity:透明度必须写，取值0~1之间；
——easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”；
——fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

自定义动画小案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery自定义动画效果</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
            /* display: none; */
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>

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

</html>

5、事件切换

hover([over,]out)
——over:鼠标移动到元素上要触发的函数
——out:鼠标移出元素要触发的函数

6、动画队列及其停止排队方法

动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行。
停止排队：stop()——1、该方法用于停止动画或效果。2、stop()必须写到动画或者效果的前面，相当于停止结束上一次的动画。

停止排队小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪下拉菜单栏</title>
    <script src="./jquery.min.js"></script>
    <style>
        ul {
            display: inline;
        }
        .nav li {
            list-style: none;
            width: 65px;
            height: 50px;
            text-align: center;
            position: relative;
            display: inline-block;
        }
        .nav li ul {
            width: 100%;
            position: absolute;
            padding: 0px;
            top: 50px;
            left: 0px;
            display: none;
        }
        .nav li a {
            text-decoration: none;
            color: #000;
            line-height: 45px;
        }
        .nav li ul li {
            border-left: 1px solid #fecc5b;
            border-right: 1px solid #fecc5b;
            border-bottom: 1px solid #fecc5b;
        }
        .nav li ul li:hover {
            background: #fadd9a;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
    </ul>
    <script>
        // $(function () {
        //     $('.nav>li').mouseover(function () {
        //         $(this).children('ul').show();
        //     }).mouseleave(function () {
        //         $(this).children('ul').hide();
        //     })
        // })

        // 事件切换
        $(function () {
            $('.nav>li').hover(function () {
                // 鼠标移动到元素上的效果
                $(this).children('ul').stop().slideDown(100);
            }, function () {
                // 鼠标移出元素的效果
                $(this).children('ul').stop().slideUp(100);
            })
        })
    </script>
</body>
</html>

jQuery控制标签内容

jq对象.addClass()	//添加类
jq对象.removeClass()	//删除类
jq对象.hasClass()	//判断是否有类
jq对象.toggleClass()	//切换类

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制标签内容</title>
    <script src="./jquery.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: pink;
        }
        .bgcolor {
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div class="box"></div>
    <input type="button" value="新增class" />
    <input type="button" value="移除class" />
    <input type="button" value="切换class" />
    <input type="button" value="判断是否有class" />

    <script>
        $(function () {
            // 获取box容器
            $('#box1').html('<h1>你好世界！</h1>');
            // 控制class
            var inputs = $('input');
            // 添加class 
            inputs.eq(0).click(function () {
                $('.box').addClass('bgcolor');
            });
            // 移除class
            inputs.eq(1).click(function () {
                $('.box').removeClass('bgcolor');
            });
            // 判断是否有class
            inputs.eq(2).click(function () {
                $('.box').hasClass('bgcolor');
            });
            // 切换class
            inputs.eq(3).click(function () {
                $('.box').toggleClass('bgcolor');
            })
        })
    </script>
</body>
</html>

jQuery元素操作

1、遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要遍历。

each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个；
里面的回调函数有2个参数：index是每个元素的索引号，demEle是每个DOM元素对象，不是jquery对象。

$('div').each(function(index,domEle) {xxx;})

在这里插入图片描述

2、添加元素

//1、内部添加——把内容放入匹配元素内部的最后面
element.append('内容')
//2、外部添加
element.after('内容')	//把内容放入目标元素后面
element.before('内容')	//把内容放入目标元素前面

3、删除元素

//1、删除匹配的元素（本身）
element.remove()
//2、删除匹配元素集合中所有的子节点
element.empty()
//3、清空匹配的元素内容
element.html("")

jQuery尺寸、位置操作

1、jQuery尺寸

在这里插入图片描述

2、jQuery位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
在这里插入图片描述

小案例：

jQuery其他方法

在这里插入图片描述

在这里插入图片描述

本地存储：

如有错误，请指正。
在这里插入图片描述