jquery入门必备的基本认识及实例(整理)


Posted in Javascript onJune 24, 2013

1.Juqery是javascript的优秀框架。它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

当用jQuery2.0的框架,通过上面这段话我想说的是如果有些代码在eclipse运行不出来,说明里面浏览器内核太低,只要在高版本的浏览器下面就能显示效果。

2.jQuery 库包含以下特性:
· HTML 元素选取
· HTML 元素操作
· CSS 操作
· HTML 事件函数
· JavaScript 特效和动画
· HTML DOM 遍历和修改
· AJAX
· Utilities
3.Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 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 语法实例
$(this).hide()
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide() / /读取id
演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数,隐藏所有 <p> 元素。 //这样可以直接读取标签
$(".test").hide()
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。 //读取class的元素节点

Jquery的选择器有很多种: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 元素的背景颜色更改为红色:
实例

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

jQuery 事件
下面是 jQuery 中事件方法的一些例子:

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
Javascript 相关文章推荐
javascript 事件处理程序介绍
Jun 27 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
js 函数性能比较方法
Aug 24 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 #Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 #Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 #Javascript
JS localStorage实现本地缓存的方法
Jun 22 #Javascript
js获取某月的最后一天日期的简单实例
Jun 22 #Javascript
js遍历、动态的添加数据的小例子
Jun 22 #Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 #Javascript
You might like
怎样去阅读一份php源代码
2009/08/21 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python实现对变位词的判断方法
2020/04/05 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
Linux内核产生并发的原因
2012/07/13 面试题
《乞巧》教学反思
2014/02/27 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
小学主题班会教案
2015/08/17 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP