jQuery操作基本操作一学习笔记

╰+哭是因爲堅強的太久メ 2022-01-09 17:35 331阅读 0赞

# 基本选择 #

用法 描述  
$(“\#elementID”) \#表示根据id查找；查找id为elementID的元素；建议的用法。所以一般推荐给标签设置ID。  
类似：  
document.getElementById("elementID") 但两者之间返回类型不同

$(“.className”) .表示根据class样式名称查找；查找样式名称为className的所有标签

$(“input”) 查找所有input标签

# 基本取/设值 #

用法 描述  
$(“\#elementID”).val()  
$(“\#elementID”).val(“新值”)  
分别表示取值和设置值  
$(“\#elementID”).html()  
$(“\#elementID”).html(“新值”)  
分别表示获取标签内部的html文本内容和设置html文本内容。类似innerHTML  
$(“\#elementID”).text()  
$(“\#elementID”).text(“新值”)  
分别表示获取标签内部的纯文本内容和设置纯文本内容。  
$(“\#elementID”).attr(“name”)  
$(“\#elementID”).attr(“name”,”itcast”)  
attr为获取对应属性的值或设置对应属性的值。如果遇上具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 则使用prop()

<meta charset="UTF-8">
        <title>01_basic.html</title>
        
        <script src="../../static/js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    alert($("#div1").html());
                });
                $("#btn2").click(function(){
                    alert($(".divClass").text());
                    });
                $("#btn3").click(function(){
                    alert($("#div1").attr("title"));
                });
                $("#btn4").click(function(){
                    alert($("input").length);
                });
                $("#btn5").click(function(){
                    $("#div1").html("div内容修改！！");
                });
                $("#btn6").click(function(){
                    alert("div的内容："+$("#div1").text() + "，span的内容:" + $("span").text())
                });
    
            });
        </script>
        <style>
        .divClass{
            text-align: center;
            width: 100%;
        }
        </style>
    </head>
    
    <body>
    <div id="div1" class="divClass" title="div 的 title属性值">
        <p>div 的内容</p>
    </div>
            <br><br>
            <input type="text" value="输入框1"><br>
            <input type="text" value="输入框2"><br><br>
            <span>这是span的信息</span><br>
    
            <input type="button" value="1#获取div里面的Html内容" id="btn1">
            <br><br>
            <input type="button" value="2.获取div里面的纯文本内容" id="btn2">
            <br><br>
            <input type="button" value="3#获取div里面的title属性的值" id="btn3">
            <br><br>
            <input type="button" value="4获取input的个数" id="btn4">
            <br><br>
            <input type="button" value="5改变div里面的值" id="btn5">
            <br><br>
    <input type="button" value="同时获取div和span" id="btn6">
    <br><br>

转载于:https://blog.51cto.com/357712148/2134696

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery基本操作

会使用基本选择器获取元素会使用层次选择器获取元素会使用属性选择器获取元素会使用过滤选择器获取元素

比眉伴天荒/ 2024年04月29日 11:11/ 0 赞/ 74 阅读

相关 jQuery学习笔记09-操作CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

悠悠/ 2024年04月17日 16:48/ 0 赞/ 93 阅读

相关 Vue UI 学习笔记（基本操作）

Vue UI 学习笔记（基本操作）安装Vue 打开UI界面访问 Vue 项目管理器查看在管理的项目创建新项目

╰半橙微兮°/ 2023年02月19日 15:22/ 0 赞/ 19 阅读

相关 git 学习笔记(一)git基本操作

svn简介 SVN是Subversion的简称，目前是Apache项目底下的一个开放源代码的版本控制系统，SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而开发

阳光穿透心脏的1/2处/ 2022年11月06日 14:52/ 0 赞/ 294 阅读

相关 JQuery（学习笔记三）JQuery HTML操作

一、jQuery DOM 操作（1）获得内容 <table style="width:500px;"> <tbody> <tr> <td> <p

素颜马尾好姑娘i/ 2022年05月14日 12:21/ 0 赞/ 294 阅读

相关 JQuery基本操作

关于jquery的选择器，我们知道进行jquery基本操作的基础就是jquery选择器的精准定位那我们该怎么满足各种限制条件来选择我们需要的元素对象呢，这里给大家着重介绍一

港控/mmm°/ 2022年05月09日 14:28/ 0 赞/ 265 阅读

相关 jQuery操作基本操作一学习笔记

基本选择用法描述 $(“\elementID”) \表示根据id查找；查找id为elementID的元素；建议的用法。所以一般推荐给标签设置ID。类似：

╰+哭是因爲堅強的太久メ/ 2022年01月09日 17:35/ 0 赞/ 332 阅读

相关 Hbase学习笔记和基本操作

Hbase特性：1 最终持久化存储是基于HDFS——可以随时在线扩容 2 数据增删改查：分布式系统——分布式数据库

痛定思痛。/ 2021年12月15日 06:05/ 0 赞/ 377 阅读

相关 SQL学习笔记-基本操作

文章目录 0. 推荐书 << sql必知必会>> 1. 安装好mysql后, 进入mysql 2. 显示所有

Myth丶恋晨/ 2021年12月14日 20:39/ 0 赞/ 398 阅读

相关【Git】学习笔记之基本操作

什么是Git? Git是一个开源的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。通俗的讲，就是能够保存你的历史操作记录并在必要的时候帮你恢复到指定

冷不防/ 2021年09月26日 06:06/ 0 赞/ 452 阅读