jQuery 学习笔记(一)jQuery 语法
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 语法的更多相关文章
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- 锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery学习笔记之jQuery.fn.init()的参数分析
这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下 从return new jQuery.fn.init( selector, context, rootjQuer ...
- jQuery学习笔记(jquery.ui插件)
官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...
- jQuery学习笔记(jquery.simplemodal插件)
官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...
- jQuery学习笔记(jquery.form插件)
官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...
- jQuery学习笔记(jquery.validate插件)
jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...
随机推荐
- Docker在centos下安装以及常见错误解决
系列目录 Docker安装(使用阿里云镜像) Docker从1.13版本之后采用时间线的方式作为版本号,分为社区版CE和企业版EE. 社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收 ...
- Core Data 版本号迁移经验总结
大家在学习和使用Core Data过程中,第一次进行版本号迁移的经历一定是记忆犹新,至少我是这种,XD.弄的不好,就会搞出一些因为迁移过程中数据模型出错导致的Crash.这里总结了一下Core Dat ...
- 面试题三:设计包括 min 函数的栈。
3.设计包括 min 函数的栈. 定义栈的数据结构,要求加入一个 min 函数.可以得到栈的最小元素. 要求函数 min.push 以及 pop 的时间复杂度都是 O(1). 思路分析: a.要想一个 ...
- EasyDarwin Streaming Server对Task的调用方法
我们在EasyDarwin流媒体服务器的二次开发过程中,经常会需要定义自己的Task类,例如在EasyDarwin中,RTSPSessioin.HTTPSession.RTCPTask等,都是Task ...
- 大数据之ES系列——第一篇 ElasticSearch2.2 集群安装部署
第一部分 安装准备 准备三台主机节点: hc11.spads 192.168.160.181 hc12.spads 192.168.160.182 hc13.spads 192.168.160 ...
- 怎样使用alsa API
翻译文章的链接: http://equalarea.com/paul/alsa-audio.html 关于怎么使用ALSA API教程 这份文档帮助对ALSA API使用入门.不是一个完整的ALSA ...
- MFC窗口消息PostMessage和SendMessage
以前这些消息用得比较少,但是今天碰到了个事儿,我看非用消息不可. 事情是这样的,我在线程中需要刷新对话框上面的内容,但是每每执行到UpdateData时就出现了断言错误. 查了相关资料,发现这个可能是 ...
- hdu1078 FatMouse and Cheese —— 记忆化搜索
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 代码1: #include<stdio.h>//hdu 1078 记忆化搜索 #in ...
- Java GET和POST请求
从表面来看GET和POST请求: GET请求是在url后直接附上请求体,url和请求体之间用"?"分割,不同参数之间用"&"分隔,%XX中的XX为该符号 ...
- 记录下 hubot相关
适配器工厂https://hubot.github.com/docs/adapters/ 自己写适配器https://hubot.github.com/docs/adapters/developmen ...