web JQ 的基本使用

最新推荐文章于 2022-01-22 15:10:28 发布

廷益--飞鸟

最新推荐文章于 2022-01-22 15:10:28 发布

阅读量436

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_45875105/article/details/109736955

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本地js文件下载地址:链接：https://pan.baidu.com/s/1Xa2bjmprjBDdRNbEQCj81Q
提取码：mz24
在这里插入图片描述

JQ的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ的导入</title>
    <!-- 导入JQ框架 -->
    <script src="js/jquery.min.js"></script>
    <!-- 1. 寻找目标文件
         2. 下载文件
         3. 解析文件 -->
</head>
<body>
    <div id="tip">
        hello, world!
    </div>
    <!-- 添加一个ID为marry -->
    <input type="checkbox"
            name="marry",
            id="marry">婚否
    <script>
        //输出jq对象
        console.log($("#tip"));
        //输出dom对象
        console.log(document.getElementById("tip"));

        // dom ==> jq对象
        console.log($(document.getElementById("tip")));

        // jq对象 ==> dom对象
        console.log($("#tip")[0])

        // 1.使用JQ选择器 获取元素
        // 2.改变元素显示的内容
        // document.getElementById("tip").innerText = "今天天气很好";

        $("#tip").html("<b>今天天气很好</b>");

        console.log($("#tip").attr("id")); 

        //获取jq对象 checked/undefined
        console.log($("#marry").attr("checked"));
        //获取jq对象 true/false
        console.log($("#marry").prop("checked"));


    </script>
</body>
</html>

廷益--飞鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web JQ 的基本使用

本地js文件下载地址:链接：https://pan.baidu.com/s/1Xa2bjmprjBDdRNbEQCj81Q提取码：mz24JQ的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫