Java研学-jQuery(一)

一 jQuery 简介

1 介绍

jQuery是一个快速、简洁且功能丰富的JavaScript库。它的核心理念是“写得更少，做得更多”，旨在通过封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，从而极大地简化JavaScript编程。

jQuery使用户能够方便地遍历HTML文档、操作DOM、处理事件、实现动画效果和提供Ajax交互。它兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等，并兼容CSS3.0。此外，jQuery还提供了大量的插件，进一步扩展了其功能。

具体来说，jQuery库包含以下功能：

HTML元素选取和操作：jQuery可以方便地选取和操作HTML元素，包括元素的添加、删除、修改等。
CSS操作：jQuery提供了丰富的CSS操作方法，可以方便地修改元素的样式。
HTML事件函数：jQuery封装了常见的事件处理函数，如点击、鼠标移动等，使得事件处理更加简单。
JavaScript特效和动画：jQuery内置了多种动画效果，可以轻松地为网页添加动态效果。
HTML DOM遍历和修改：jQuery提供了强大的DOM遍历和修改功能，可以方便地操作DOM结构。
AJAX：jQuery内置了AJAX功能，可以实现与服务器的异步通信，提高网页的响应速度。

总的来说，jQuery是一个功能强大且易于使用的JavaScript库，它极大地简化了JavaScript编程，提高了开发效率。同时，由于其良好的兼容性和大量的插件支持，jQuery已经成为了目前最流行的JS代码库之一。

2 jQuery 文件介绍

jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。
jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。

二引入 jQuery

1 拷贝 jQuery 文件到项目中

将从官网下载的 jQuery文件夹拷贝到项目的 webapp 下的 static 目录下
拷贝 jQuery

2 外部引用与内部引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery初体验</title>
</head>
<body>
<!--外部引入-->
<!--..的作用是从当前HTML文件所在的目录，返回到上一级目录-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    /*弹窗*/
    alert(123)
    // alert($)
    // $==jQuery 二者等价可以替换使用 表示jquery对象
    console.log($)
    console.log(jQuery)
</script>
</body>
</html>

三 jQuery 对象

1 对象引入

通过 document.getElementById() 找到的元素（获取DOM元素，js对象）和通过 $() 找到元素（jq对象）不一样，由此调用的方法也是不同的

js对象就是原生的DOM对象
通过 jQuery 方法获取的页面元素，都是 jQuery 对象
jQuery 实质为对 DOM 对象进行了包装，增强相关了方法
虽然 jQuery 对象包装了 DOM 对象但是两者不能混用，二者是两个不类型的对象，但调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM 对象

2 jQ对象与 DOM 对象之间转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象转换</title>
</head>
<body>
<button id="btn">按钮</button>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    //js获取对象按钮
    var btn = document.getElementById("btn");//dom对象
    // 为按钮设置名字
    // btn.innerHTML="js按钮";
    //jq获取按钮对象
    var btn1 = $("#btn");//jq对象

    //js对象转换成jq对象：$(js对象)
    var btn2 = $(btn);
    // 为按钮设置名字
    // btn2.html("jq按钮");
    //jq对象转换成js对象：jq对象.get(0)
    btn2.get(0).innerHTML = "jq转换后的按钮";
</script>
</body>
</html>

四 jQ对象常用方法

1 html 页面

在线检索API文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象常用方法</title>
</head>
<body>
<h3 id="h3">做人<i>要低调</i></h3>
<input type="text" id="username" value="tj"/><br/><br/>
<hr/>
<div>
    <p>获取 jQ 中包含 DOM 的个数，比如获取页面上 p 元素的个数</p>
    <p>获取 id 为 username 元素的 value 属性值</p>
    <p>设置 id 为 username 元素的 value 属性值为"TJ"</p>
    <p>对比 h1 元素的内容和纯文本的区别</p>
    <p>把 h1 元素内容的颜色改为黄色</p>
</div>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    // 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
    console.log($("p").size())
    // 2：获取 id 为 username 元素的 value 属性值
    console.log($("#username").val())
    // 3：设置 id 为 username 元素的 value 属性值为"TJ"
    $("#username").val("TJ");//改变元素的值
    // 4：对比 h1 元素的内容和纯文本的区别
    // 获取文本内容 html可以识别文本中的标签 text不行
    console.log($("#h3").html()) // 做人<i>要低调</i>
    console.log($("#h3").text()) // 做人要低调
    // 改变文本内容
    // 做人必须要高调 (成为一个链接 可以解析标签)
    // $("#h3").html("<a href='#'>做人必须要高调</a>");
    // <a href='#'>做人必须要高调</a> (原文输出)
    // $("#h1").text("<a href='#'>做人必须要高调</a>");
    // 5：把 h1 元素内容的颜色改为黄色
    $("#h3").css("color", "green");
</script>
</body>
</html>

五 jQ选择器

1 作用

jQuery选择器是一种用于“选择”（或“查找”）HTML元素的方式，它基于元素的名称、id、类名、类型、属性等。一旦这些元素被选中，你就可以对它们执行各种操作，比如修改它们的样式、内容或属性，或者为它们添加事件处理程序。

2 选择器的组成

选择器一般由“特殊符号”+“字符串”组成。比如:“#”代表 id，“mydiv”是一个字符串，那么整体 #mydiv 代表的是 id 为 mydiv 的元素对象。

3 如何使用选择器获取元素

语法：$(“选择器”) ，如 $ (“#mydiv”)。
注意：如果通过 jQuery 方法获取页面中元素，没有查找到，返回值不是 null，返回值为一个空数组 []，所以判断是否获取到元素，通过 jQuery.size() != 0 来判断。

六基本选择器

1 介绍

jQuery 最常用，最简单选择器，通过元素的 id、class 或标签等查找元素。在网页中，每个 id 名称只能使用一次[0, 1]，class 允许重复使用 [0, n]。

2 id 选择器

#id，用法：$(“#myDiv”) 返回值单个元素的组成的集合。
说明：这个就是直接选择 html 中的 id=“myDiv”。

3 元素选择器

Element，用法：$(“div”) 返回值元素集合。
说明：element 的英文翻译过来是“元素”，所以 element 其实就是 HTML 已经定义的标签元素，例如 div，input，a 等等。

4 类选择器

class，用法：$(”.myClass“) 返回值元素集合。
说明：这个标签是直接选择 HTML 代码中 class=”myClass” 的元素或元素组（因为在同一 HTML 页面中 class 是可以存在多个同样值的元素）。

5 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器使用</title>
</head>
<body>
<div id="msg">使用 ID 选择器获取当前 DIV元素</div>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul id="myul">
    <li>item1</li>
    <li class="selected">item2</li>
    <li>item3</li>
    <li class="selected">item4</li>
</ul>
<hr/>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
  // 1：获取 id 为 msg 的元素的内容
  console.log($("#msg").html())
  // 2：获取所有的 li 元素并打印数量
  console.log($("li").size())
  // 3：获取所有 class 为 selected 的元素，字体颜色改为 red
  $(".selected").css("color","red");
</script>
</body>
</html>

七层次选择器

1 介绍

若想通过 DOM 元素之间的层次关系(DOM结构)来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，需使用层次选择器。

2 ancestor descendant

用法：$(“form input”)
说明：在给定的祖先元素下匹配所有后代元素。

3 parent > child

用法：$(“form > input”)
说明：在给定的父元素下匹配所有子元素。

4 prev + next

用法：$(”label + input“)
说明：匹配所有紧接在 prev 元素后的 next 元素。

5 prev ~ siblings

用法：$(“form ~ input”)
说明：匹配 prev 元素之后的所有 siblings 元素。
注意：是匹配之后的元素，不包含该元素在内，并且 siblings 匹配的是和 prev 同辈的元素，其后辈元素不被匹配。

6 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器使用</title>
</head>
<body>
<ul id="myul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </li>
</ul>
<label>LABEL1</label>
<input type="text" value="text1"/>
<input type="text" value="text2"/>
<label>LABEL2</label>
<input type="text" value="text3"/>
<input type="text" value="text4"/>
<br/>
<label>
    LABEL3
    <input type="text" value="text5"/>
    <input type="text" value="text6"/>
</label>
<hr/>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    // 1：获取所有 ul 下的所有 li 元素，并打印分析结果
    // console.log( $("#myul li"))
    // 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果
    // console.log($("#myul > li"))
    // 3：获取所有 label 元素后的 input 元素，并打印分析结果
    // console.log($("label ~ input"))
    // 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果
    console.log($("label + input"))
</script>
</body>
</html>

八过滤选择器

1 介绍

过滤选择器：通过特定的过滤规则来筛选所需要的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同。该选择器一般以一个冒号（:）开头，按照不同的过滤规则，可分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤选择器。

2 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器使用</title>
</head>
<body>
<input type="hidden" name="id" value="1">
<select>
    <option value="1">Flowers</option>
    <option value="2" selected>Gardens</option>
    <option value="3">Trees</option>
</select>
<hr/>
<!--外部引入-->
<script src="../static/jQuery-2.1.4/jquery-2.1.4.js"></script>
<!--内部引入-->
<script>
    // 1：获取隐藏input的value值, 不根据元素名，通过 id 选择器找
    console.log($("input[name='id']").val())
    // 2：获取选中的 option
    console.log($("option:selected").html())
</script>
</body>
</html>

Java研学-jQuery(一)

一 jQuery 简介

1 介绍

2 jQuery 文件介绍

二 引入 jQuery

1 拷贝 jQuery 文件到项目中

2 外部引用与内部引用

三 jQuery 对象

1 对象引入

2 jQ对象与 DOM 对象之间转换

四 jQ对象常用方法

1 html 页面

五 jQ选择器

1 作用

2 选择器的组成

3 如何使用选择器获取元素

六 基本选择器

1 介绍

2 id 选择器

3 元素选择器

4 类选择器

5 demo

七 层次选择器

1 介绍

2 ancestor descendant

3 parent > child

4 prev + next

5 prev ~ siblings

6 demo

八 过滤选择器

1 介绍

2 demo

二引入 jQuery

六基本选择器

七层次选择器

八过滤选择器