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.timer插件实现一个计时器
Apr 25 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
javascript实现计算器功能
Mar 30 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 木马攻击防御技巧
2009/06/13 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python的re模块使用方法详解
2019/07/26 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
园林设计师自荐信
2013/11/18 职场文书
大专生的学习自我评价
2013/12/04 职场文书
晨会主持词
2014/03/17 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
明星邀请函
2015/02/02 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android