Jquery 系列（1） 基本认识
本系列Jquery所用测试Demo版本是《uncompressed,development jQuery 1.11.3》
最新的jquery包可以从官网下载请参照http://jquery.com/
Jquery在官网上的版本分为两种：
- Uncompressed 非压缩版本
一般用于调试、开发。
- Compressed 压缩版本
在系统稳定后一般用压缩版本来提高效率。
Jquery不需要安装，在WEB项目中只需要引用下JS的文件位置就可以了
eg:
<script src="Jquery/jquery-1.11.3.js"></script>
<script src="Jquery/ClientJS/01.js"></script>
Jquery从2.0版本开始便不再支持IE6\IE7\IE8
一、Jquery能做哪些工作
- 取得文档中的元素。
- 修改页面的外观。
- 改娈文档的内容。
- 响应用户的交互操作。
- 为页面添加动态效果。
- 无需刷新页面从服务器端获取信息
- 简化常用的JavaScript任务
二、JQuery出色的地方
- 可以发挥CSS的最大优势
- 支持扩展
- 抽象浏览器不一致性
- 总是面向集合
- 将多重操作集于一行
三、jQuery的操作
HTML 文档包括如下几点信息
|
HTML格式 |
说明 |
|
<!DOCTYPE html> |
Html5格式的文档 |
|
<html lang="en"> |
网页主体 |
|
<head></head> |
头信息 |
|
<meta charset="utf-8"> |
编码格式 |
|
<title>Through the Looking-Glass</title> |
网页标题 |
|
<link rel="stylesheet" href="Css/01.css" type="text/css" /> |
CSS |
|
<script src="jquery-1.11.3.js"></script> |
jquery JS |
|
<script src="01.js"></script> |
自定义 JS |
|
<body>……</body> |
内容信息 |
HTML Jquery的操作步骤（原DEMO文件下面提供下载）
按照上面的JS引用内容:
1) <script src="Jquery/jquery-1.11.3.js"></script>
官方定义的脚本，必须在引用自己定义的脚本之前引用，否则自己定义的脚本就会报错。
2) <script src="Jquery/ClientJS/01.js"></script>
为写的自己定义的所有脚本存放位置。
区分开自己定义的脚本更方便管理。
编写 Jquery引用 <script src="Jquery/ClientJS/01.js"></script>脚本文件后便可以再01.js中编写自己定义的脚本了。
EG：
- 第一种匿名加载
$(document).ready(
function ()
{
$('div.poem-stanza').addClass('highlight');
}
);
- 第二种加载方式
<script type="text/javascript">
function addHighlightClass()
{
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);
</script>
分析上面的代码：
① 查找诗歌的文本
通过$()函数来完成的，参数中包括任何CSS选择符表达式。在这里是希望找到所有poem-stanza类的Div元素,$()函数会返回一个新的JQuery对象实例，我们希望改变诗歌中的类就需要这样去选择。
② 加入新类
addClass()方法的作用是不言而喻的，它会将一个CSS类应用到我们选择的页面元素中去。与.addClass方法相反的是 .removeClass(),为我们探索JQuery支持各种选择表达式提供了便利。highlight定义了一个带边框和灰色背景斜文本样式。
③ 执行代码
$(document).ready()方法，Jquery支持我们预定在Dom加载完毕后调用某个函数，而不必等页面中的图像加载。
jQuery调试工具
1、IE Developer Tools
2、Chrome Developer Tools
3、FireFox FireBug
Chrome Developer Tools使用
F12打开 Chrome Developer Tools 调试面板 ，
1.在面板中默认的是Elements(元素)标签页， 左侧显示的是页面结构。通过放大镜找页面元素的位置。
2.[ Sources ] 资源标签页中显示的是页面中加载的所有脚本。右键单击行号可能设置普通断点和条件断点，标签页的右侧，可以观察监控的值。可以监控的变量和表达式。
3.控制台
可以在控制台查看Jquery对象。在这里可以填入你用的Jquery 非常好用，并用很方便您的调试。
EG:
$(document).ready(function()
{
console.log('Hello');
console.log('World');
console.log($('div.poem-stanza'));
});
可以向console.log传入任何表达式，比alert() 更好用。
更多参与了解请加入群【QQ】373833228.
Jquery 系列（1） 基本认识的更多相关文章
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- JQuery系列（4） - AJAX方法
jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.a ...
- Jquery系列教程
最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...
- 【Jquery系列】之Jquery 选择器
1 概述 本篇文章为穿插文章,ASP.NET MVC系列目前写了如下几篇: 详解google Chrome浏览器(理论篇) 详解Google Chrome浏览器(操作篇)(上) 详解Google ...
随机推荐
- C#做上位机软件——绘图并传输给下位机
拿到任务之后首先分成了几个部分: 1.绘图.学习了GDI+ 2.图片保存. 3.将图片转换成byte[].由于使用Socket通信,只能传输byte[]数据,所以这一步是向下位机传输的关键. 相应地, ...
- tp框架之session
系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成,该函数可以完成Session的设置.获取.删除和管理操作. session初始化设置 如果session ...
- javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
- UnrealScript语言基础
总体特征 (1)大小写不敏感.关键字.宏.变量名.函数名以及类名不区分大小写:变量名可以与关键字同名 (2)局部变量.成员变量未初始化时,会被编译器初始化 (3)没有全局变量.全局函数,所有东西必须写 ...
- Linux内核源代码获取教程
Linux内核源代码获取方法 什么叫Linux 什么叫Linux内核 Linux内核源代码的获取 什么叫Linux? Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UN ...
- 【iOS】UITabView/UICollectionView 全选问题
UITabView/UICollectionView 全选问题 SkySeraph July. 30th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySera ...
- Go语言 模板的使用（一）
使用Parse package main import ( "html/template" "net/http" ) func SayHello(w http. ...
- TFS 分支导致nuget项目依赖丢失
问题: 项目的代码 在tfs上分支后,签出项目.编译时发现无法编译,原有的nuget来的包的dll都丢失了(项目签入时,默认会忽略dll) 在网上找了下,发现一个简单的解决方法: 在"程序包 ...
- 【校验】TCP和UDP的校验和
一开始,私以为校验和只是简单的求和得到的结果,后来在TCP和UDP里面看到使用的校验和方式有点奇怪--二进制反码(循环进位)求和. 人类的认知过程必将从简单到复杂,看下这个二进制反码循环求和是啥子意思 ...
- byobu相关操作
http://lingbjxm.iteye.com/blog/2155833 重命名窗口:Fn F8