Java工程师应该掌握的 jquery 语法（一）

最新推荐文章于 2024-11-07 10:38:40 发布
最新推荐文章于 2024-11-07 10:38:40 发布
阅读量207 收藏
点赞数
分类专栏： # JavaScript 文章标签： js jquery html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43437122/article/details/118750811
版权

1. Jquery的简介

在这里插入图片描述

2. 使用方法

  • 首先引入juery
// 引入文件的标签内不可再写入任何代码, 写了也不执行
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  • 使用jquery语法进行js中的操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        // 等待网页加载完成之后再执行 : 方式一
        $(function(){
            // jquery中给按钮添加onclick事件
            $("#btn").click(function(){
                alert("按钮被点击了")
            })
        })

        // 等待网页加载完成之后再执行 : 方式二
        $(document).ready(function(){
            // jquery通过类名获取dom对象
            console.log($(".con1").size())
            // jquery通过id获取dom对象
            console.log($("#d2").size())

            // 修改标签中的内容
            $("#d1").html("<h1>Hello World</h1>") // 等价于js中的innerHTML属性
            // 获取标签中的内容
            console.log($("#d1").html()) 
            // 获取标签中的文本内容
            console.log($("#d1").text()) // 等价于js中的innerTEXT属性
        })
        
    </script>
</head>
<body>
    <button id="btn">按钮</button>

    <div class="con1" id="d1">111111</div>
    <div class="con2" id="d2">222222</div>
    <div class="con3" id="d3">333333</div>
</body>
</html>

3. show() / hide()

  • show() 显示标签
  • hide() 隐藏标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>

        $(function(){
            $("#btn1").click(function(){
                // 隐藏图片
                $("#ph").hide()
            })

            $("#btn2").click(function(){
                // 显示图片
                $("#ph").show()
            })
        })

    </script>
</head>
<body>
    <button id="btn1">隐藏图片</button>
    <button id="btn2">显示图片</button>
    <div>
        <img id="ph" src="img/5.gif">
    </div>
</body>
</html>

4. 选择器

框红框的为开发中常用的选择器。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
通过案例学习如何使用这些选择器：

案例1：表格隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行变色</title>
    <style>
        .c1 {
            background: red;
        }

        .c2 {
            background: yellow;
        }

        .c3 {
            background: blue;
        }

        .c4 {
            background: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            // 给偶数行添加颜色, 下标从0开始
            $("tr:even").addClass("c1")
            // 给奇数行添加颜色
            $("tr:odd").addClass("c2")

            // 给最后一行添加颜色
            $("tr:last").addClass("c3")
            // 给索引大于3的添加颜色
            $("tr:gt(3)").addClass("c4")
        })
    </script>
</head>
<body>
    <table border="1" width="300" height="300" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

案例2：表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单选择器</title> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
    <script>
        $(function(){
            console.log($(":checkbox").size())
            // 找到所有表单元素
            console.log($(":input"))
            // 找到被选中的checkbox
            console.log($(":checkbox:checked"))
            // 找到被选中的option标签
            console.log($("select option:selected").val())
            console.log($("select").val())
            // 给标签属性赋值
            $(":checkbox[value='dapai']").prop("checked", true)
            $(":checkbox[value='daqiu']").prop("checked", false)
            // 获取标签属性的值
            console.log($(":checkbox[value='dapai']").prop("checked"))
        })
    </script>
</head>
<body>
    <div>
        <input type="text" />
    </div>
    <div>
        <input type="checkbox" value="dapai" />打牌
        <input type="checkbox" value="daqiu" checked="checked" />打球
        <input type="checkbox" value="dani" checked="checked" />打你
    </div>
    <div>
        <select>
            <option value="zhengzhou">郑州</option>
            <option value="kaifeng">开封</option>
            <option value="zhoukou" selected="selected">周口</option>
        </select>
    </div>
    <div>
        <input type="password" />
    </div>
    <div>
        <input type="radio" name="sex" />男
        <input type="radio" name="sex" />女
    </div>
</body>
</html>

案例3：全选 / 全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选/全不选</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            $("#all").change(function(){
                var status = $("#all").prop("checked")
                $(".cb").prop("checked", status)
            })
        })
    </script>
</head>
<body>
    <div>
        <input type="checkbox" id="all" >全选/全不选
    </div>
    <div>
        <input type="checkbox" class="cb">打球
    </div>
    <div>
        <input type="checkbox" class="cb">打牌
    </div>
    <div>
        <input type="checkbox" class="cb">打人
    </div>
    <div>
        <input type="checkbox" class="cb">打你
    </div>
</body>
</html>
java中include标签的用法_jsp中include的两种用法
weixin_30568317的博客
02-26 4662
一、两种用法第一种：include指令(静态包含)：通过file属性来指定被包含的页面，当JSP转换成Servlet时引入指定文件，一般不需要写头第二种：第二种：动作元素(动态包含)：通过page属性来指定被包含的页面，当JSP页面被请求时引入指定文件，需要写头flush为布尔属性，定义在包含资源前是否刷新缓存区。注意：动作通常是包含那些经常改动的文件，因为被包含的文件改动不会影响到包含文件，因此...
自学Java得学到什么程度可以去工作?
weixin_46898270的博客
10-07 1533
多年Java开发从业者：首先，这个问题主要问：自学Java编程技术，如果才能找到一份Java编程的工作。按照现在的招聘标准来看，无论你去哪个公司面试，你只需要满足他们公司的需求就可以。 找到一份Java编程工作需要掌握的内容如下： 首先是Javase作为Java最基本的学习内容，不在多说。 然后是掌握JavaScript的基本原理，因为做Java编程开发必须学会JavaScript，用到JavaScript非常多，但是现在很多公司是不用去写原生的JavaScript，但是如果你想成为一个厉害的Java开发者
jQuery 基础知识总结（超级详细，Java工程师进阶路线
m0_60666570的博客
08-27 131
})(window); 三、jQuery 无new构造 =============== 嘿，回想一下使用 jQuery 的时候，实例化一个 jQuery 对象的方法： // 无 new 构造 $(’#test’).text(‘Test’); // 当然也可以使用 new var test = new $(’#test’); test.text(‘Test’); 大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式，直接 $('') 进行构造，这也是 jQuery
java jquery用的多吗_越来越少人用JQuery，但你就不学了吗？（2）
weixin_39861882的博客
02-24 291
【官方正版】javascript与jquery网页47.6元包邮(需用券)去购买 >如需要跟多资料请点击下方图片⬇(扫码加好友→备注66)Jquery选择器​ 和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector ...
JQuery(适用于Java学者)
boilll的博客
02-02 443
适用于Java学者
java工程师必备技能_java开发工程师必须掌握哪些技能？
weixin_35947806的博客
02-13 974
Java基础技术1.会使用Java基本语法编写简单控制台程序；2.会使用简单算法实现业务需求；3.会使用MyEclipse开发、调试程序；4.会使用操作属性文件读取配置信息；5.能够正确讲述面向对象相关概念，并在编写程序时熟练应用；6.能使用Java语言实现字符串操作、常用I/O操作；7.会使用JDBC完成数据增删改查操作；8.会使用异常处理程序中的意外情况；9.熟练运用Java常用API；10....
java web工程师_如何成为一个Java Web工程师
weixin_29731583的博客
03-04 400
Java其实没有那么多的专业术语，是很容易听懂的一门课程，通过学习让你尽快掌握基础知识。WEB阶段有很多项目训练，那才是我们真正要学习熟练的内容。听懂强哥讲课太简单了，你只达到了20%的目标，剩下的就是练习，练习，反复练习，能背着把代码，按自己理解的思路能敲出来了，你再继续往后学，不听强哥的话，你走不了多远，一定会半途而废的。学软件对智商的要求不高，但是要求你坚韧的毅力和一定要成功的决心。当然最重...
[原创] jQuery源码分析-Java工程师应该向jQuery学习的8点建议
nuysoft的专栏
10-18 214
  作者：nuysoft/高云　QQ：47214707　EMail：nuysoft@gmail.com 声明：本文为原创文章，如需转载，请注明来源并保留原文链接。 分析jQuery源码时记录的一点感悟 1. 链式写法 这是jQuery语法上的最大特色，也许该改改POJO里的set方法，和其他的非get方法什么的，可以把多行代码合并，减去每次敲打对象变量的麻烦 2. 动态参数 偶尔使...
java工程师必须会的技能_Java开发工程师必须掌握哪些技能？
weixin_28852151的博客
02-24 172
原标题：Java开发工程师必须掌握哪些技能？Java基础技术1.会使用Java基本语法编写简单控制台程序；2.会使用简单算法实现业务需求；3.会使用MyEclipse开发、调试程序；4.会使用操作属性文件读取配置信息；5.能够正确讲述面向对象相关概念，并在编写程序时熟练应用；6.能使用Java语言实现字符串操作、常用I/O操作；7.会使用JDBC完成数据增删改查操作；8.会使用异常处理程序中的意外...
java高级工程师认证考试_ACAA 认证Java开发工程师
weixin_34731498的博客
12-29 4022
【概述】ACAA 认证Java开发工程师考试包括【JAVA语法基础及面向对象】、【J2SE核心】、【SQL语言及Oracle】、【J2EE核心技术】、【HTML+CSS+JAVASCRIPT网页开发】、【轻量级J2EE开发框架】、【企业应用开发部署环境】以及【JAVA实践操作】八个部分，考试形式为基于计算机的在线考试，试题由60道单项、多项选择题以及实践操作题组成，满分为100分，综合成绩60分为...
高级java工程师面试考纲，java高级工程师进阶知识地图
11-01
### 高级Java工程师面试考纲详解 #### Java基础 1. **Collection和Map** - **继承体系**：理解`Collection`接口与其子接口如`List`、`Set`的关系，以及`Map`接口的不同实现类之间的联系。 - **具体实现**：深入...
JAVA工程师的短板，前台页面的制作，推荐大家一个网站，都是用JQuery做好的前台页面，希望可以帮助大家！！！
10-25
在IT行业中，特别是对于那些专注于后端开发如Java工程师来说，前端页面的设计与实现往往成为了一个短板。这不仅是因为前后端技术栈的不同，更因为两者所关注的重点与思维方式存在差异。本文将根据提供的标题、描述及...
1000道 互联网Java工程师面试题 485页
05-07
这份“1000道互联网Java工程师面试题 485页”的资料，无疑为准备面试或者提升技能的Java开发者提供了一份宝贵的资源。 首先，我们需要了解Java的基础知识，包括但不限于： 1. **Java语言特性**：Java是一种面向...
2020年JAVA工程师简历模板.zip
08-28
在IT行业中，Java工程师是备受追捧的职业之一，尤其在2020年，随着互联网行业的快速发展，Java技术的广泛应用使得这一职位的需求量持续增长。"2020年JAVA工程师简历模板.zip"是一个针对该领域求职者的实用资源，旨在...
HTML单页面实现量子纠缠效果
weixin_52236586的博客
11-06 308
【代码】单页面量子纠缠效果。
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 651
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
HTML前端页面设计静态网站-仿百度
2402_86955314的博客
11-02 524
浅浅分享一下前端作业，大佬轻喷~
一七五、HTML 不同类型的事件及其说明和示例
最新发布
梅某某
11-07 577
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 469
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
作为Java工程师应该学会什么
06-13
作为一名Java工程师，你需要掌握以下技能： 1. Java编程语言：Java工程师需要熟练掌握Java编程语言，包括面向对象编程、基本语法、集合框架等。 2. Web开发技术：Java工程师需要掌握Web开发相关技术，如Servlet、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值