本篇内容

  1. 简介
  2. 使用

一、 简介

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

jQuery 库可以通过一行简单的标记被添加到网页中。

jQuery 是一个 JavaScript 函数库。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的更多相关文章

  1. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  2. 解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里？（译）

    解剖SQLSERVER 第十五篇  SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...

  3. Python之路【第十五篇】：Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  4. 第十五篇 Integration Services：SSIS参数

    本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...

  5. 【译】第十五篇 Integration Services：SSIS参数

    本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...

  6. 跟我学SpringCloud | 第十五篇：微服务利剑之APM平台（一）Skywalking

    目录 SpringCloud系列教程 | 第十五篇:微服务利剑之APM平台(一)Skywalking 1. Skywalking概述 2. Skywalking主要功能 3. Skywalking主要 ...

  7. Egret入门学习日记 --- 第十五篇（书中 6.1~6.9节 内容）

    第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...

  8. 淘宝(阿里百川)手机客户端开发日记第十五篇 JSON解析(四)

    解析一个从淘宝传递的JSON (大家如有兴趣可以测试下):{ "tae_item_detail_get_response": { "data": { " ...

  9. Android UI开发第三十五篇——AppCompat实现Action Bar

    每一位Android开发者对Action Bar这种设计都不陌生了,毕竟它已经发布了至少两年了.Android团队发布Action Bar设计规范时同时放出了ActionBar的Api来支持这种设计. ...

  10. SpringBoot第十五篇：swagger构建优雅文档

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11007470.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前面的十四 ...

随机推荐

  1. vue学习之路 - 0.背景

    1 单页面应用程序 Single Page Application (SPA) 从字面意义来看就是一个网站就一个页面,如: coding 网易云音乐 极致的用户体验,就像nativeapp一样 优点: ...

  2. LeetCode111. Minimum Depth of Binary Tree

    题目 给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null,null,15, ...

  3. lintcode_69_二叉树的层次遍历

    二叉树的层次遍历   描述 笔记 数据 评测 给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) 您在真实的面试中是否遇到过这个题? Yes 哪家公司问你的这个题? LinkedIn Airb ...

  4. python逻辑运算(not,and,or)总结

    逻辑运算 1.在没有()的情况下not优先级高于and,and优先级高于or,即优先级关系为()>not>and>or,同一优先级从左往右计算 总结:a or b : 如果a = 0 ...

  5. Zeppelin interperter 模式设置总结图解1

    如有错漏,望请指正,不胜感激. 参考:[zeppelin官网]:https://zeppelin.apache.org/docs/latest/interpreter/spark.html#inter ...

  6. centos 7 编译安装mysql 详细过程

    一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop fi ...

  7. ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug

    搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代 ...

  8. RedHat6.4安装图形行化界面

    1.1    打开电源进入RedHat shell命令行界面 1.2    查看系统镜像包括的所有软件包组信息 [root@zhongyi-test ~]# yum grouplist Loaded ...

  9. nginx虚拟主机搭建

    nginx [engine x]是 Igor Sysoev 编写的一个 HTTP 和反向代理服务器,另外它也可以 作为邮件代理服务器. 它已经在众多流量很大的俄罗斯网站上使用了很长时间,这些网站包括 ...

  10. PTA 7-10（图） 旅游规划 最短路问题

    7-10(图) 旅游规划 (25 分) 有了一张自驾旅游路线图,你会知道城市间的高速公路长度.以及该公路要收取的过路费.现在需要你写一个程序,帮助前来咨询的游客找一条出发地和目的地之间的最短路径.如果 ...