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的最大优势
  • 支持扩展
  • 抽象浏览器不一致性
  • 总是面向集合
  • 将多重操作集于一行
  1. jQuery的操作
  • 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引用内容

         <script src="Jquery/jquery-1.11.3.js"></script>官方定义的脚本,必须在引用自己定义的脚本之前引用,否则自己定义的脚本就会报错。

         <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>

分析上面的代码:

1、查找诗歌的文本

通过$()函数来完成的,参数中包括任何CSS选择符表达式。在这里是希望找到所有poem-stanza类的Div元素

             $()函数会返回一个新的JQuery对象实例,我们希望改变诗歌中的类就需要这样去选择。

        2、加入新类

            addClass()方法的作用是不言而喻的,它会将一个CSS类应用到我们选择的页面元素中去。与.addClass方法相反的是

.removeClass(),为我们探索JQuery支持各种选择表达式提供了便利。

highlight定义了一个带边框和灰色背景斜文本样式。

        3、执行代码

            $(document).ready()方法,Jquery支持我们预定在Dom加载完毕后调用某个函数,而不必等页面中的图像加载。

   jQuery调试工具

1、IE Developer Tools

2、Chrome Developer Tools

3、FireFox  FireBug

2. 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() 更好用。

时间: 2024-12-15 04:12:52

Jquery 系列(1) 基本认识的相关文章

[javascript] jQuery系列之目录汇总

最近一个月写了些关于jQuery的文章,谢谢大家的支持.文章仅我个人观点,也许有不对的地方,请指出.这个系列还在更新中 一:jQuery基础系列: jQuery温习篇---强大的JQuery选择器 jQuery之工具函数 jQuery之筛选函数 jQuery1.4.2新特性(翻译) jQuery Ajax 回顾 jQuery 1.4 版本的十五个新特性-转载 二:jQuery插件系列: jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacem

jQuery系列教程

这是根据自己学习jQuery一路记录一下每一个章节的学习重点和主要内容供自己以后回顾和大家参考,我会学完一张以后写一些心得和主要内容在这上面 jQuery学习系列教程 jQuery选择器 基本选择器 ID选择器 class类选择器 标签名选择器 层次选择器 后代选择器($("ancesor descendent"):代表所有的后代元素) 子元素选择器($("partent > child"):代表只是下一代的子元素) 紧接的元素($("prev +

【jQuery系列0】初识jQuery之属性

接触jQuery是从做项目开始的,当时只知道我们的项目里边用到了jquery.ajax等等,一听高大上的感觉,但是哪里用到了作用是什么并不清楚,直到看了jquery视频才恍然大悟:原来这就是jquery,我还一直以为那就是单纯的js呢! jQuery简介 jQuery,即JavaScript和查询Query,它是继prototype之后又一个优秀的JavaScript库,它兼容多浏览器,核心理念是"写得更少,做得更多",由美国人于2006年1月在纽约的barcamp发布,吸引了世界各地

jQuery系列1

一.jQuery简介 1概念:jQuery是一个轻量级的库,其中包含了很多函数使用户能够更加方便的处理HTML.event以及实现一些动态的效果. 2.作用:是用户能够更方便的处理HTML,event,以及实现一些动画效果. 3.语法:jQuery的书写方法如下: $(select).action(); (1)$代表定义jQuery语法. (2)select代表选择的元素,可以使用选择器进行选择. (3)action()是一个函数,当选择了某个属性之后,通过该函数对元素进行处理.也可以在acti

Jquery 系列(2) 选择元素

Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选择页面元素更灵活的DOM遍历方法 理解DOM树 DOM(Document Object Model)文档对象模型,可以充当JavaScript和网页之间的接口.jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素.DOM中各元素的关系,同数据结构中的二叉树的称呼非常相近.元素之间的关系包

JQuery系列(4) - AJAX方法

jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.ajax(url[, options]) $.ajax([options]) 上面代码中的url,指的是服务器网址,options则是一个对象参数,设置Ajax请求的具体参数. $.ajax({ async: true, url: '/url/to/json', type: 'GET', data :

jQuery系列之操作select标签

每次看完东西基本就忘了,现在决定写一下博客来记录,不知道效果咋样. 一.jQuery操作选择器 1.基本选择器 关于基本选择器,我就不用太多说了,包括了ID.类.标签等选择器. 2.层次选择器 我觉得掌握层次选择器需要了解dom元素的树形结构,这样你才能准确的抓住你想要操作的dom元素. 下面介绍一下层次选择器: a. $("ancestor descendant"),表示选取ancestor元素中的所有descendant元素,ancestor表示上代的一起,descendant表示

jQuery系列02

一.jQuery过滤器 1.基础过滤器 (1)element:animated 选择所有的正在执行动画效果的元素 (2):eq(index) 在匹配的集合中选择索引值为index的元素,index的值从0开始计数,:eq(index)有两种情况 :eq(index)从头开始计数. :eq(-index)从最后一个开始倒计数. (3):even 选择索引值为偶数的元素,从0开始计数,也可以查看基数(odd),因为从0开始计数没所以当使用:even时,会选择第一个,第三个...元素.当使 用:odd

jQuery系列 第三章 jQuery框架操作CSS

第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程.     使用原生的方式来设置标签的样式(代码示例) 1 <body> 2 <div>我是div标签</div> 3 <button id=