基础的jquery
来源:互联网 发布:深入浅出node.js 微盘 编辑:程序博客网 时间:2024/05/18 19:19
jQuery是一个Javascript函数库,轻量级,“写得少,做的多!”,它有以下功能:
· HTML元素选取
· HTML元素操作
· CSS操作
· HTML事件函数
· JavaScript特效和动画
· HTML DOM遍历和修改
· AJAX
· Utilities(实用工具)
很多大公司都在使用jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器,包括IE6(不失为解决兼容性的一种方法)。
注意:
jQuery 2以上版本不支持IE6,7,8浏览器;
IE版本小于9,引入jquery1.9.0版本;IE版本大于等于9,引入jquery2.0版本。
(lt(<):less than; gt(>):great than; gte(>=):great than equal; ne(不等于):not equal)
第一部分:安装:
从 jquery.com 中下载,然后用script标签引入即可。
jQuery有两个版本:
· production version:用于生产、实际的网络,代码已被精简和压缩;
· development version:用于开发测试,可阅读源码。
两种方式引入jQuery文件:
下载:
1 <script type="text/javascript" src="jquery-2.0.0.js"></script>
不下载,通过CDN(内容分发网络)引用它。百度、新浪、谷歌和微软的服务器都存有 jQuery。
示例百度CDN:
1 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
注意:
1.国内站点不推荐Google CDN,访问不稳定。
2.CDN:Content Delivery Netword,内容分发网络。
基本思路:尽可能的避免互联网上有可能影响网络传输速率和稳定性的因素。使得用户可以就近取得所需内容,提高网站访问速度。
使用大公司CDN好处:
· 许多用户在访问其它站点时,已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时,会从缓存中加载jQuery,这样可以有效减少加载时间!
· 大多数CDN都可以确保用户请求文件时,会就近服务器进行响应,从而提高加载速率。
第二部分:jQuery语法:
1.jQuery语法是通过选取HTML元素,然后对选取的元素进行某些操作。
基础语法:$(selector).action()
· 美元符号$定义jQuery
· 选择器(selector):“查询”和“查找”HTML元素
· action():对元素进行操作
实例(结尾处有分号):
2.文档就绪事件:
这是为了防止文档在加载完成前执行jQuery代码,即在DOM加载完成后才可以对DOM进行操作。
第三部分:jQuery选择器:
1. 元素选择器:$("p")
2. id选择器:$("#test")
3. 类选择器:$(".test")
4. $("*"):选择所有元素
5. $(this):选取当前html元素
6. $("p.test"):选取class为test的<p>元素
7. $("p:first"):选取第一个<p>元素
8. $("ul li:first"):选取第一个<ul>元素中的第一个<li>元素
9. $("ul li:first-child"):选取每个<ul>元素下的第一个<li>元素
10. $("[href]"):选取所有带有href的元素
11. $("a[target='_blank']"):选取所有taget=_blank的<a>元素
12. $("a[target!='_blank']"):选取所有target不等于_blank的<a>的元素
13. $(":button"):选取所有type=button的button和input元素
14. $("tr :even"):选取所有偶数位置的<tr>元素
15. $("tr :odd"):选取所有奇数位置的<tr>元素
第四部分:jQuery事件:
1.事件:页面对不同访问者作出的响应。事件处理程序:当HTML中发生某些事件调用的方法。常见DOM事件:
· 鼠标事件:click(单击元素),dbclick(双击元素),mouseenter(鼠标指针移入元素),mouseleave(鼠标指针移出元素)事件;
· 键盘事件:keypress(键被按下),keydown(键按下的过程),keyup(键松开),事件;ps:keypress不会触发所有的键(如alt,ctrl,esc,shift),请使用keydown()方法检测
· 表单事件:submit(提交表单时),change(元素值(适用于表单字段)发生改变时),focus(元素获得焦点),blur(元素失去焦点)事件;
· 文档/窗口事件:load(元素已加载触发,在jQuery1.8中废除。ajax中也有load()方法),resize(调整浏览器窗口大小时触发),scroll(滚动指定的元素),unload(jQuery1.8中废弃)事件。
另:
hover():模拟光标悬停事件。当鼠标指针移动到元素上时,会触发第一个函数(mouseenter);当鼠标指针移出这个元素时,会触发第二个函数(mouseleave)。
第五部分:jQuery效果
1.隐藏和显示:
可选的speed规定隐藏或显示的速度,取值可以为"slow","fast"或毫秒;
可选的callback是隐藏或显示后执行的函数名称。
toggle可以切换show和hide状态。
2.淡入淡出:
fadeIn():隐藏的元素淡入;fadeOut():显示的元素淡出;fadeToggle():切换fadeIn()和fadeOut()状态;fadeTo():渐变为不透明度(opacity值在0~1之间)。
speed,callback参数含义与上述“显示与隐藏”一致。
3.滑动:
slideDown():对隐藏的元素向下滑动;slideUp():对显示的元素向上滑动收起;slideToggle():切换两种状态改变。
4.动画:jQuery animate()方法用于创建自定义动画。语法:
params:必选参数,形成动画的css属性;
speed:可选参数;
callback:可选参数。
ps:params支持多个属性,中间用","隔开,同时属性值(不加引号时)用驼峰标记法:如:margin-left改为marginLeft;属性值加引号按照css写法。
例如:
ps1:color属性值10px要添加引号,如'10px';
ps2:上述代码中color属性设置无效,因为色彩动画不包括在核心jQuery库中。如需使用:需从 jquery.com 下载 颜色动画 插件。
默认:jQuery animate()采用队列来操作效果。队列:先进先出。
5.停止动画:
stop()方法用于停止动画效果,适用于所有jQuery效果函数,包括滑动,淡入淡出,自定义动画。
可选的stopAll:是否清除动画队列。默认false:仅停止当前活动动画,允许插入的动画向后执行;
可选的goToEnd:是否立即完成当前动画。默认false。
因而,默认的stop()会清除当前元素上的动画。(不带参数)
6.jQuery链(chaining)
链:顾名思义,锁链,即一环套一环。
jQuery中将动作/方法链接在一起,因此,在相同元素上,我们可以在一条语句上运行多个jQuery方法。
如:
第六部分:jQuery HTML
1.获取内容和属性
-- 获取内容:
text():设置或获取所选元素的文本内容
html():设置或获取所选元素的内容(包括HTML标记)
val():设置或获取表单字段的值
-- 获取属性:
attr():设置或获取属性值
ps1:以上函数不传入参数时是获取;传入参数时是设置。
ps2:以上函数均有最后一个参数设置为回调函数。回调函数有两个值:当前选中元素下标,旧值。
2.添加元素
· append():在被选元素的末尾插入内容
· preappend():在被选元素的开头插入内容
· after():在被选元素之后插入内容
· before():在被选元素之前插入内容
ps:append/preappend:选择元素内部嵌入;before/after:选择元素外部追加。
- jquery的语法基础
- jquery的基础学习
- JQUERY的基础学习
- JQuery的基础
- jQuery的基础
- JQuery 的基础使用
- 基础的jquery
- jQuery基础之jQuery的DOM操作
- JQuery基础 JQuery的基本操作
- 熟悉jquery的版本基础
- JQuery的筛选基础了解
- JQuery基础的一些解释
- 学习jquery基础的笔记
- JQuery基础
- jquery基础
- jquery基础
- jQuery基础
- jquery基础
- PBOC/EMV-交易流程详解--POS与卡片的数据交互进行分析
- java常用的2中加密密码方式MD5和Encrypt
- Android开发中简化findViewById的几种方法
- Fibonacci Again
- screencap
- 基础的jquery
- Linux 下curl模拟Http 的get or post请求。
- java 反射
- spring boot的表单验证
- 静态变量的简单 和 strtok 的使用实现 标识符的作用域
- 无法打开SQL Server的连接 provider:Named Pipes Provider,error:40
- 【mysql 字符串截取】SUBSTRING_INDEX用法
- Java异常处理
- 八皇后算法解析(java代码演示)