jQuery是一个轻量级JavaScript库

它可以进行如下操作:

  • 选取HTML元素
  • 对HTML元素进行操作
  • 对CSS进行操作
  • 编写HTML事件函数
  • JavaScript特效
  • HTML DOM
  • AJAX
  • 添加jQuery库的方式很简单,在head中添加包含了所有jQuery函数的js文件即可。该文件需要从jQuery.com下载。
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

或者使用CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.8.0/jquery.min.js"></script>
</head>

HTML5中可以省略type="text/javascript"

建议使用CDN的方式,页面加载速度会比较快

  • jQurey语法

$(selector).action()

selector用来查找HTML元素

action用来执行对元素的操作

e.g

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head> <body>
<h2>hi</h2>
<p>hello</p>
<button type="button">Click me</button>
</body>
</html>

点击后,

为了保证在文档加载完全之后运行jQuery部分的代码

需要将jQuery函数置于$(document).ready(function(){
});中

  • jQuery选择元素

$("p") --选取<p>元素

$("#demo") --选取id为demo的元素

$(".demo") --选取class为demo的元素

这几种方式可以组合使用

e.g $("div#demo.head") -- id=demo的元素中class=head的元素

  • jQuery选择属性

$("[href]") --带href属性的元素

$("[href='x']")  --选取所有带有 href 值等于 "x" 的元素。

$("[href!='x']") -- 选取所有带有 href 值不等于 "x" 的元素。

$("[href$='.png']") -- 选取所有 href 值以 ".png" 结尾的元素。

  • CSS选择

$("p").css("font-size");

jQuery综述的更多相关文章

  1. XXX系统发展综述(SSH+Jquery EasyUI)

    一个.该项目总体介绍 前一段时间的工作.我大概花了两三个月开发Web管理信息系统.用于框架集Struts2.3.1+Spring3.0+Hibernate3+Jquery EasyUI1.3.5.业务 ...

  2. jQuery 邮箱下拉列表自动补全

    综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...

  3. 最新的jQuery插件和JavaScript库

    每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

  4. 全屏背景:15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  5. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  6. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  7. jQuery应用一之验证插件validate的使用

    综述 validate是一个用来验证表单提交的插件,应用十分广泛,具有如下的几个功能 自带了基本的验证规则 提供了丰富的验证信息提示功能 多种事件触发验证 自定义验证规则 下面我们就来感受一下这个插件 ...

  8. 使用jquery.uploadify动态传递自己的参数

    上传碰到这个问题在上传文件的时候同时上传文件的类型..上网找了半天.总于解决了..分享一下了..直接例子了.. html <%@ page language="java" i ...

  9. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

随机推荐

  1. bzoj3140: [Hnoi2013]消毒(二分图)

    题目描述 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为a*b*c,a.b.c 均为正整数.为了实验的方便,它被划分为a*b*c个单位立方体区 ...

  2. 阿里云linux安装jmeter并进行压测

    一.阿里云linux安装JDK 1.下载安装JDK jdk官网,选择linux版本,下载并保存. (一)yum安装 安装epel的yumyuan yum install epel-release -y ...

  3. P3628 [APIO2010]特别行动队

    \(\color{#0066ff}{ 题目描述 }\) 你有一支由 \(n\) 名预备役士兵组成的部队,士兵从 \(1\) 到 \(n\) 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑 ...

  4. angularJs获取复选框中id 进行批量删除

    主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组. ...

  5. 【记录一下】从0到1 我的python开发之路

    请设计实现一个商城系统,商城主要提供两个功能:商品管理.会员管理. 商品管理: - 查看商品列表 - 根据关键字搜索指定商品 - 录入商品 会员管理:[无需开发,如选择则提示此功能不可用,正在开发中, ...

  6. O - 听说下面都是裸题 (最小生成树模板题)

    Economic times these days are tough, even in Byteland. To reduce the operating costs, the government ...

  7. 75th LeetCode Weekly Contest All Paths From Source to Target

    Given a directed, acyclic graph of N nodes.  Find all possible paths from node 0 to node N-1, and re ...

  8. day25 网络编程之socket sc架构

    1.  为什么要学习socket? socket就是网络通信的工具,任何一门语言都有socket,他不是任何一个语言的专有名词,而是大家通过自己的程序与其他电脑进行网络通信的时候都用它. 2.  客户 ...

  9. restframework CBV试图的4种方式

    day100 上节回顾 1 APIView流程 2 序列化组件(restframework) 1 # 自定义序列化组件 class BookSerializers(serializers.Serial ...

  10. sqlserver 常用语法

    sqlserver查找 table, view, column select * from information_schema.tables where table_schema='bk' sele ...