Java Web-JQuery学习

JQuery概念

是一个JS框架，可以用来简化JS的开发，设计宗旨是"write less,do more",即写更少的代码，做更多的事情。它封装了JS常用的代码、优化了文档操作(DOM)、事件处理、动画操作

什么是框架呢？从理论上来说，我们自己定义一个JS文件，将一些JS的实现放到里面，然后在HTML中通过<scrpit>标签引入该资源，也能叫一个框架。

快速入门

下载JQuery文件
在项目中导入js文件
使用

JQuery的版本：

1.x:兼容ie6\7\8,使用最为广泛。该版本官方不再更新功能，只做bug维护
2.x,兼容ie6/7/8,但是很少有人用
3.x,只支持最新的浏览器

我们在这里使用最新的版本，从该网站可以找到JQuery的所有版本的引用方式,压缩版引用可以用于部署，未压缩版可以用于开发调试和自己阅读

举一个例子：

如果不使用JQuery,直接使用JS默认方法调用div对象：

<body>

<div id="div1">div1</div>

<div id="div2">div2</div>

<script>

    //1.获取元素对象

    var div1 = getElementByID("div1");

    var div2 = getElementByID("div2");

    alert(div1.innerHTML);

    alert(div2.innerHTML);

</script>

</body>

如果使用JQuery的话：

<body>

<div id="div1">div1</div>

<div id="div2">div2</div>

<script>

    //使用JQuery来获取div对象

    //$就是一个方法的名称

    var div1=$("#div1");

    alert(div1);

    //获取标签体内容,方法的逻辑比直接使用JS友好了

    alert(div1.html());

    var div2=$("#div2");

</script>

</body>

JQuery对象和JS对象的区别和转换

上面我们通过$获取出来的对象称为JQuery对象，它和直接获取的JS对象是有区别的

转换相关的内容我写在代码里面了:

<body>

<div id="div1">div1</div>

<div id="div2">div2</div>

<script>

    //获取所有的div类型的对象

    var divs = document.getElementsByTagName("div");

    //现在有一个需求：将divs中所有的div的内容变为"aaa"

    //如果直接使用JS的方法的话：

    for (var i=0;i<divs.length;i++){

        divs[i].innerHTML="aaa";

    }

    //使用JQuery来获取这些对象

    var $divs=$("div");

    //如果使用JQuery，让其变为“bbb"

    $divs.html("bbb");

    /*

    $divs.innerHTML="bbb";//如果要这样写的话，可以发现没有生效

    //这说明了JQuery对象和JS对象的方法是不通用的

    //如果要使用在JQuery对象上使用JS对象的方法，就需要在两者之间进行转换

    */

    /*

    1.JQuery对象转为JS对象

    JQuery对象可以看成一个数组，所以可以用：

        <JQuery对象>[索引],或者可以写为<JQuery对象>.get(索引)

     */

    /*

    2.JS对象转为JQuery对象:

    $(<JS对象>)

     */

</script>

</body>

JQuery选择器

用于筛选具有相似特征的元素

基本语法学习

事件绑定

<body>

<div id="div1">div1</div>

<div id="div2">div2</div>

<input type="button" value="点我"id="b1">

</body>

<script>

    //给b1按钮添加单击事件

        //1. 获取b1按钮

    var $b1 = $("#b1");

        //2.为对象绑定事件

    $b1.click(function () {

        alert("abc");

    })

</script>

入口函数

入口函数是DOM文档加载完成之后默认执行的方法，将JS命令写到这个方法里的好处是这样的话我们就不必要非要将JS写在body的最下面了(可以保证不会出现因为JS代码执行时对象还没有创建而导致的执行失败问题)

还是上面那个例子，如果将JS部分写到body前面，就需要写到入口函数中才能生效

<head>

    <meta charset="UTF-8">

    <title>事件绑定</title>

    <script src="jquery-3.4.1.js"></script>

    <script>

        $(function(){

            //给b1按钮添加单击事件

            //1. 获取b1按钮

            var $b1 = $("#b1");

            //2.为对象绑定事件

            $b1.click(function () {

                alert("abc");

            })});

    </script>

</head>

<body>

<div id="div1">div1</div>

<div id="div2">div2</div>

<input type="button" value="点我"id="b1">

</body>

如果使用JS的方法来设置入口函数，应该是:

window.onload=function(){

}

注意window.onload和$(function)的区别：

对于一个页面，window.onload()只能定义一次,多次绑定会覆盖前面的。而$(function)可以定义多个

CSS样式控制

//写法1

$("#div1").css("background-color","red");

//写法2

$("#div1").css("backgroundColor","red");

选择器的分类

1. 基本选择器

		1. 标签选择器（元素选择器）

			* 语法： $("html标签名") 获得所有匹配标签名称的元素

		2. id选择器

			* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素

		3. 类选择器

			* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

			这三个和我们之前学过的JS选择器规则一样

		4. 并集选择器：

			* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

2. 层级选择器

		1. 后代选择器

			* 语法： $("A B ")，中间是个空格 选择A元素内部的所有B元素

		2. 子选择器

			* 语法： $("A > B") 选择A元素内部的所有B子元素

		后代选择器和子选择器的区别：子选择器只选择子元素，不选择孙子元素及更后代的元素，而后代选择器都选择

3. 属性选择器

		1. 属性名称选择器

			* 语法： $("A[属性名]") 包含指定属性的选择器

		2. 属性选择器

			* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器

		3. 复合属性选择器

			* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器

4. 过滤选择器

	过滤选择器指的是从已经选择好的元素中按条件再进行过滤

		1. 首元素选择器

			* 语法： :first 获得选择的元素中的第一个元素

		2. 尾元素选择器

			* 语法： :last 获得选择的元素中的最后一个元素

		3. 非元素选择器

			* 语法： :not(selector) 不包括指定内容的元素

			注意非元素选择器内部还需要一个选择器，你可以类比数据库SQL语句来学习

		4. 偶数选择器

			* 语法： :even 偶数，从 0 开始计数

			所有元素按书写顺序排列（包括后代元素），选择所有索引为偶数的元素

		5. 奇数选择器

			* 语法： :odd 奇数，从 0 开始计数

		6. 等于索引选择器

			* 语法： :eq(index) 指定索引元素

		7. 大于索引选择器

			* 语法： :gt(index) 大于指定索引元素

		8. 小于索引选择器

			* 语法： :lt(index) 小于指定索引元素

		9. 标题选择器

			* 语法： :header 获得标题（h1~h6）元素，固定写法

5. 表单过滤选择器

		1. 可用元素选择器

			* 语法： :enabled 获得可用元素

		2. 不可用元素选择器

			* 语法： :disabled 获得不可用元素

		3. 选中选择器

			* 语法： :checked 获得单选/复选框选中的元素

		4. 选中选择器

			* 语法： :selected 获得下拉框选中的元素

		3和4在表单中比较常用

DOM操作

内容相关操作
1. html():获取或设置元素的标签体内容
2. text()：获取或设置元素的标签体纯文本内容
3. val()：设置或获取元素的value属性值
什么叫获取或设置？传递参数进去就是设置，不传参数进去、只接受返回值就是获取
属性相关操作
1. 通用属性操作
  1. attr():获取或设置元素的属性值
  2. removeAttr():删除属性
  3. prop():获取或设置元素的属性值
  4. removeProp()：删除属性
  attr()和prop()的区别：
  1. 如果操作的是元素的固有属性，则建议使用prop();自定义的属性建议使用attr()
  注意，获取属性时，只传入属性名即可；设置属性时，要同时传入属性名和属性值
2. 针对class属性的操作
  1. addClass():添加class属性值
  2. removeClass()：删除class属性值
  3. toggleClass():切换class属性
    
    这个操作不太好理解：概况起来就是，存在即删除；不存在即添加:例如toggleClass("one"),如果该元素存在class="one",则删除该属性；如果不存在，则添加进来。
    
    它可以实现一个将“添加属性”和“删除当前属性”结合起来的操作，反复执行即可。

CRUD（增删改查）相关操作

可以用于表格等操作中

append():父元素将子元素追加到末尾

例如:对象1.append(对象2)：表示将对象2添加到对象1的元素内部末尾处

这里的对象1和对象2一般都是选择器，也就是使用的是选择器返回的对象，当然也可以先用选择器获取再传递给这些方法，只是一般没必要这么做而已
prepend():父元素将子元素追加的开头
appendTo():

例如：对象1.appendTo(对象2)：将对象1添加到对象2内部的末尾。注意这里对象2是父元素
prependTo():同理
after():添加元素到特定的元素后面

例如：对象1.after(对象2)，则对象2被添加到对象1的后面，对象1和对象2是兄弟关系
before():添加元素到特定的元素前面

同理
insertAfter()

例如:对象1.insertAfter(对象2)，将对象1添加到对象2后面
insertBefore()：同理

注意和after()\before()相区分，谁加到谁的关系不一样
remove():删除元素

例如：remove(元素1)，删除元素1
empty():清空元素的所有后代元素，注意该元素是不清空的

基础案例

隔行换色

<script>

			//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow

			$(function () {

				//1. 获取数据行的奇数行的tr，设置背景色为pink

				$("tr:gt(1):odd").css("backgroundColor","pink");

				/*

				分三层进行过滤:

				1. 获取所有的tr

				2.gt(1)过滤出index大于1的

				3.odd过滤出index为偶数的

				 */

				//2. 获取数据行的偶数行的tr,设置背景色为yellow

                $("tr:gt(1):even").css("backgroundColor","yellow");

            });

		</script>

全选和全不选

<script>

			//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可

            function selectAll(obj){

                //获取下边的复选框

				$(".itemSelect").prop("checked",obj.checked);

            }

		</script>

而在body下：

			<tr>

				<th><input type="checkbox" onclick="selectAll(this)" ></th>

				<th>分类ID</th>

				<th>分类名称</th>

				<th>分类描述</th>

				<th>操作</th>

			</tr>

QQ表情选择

<script>

        //需求：点击qq表情，将其追加到发言框中

        $(function () {

            //1.给img图片添加onclick事件

            $("ul img").click(function(){

                //2.追加到p标签中即可。

                //注意这里的append($(this).clone()),它是将当前对象拷贝到目标对象之后的一种写法

                $(".word").append($(this).clone());

            });

        });

    </script>

多选下拉列表左右移动

<script>

			//需求：实现下拉列表选中条目左右选择功能

			$(function () {

				//toRight

				$("#toRight").click(function () {

					//获取右边的下拉列表对象，append(左边下拉列表选中的option)

					//option:selected是选择所有有selected属性的option,

					$("#rightName").append($("#leftName > option:selected"));

                });

                //toLeft

                $("#toLeft").click(function () {

                    //appendTo   获取右边选中的option，将其移动到左边下拉列表中

					$("#rightName > option:selected").appendTo($("#leftName"));

                });

            });

		</script>

JQuery高级

动画

三种方式显示和隐藏元素

	1. 默认显示和隐藏方式

		1. show([speed,[easing],[fn]])：显示

			1. 参数：

				1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)

				2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"

					* swing：动画执行时效果是 先慢，中间快，最后又慢

					* linear：动画执行时速度是匀速的

				3. fn：在动画完成时执行的函数，每个元素执行一次。

		2. hide([speed,[easing],[fn]])：隐藏

		3. toggle([speed],[easing],[fn])：切换

	2. 滑动显示和隐藏方式

		1. slideDown([speed],[easing],[fn])：滑动隐藏

		2. slideUp([speed,[easing],[fn]])：滑动显示

		3. slideToggle([speed],[easing],[fn]):滑动切换

	3. 淡入淡出显示和隐藏方式

		1. fadeIn([speed],[easing],[fn])

		2. fadeOut([speed],[easing],[fn])

		3. fadeToggle([speed,[easing],[fn]])

示例：

    <script>

        //隐藏div

        function hideFn(){

           /*$("#showDiv").hide("slow","swing",function(){

                alert("隐藏了...")

            });*/

           //默认方式

            $("#showDiv").toggle(1000,"swing");

            /*//滑动方式

                $("#showDiv").slideToggle("slow");

            */

            /*//淡入淡出方式

            $("#showDiv").fadeOut("slow");*/

        }

        //显示div

        function showFn(){

            /*$("#showDiv").show("slow","swing",function(){

                alert("显示了...")

            });*/

            /*

            //默认方式

            $("#showDiv").show(5000,"linear");

            */

/*

            //滑动方式

            $("#showDiv").slideDown("slow");

            */

            //淡入淡出方式

            $("#showDiv").fadeIn("slow");

        }

        //切换显示和隐藏div

        function toggleFn(){

            /*

            //默认方式

            $("#showDiv").toggle("slow");

*/

            /*

            //滑动方式

            $("#showDiv").slideToggle("slow");

*/

            //淡入淡出方式

            $("#showDiv").fadeToggle("slow");

        }

    </script>

遍历

    <script type="text/javascript">

/*

        遍历

            1. js的遍历方式

             * for(初始化值;循环结束条件;步长)

            2. jq的遍历方式

                1. jq对象.each(callback)

                2. JQuery(可以简写为$).each(object, [callback])，可以理解为使用的是JQuery类的静态方法

                    这种方式的好处之一是，传递的object对象不一定要求是JQuery对象，普通的JS对象也可以

                3. for..of:jquery 3.0 版本之后提供的方式

*/

            $(function () {

               //1.获取所有的ul下的li

                var citys = $("#city li");

               /* //2.遍历li

                for (var i = 0; i < citys.length; i++) {

                    if("上海" == citys[i].innerHTML){

                        //break; 结束循环

                        //continue; //结束本次循环，继续下次循环

                    }

                    //获取内容

                    alert(i+":"+citys[i].innerHTML);

                }*/

                //2. jq对象.each(callback)

                //注意这里each语句的写法。

                /*

                callback称为回调函数

                */

                /*

                citys.each(function (index,element) {

                    //需要先获取li对象

                    //3.1 获取li对象 第一种方式 this，this就是对应的li对象

                    //alert(this.innerHTML);

                    //alert($(this).html());

                    //这种方式的问题就是没办法获取索引

                    //3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）

                    //注意我们这里写的内容都是在function里面的，可以理解为.each方法调用了该function，index和element就是调用时each方法传入的，所以这里可以直接使用

                    //alert(index+":"+element.innerHTML);

                    //这里的element是JS对象，我们也可以将其转为JQuery对象，从而使用JQuery对象的相关方法，例如下面：

                    //alert(index+":"+$(element).html());

                    //判断如果是上海，则结束循环

                    if("上海" == $(element).html()){

                        //注意这里是不能直接break的，要按照.each方法的API要求来写回调函数：

                            //如果当前function返回为false，则结束循环(break)。

                            //如果返回为true，则结束本次循环，继续下次循环(continue)

                        return true;

                    }

                    alert(index+":"+$(element).html());

                });*/

                //3 $.each(object, [callback])

                /*

                因为内调函数没有设置传入参数，所以只能使用this来获取对象，当然也可以选择传参数

                */

               $.each(citys,function () {

                    alert($(this).html());

                });

               //4. for ... of:jquery 3.0 版本之后提供的方式

                /*for(li of citys){

                    alert($(li).html());

                }*/

            });

    </script>

事件绑定

jquery标准的绑定方法

jq对象.事件方法(回调函数)

$(function () {

           //1.获取name对象，绑定click事件

           /*$("#name").click(function () {

               alert("我被点击了...")

           });*/

           //给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件

            /*$("#name").mouseover(function () {

               alert("鼠标来了...")

            });

            $("#name").mouseout(function () {

                alert("鼠标走了...")

            });*/

           /* //简化操作，链式编程

            $("#name").mouseover(function () {

                alert("鼠标来了...")

            }).mouseout(function () {

                alert("鼠标走了...")

            });*/

            alert("我要获得焦点了...")

            //$("#name").focus();//让文本输入框获得焦点

            //表单对象.submit();//让表单提交

        });

on绑定事件/off解除绑定

jq对象.on("事件名称",回调函数)

jq对象.off("事件名称")，不输入事件名称的话默认就是解除所有事件的绑定

举例:

$(function () {

           //1.使用on给按钮绑定单击事件  click

           $("#btn").on("click",function () {

               alert("我被点击了。。。")

           }) ;

           //2. 使用off解除btn按钮的单击事件

            $("#btn2").click(function () {

                //解除btn按钮的单击事件

                //$("#btn").off("click");

                $("#btn").off();//将组件上的所有事件全部解绑

            });

        });

事件切换:jq.toggle(fn1,fn2)

点击一次执行fn1,再点击执行fn2.当然也不是只能有两个事件

举例:

$(function () {

           //获取按钮，调用toggle方法

           $("#btn").toggle(function () {

               //改变div背景色backgroundColor 颜色为 green

               $("#myDiv").css("backgroundColor","green");

           },function () {

               //改变div背景色backgroundColor 颜色为 pink

               $("#myDiv").css("backgroundColor","pink");

           });

        });