jQuery初级篇（一）
知识说明：
jQuery库是一个javascript库文件，它比起javascript来，写的更少，但做得更多，下面便对刚开始学习jQuery，一些基础知识整理出来，供后期翻阅。
一、 jQuery库文件下载地址：
网址：http://jquery.com/download/
jQuery库文件分为压缩版（后缀：.min.js 在网页中调用）跟非压缩版（后缀：.js 供开发者学习、阅读）
注意：如果不想要下载jQuery库文件，也可以直接调用Google或Microsoft的CDN中的jQuery库，如下：
Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
Microsoft CDN:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
直接调用谷歌或微软的CDN一个优势：
许多用户在访问其他站点时，很多已经加载过谷歌或微软的jQuery库文件，当再访问你的站点时，就能直接从缓存中加载jQuery文件，加快访问速度。同时，大多数CDN会在用户向其发送请求时，会优先从距离其最近的服务器返回响应，这样也可以提高加载速度。
二、
知识点整理：
1、 jQuery是一个javascript库文件，所以在页面中也使用<script>标签调用，如下：
<script
type="text/javascript"
src="/JS1/js/jquery-2.1.4.min.js"></script>
2、 jQuery库文件调用一般放在<head>标签中
3、 jQuery函数
3.1文档就绪函数：所有函数都要在该函数内进行，防止在完全加载前就执行出错
$(document).ready(function(){
}); //注意：以 ; 结束
4、 jQuery选择器
jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。
选择器允许您对元素组或单个元素进行选择。
在HTML DOM中的术语：
选择器允许您对DOM元素组或单个DOM元素进行选择。
4.1元素选择器（注：选择的元素用“”标注）
$(“p”) //选取全部的P标签元素
$(“p.one”) //选取class=”one”的P标签元素
$(“p#one”) //选取id=”one”的P标签元素
4.2属性选择器（注：所有属性都在“[]”）中，属性值用‘’
属性选择器通过XPath的方式来选取带有该属性的元素
$(“[href]”) //选取所有带有href属性的元素
$(“[href=’#’]”) //选取所有带有href属性并且href值为#的元素
$(“[href != ‘#’]”) //选取所有带有href属性但href值不等于#的元素
$(“[href $= ‘.jpg’]”) //选取所有带有href属性并且href值以.jpg结尾的元素
4.3 css选择器（$(“选取元素”).css(“属性”，“值”);）
可以通过css选择器来改变选定元素的CSS样式
$(“p”).css(“background-color”,”red”); //修改P标签元素的背景颜色为红色
4.4其他选择器
$(“ul li:first”) //选取每个ul标签中第一个li元素
$(“div#one .head”) //选取id=“one”的div中class=”head”的元素
jQuery其他选择器链接：
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
三、
jQuery事件函数
1、 元素的点击函数
$(“button”).click(function(){********});
2、 单独文件中的函数
将全部的jQuery函数放到一个单独的js文件中，方便整理
<script
src="/JS1/js/myjQuery.js"></script>
myjQuery.js中代码为：
3、 jQuery中命名冲突
由于命名都是以$开头，为了防止jQuery中命名的函数与javascript中原本封装的函数命名冲突，一般采取如下方法：
Var jq = jQuery.noConflict(); //此后便可以用jp代替$符开头，避免冲突
4、 jQuery中其他事件函数
链接：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
四、
jQuery效果
1、 jQuery隐藏/显示
$(“p”).hide(2000); //默认显示的P标签2s后自动隐藏
$(“p”).show(2000); //默认隐藏的P标签2s后自动显示
$(“p”).toggle(2000);
//用于隐藏和现实切换（如果已经隐藏的，则2s后显示；如果已经显示的，则2s后隐藏）
2、 jQuery淡入淡出效果
$("img#myimg").fadeIn(2000); //默认隐藏的图片2s后淡入
$("img#myimg2").fadeOut(2000);
//默认显示的图片2s后淡出
$("img#myimg").fadeToggle(2000);
//用于淡入淡出的切换
$("img#myimg2").fadeToggle(2000);
3、 jQuery滑动效果
//下拉列表
$("#moren").click(function(){
$("#select span").slideToggle(500);
});
4、 jQuery动画
$("img#myimg").animate({height:'300px'},"slow"); //设置图片高度变为300px
//为一个元素设置动画队列
$("button").click(function(){
$("img#myimg").fadeIn(2000);
$("img#myimg2").fadeOut(2000);
$("img#myimg").animate({height:'300px'},"slow");
$("img#myimg").animate({marginLeft:'500px'},"slow");
});
5、 jQuery的stop()
在动画执行完成前停止动画
$(“img#myimg”).stop();
6、 jQuery的callback
jQuery中执行动画结束后执行的回调函数
$("img#myimg").animate({marginLeft:'500px'},"slow",function(){
alert("动画执行完了，才弹出的框！");
});
7、 jQuery中的方法链接
对一个元素设置不同的方法
$("img#myimg").animate({width:'400px'},"slow")
.slideUp(2000)
.slideDown(2000);
jQuery初级篇（一）的更多相关文章
- (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- [jQuery]使用jQuery.Validate进行客户端验证（初级篇）
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- Python 正则表达式入门（初级篇）
Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写. 转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达 ...
- python 面向对象初级篇
Python 面向对象(初级篇) 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发" ...
- 25个增强iOS应用程序性能的提示和技巧(初级篇)
25个增强iOS应用程序性能的提示和技巧(初级篇) 标签: ios内存管理性能优化 2013-12-13 10:53 916人阅读 评论(0) 收藏 举报 分类: IPhone开发高级系列(34) ...
- ASP.NET MVC 随想录——开始使用ASP.NET Identity，初级篇（转）
ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇 阅读目录 ASP.NET Identity 前世今生 建立 ASP.NET Identity 使用ASP.NET ...
- python_way ,day7 面向对象 （初级篇）
面向对象 初级篇 python支持 函数 与 面向对象 什么时候实用面向对象? 面向对象与函数对比 类和对象 创建类 class 类名 def 方法名(self,xxxx) 类里面的方法,只能 ...
- Entity Framework 学习初级篇--基本操作：增加、更新、删除、事务(转)
摘自:http://www.cnblogs.com/xray2005/archive/2009/05/17/1458568.html 本节,直接写通过代码来学习.这些基本操作都比较简单,与这些基本操作 ...
- NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者
NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者 作者: raindy 来源:http://bbs.hanzify.org/index.php?showtopic=30029 时间: ...
随机推荐
- OO的五大原则是指SRP、OCP、LSP、DIP、ISP。
OO的高层原则,面向对象设计的基本原则 设计模式之六大原则--开闭原则(OCP) 设计模式之六大原则--迪米特法则(LoD,LKP) 设计模式之六大原则--接口隔离原则(ISP) 设计模式之六大原则- ...
- TC250专场
SRM 623 DIV2 1000pt 题意:给出一个最多50*50的矩阵,每个单元可能为'.'.'P'.'A','.'代表空地,你每次操作可以把一个P或者A拿到空地上,求一个最大的含有相同字符的矩形 ...
- 程序设计入门——C语言 第8周编程练习 1 单词长度（4分）
第8周编程练习 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系统 ...
- css 表格
1.给元素的display属性添加为以下值 table : <table> table-caption :<caption> table-cell : <td> t ...
- kafka 搭建与使用
消息量非超级多不建议使用,可以使用redis或Beanstalkd 使用简单 Beanstalkd 客户端建议用:composer require pda/pheanstalk 如果无JAVA JDK ...
- 用超链接提交表单，实现在动态网页的url中隐藏参数
动态网页中怎么隐藏url参数传递 我们在做动态网站的时候往往会在各个页面之间传递参数,而这些参数的名称和值都会在url地址栏中被暴露出来,这样一方面不安全,另一方面也不便于搜索引擎的收录,有的时候还有 ...
- django服务器配置
服务器配置是Ubuntu14.04 64位OS ubuntu14.04默认是安装好了python2.7版本不用自己安装了. 先更新下源 sudo apt-get update 第一步先安装pip su ...
- 每个部门绩效成绩第二名 sql server 查询 （ 替代 not in ）
原题: 集团中有多个部门,部门底下有多个员工,求每个部门绩效分数排名第二的人员,数据表结构如下: DEPAR NAME SCORE A ...
- Java循环删除集合多个元素的正确打开方式
首先说下不正确的打开方式: 第一:使用for循环删除集合的元素,示例代码如下 ArrayList<String> list = new ArrayList<String>(Ar ...
- java selenium (二) 环境搭建方法一
webdriver 就是selenium 2. webdriver 是一款优秀的,开源的,自动化测试框架. 支持很多语言. 本文描述的是用java Eclipse 如何搭建环境 阅读目录 ...