jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程,很容易学习

添加 jQuery 库

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

如果不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

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

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素。
  • jQuery 的 action() 执行对元素的操作

文档就绪函数

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。

jQuery 选择器

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

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

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

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

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

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

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

更多的选择器实例

语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。

通常会把 jQuery 代码放到 <head>部分,不过,把它们放到一个单独的js文件中会更好,函数易于维护

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

												

jQuery 学习笔记(一)jQuery 语法的更多相关文章

  1. jQuery 学习笔记:jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  2. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. 锋利的jQuery学习笔记之jQuery选择器

    在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...

  5. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  6. jQuery学习笔记之jQuery.fn.init()的参数分析

    这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下   从return new jQuery.fn.init( selector, context, rootjQuer ...

  7. jQuery学习笔记(jquery.ui插件)

    官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...

  8. jQuery学习笔记(jquery.simplemodal插件)

    官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...

  9. jQuery学习笔记(jquery.form插件)

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  10. jQuery学习笔记(jquery.validate插件)

    jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...

随机推荐

  1. Docker在centos下安装以及常见错误解决

    系列目录 Docker安装(使用阿里云镜像) Docker从1.13版本之后采用时间线的方式作为版本号,分为社区版CE和企业版EE. 社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收 ...

  2. Core Data 版本号迁移经验总结

    大家在学习和使用Core Data过程中,第一次进行版本号迁移的经历一定是记忆犹新,至少我是这种,XD.弄的不好,就会搞出一些因为迁移过程中数据模型出错导致的Crash.这里总结了一下Core Dat ...

  3. 面试题三:设计包括 min 函数的栈。

    3.设计包括 min 函数的栈. 定义栈的数据结构,要求加入一个 min 函数.可以得到栈的最小元素. 要求函数 min.push 以及 pop 的时间复杂度都是 O(1). 思路分析: a.要想一个 ...

  4. EasyDarwin Streaming Server对Task的调用方法

    我们在EasyDarwin流媒体服务器的二次开发过程中,经常会需要定义自己的Task类,例如在EasyDarwin中,RTSPSessioin.HTTPSession.RTCPTask等,都是Task ...

  5. 大数据之ES系列——第一篇 ElasticSearch2.2 集群安装部署

    第一部分  安装准备 准备三台主机节点: hc11.spads  192.168.160.181 hc12.spads  192.168.160.182 hc13.spads  192.168.160 ...

  6. 怎样使用alsa API

    翻译文章的链接: http://equalarea.com/paul/alsa-audio.html 关于怎么使用ALSA API教程 这份文档帮助对ALSA API使用入门.不是一个完整的ALSA ...

  7. MFC窗口消息PostMessage和SendMessage

    以前这些消息用得比较少,但是今天碰到了个事儿,我看非用消息不可. 事情是这样的,我在线程中需要刷新对话框上面的内容,但是每每执行到UpdateData时就出现了断言错误. 查了相关资料,发现这个可能是 ...

  8. hdu1078 FatMouse and Cheese —— 记忆化搜索

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 代码1: #include<stdio.h>//hdu 1078 记忆化搜索 #in ...

  9. Java GET和POST请求

    从表面来看GET和POST请求: GET请求是在url后直接附上请求体,url和请求体之间用"?"分割,不同参数之间用"&"分隔,%XX中的XX为该符号 ...

  10. 记录下 hubot相关

    适配器工厂https://hubot.github.com/docs/adapters/ 自己写适配器https://hubot.github.com/docs/adapters/developmen ...