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的开源工具PACKER2.0.2
Nov 04 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP SOCKET编程详解
2015/05/22 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
javascript模块化简单解析
2016/04/07 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python实现猜数字小游戏
2020/03/24 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python文件选择对话框的操作方法
2019/06/27 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
清洁工岗位职责
2014/01/29 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
举起手来观后感
2015/06/09 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis