jQuery基础之(一)jQuery概述

1.jQuery的简介

就像上节所将到的Ajax框架一样,简单的说,jQuery是一个优秀的javascript框架,它能够让用户方便的处理html,events(冒泡)事件,动画效果,ajax交互等,它极大程度的改变了开发者使用javascript的习惯。jQuery自2006年最初创建,已经吸引了众多的javascript高手加入其团队,随着事件推移,jQuery新版本一个一个发布,它越来越受到关注。

如今,jQuery发展到集各种javascript/css/dom和ajax功能于一体的强大框架。可以简单的用代码实现各种网页效果

目前jQuery主要提供以下功能:

1.访问页面框架的局部,这是DOM模型主要的功能之一,DOM有获取页面某个节点或者某一类节点有固定的方法,而jQuery大大简化其操作步奏。

2.修改页面的表现。css的主要功能就是通过样式风格来修改页面的表现,jquery也很好的解决了众多浏览器对css3的支持程度,使得各个浏览器都能很好的使用css3标准,极大的丰富了css的运用。

3.修改页面的内容。通过强大的api,jquery可以方便的修改页面内容,包括文本的内容,插入新图片,表单的选项,甚至整个页面框架。

4.响应事件。jquery可以方便的处理事件,而且开发人员不再需要讨厌浏览器的兼容问题。

5.为页面添加动画。使用javascript添加动画需要大量的代码,而jquery大大简化了此过程,并且提供了大量可以自定义参数的动画效果。

6.与服务器交互。jquery提供一整套ajax的相关操作,大大方便了异步交互的开发和使用。

7.简化常用的javascript操作。jquery提供了很多附加功能来简化常用的javascript操作,例如数组的操作,迭代运算等。

2.jquery的优势。

以表格隔行变色来具体说明jquery的优势

i.javascript和jquery实现的隔行变色

    <script type="text/javascript">
            window.onload = function() {
                var oTable = document.getElementById("mytable");
                for (var i = 0;i < oTable.rows.length; i++) {
                    if (i % 2 == 0)
                        oTable.rows[i].className = "altcss";
                }

            }
        </script>

利用jquery实现

<script type="text/javascript">
            $(function(){
                $("table#mytable tr:nth-child(odd)").addClass("altcss");
            })
        </script>

表格区域代码

<table width="800" cellspacing="0" border="1" id="mytable">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
时间: 2024-08-25 00:44:06

jQuery基础之(一)jQuery概述的相关文章

jquery基础知识基本使用概述(1)

jQuery基本介绍 为什么要学jQuery [01-让div显示与设置内容.html] 使用JS操作DOM的时候,会遇到以下的一些缺点: //1. 获取元素的方法太少且长,麻烦.//2. 遍历伪数组很麻烦,通常要嵌套一大堆的for循环.//3. 注册的事件会覆盖.//4. 有兼容性问题.//5. 实现动画很麻烦 初体验 [02-让div显示与设置内容.html] $(document).ready(function () {    $("#btn1").click(function

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

jQuery基础学习3——jQuery库冲突

默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

JQuery基础知识==认识JQuery

1. Javascript简介 1.1  JS的3个弊端:复杂的文档对象模型(DOM),不一致的浏览器实现和便捷的开发,调试工具的匮乏 1.2  为了简化JS的开发,一些JS程序库就诞生了,大部分的JS程序库都是封装了很多预定义的对象和实用函数,快捷开发并兼容各大浏览器 1.3  一些JS程序库:Prototype,Dojo,YUI,Ext JS,Moo Tools,JQuery库:轻量级,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性,链式操作等功能 2.  JQuery优势

jQuery基础学习(一)&mdash;jQuery初识

一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优势.      (1)轻量级.      (2)强大的选择器.      (3)出色的DOM封装.      (4)可靠的事件处理机制.      (5)完善的Ajax.   2.jQuery类库说明      jQuery的库分为两种,分别是生产版和开发版.区别如下: 名称 大小 说明 jquer

jQuery基础学习(二)&mdash;jQuery选择器

一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   

jQuery基础学习4——jQuery容错性

使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. 1 <script type="text/javascript"> 2 document.getElementById("tt").style.color="red"; 3 </script> 如果网页中没有id为“tt”的元素,浏览器就会报错. 1 <script

jQuery基础学习(三)&mdash;jQuery中的DOM操作

一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法. //1.操作文本节点:通过jQuery的text()方法 alert($("#bj").text()); $("#bj").text("南京"); alert($("#bj").text()); //2.操作属性节点 //注:

jQuery基础——样式篇

jQuery基础--样式篇 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别 在于 2.x 不再兼容 IE6.7.8 为移动端而优化,由于减少了一些代码,使得该版本比 jQuery 1.x 更小且更快. 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了. $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正

jQuery基础之二

jQuery基础之二 jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DOM元素 元素本身 attr() 获得元素的某项属性,更改或添加元素的属性值 实例 var className= $("div").attr("class") 获得元素的类名 attr("property",'value1') 更改一项属性 attr({p