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学习笔记之jQuery的DOM操作
Dec 22 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
ES6中的Javascript解构的实现
2020/10/30 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python实现音乐下载器
2018/04/15 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
django框架auth模块用法实例详解
2019/12/10 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python和php哪个容易学
2020/06/19 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
国际贸易毕业生求职信范文
2014/02/21 职场文书
幼儿园招生广告
2014/03/19 职场文书
军训口号
2014/06/13 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
python urllib库的使用详解
2021/04/13 Python
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js