jquery02

已于 2022-03-19 21:16:22 修改
阅读量599 收藏
点赞数
文章标签： jquery java
于 2022-03-19 11:45:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65795413/article/details/123591698
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>课前抽查</title>
        <!-- 引入外部js=jquery类库-->
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <!-- 另起一个script块 -->
          <script type="text/javascript">
              //页面载入函数
            $(function(){
                /* 抽查1：使用jquery方式点击按钮弹出文本框的值 */
                var b=$("#bb");
                b.click(function(){
                    var a=$("#aa").val();
                    alert(a)
                })
                /* 抽查2 */
                $("table tr:even").css("background-color","red");
                $("table tr:odd").css("background-color","yellow");
            
            })
            
            
          </script>
    </head>
    <body>
        <input type="text" id="aa"/>
        <input type="button" value="确定" id="bb"/>
        <table width="50%" border="1px">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        </table>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery02:$工具方法&属性css</title>
        <style type="text/css">
            .xx {
                border: solid red 5px;

            }

            .aaa {
                background-color: #00FFFF;
            }

            .bbb {
                background-color: burlywood;
            }
        </style>
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                //1。$工具方法
                //1.1$.each()遍历数组.对象的数据
                //定义对象{}
                //             var stu={"name":"nb","age":38};
                //             //遍历对象
                //             // console.info(stu.name,stu.age)
                //             $.each(stu,function(v,j){//键 值
                //                 console.info(j)

                // })

                //             //定义数组[]
                //             var names=["abc","abcd","abvcd","acc"];
                //             //遍历数组
                //             $.each(names,function(i,n){//下标:元素
                //                 console.info(n)
                //             })

                //定义对象数组[{}，{}]
                //             var stus=[{"name":"nb","age":38},{"name":"xnb","age":18}]
                //             //遍历对象数组
                //             $.each(stus,function(i,s){
                //                 // console.info(s.name,s.age)//方式1
                //                 $.each(s,function(k,v){方式2
                //                     console.info(v);
                //                     
                //                 })
                // })
                //             1.2 $.trim 去除前后空格
                //         var str="  zking  ";
                //         console.info($.trim(str).length)
                // 1.3 $.type()得到数据类型
                //                 var str="1";
                //                 console.info($.type(str))
                //                 1.4 $.isfunction()//判断是否是函数
                //                 
                // 1.5 $.isArray()//判断是否是数组
                // var stus=[{"name":"nb","age":38},{"name":"xnb","age":18}]
                //             
                //             var names=["abc","abcd","abvcd","acc"];
                //             console.info($.isArray(names))
                // console.info($.isFunction(mya))

                // 1.6 $.parseJSON() 解析json格式的字符串-->js的数组/对象
                //定义对象字符串
                // var stuStu='{"name":"nb","age":38}';
                // 将字符串转为对象
                // var stu=$.parseJSON(stuStu);
                //             console.info($.type(stuStu))
                //             console.info(stu.name,stu.age);
                //             $.each(stu,function(i,v){
                //                 console.info(v);
                //             })
                //遍历对象数组
                //             $.each(stus,function(i,v){
                //                 console.info(v.name,v.age);
                //                 
                //             })


                // 2.属性和css
                // 2.1 attr()拿值 设值
                //             var mpath=$("#aa").attr("src")
                //             console.info(mpath);//拿值

                //设置属性值
                //             $("#aa").attr("src","img/2.jpg")
                //             $("#aa").attr("width","500px")

                // 2.2 removeAttr()移除属性值
                // $("#aa").removeAttr("width");
                // $("#aa").removeAttr("src");

                // 2.3 addClass()动态增加样式
                // $("#aa").addClass("xx")//样式的叠加
                // $("#aa").attr("class","xx")//样式的替换

                // 2.4 removeClass()删除对应样式
                // $("#aa").removeClass("xx");

                // 2.5 prop和attr的区别  prop属性值是boolean类型的时候
                // 给图片增加name值
                // $("#aa").attr("name","abc");
                //             $("#aa").prop("name","abc");
                //             
                //             $("#ok").click(function(){
                //                 $(".abc").prop("checked",true);
                //                 
                //             })
                //             
                //             $("#nook").click(function(){
                //                 $(".abc").prop("checked",false);
                //                 
                //             })
                //             
                //案例3:优化表格隔行换色
//                 $("table tr:even").addClass("aaa")
//                 $("table tr:odd").addClass("bbb")
// 
//       2.6 html()和text()的区别
//          var a=$("p").html();//会包含子标签
//          console.info(a);
//           var b=$("p").text();//只会打印纯文本
//           console.info(b);

       // 2.7 val()拿值 设值
                //拿到文本框的value值
//                  var a= $("#bf").val();
//          console.info();
//       赋值
           // $("#bf").val("hhhh")
     
            // /CSS
                        // 1.设置值
                        // $("p").css("background","rgb(111,111,111)");//单属性
                        // $("p").css({"background":"yellow","color":"red"});//多属性
                        
                        //2 拿值
//              var a= $("p").css("background"); 
//                          console.info(a);
            })

//             function mya() {
//                 alert(13)
//             }
        </script>

    </head>
    <body>
        <input type="text" value="wanj" id="bf"/>
        <p>心疼好好<span>huu</span></p>
        <img src="img/1.jpg" width="300px" id="aa" class="yy" />
        <hr />
        <input type="button" value="全选" id="ok" />
        <input type="button" value="取消全选" id="nook" />
        <input type="checkbox" class="abc" value="植物讲述" />植物讲述
        <input type="checkbox" class="abc" value="植物讲述1" />植物讲述1
        <input type="checkbox" class="abc" value="植物讲述2" />植物讲述2
        <table border="1px" width="50%">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>

            </tr>

        </table>
        <pre>


       </pre>

    </body>
</html>

陨落.190
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery02.doc
12-16
Jquery技术的基础详细学习笔记，总结了Jquery技术的各个知识点，可以用来复习以及对基础知识的巩固，对新人的学习很有帮助。
锋利的jquery02
12-17
【锋利的jquery】高清PDF 01，共6部分，全书190M。
jQuery02
m0_62604616的博客
03-17 579
jQuery02$工具的方法和jQuery的属性
JQuery02
weixin_53233582的博客
05-31 99
三级联动
jQuery02 工具方法&属性
zsm030616的博客
03-18 536
先看思维导图： 今天聊到的是关于jQuery工具方法以及jQuery属性 工具方法 1.$.each()：遍历数组、对象、对象数组中的数据 2.$.trim()：去除字符串两边的空格 3.$.type(obj)：得到数据的类型 4.$.isArray(obj)：判断是否是数组 5.$.isFunction(obj)：判断是否是函数 6.$.parseJSON(obj)：解析json字符串转换为js对象/数组 注：这六个方法都是jQuery的工具方法，这些方法..
jQuery02工具方法&属性CSS
m0_68126539的博客
03-19 1137
01选择器的回顾 什么是jQuery以及其基本语法： 例如： 如何用jQuery去获取文本框的值? id="aa" $("#aa").val(); js的window.onload在jQuery里如何表示? $(document).ready(function(){}); $(function(){}) jQuery里如何动态设置样式css的? 单个属性和多个属性的区别? $("div...
JQuery02-JSON和AJAX的使用
小云很优秀
05-10 811
JSON 定义 JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript （欧洲计算机协会制定的 JS 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。 格式 JSON 就是一种有格式的字符串。任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。 规则如下: 映射用冒号（“:”）表示。”名称” : 值，标准格式名称用双引号括起来； 并
jQuery02--工具&属性&CSS
qq_63531917的博客
03-17 765
工具方法 $.each() 遍历数组、对象、对象数组中的数据 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 遍历对象 $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", ...
jQuery_02
weixin_67856139的博客
03-11 343
$ 1.$是什么？ $(function(){}); 如果使用上述语句报错了 $ is not deifned，就说明没有引入jQuery文件。 2.jQuery文件结构 其实时一个自执行函数 (function(){ window.jQuery = window.$ = jQuery }()); 3. a.引入一个js文件，是会执行这个js文件中的代码的 b.jQuery文件时一个自执行函数，执行这个jQuery文件中的代码，其实就是在执行这个自执行函数 c.这个自执行文件就是windo...
jQuery02&工具&属性&CSS
m0_65795902的博客
03-17 674
今天主要讲jQuery的工具和属性和css 1思维导图 1.工具方法 1.1如何使用工具方法：代码展示 2 属性 2.1jQuery属性该如何使用 关于全选的方法 拿值和设置值 优化表格隔行换色 attr（）和addclass（）的区别 3、css 底层代码展示 网页界面 ...
jQuery02——jQuery操作属性、元素、元素尺寸、位置
小白的学习路
12-16 213
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 语法 注意:prop() 除了普通属性操作，更适合操作表单属性:disabled / checked / selected 等。 1.1.2 元素自定义属性值 attr() 用户自己给元素添加的属性，我们称为自定义属性。 比如给 d
jquery文档02
06-20
jquery文档02
Jquery第02天.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
lab02-JQuery
03-27
在"lab02-JQuery"这个实验项目中，我们将深入探讨 jQuery 的核心概念和常见用法。 ### 1. jQuery 的基本使用 jQuery 的引入通常通过 `<script>` 标签在 HTML 文件中完成。引入 jQuery 后，我们可以通过 `$` 或 `...
java版的上门家政系统和PHP版的上门家政有什么区别？
baina666的博客
07-12 593
综上所述，Java版和PHP版的上门家政系统各有优缺点，选择哪种语言主要取决于项目的具体需求、预算、开发团队的技术栈以及未来的扩展计划等因素。同时，由于Java生态系统的复杂性和多样性，也可能需要投入更多的时间和资源来学习和掌握相关的技术和工具。Java版：Java拥有庞大的生态系统和丰富的第三方库，这为家政系统的开发和扩展提供了强大的支持。Java版：由于Java的编译执行机制和高效的垃圾回收算法，Java版家政系统通常具有更高的运行效率和更好的性能表现，尤其是在处理高并发、大数据量等复杂场景时。
基于Java技术的校园台球厅人员与设备管理系统
heye0910032的博客
07-12 566
本文介绍了一个基于Java技术和SpringBoot框架开发的校园台球厅人员与设备管理系统。该系统利用MySQL数据库进行数据存储，实现了包括首页、个人中心、用户管理、会员账号管理、会员充值管理、球桌信息管理、会员预约管理、普通预约管理、留言反馈和系统管理等多功能集成。系统设计考虑了用户友好性和操作便捷性，旨在提高校园台球厅人员与设备管理的效率和质量。本文介绍了一个基于Java技术和SpringBoot框架开发的校园台球厅人员与设备管理系统。
Java 中有哪几种基本数据类型？请分别列出它们并简述每种数据类型的特点及其在内存中的占用空间？
最新发布
liangzai215的专栏
07-15 319
在Java的世界里，数据是构建应用程序的基石。为了高效地处理这些数据，Java设计了一系列基础数据类型，它们直接映射到计算机硬件上，因此在性能和内存使用上更为高效。我们常说的Java八大基本数据类型，涵盖了整数、浮点数、字符和布尔值，下面我将一一介绍它们的特点以及在内存中的占用空间，并通过简单的代码实例来加深理解。
深入剖析 Java 中 Spring Bean 的生命周期
weixin_42545951的博客
07-12 646
在 Java 开发中，Spring 框架是广泛使用的企业级应用开发框架。理解 Spring Bean 的生命周期对于开发者来说至关重要，这也是面试中经常会被问到的重要知识点。
jquery时间轴
05-31
<div class="timeline-date">2021-06-02 事件标题 事件描述 <div class="timeline-date">2021-06-03 事件标题 事件描述 ``` CSS代码： ``` .timeline { position: relative; padding: 0; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值