第十五篇:jQuery
本篇内容
- 简介
- 使用
一、 简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery 库可以通过一行简单的标记被添加到网页中。
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
二、 使用
(1)引用jQuery
把 jQuery 添加到您的网页
如需使用 jQuery,您需要下载 jQuery 库(会在下面为您讲解),然后把它包含在希望使用的网页中。
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
</head>
<body> </body>
</html>
(2)元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
(3)属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
(4)CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<p>test</p> <script>
$("p").css("background-color","red");
</script>
</body>
</html>
(5)jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>
第十五篇:jQuery的更多相关文章
- 第二十五篇 jQuery 学习7 获取并设置 CSS 类
jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...
- 解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译)
解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...
- Python之路【第十五篇】:Web框架
Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...
- 第十五篇 Integration Services:SSIS参数
本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...
- 【译】第十五篇 Integration Services:SSIS参数
本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...
- 跟我学SpringCloud | 第十五篇:微服务利剑之APM平台(一)Skywalking
目录 SpringCloud系列教程 | 第十五篇:微服务利剑之APM平台(一)Skywalking 1. Skywalking概述 2. Skywalking主要功能 3. Skywalking主要 ...
- Egret入门学习日记 --- 第十五篇(书中 6.1~6.9节 内容)
第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...
- 淘宝(阿里百川)手机客户端开发日记第十五篇 JSON解析(四)
解析一个从淘宝传递的JSON (大家如有兴趣可以测试下):{ "tae_item_detail_get_response": { "data": { " ...
- Android UI开发第三十五篇——AppCompat实现Action Bar
每一位Android开发者对Action Bar这种设计都不陌生了,毕竟它已经发布了至少两年了.Android团队发布Action Bar设计规范时同时放出了ActionBar的Api来支持这种设计. ...
- SpringBoot第十五篇:swagger构建优雅文档
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11007470.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前面的十四 ...
随机推荐
- inline-block问题
1.两个相邻的inline-block元素,给inline-block元素设置max-width并且overflow:hidden;之后,相邻行内元素回向下偏移问题 给inline-block元素添加 ...
- WebSeal单点登陆
WebSeal单点登陆 作为学习整理,部分内容来自网络和官方文档. LDAP LDAP可以看作一种数据库,分为客户端和服务端.服务端是用来存放资源,客户端用来操作资源.它是一种树形存储结构,遍历起来会 ...
- mysql 1055 的错误
1.Err1055,出现这个问题往往是在执行sql语句时候,在最后一行会出现这个问题. [Err] 1055 - Expression #1 of ORDER BY clause is not in ...
- centos7 多网卡修改默认路由
最近在virtualbox里搭了一个centos7的虚拟机,但是网络这一块总是有问题. 单网卡下的问题: 1.当我配置连接方式为NAT网络地址转换的时候,虚拟机可以访问外网.但是在网络地址转换的情况下 ...
- 7-1 python 操作redis
1.安装并导入redis模块 # pip install redis 安装redis模块 import redis # 导入redis模块 2.连接一个或多个redis,指定数据库名,并指定返回字符串 ...
- MOS管学习笔记
最近在做一个小的电路设计项目,其中遇到了MOS管,经过查询资料,多年遗忘的数电.模电渐渐又浮现在我的脑海,在百度文库找到一篇比较不错的文章,把它截图使用出来,如原稿作者看到感觉侵权,请及时联系我,以便 ...
- 430. Flatten a Multilevel Doubly Linked List
/* // Definition for a Node. class Node { public: int val = NULL; Node* prev = NULL; Node* next = NU ...
- P2158 [SDOI2008] (欧拉函数
题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...
- 【UE4】二十四、UE4内部版本引擎和官方版本引擎版本保持兼容的方法
内部使用的引擎和官方正式发布的引擎版本号不一致,这种情况会导致一些插件由于版本不一致无法使用,有其是在没有插件源码的情况下.解决方法为 修改Engine\Source\Runtime\Launch\R ...
- python基础之多态与多态性、绑定方法和非绑定方法
多态与多态性 多态 多态并不是一个新的知识 多态是指一类事物有多种形态,在类里就是指一个抽象类有多个子类,因而多态的概念依赖于继承 举个栗子:动物有多种形态,人.狗.猫.猪等,python的序列数据类 ...