Java Web(十）--jQuery

介绍

官网文档：jQuery 教程

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

下载地址：https://jquery.com/download/%20jQuery

jQuery 是一个快速的，简洁的 javaScrip工具库，使用户能更方便地处理 HTML,css,dom...
宗旨是—WRITE LESS,DO MORE，写更少的代码，做更多的事情；

提供方法、events、选择器，并且方便地为网站提供 AJAX 交互；
jQuery 实现了浏览器的兼容问题；

jQuery的两把利器分别：

jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

入门案例

点击按钮，弹出"hello,jQuery"。

1）使用传统的dom编程/原生js,完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple_jquery</title>
    <script type="text/javascript">
      /**
       * 使用 dom 编程
       * 1. 代码比较麻烦
       * 2. document.getElementById("btn01") 返回的是 dom 对象
       */
      //使用原生 js+dom 完成
      //(1) 当页面加载完毕后，就执行 function
        window.onload = function () {
          //1. 得到 id=btn01 的 dom 对象
            var but01 = document.getElementById("but01");
          //2. 绑定点击事件
            but01.onclick = function () {
                alert("哈哈")
            }
        }
    </script>
</head>
<body>
<button id="but01">按钮</button>
</body>
</html>

2）使用jQuery完成,体会jQuery的"WRITELESS,DOMORE"

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

<head>
    <meta charset="UTF-8">
    <title>jQuery快速入门</title>

    <!--    引入jquery库-->
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       /**
         * 说明
         * 1. jquery的底层仍然是js,只是做了封装

         * 2. $(function () {} 等价  window.onload = function () {}

         * 3. $() 可以理解成是一个函数 [可以定义 function $(id) {} ...]

         * 3. $("#btn01") 底层: document.getElementById("btn01")

         * 4. 注意 $("#btn01") 不能写成 $("btn01")

         * 5. 通过$("#btn01") 返回的对象就是 jquery对象(即进行了封装)，而不是原生的dom对象

         */

        //使用jquery
        //1. 引入jquery库文件
        //2. $(function(){}) 等价原生的js的, 当页面加载完毕就会执行 function(){}
        /*
                window.onload= function(){}
         */

        $(function () {

            //1.得到btn01这个对象->jquery对象
            // $btn01 是一个jquery对象 其实就是对dom对象的包装，此时可以使用jquery对象的方法，事件等待
            // 通过debug 我们发现jquery对象是数组对象.
            //2. jquery中，获取对象的方法是 $("#id"), 必须在id前有#
            //3. 编程中，规定 jquery对象的命名以$开头.(不是必须，但是约定)
            // 老韩编程小技巧: (1) 不明的地方可以做测试 (2) 使用debug直接看对象构成
            //  (3) 尽量能够看到效果，或者这个对象构成 => 了解 (4) 多动手

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

            //2.绑定事件

            $btn01.click(function () {
                alert("hello,jquery...~~~")
            })
        });

    </script>

</head>

<body>
<button id="btn01">按钮1</button>
</body>

</html>

jQuery核心函数

jQuery 选择器

选择器是 jQuery 的核心，在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。

优点

1.简洁的写法：$("#id") 等价于 document.getElementById("id")； $("tagName") 等价于 document.getElementsByTagName("tagName")；
2.完善的事件处理机制

分类

【1】基本选择器

最常用的选择器, 也是最简单的选择器，通过元素 id, class和标签名来查找 DOM 元素

分类。

1） #id：

用法：$("#myDiv");

说明：返回值：单个元素的组成的集合；这个就是直接选择 html 中的 id=”myDiv”。

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色。
<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>
$('#btn').css('background', 'red');

2）Element

用法：$("div")

说明：

返回值:集合元素
element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素；例如div,input,a等等。

需求描述：选择页面中所有的div标签，设置其背景为红色。
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
$('div').css('background', 'red');

3）class

用法：$(".myClass")

说明：返回值：集合元素；这个标签是直接选择 html 代码中 class=”myClass”的元素或元素组；因为在同一html 页面中class 是可以存在多个同样值的；

需求描述：选择页面中所有class为red的段落，设置其背景为红色。
<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>
$('.red').css('background', 'red');

4）*

用法： $("*")

说明：返回值：集合元素；匹配所有元素,多用于结合上下文来搜索。

需求描述：选择页面中class为content的div下所有元素，设置其背景为红色。
<div class="content">
    <p>我是段落1</p> 
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>
$('.content *').css('background', 'red');

5）selector1, selector2, selectorN

用法： $("div,span,p.myClass")

说明：返回值：集合元素；将每一个选择器匹配到的元素合并后一起返回；可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内。其中 p.myClass 是表示匹配元素 p class=”myClass”。

需求描述：选择页面中所有的段落与按钮，设置其背景为红色。
<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>
$('p,button').css('background', 'red');

【2】层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素。例如后代元素, 子元素, 相邻元素, 兄弟元素等。

种类	用法	返回值	说明
ancestor descendant	$(“form input”)	集合元素	在给定的祖先元素下匹配所有后代元素
parent > child	$(“form > input”)	集合元素	在给定的父元素下匹配所有子元素(注意区分后代元素和子元素)
prev + next	$(“label + input”)	集合元素	匹配所有紧跟在prev元素后的next元素
prev ~ siblings	$(“form ~ input”)	集合元素	匹配prev元素之后的所有siblings元素. 注意: 是匹配之后的元素, 不包含该元素在内, 并且匹配的是和prev同级的元素, 其后辈元素不被匹配

需求描述：选择ul下的所有span子元素，设置其背景为红色。

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>

$('ul>span').css('background', 'red');

【3】过滤选择器

1）基本过滤选择器

种类	用法	返回值	说明
:first	$(“tr:first”)	单个元素组成的集合	匹配找到的第一个元素
:last	$(“tr:last”)	集合元素	匹配找到的最后一个元素
:not(selector)	$(“input:not(:checked)”)	集合元素	去除所有与给定选择器匹配的元素, 意思是没有被选中的input(当 input type=“checkbox”)
:even	$(“tr:even”)	集合元素	匹配所有索引值为偶数的元素, 从0开始计数.js的数组都是从0开始计数的, 例如要选择table的行, 因为是从0开始计数, 所以table中的第一个tr就为偶数0
:odd	$(“tr:odd”)	集合元素	匹配所有索引值为奇数的元素, 从0开始计数
:eq(index)	$(“tr:eq(0)”)	集合元素	匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素, 括号里面的是索引值, 不是元素排放数
:gt(index)	$(“tr:gt(0)”)	集合元素	匹配所有大于给定索引值的元素
:lt(index)	$(“tr:lt(0)”)	集合元素	匹配所有小于给定索引值的元素
:header	$(“:header”).css(“background”, “red”)	集合元素	匹配所有h1, h2, h3之类的标题元素, 这个是专门用来获取h1, h2这样的元素
:animated		集合元素	匹配所有正在执行动画效果的元素

需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行。

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:even').css('background', 'red');

2）内容过滤选择器

过滤规则主要体现在它所包含的子元素和文本内容上。

需求描述：实现让内容为“男”的单元格的背景变为红色。

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('td:contains("男")').css('background', 'red');

3）可见度过滤选择器

根据元素的可见和不可见状态来选择相应的元素。

4）属性过滤选择器

过滤规则是通过元素的属性来获取相应的元素，使用 XPath 表达式来选择带有给定属性的元素。

1） [attribute]

用法: $("div[id]") ; 返回值集合元素

说明: 匹配包含给定属性的元素. 例子中是选取了所有带"id"属性的 div 标签.

需求描述：查找herflang属性的标签元素，设置其背景为红色。
<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('[hreflang]').css('background', 'red');

2）[attribute=value]

用法: $("input[name='newsletter']").attr("checked", true); 返回值集合元素

说明：匹配给定的属性是某个特定值的元素；例子中选取了所有 name 属性是newsletter 的 input 元素。

需求描述：查找hreflang属性值是en的所有超链接，设置其背景为红色。
<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('a[hreflang="en"]').css('background', 'red');

3） [attribute!=value]

用法: $("input[name!='newsletter']").attr("checked", true); 返回值集合元素

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于 :not([attr=value])。

要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])。之前看到的 :not 派上了用场。

需求描述：查找hreflang属性值不是en的所有超链接，设置其背景为红色。
<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('a[hreflang!="en"]').css('background', 'red');

4） [attribute^=value]

说明: 匹配给定的属性是以某些值开始的元素

用法: $("input[name^='news']") 返回值集合元素

需求描述：查找hreflang属性值是en或者以en开头的所有超链接，设置其背景为红色。
<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('a[hreflang|="en"]').css('background', 'red');
或者
$('a[hreflang^="en"]').css('background', 'red');

5）子元素过滤选择器

6）表单属性过滤选择器

说明：主要对所选择的表单元素进行过滤；

【4】表单选择器

种类	用法	返回值	说明
:input	$(“:input”)	集合元素	匹配所有input, textarea, select 和 button元素
:text	$(“:text”)	集合元素	匹配所有的单行文本框
:password	$(“:password”)	集合元素	匹配所有密码框
:radio	$(“:radio”)	集合元素	匹配所有单选按钮
:checkbox	$(“:checkbox”)	集合元素	匹配所有复选框
:submit	$(“:submit”)	集合元素	匹配所有提交按钮
image	$(“:image”)	集合元素	匹配所有图像域
:reset	$(“:reset”)	集合元素	匹配所有重置按钮
:button	$(“:button”)	集合元素	匹配所有按钮, 这个包括直接写的button
:file	$(“:file”)	集合元素	匹配所有文件域
:hidden	$(“input:hidden”)	集合元素	匹配所有不可见元素, 或者type为hidden的元素, 这个选择器不仅限于表单, 除了匹配input, 那些style为hidden的也会被匹配. 注意: 要选取input中为hidden的元素就是$(“input:hidden”), 但是直接使用":hidden"就是匹配页面中所有不可见元素, 包括宽度和高度为0的

需求描述：选中表单中的文本框、密码框、文件框、按钮、提交按钮、重置按钮等，设置其背景为红色。

<form>
    <input type="text"><br>
    <input type="password"><br>
    <input type="file"><br>
    <input type="button" value="按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
</form>

$('input:text').css('background', 'red');
$('input:password').css('background', 'red');
$('input:file').css('background', 'red');
$('input:button').css('background', 'red');
$('input:submit').css('background', 'red');
$('input:reset').css('background', 'red');

jQuery 对象和 DOM 对象

jQuery 对象

jQuery 对象就是对 DOM 对象进行包装后产生的对象。

例如： $("#test").html() ：获取ID为test的元素内的html标签，等同于用DOM实现代码： document.getElementById("id").innerHTML;

例如：$("#test").val()：用来读取或修改表单元素的value值【只能使用在表单元素上】，this.value是js的原生语法，使用this.value无需引入任何库文件；

例如：.text()：用来读取或修改元素的纯文本内容，包括后代元素；不能使用在表单元素上。对应js中的innerText。

jQuery 对象是jQuery 独有的。如果一个对象是 jQuery 对象, 那么它就可以使用jQuery 里的方法: $("#id").html();

   约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$

       比如：

           var $variable =jQuery 对象

           var variable = DOM 对象

DOM 对象与jQuery 对象之间的转换

DOM 对象转成jQuery 对象

对于一个DOM 对象，只需要用$()把 DOM 对象包装起来，即获得一个 jQuery 对象；
$(DOM 对象)DOM 对象转换成 JQuery 对象后，就可以使用 jQuery 的方法；

jQuery 对象转成 DOM 对象

两种转换方式将一个jQuery 对象转换成 DOM 对象；[index]和.get(index)
jQuery 本身提供，通过.get(index)方法，得到相应的 DOM 对象
jQuery 对象是一个数组对象，可以通过[index]的方法，来得到相应的 DOM 对象

DOM操作

【1】查找节点、修改属性： 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点的属性</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //给 button 绑定一个 click 事件
            $("button").click(function () {
                $("img").attr("src", "../image/1.png");
                $("img").attr("height", "200");
            })
        });
    </script>
</head>
<body>
<img src="../image/2.png" height="100"/>
<br/>
<button>设置图像的 height 属性</button>
</body>
</html>

【2】创建节点