JQuery(一)——初步总结
JQuery其实早就看过相关的视频了，但是由于当时查的资料太少，理解的不够深刻，所以没有进行总结，这次回过头来又学习了，心里感觉理解了很多，因为BS的其它知识基本学习完了，而且有了一定程度的理解。相互促进学习的都是。
一，简介：JQuery是一个优秀的Javascript框架，是轻量级的js库，兼容了各种浏览器（IE 6.0+, FF 1.5+,Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTMLdocuments,events，实现动画效果，并且方便的为网站提供AJAX交互。核心理念是write less,do more(写得更少,做得更多) jQuery库包含以下特性：HTML元素选取，HTML元素操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM 遍历和修改，AJAX等。而且大大优于JavaScript的编程。
二，引入：
使用JQuery，首先需要我们到指定网站下载http://jquery.com/download/#Download_jQuery，然后向我们的页面中添加JQuery库：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"><head>
<script type="text/javascript" src="jquery.js"></script>
</head>
</span>
然后我们看一个最基础的JQuery实例：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
//当页面加载完毕时要执行的函数
$(document).ready(function(){
//单击p标签时要执行的函数
$("button").click(function(){
//隐藏p标签
$("p").hide();
});
});
</script>
</head> <body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
</span>
三，JQuery语法：
通过 jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。这其实也就是对JS进行封装，来实现这些功能。基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery的 action()执行对元素的操作
例如：
$(this).hide() -隐藏当前元素
$("p").hide() -隐藏所有段落
$(".test").hide() -隐藏所有 class="test"的所有元素
$("#test").hide() -隐藏所有 id="test"的元素
四，JQuery选择器：其实就是找到我们想要操作的内容，有下边几种情况：
1，元素选择器：
$("p")选取 <p>元素。
$("p.intro")选取所有 class="intro"的 <p>元素。
$("p#demo")选取所有 id="demo"的 <p>元素。
2，属性选择器：
$("[href]")选取所有带有 href属性的元素。
$("[href='#']")选取所有带有 href值等于 "#"的元素。
$("[href!='#']")选取所有带有 href值不等于 "#"的元素。
$("[href$='.jpg']")选取所有 href值以 ".jpg"结尾的元素。
3，CSS选择器：这里举一个例子：
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
<span style="font-size:18px;"> <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
//将其CSS改为背景为红色
$("p").css("background-color","red");
});
});
</script>
</head> <body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body> </html>
</span>
五，JQuery事件：跟我们JS里边的，c#,java等里边的都特别像，这里看一下几个常用的，来看一下他的形式：
|
Event函数 |
绑定函数至 |
|
$(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
|
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
|
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
|
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
|
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
综上为JQuery一些基础的知识总结，更够比JS更加方便的操作HTML中的内容，更为简单。在下边的一些博客会通过一些具体的小例子，来学习一些具体常用的JQuery知识。但是更重要的是需要我们会查JQuery的API文档，上边写的特别全，只要在我们想要用某个方法，属性，事件的时候我们能够很快的查询出来也是可以的。Jquery的学习中！
JQuery(一)——初步总结的更多相关文章
- 沉淀，再出发：jQuery的初步了解和入门
沉淀,再出发:jQuery的初步了解和入门 一.前言 对于后端开发者来说,是不是真的不需要了解前端的开发经过和相关技术,从我个人的角度来说,我觉得如果不了解或者接触很少,极有可能造成开发的时候 ...
- day 54 jQuery 的初步基础
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- jQuery入门第一天-（一个菜鸟的不正经日常）
jQuery的初步认识 菜鸟Q1:什么是jQuery? jQuery就是一个JavaScript函数库,没什么 特别的. 菜鸟Q2:jQuery能做什么?jQuery是做什么的? jQuery本身就是 ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- Javascript高级面试
原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...
- jQuery验证插件使用初步
validate是一款优秀的表单验证插件,其初步使用方法如下: (1)前台页面代码: <form id="form1" runat="server"> ...
- 第二十篇 jQuery 初步学习2
jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言, ...
- 第十九篇 jQuery初步学习
jQuery 初步学习 jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
随机推荐
- 9.5 在 C# 中使用 F# 库
9.5 在 C# 中使用 F# 库 像 C# 一样,F# 也是一种静态类型的语言,就是说,编译器知道每一个值的类型,以及类方法和属性的签名.对于与 C# 的互操作性来说.这是很重要的,由于,编译器能够 ...
- 为 IIS 7.0 配置 <system.webServer>
Web.config 文件中的 system.webServer 节用于指定适用于 Web 应用程序的 IIS 7.0 设置.system.WebServer 是 configuration 节的子级 ...
- CheckStyle插件
如今代码静态检查越来越重要,已经成为构建高质量软件的不可或缺的一个验证步骤.如果你使用的是java语言,那么CheckStyle则是一个利器. CheckStyle能够帮助程序员检查代码是否符合制定的 ...
- 菜鸟的jQuery源码学习笔记（二）
jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: jQuery.fn = jQuery.prototype = { //成 ...
- MSSQL 获取数据库字段类型
SELECT col.name AS 列名, typ.name as 数据类型, col.max_length AS 占用字节数, col.precision AS 数字长度, col.scale A ...
- CentOS6.5下Mysql数据库的安装与配置
一.mysql简介 说到数据库,我们大多想到的是关系型数据库,比如mysql.oracle.sqlserver等等,这些数据库软件在windows上安装都非常的方便,在Linux上如果要安装数据库,咱 ...
- PHP数组排序函数array_multisort()函数详解
这个函数因为用到了,并且在网上找了半天终于找到了一个写的通俗易懂的文章,在这里分享给大家. 原文链接:http://blog.163.com/lgh_2002/blog/static/44017526 ...
- Android-PullToRefresh下拉刷新库基本用法
How:(使用) 转自:http://blog.csdn.net/hantangsongming/article/details/42490277 PullToRefresh是一套实现非常好的下拉刷新 ...
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)
原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...
- Eclipse 支持jQuery 自动提示
1.下载jQuery文件 http://download.csdn.net/detail/emoven/6294377 2.设置spket Window -> Preferences -> ...