jquery

程序员dami
99 阅读5分钟

Jquery

导入jQuery库

一、在线获取

二、本地下载后导入

image-20230511165850257

jquery对象和dom对象

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

$("#test").html()

**意思是指：获取ID为test的元素内的html代码。其中html()

是jQuery里的方法

2. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用

**jQuery里的方法:

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

$("#id").html();

$("#id").css();

......

一般写法
var $variable ： jQuery 对象 
var variable ： DOM 对象

通过jquery对象获得dom对象

方式1 通过数组下标获取 方式2 => 通过数组下标get(index)

1. 对于一个 DOM **对象，只需要用$()把 **DOM 对象包装起来，就可以获得一个 jQuery 对象

了。$(DOM对象）

2. DOM 对象转换成 JQuery 对象后，就可以使用 jQuery 的方法了

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="./script/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
    window.onload = function (){
        //得到jquery对象
        var $username = $("#username");
        alert("$username value= " + $username.val())

        //准备把jquery对象->dom
        //老韩说明
        //(1)jquery是一个数组对象，封装了dom对象
        //(2)可以通过[index] 来获取，也可以通过get(index)
        //(3)一般来说 index 是 0
        //方式1  通过数组下标获取
        var username = $username[0];
        alert(username)// 输出username 是 object HtmlInputElement
        alert("username value=" + username.value);

        //方式2 => 通过数组下标get(index) 获取（老师提醒，在练习学习过程, 输出的提示信息尽量不同）
        var username = $username.get(0);
        alert("username value~~~=" + username.value)
    }
</script>
<body>
用户名 <input type="text" id="username" name="username" value="韩顺平教育"/>
</body>
</html>

得到jquery对象结果：

image-20230511170622941

方式2：

image-20230511170714036

选择器

  1. id 选择器 $("#id")

  2. 元素选择器 $("div")

  3. 类选择器 $("".class")

  4. 全选择器 $(" * ")

  5. 层次选择器

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

    元素,兄弟元素等, 则需要使用层次选择器

    $("body > div") 内子

    [第一层div]

    $("#one + div") id 为 one 的下一个

    $("#two ~ div") id 为 two 的元素后面的所有兄弟

    $("#two").siblings("div") id 为 two 的元素所有

    兄弟元素

$(function () {

//1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
    $("#b1").click(function () {
    $("div").css("background", "#0000FF");
    })
//2. 改变 <body> 内子 <div>[第一层div] 的背景色为 #FF0033
    $("#b2").click(
    function () {
    $("body > div").css("background", "#FF0033");
    }
    )
//3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
    $("#b3").click(
    function (){
    $("#one + div").css("background", "#0000FF");
    }
    )
//4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
    $("#b4").click(
    function () {
    $("#two ~ div").css("background", "#0000FF");
    }
    )
//5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
    $("#b5").click(
    function (){
    $("#two").siblings("div").css("background", "#0000FF");
    }
    )
})
  1. 基础过滤选择器

image-20230511173758380

image-20230511173817899

image-20230511173835665

示例：

//改变第一个 div 元素的背景色为 #0000FF
$("div:first").css("background", "#0000FF")
$("div:eq(0)").css("background", "#00FF00")

  1. 内容过滤选择器

    image-20230511175200744

  2. 可见度过滤选择器

image-20230511175725815

image-20230511175749527

//选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
$("#b2").click(
    function () {
        $("div:hidden").css("background", "green");
        $("div:hidden").show();
    }
)
  1. 属性过滤选择器

jquery和window

image-20230513154228331

JSON

Json和字符串的相互转换，两个方法：

JSON.stringify(str)------->json转字符串

JSON.parse(json)-------->字符串转json

JSON 在java 中使用

java 中使用json，需要引入到第3 方的包 gson.jar

Gson 是Google 提供的用来在Java 对象和JSON 数据之间进行映射的Java 类库。

可以对JSON 字符串和Java 对象相互转换

JSON 在Java 中应用场景

  1. Javabean 对象和json 字符串的转换
  2. List 对象和json 字符串的转换
  3. map 对象和json 字符串的转换

image-20230513170334519

代码：

//创建一个gson对象，做完一个工具对象使用
        Gson gson = new Gson();//记得引入包

        //演示javabean 和 json字符串的转换
        Book book = new Book(100, "韩顺平零基础学Java");

//1. 演示把javebean -> json字符串
        String strBook = gson.toJson(book);
        System.out.println("strBook=" + strBook);
//2. json字符串->javabean
        //老韩解读
        //(1) strBook 就是 json字符串
        //(2) Book.class 指定将 json字符串转成 Book对象
        //(3) 底层是反射机制
        Book book2 = gson.fromJson(strBook, Book.class);
        System.out.println("book2=" + book2);

 //3. 演示把list对象 -> json字符串
        List<Book> bookList = new ArrayList<>();
        bookList.add(new Book(200, "天龙八部"));
        bookList.add(new Book(300, "三国演义"));

        //老韩解读, 因为把对象,集合转成字符串, 相对比较简单
        //底层只需要遍历, 按照json格式拼接返回即可
        String strBookList = gson.toJson(bookList);
        System.out.println("strBookList= " + strBookList);
//4. 演示把json字符串 -> list对象
//老师解读 👇 👇 👇
        //(1) 返回类型的完整路径java.util.List<com.hspedu.json.Book>
        //(2) gson的设计者，需要得到类型的完整路径，然后进行底层反射
        //(3) 所以gson 设计者就提供TypeToken, 来搞定.

        //二说 TypeToken , 为甚要加 {}

        //(1) 如果我们  new TypeToken<List<Book>>()  提示
        // 'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'
        //(2) 因为TypeToken 的无参构造器是protected ， 而 new TypeToken<List<Book>>() 就是调用其无参构造器
        //(3) 根据java基础, 如果一个方法是protected ,而且不在同一个包， 是不能直接访问的, 因此报错
        //(4) 为什么 new TypeToken<List<Book>>(){} 使用就可以，这里就涉及到匿名内部类的知识.
        //(5) 当 new TypeToken<List<Book>>(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类)
        //(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();
 		👇 👇 👇
 		Type type = new TypeToken<List<Book>>() {
        }.getType();

        List<Book> bookList2 = gson.fromJson(strBookList, type);
        System.out.println("bookList2= " + bookList2);
//5, 把map对象->json字符串
        Map<String, Book> bookMap = new HashMap<>();
        bookMap.put("k1", new Book(400, "射雕英雄传"));
        bookMap.put("k2", new Book(500, "西游记"));

        String strBookMap = gson.toJson(bookMap);
        System.out.println("strBookMap=" + strBookMap);

        //6. 把json字符串 -> map对象
        //   new TypeToken<Map<String, Book>>() {}.getType()=> java.util.Map<java....String,com.hspedu.json.Book>
        Map<String, Book> bookMap2 = gson.fromJson(strBookMap,
                new TypeToken<Map<String, Book>>() {
                }.getType());
        System.out.println("bookMap2=" + bookMap2);

匿名内部类知识点参考：

一个继承了类的子类的匿名对象 或者一个实现了接口的实现类的匿名对象。

开发中，最常用到的内部类就是匿名内部类了。以接口举例，当你使用一个接口时，似乎得做如下几步操作。

1、定义子类

2、重写接口中的方法

3、创建子类对象

4、调用重写后的方法

==我们的目的，最终只是为了调用方法，那么能不能简化一下，把以上四步合成一步呢？匿名内部类就是做这样的快捷方式。==

条件：

匿名内部类必须继承一个父类或者实现一个父接口。

格式

复制代码

new 父类名或者接口名(){
    // 方法重写
    @Override 
    public void method() {
        // 执行语句
    }
};

复制代码

使用方式

以接口为例，匿名内部类的使用，代码如下：

定义接口：

public abstract class FlyAble{
    public abstract void fly();
}

创建匿名内部类，并调用：

复制代码

public class InnerDemo {
    public static void main(String[] args) {
        /*
        1.等号右边:是匿名内部类，定义并创建该接口的子类对象
        2.等号左边:是多态赋值,接口类型引用指向子类对象
        */
        FlyAble  f = new FlyAble(){
            public void fly() {
                System.out.println("我飞了~~~");
            }
        };

        //调用 fly方法,执行重写后的方法
        f.fly();
    }
}

复制代码

通常在方法的形式参数是接口或者抽象类时，也可以将匿名内部类作为参数传递。代码如下：

复制代码

 public class InnerDemo2 {
    public static void main(String[] args) {
        /*
        1.等号右边:定义并创建该接口的子类对象
        2.等号左边:是多态,接口类型引用指向子类对象
       */
        FlyAble  f = new FlyAble(){
            public void fly() {
                System.out.println("我飞了~~~");
            }
        };
        // 将f传递给showFly方法中
        showFly(f);
    }
    public static void showFly(FlyAble f) {
        f.fly();
    }
}

复制代码

以上两步，也可以简化为一步，代码如下：

复制代码

public class InnerDemo3 {
    public static void main(String[] args) {           
        /*
           创建匿名内部类,直接传递给showFly(FlyAble f)
        */
        showFly( new FlyAble(){
            public void fly() {
                System.out.println("我飞了~~~");
            }
        });
    }

    public static void showFly(FlyAble f) {
        f.fly();
    }
}

Ajax

应用、优点

image-20230513213432939

注意：

image-20230513221707916

image-20230513221744126

avatar
文章
阅读
粉丝