jquery 学习(一):jQuery 简介
jQuery 库 - 特性:
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
html 元素获取,
html 元素操作,
css 操作,
html 事件函数,
JavaScript 特效和动画,
html DOM 遍历和修改,
ajax,
Utilities
给自己的页面添加 jQuery 库
如需使用 jQuery,您需要下载 jQuery 库,然后把它包含在希望使用的网页中。
jQuery 库是一个 JavaScript 文件(其中包含了所有的 jQuery 函数),您可以使用 HTML 的 <script> 标签引用它:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
请注意,<script> 标签应该位于页面的 <head> 部分。(<script> 标签中的 type="text/javascript" 可以不用写,因为 JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言)
库的替代:
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
jQuery 语法:
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作,因此 jQuery 的基本语法是:$(selector).action()
说明如下:
1、美元符号定义 jQuery
2、选择符(selector)“查询”和“查找” html 元素
3、jQuery 的 action() 执行对元素的操作
jQuery 选择器:
选择器允许您对单个元素或元素组进行操作。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 html 元素进行选择。
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"); //该实例可以把所有 p元素的背景颜色更改为红色
更多的选择器实例:
$(this) //当前 html 元素
$(".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 事件处理方法是 jQuery 中的核心函数。(事件处理方法指的是当 HTML 中发生某些事件时所调用的方法。)
通常会把 jQuery 代码放到 <head>部分的事件处理方法中。
实例: $("button").click(function() { ..some code... }) //在该实例中,当按钮的点击事件被触发时会调用一个函数。
单独文件中的函数:
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。(具体怎么写?)
当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好。(通过 src 属性来引用文件)
实例:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名称冲突:
jQuery 使用 $ 符号作为 jQuery 的简介方式,但某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题 —— var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
下面是 jQuery 中事件方法的一些例子:
$(document).ready(function) //当文档加载完成时
$(selector).click(function) //被选择的元素的单击事件
$(selector).dblclick(function) //双击
$(selector).focus(function) //获得焦点
$(selector).mouseover(function) //鼠标悬停
jquery 学习(一):jQuery 简介的更多相关文章
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
- (高级篇)jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- JQuery学习笔记---jquery对象和DOM对象的关系
1.DOM(Document Object Model,文档对象模型).DOM树 { html (head&&body), head(meta && title) ...
- jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jquery学习笔记----jquery相关的文档
http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...
- jQuery学习之jQuery Ajax用法详解(转)
[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...
- jQuery学习之jQuery Ajax用法详解(转)
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jQuery学习笔记(简介,选择器)
jQuery优势 1. 强大的选择器.jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 2. 出色的DOM操作封装 3. 可靠的事件处理机制 ...
- 【转载】【JQuery学习】jQuery插件开发
JQuery做得最好的就是他的闭包和扩展性.超级简单的扩展方法,让更多的人可以轻松的开发定制自己的jQuery插件.下面的东西是转载过来当做学习材料的.虽然貌似有点古老,但是jQuery的变更一直都不 ...
- jQuery学习(一)——jQuery入门
1.jQuery基础 Jquery它是一个库(框架),要想使用它,必须先引入! jquery-1.8.3.js:一般用于学习阶段. jquery-1.8.3.min.js:用于项目使用阶段 官网下载后 ...
随机推荐
- JavaScript 调试常见报错以及原因
JavaScript 调试常见报错以及原因 测试环境 chrome 版本 66.0.3359.170(正式版本) (64 位) TypeError 类型错误 不是操作符所接受的数据类型. //---- ...
- MVC ---- 去掉HTML过滤
在方法头上添加特效 [ValidateInput(false)] 富文本框提交的内容就可以顺利提交到后台了.
- 前端开发——HTML学习笔记
HTML03
- BZOJ 2754 【SCOI2012】 喵星球上的点名
题目链接:喵星球上的点名 首先可以发现姓和名两个串就是逗你玩的.在两个串中间插入一个\(10001\),当成一个串做就可以了. 于是我们的问题转化为了: 有\(n\)个串\(A_1,A_2,\dots ...
- [转]QT中QString与string的转化,解决中文乱码问题
QString str2qstr(const string str) { return QString::fromLocal8Bit(str.data()); } string qstr2str(co ...
- STL——vector
学到STL的vector,发现手中的材料不是很详细,这里做个汇总. 1 操作 (1)头文件#include<vector>. (2)创建vector对象,vector<int> ...
- 《剑指offer》第六十一题(扑克牌的顺子)
// 面试题61:扑克牌的顺子 // 题目:从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的. // 2-10为数字本身,A为1,J为11,Q为12,K为13,而大.小王可以看成任意 ...
- POJ 3076 Sudoku
3076 思路: dfs + 剪枝 首先,如果这个位置只能填一种字母,那就直接填 其次,如果对于每一种字母,如果某一列或者某一行或者某一块只能填它,那就填它 然后,对于某个位置如果不能填字母了,或者某 ...
- CPU、OpenGL/DirectorX、显卡驱动和GPU之间的关系
- 拒绝采样 Rejection Sampling
2018-12-09 16:40:30 一.使用Rand7()来生成Rand10() 问题描述: 问题求解: 这个问题字节跳动算法岗面试有问到类似的,有rand6,求rand8,我想了好久,最后给了一 ...