本系列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. Web前端之jQuery 的10大操作技巧

    不管是做什么事情,人们习惯在工作中去找方法.找技巧,来帮助提高效率,在软件开发中更是如此.jQuery作为前端开发必学技术之一,在使用中也有各种各样的小技巧,今天小编为大家分享10条必知会的技巧,希望 ...

  2. MySql触发器语法总结

    经过昨天多次失败,今天终于将我要实现的触发器功能写成功了,触发器代码如下: -- use dbfortest; drop trigger if exists tg_before_insert_on_d ...

  3. centos 7 配置iptables

    环境:阿里云ECS.centos 7 一.防火墙配置 不知道为什么,云主机没有开启firewall 或iptables,记录一下配置iptables防火墙的步骤 1.检测并关闭firewall sys ...

  4. Docker Container 配置独立IP

    1.宿主机安装网桥工具包 要是Linux可以工作在网桥模式,必须安装网桥工具bridge-utils,运行命令: yum install bridge-utils

  5. Mac eclipse配置Python环境

    1.给Eclipse安装PyDev插件 第一次启动会让选择一个工作空间,按缺省设置,勾选一下不再提醒,就可以了.在Help菜单中,选择Install New Software···, 选择Add按钮, ...

  6. 将input file的选择的文件清空的两种解决方案

    <input type="file" id="fileupload" name="file" /> 上传文件时,选择了文件后想清 ...

  7. Redis 慢速入门(一)

    网上关于redis的入门文章其实已经很多了,这里仅仅以作者特独的视角来学习下redis相关的基础概念. 一切的基础 需要分清楚3个重要的概念,key,type,value. 这里的key为hello, ...

  8. PHPCMS_V9 模型字段添加单文件上传功能

    后台有“多文件上传”功能,但是对于有些情况,我们只需要上传一个文件,而使用多文件上传功能上传一个文件,而调用时调用一个文件URL太麻烦了. 使用说明: 1.打开phpcms\modules\conte ...

  9. 友盟推送 .NET (C#) 服务端 SDK rest api 调用库

    友盟推送 .NET SDK rest api 介绍 该版本是基于友盟推送2.3版本封装的,网上查询了下发现没有.NET版本的调用库,官方也没有封装.NET的版本,只有python.java.php版本 ...

  10. Nginx %00空字节执行php漏洞

    Nginx如下版本:0.5.*, 0.6.*, 0.7 <= 0.7.65, 0.8 <= 0.8.37在使用PHP-FastCGI执行php的时候,URL里面在遇到%00空字节时与Fas ...