编程 Javascript

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)	触发或将函数绑定到被选元素的鼠标悬停事件

jquery入门必备的基本认识及实例(整理)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

HTML TO JavaScript 转换

Jun 26 Javascript

JavaScript中void(0)的具体含义解释

Feb 27 Javascript

jQuery对象与DOM对象之间的转换方法

Apr 15 Javascript

javascript的switch用法注意事项分析

Feb 02 Javascript

jQuery实现自动切换播放的经典滑动门效果

Sep 12 Javascript

基于JavaScript实现屏幕滚动效果

Jan 18 Javascript

javascript事件的传播基础实例讲解(35)

Feb 14 Javascript

webpack4与babel配合使es6代码可运行于低版本浏览器的方法

Oct 12 Javascript

js实现随机8位验证码

Jul 24 Javascript

Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

Dec 25 Vue.js

vue中封装axios并实现api接口的统一管理

Dec 25 Vue.js

vue实现无缝轮播效果（跑马灯）

May 14 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