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 相关文章推荐
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
董事长秘书职责
2014/01/31 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
员工薪酬激励方案
2014/06/13 职场文书
卫生标语大全
2014/06/21 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
邀请书格式范文
2015/02/02 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python