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 相关文章推荐
提高jQuery性能的十个诀窍
Nov 14 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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学习笔记之三 数据库基本操作
2011/01/17 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JS 表单验证大全
2011/11/23 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
JavaScript实现数值自动增加动画
2017/12/28 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
python能做哪些生活有趣的事情
2020/09/09 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
python中的列表和元组区别分析
2020/12/30 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
食品安全宣传标语
2014/06/07 职场文书
师范生求职信
2014/06/14 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
正规借条模板
2015/05/26 职场文书
老兵退伍感言
2015/08/03 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers