JavaScript|jQuery基础语法
时间:2022-07-22
本文章向大家介绍JavaScript|jQuery基础语法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery 是一个 JavaScript 库,它极大地简化了 JavaScript 编程。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
1.安装jQuery
2.jQuery语法
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码:
document.getElementById(" test ").innerHTML;
3.jQuery 入口函数
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
4.实例
(1)当点击botton时,所有p标签隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
(2)双击鼠标左键,当前点击的p标签隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的,我就消失。</p>
<p>双击我消失!</p>
<p>双击我也消失!</p>
</body>
</html>
(3)使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮,我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
END
编 辑 | 王文星
责 编 | 来人间凑数
- 不被未来折叠掉:AI时代下的思考
- Google 分析的基准化测试
- WebFont 三宗罪之一:WebFont 与 FOUT
- 探究基于声明的身份标识
- 深化“互联网+先进制造业”发展工业互联网的系列解读二:打造平台体系
- WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异
- IDC发布IT转型报告,现代化、自动化、转型三要素必不可少
- 存储过程和触发器的应用
- 两部委印发车联网产业标准体系建设指南 提到了自动驾驶
- 状态开关按钮ToggleButton
- 微软开放 .NET 框架源代码
- Angularjs基础(十二)
- 妙趣横生的HTML5 Page Visibility API
- 禁止/移除 WordPress 4.2 中前台自动加载的 emjo 脚本
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- opencv+python制作硬核七夕礼物
- 七夕节也要学起来,哈希哈希哈希!
- 目标检测器性能评估工具包
- istio 1.7发布
- AkShare-中国宏观-工业品出厂价格指数
- AkShare-中国宏观-采购经理人指数
- Python 为什么没有 void 关键字?
- 【特征提取+分类模型】4种常见的NLP实践思路
- 霸气!开源项目名字就叫BAT,具有语法高亮的Cat类命令
- 【Python基础系列】常见的数据预处理方法(附代码)
- 机器学习基础:类别不平衡问题处理方法汇总及实际案例解析
- 机器学习与统计学:R方代表什么?和P值的关系是什么?
- 机器学习基础:缺失值的处理技巧(附Python代码)
- 七夕限定,致程序员的专属浪漫
- 使用 Docker Multi-stage 高效构建镜像