本系列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） 基本认识的更多相关文章

  1. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  2. jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  3. jquery系列教程6-ajax的应用全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  4. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  5. jquery系列教程3-DOM操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  6. jquery系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  7. JQuery系列（4） - AJAX方法

    jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.a ...

  8. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

  9. 【Jquery系列】之Jquery 选择器

    1   概述 本篇文章为穿插文章,ASP.NET MVC系列目前写了如下几篇: 详解google Chrome浏览器(理论篇) 详解Google Chrome浏览器(操作篇)(上) 详解Google ...

随机推荐

  1. spring加载过程，源码带你理解从初始化到bean注入

    spring在容器启动时,容器正式初始化入口refresh()如下图 ①包括初始化FactoryBean.解析XML注册所有BeanDefinition信息  ②包括注册scope管理类  ③初始化单 ...

  2. android面试宝典

    一.listview的优化: 首先要知道getview实际就是个for循环. 我们重写的getview方法中本身有一个convertview,因为只需要保留能够显示的最大个数的view即可,所以: 第 ...

  3. ***PHP 数组排序 +php二维数组排序方法（PHP比较器）

    PHP - 一维数组的排序函数 在本节中,我们将学习如下 PHP 数组排序函数: sort() - 以升序对数组排序 rsort() - 以降序对数组排序 asort() - 根据值,以升序对关联数组 ...

  4. wpf 切换资源字典的2中方式

    var _1200RDUri = new Uri(String.Format(@"/aa;Component/Themes/1200Theme.xaml"), UriKind.Re ...

  5. 使用echarts开发电子屏数据展示页面

    背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...

  6. Theano 学习笔记(一)

    Theano 学习笔记(一) theano 为什么要定义共享变量? 定义共享变量的原因在于GPU的使用,如果不定义共享的话,那么当GPU调用这些变量时,遇到一次就要调用一次,这样就会花费大量时间在数据 ...

  7. XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg

    A. Avengers, The 留坑. B. Black Widow 将所有数的所有约数插入set,然后求mex. #include<bits/stdc++.h> using names ...

  8. poj 2559 Largest Rectangle in a Histogram - 单调栈

    Largest Rectangle in a Histogram Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 19782 ...

  9. xpath使用

    一.安装(win7 64) 1.安装lxml,pip install lxml 2.如果安装出错,下载lxml-3.5.0b1.win-amd64-py2.7.exe: 地址:http://www.l ...

  10. Curator leader 选举(一)

    要想使用Leader选举功能,需要添加recipes包,可以在maven中添加如下依赖: <dependency> <groupId>org.apache.curator< ...