【JavaWeb】JQuery（36）

最新推荐文章于 2022-11-06 14:59:42 发布

原创最新推荐文章于 2022-11-06 14:59:42 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

65 篇文章

订阅专栏

本文介绍jQuery的基础知识，包括概念、快速入门、与JS对象的区别、选择器使用、事件绑定、入口函数、样式控制及DOM操作等内容，帮助初学者快速掌握jQuery的核心用法。

引言

知识点总结

在这里插入图片描述

JQuery基础

概念

(官方定义)jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单。简化了JS对DOM的操作。
JavaScript框架的本质就是JS文件；

快速入门

1.下载JQuery文件(官网打开文件，需要自己ctrl+s保存到本地)；
在这里插入图片描述
2.导入-min-文件；
3.使用JQuery；

  <script>
      var $div = $("div");
      $div.html(222);
      //jquery对象的使用
      document.getElementById("div").innerHTML="234";
      //JS对象的使用
  </script>

与JS对象的区别

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者可以相互转换
* jq – > js : jq对象[索引] 或者 jq对象.get(索引)
* js – > jq : $(js对象)

<script>
        var $div = $("div");
        //JQuery对象
        $div.get(1).innerHTML="234";
        //JQuery对象->JS对象
        var elementsByTagName = document.getElementsByTagName("div");
        //JS对象
        var $1 = $(elementsByTagName);
        //JS对象->JQuery对象
    </script>

选择器

基础了解

1.事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <input type="button" value="别点我" >
     <script>
         $(function () {
             $("input").click(function () {
                alert("很皮哈");
             })
         })
     </script>
</body>
</html>

在这里插入图片描述
2.入口函数
我们在JS学习的时候就了解到windows.load()，用于解决加载的资源在JS代码之后而无法加载到的问题；但只能使用一次；在JQuery对象中的解决方法与之类似。

window.onload只能作用一次，第二次会自动覆盖第一次的
------------------
<script>
        window.onload=(function () {
         $("input").click(function () {
           alert("我就是pi");
         })
        })
     </script>

$(function(){...})能作用多次
----------------------
     <script>
         $(function () {
             $("input").click(function () {
                alert("很皮哈");
             })
         })
     </script>

3.样式控制

<input type="button" value="别点我" >
     <script>
         $(function () {
             $("input").click(function () {
                 $("input").css("backgroundColor","red");
             })
         })
     </script>

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        div{
            width: 150px;
            height: 150px;
            border: 2px solid;
        }
    </style>
    <script>
        $(function () {
               $("#button1").click(function () {
                   $("div").css("backgroundColor","red");
               })
            // 标签选择器（元素选择器）
               $("#button2").click(function () {
                   $("#div1").css("backgroundColor","green");
               })
               $("#button3").click(function () {
                $(".cls1").css("backgroundColor","violet");
               })
            $("#button4").click(function () {
               $(".cls1,#div1").css("backgroundColor","violet");
               // $(".cls1,#div1")
            })
        })
    </script>
</head>
<body>
<input type="button" value="让div标签元素背景变为红色" id="button1">&nbsp;
<!--1. 标签选择器（元素选择器）-->
<!--* 语法： $("html标签名") 获得所有匹配标签名称的元素-->
<input type="button" value="让id值为div1元素背景变为绿色" id="button2">&nbsp;
<!--2. id选择器-->
<!--* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素-->
<input type="button" value="让class值为cls1的背景变为紫色" id="button3">&nbsp;
<!--3. 类选择器-->
<!--* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素-->
<input type="button" value="让class值为cls1和id为div1的背景变为紫色" id="button4">&nbsp;
<!--4. 并集选择器：-->
<!--* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素-->
<div id="div1">
    id="div1";
</div>
&nbsp;
<div id="div2">
    id="div2";
</div>
&nbsp;
<div class="cls1">
    id="div2";
    class=cls1;
</div>
</body>
</html>

层次选择器

通过案例演示~~~~~~

DOM操作

内容操作

1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
3. val()： 获取/设置元素的value属性值

<script>
        $(function () {
            var html = $("a").html();
             alert(html)
             alert($("a").text());
        });

    </script>

属性操作

1. 通用属性操作
		1. attr(): 获取/设置元素的属性
		2. removeAttr():删除属性
		3. prop():获取/设置元素的属性
		4. removeProp():删除属性

	* attr和prop区别？
		1. 如果操作的是元素的固有属性，则建议使用prop
		2. 如果操作的是元素自定义的属性，则建议使用attr
2. 对class属性操作
		1. addClass():添加class属性值
		2. removeClass():删除class属性值
		3. toggleClass():切换class属性
				* toggleClass("one"): 
				   * 判断如果元素对象上存在class="one"，则将属性值one删除掉。  如果元素对象上不存在class="one"，则添加

<script>
        $(function () {
            $("input").click(function () {
                // $("input").prop("value","username");
                $("input").removeProp("value");
                $("div").toggleClass("cls1");
            })
        })
    </script>

CRUD操作

1. append():父元素将子元素追加到末尾
	    * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将子元素追加到开头
		* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
		* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4. prependTo()：
		* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
5. after():添加元素到元素后边
		* 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
		* 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
		* 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()
		* 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
9. remove():移除元素
		* 对象.remove():将对象删除掉
10. empty():清空元素的所有后代元素。
		* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

<script>
        $(function () {
          $("input").click(function () {
             // $("div").append("<h1>新增h1</h1>")
              $("div").prepend("<h1>新增h1</h1>")
          })
        })
    </script>

<script>
        $(function () {
           $("#btu1").click(function () {
               $("#div1").append("<div>div2AA</div>")
           })
            $("#btu2").click(function () {
                $("#div1").empty();
            })
        })
    </script>

案例

https://blog.youkuaiyun.com/alpha_xia/article/details/108077428