本系列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. 104-switch语句读法：

  2. FPGA 开发笔记 点滴

    1.添加包含的文件或参数文件(define.v)的方式:如果文件在工程目录下的一个文件夹下,则可用 `include "../文件夹名/define.v",  文件和工程载同一目录 ...

  3. **SQL某一表中重复某一字段重复记录查询与处理

    sql某一表中重复某一字段重复记录查询与处理   1.查询出重复记录  select 重复记录字段 form  数据表 group by houseno having count(重复记录字段)> ...

  4. 【Java EE 学习 70 下】【数据采集系统第二天】【Action中User注入】【设计调查页面】【Action中模型赋值问题】【编辑调查】

    一.Action中User注入问题 Action中可能会经常用到已经登陆的User对象,如果每次都从Session中拿会显得非常繁琐.可以想一种方法,当Action想要获取User对象的时候直接使用, ...

  5. 记录一下折腾webp 的过程

    最近有客户想要处理webp 的动图,情况当然是我们并不能处理webp 格式的图片.这事就交给了我来折腾,一开始想着用瑞士军刀ffmpeg.结果是折腾了差不多一天,前前后后编译了几十次ffmpeg 源码 ...

  6. 网站跨站点脚本，Sql注入等攻击的处理

    从360安全论坛里找到的一段代码,经过整理封装,直接在站点Global.asax文件或写一个HttpModule来拦截恶意请求即可: http://bbs.webscan.360.cn/forum.p ...

  7. 【leetcode】Compare Version Numbers

    题目描述: Compare two version numbers version1 and version2. If version1 > version2 return 1, if vers ...

  8. linux安装jdk(非rpm命令)

    首先查看当前linux上安装的jdk版本: java -version 复制build 后面的jdk信息 卸载: rpm -e java-1.6.0_22-fcs 或者 yum -y remove j ...

  9. 一些VS2013的使用技巧

    作者:h46incon的Blog 1. Peek View 可以在不新建TAB的情况下快速查看.编辑一个函数的代码. 用法:在光标移至某个函数下,按下alt+F12. 然后在Peek窗口里可以继续按a ...

  10. 《DSP using MATLAB》示例Example5.20