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 Dialog的内存泄露问题解决方法
Jun 18 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
webpack external模块的具体使用
Mar 10 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 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
我的论坛源代码(二)
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Python sys.path详细介绍
2013/10/17 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
安装Python的教程-Windows
2017/07/22 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python callable内置函数原理解析
2020/03/05 Python
python实现简单的学生管理系统
2021/02/22 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
党员批评与自我批评材料
2014/10/14 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
交通安全月活动总结
2015/05/08 职场文书
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技