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 相关文章推荐
常用js脚本
Dec 03 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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/12/10 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JS 进度条效果实现代码整理
2011/05/21 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
Angular实现响应式表单
2017/08/04 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python if语句知识点用法总结
2018/06/10 Python
python执行精确的小数计算方法
2019/01/21 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
森林病虫害防治方案
2014/06/02 职场文书
物业管理专业求职信
2014/06/11 职场文书
2014离婚协议书范文
2014/09/10 职场文书
客服专员岗位职责
2015/02/10 职场文书
教师求职简历自我评价
2015/03/10 职场文书
药品开票员岗位职责
2015/04/15 职场文书
行政诉讼答辩状
2015/05/21 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
opencv检测动态物体的实现
2021/07/21 Python
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技