java web之jquery学习

最新推荐文章于 2022-09-04 18:48:02 发布

Eric010101

最新推荐文章于 2022-09-04 18:48:02 发布

阅读量251

点赞数

分类专栏： JavaWeb 前端

本文链接：https://blog.csdn.net/oneil2016/article/details/81118333

版权

JavaWeb 同时被 2 个专栏收录

85 篇文章 2 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

jQuery的概述

什么是jQuery呢？jQuery是一个JavaScript的框架（即JavaScript的类库）。

它对传统的JavaScript进行了封装。现在企业的开发中往往不会使用传统的JavaScript进行开发了，通常都会使用JavaScript框架进行开发。读者在学习jQuery的过程中，要会查文档，学什么技术要知道去查对应的文档。

jquery使用：

1，引入jQuery的js文件

<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>

2，在jQuery的入口函数里面编写代码：

$(function() {
    // 开始你的表演
})

$相当于一个叫做jQuery的对象。

jQuery的方式就相当于页面加载的事件，其不仅可以执行多次，而且效率要比window.onload高；他俩执行时机也不同，传统的window.onload要等页面加载完成后执行该方法，而$(function() {})要等页面的DOM树绘制完成后进行执行。

JavaScript对象转换成jQuery对象的语法：$(JavaScript对象)，如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
        <script>
            window.onload = function() {
                // 传统JS的方式
                var d1 = document.getElementById("d1");
                // 我们前面学习的都是JS对象的属性和方法
                // d1.innerHTML = "JS对象的属性";

                // d1.html("aaaaaaa"); ✗
                // 将JS对象转成JQ对象
                $(d1).html("JS对象转成JQ对象");
            }
        </script>
    </head>
    <body>
        <div id="d1" style="border: 1px solid blue; width: 100px; height: 100px;">

        </div>
    </body>
</html>

jQuery对象转换成JavaScript对象的语法有两种：

1，jQuery对象[0]

2，jQuery对象.get(0)

如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
        <script>
            $(function() {
                var $d1 = $("#d1");
                // $d1.html("JQ对象的属性");
                // 转成JS的对象
                // 第一种方式
                // $d1[0].innerHTML = "将JQ对象转成JS对象的方式一";
                // 第二种方式
                $d1.get(0).innerHTML = "将JQ对象转成JS对象的方式二";
            });
        </script>
    </head>
    <body>
        <div id="d1" style="border: 1px solid blue; width: 100px; height: 100px;">

        </div>
    </body>
</html>

jQuery的一些效果：

show

show：显示隐藏的匹配元素。该函数的使用方式有：

使用方式一：jQuery对象.show()
使用方式二：jQuery对象.show(speed)，speed为”slow”、”normal”、”fast”三种预定速度之一的字符串。
使用方式三：jQuery对象.show(毫秒值)
使用方式四：jQuery对象.show(毫秒值, function(){})

hide

hide：隐藏显示的元素。该函数的使用方式有：

使用方式一：jQuery对象.hide()
使用方式二：jQuery对象.hide(speed)，speed为”slow”、”normal”、”fast”三种预定速度之一的字符串。
使用方式三：jQuery对象.hide(毫秒值)
使用方式四：jQuery对象.hide(毫秒值, function(){})

slideDown

slideDown：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。即向下滑动。该函数的使用方式有：

使用方式一：jQuery对象.slideDown()
使用方式二：jQuery对象.slideDown(speed)，speed为”slow”、”normal”、”fast”三种预定速度之一的字符串。
使用方式三：jQuery对象.slideDown(毫秒值)
使用方式四：jQuery对象.slideDown(毫秒值, function(){})

slideUp

slideUp：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。即向上滑动。该函数的使用方式有：

使用方式一：jQuery对象.slideUp()
使用方式二：jQuery对象.slideUp(speed)，speed为”slow”、”normal”、”fast”三种预定速度之一的字符串。
使用方式三：jQuery对象.slideUp(毫秒值)
使用方式四：jQuery对象.slideUp(毫秒值, function(){})

fadeIn

fadeIn：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。该函数的使用方式有：

使用方式一：jQuery对象.fadeIn()
使用方式二：jQuery对象.fadeIn(speed)，speed为”slow”、”normal”、”fast”三种预定速度之一的字符串。
使用方式三：jQuery对象.fadeIn(毫秒值)
使用方式四：jQuery对象.fadeIn(毫秒值, function(){})

fadeOut

fadeOut：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。该函数的使用方式有：

使用方式一：jQuery对象.fadeOut()
使用方式二：jQuery对象.fadeOut(speed)，speed为”slow”、”normal”、”fast”三种预定速度之一的字符串。
使用方式三：jQuery对象.fadeOut(毫秒值)
使用方式四：jQuery对象.fadeOut(毫秒值, function(){})

animate

animate：用于创建自定义动画的函数。读者可阅读jQuery API的文档。

toggle

toggle：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。即单击切换函数。其语法为：

jQuery对象.toggle(fn1, fn2, ...);，单击第一下的时候执行fn1函数，单击第二下的时候执行fn2函数，…

jQuery的选择器

基本选择器

基本选择器有：

id选择器，其用法为：$("#id")
类选择器，其用法为：$(".类名")
元素选择器，其用法为：$("元素名称")
通配符选择器，其用法为：$("*")
并列选择器，其用法为：$("选择器名称, 选择器名称, …")

层级选择器

层级选择器有：

后代选择器，它使用的是空格，选择的是所有后代包含孙子及以下的元素
子元素选择器：它使用的是>，选择的是第一层的元素（即儿子）
下一个元素选择器：它使用的是+，选择的是下一个同辈元素
兄弟元素选择器：它使用的是~，选择的是后面所有的同辈元素

基本过滤选择器

通过查看jQuery API帮助文档可知，基本过滤选择器有：
这里写图片描述

这儿我只给出常用的基本过滤选择器的概述，至于其他的还须读者亲测。
* :first：获取第一个元素
* :last()：获取最后一个元素
* :even：匹配所有索引值为偶数的元素，从0开始计数
* :odd：匹配所有索引值为奇数的元素，从0开始计数
* :eq(index)：匹配一个给定索引值的元素
* :gt(index)：匹配所有大于给定索引值的元素
* :lt(index)：匹配所有小于给定索引值的元素