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

╰+哭是因爲堅強的太久メ 2022-01-09 17:35 301阅读 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 条评论，301人围观）

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

相关阅读

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

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

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

相关 JQuery-学习笔记03【基础——DOM操作】

> [Java后端学习路线笔记汇总表【黑马程序员】][Java_ _] > > 1. [JQuery-学习笔记01【基础——JQuery基础】][JQuery-_

我会带着你远行/ 2022年10月30日 10:19/ 0 赞/ 204 阅读

相关笔记 jquery css操作

$("p").css(\{ "color":"white", "background-color":"\98bf21", "font-fami

亦凉/ 2022年06月06日 06:05/ 0 赞/ 160 阅读

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

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

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

相关 JQuery基本操作

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

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

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

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

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

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

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

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

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

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

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

相关 JQuery学习笔记(3)JQuery中的DOM操作

JQuery中的DOM操作引子 DOM: Document Object Model，文档对象模型，一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地

墨蓝/ 2021年11月05日 12:20/ 0 赞/ 321 阅读

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

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

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