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 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
vue.js循环radio的实例
Nov 07 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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简单实现文本计数器的方法
2016/04/28 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Highcharts入门之简介
2016/08/02 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python如何修改装饰器中参数
2018/03/20 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python3 map函数和filter函数详解
2019/08/26 Python
Python集合操作方法详解
2020/02/09 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
2014年银行个人工作总结
2014/12/05 职场文书
会计稽核岗位职责
2015/04/13 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS