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> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
        </table>

以上就是本文的全部内容了，都是非常基础的东西，高手们请直接略过。

赞 (0)

相关推荐

  • jQuery插件开发基础简单介绍

    1.开发jQuery 插件的基本格式 复制代码 代码如下: (function ($) { $.extend($.fn, { }) })(jQuery) 2.开发全局函数的基本格式 复制代码 代码如下: (function ($) { $.extend($, { }) })(jQuery) 开发示例: 复制代码 代码如下: (function ($) { $.extend($, { subtract: function (a, b) { return a-b; } , add: function

  • jQuery 改变CSS样式基础代码

    其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: 复制代码 代码如下: $("#61dh a").css('color','#123456'); //这里选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法.示

  • jQuery基础学习技巧总结第1/4页

    一.简介 1.1.概述          随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度. jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 

  • jQuery基础教程笔记适合js新手第1/2页

    1, :eq()和nth-child()  看下面代码: <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("#selected-plays > li:eq(1)").addClass("a"); //等价于  $("#selected-plays > li:nth-child(2)").addClass("a"); //注意:js数组是从

  • 基于Jquery的淡入淡出的特效基础练习

    基于Jquery的淡入淡出的特效基础练习

    今天练习了个Jquery淡入淡出的特性代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • jquery基础教程之数组使用详解

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象.回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代码 代码如下: var _mozi=

  • jQuery中的正则表达式分析 正则基础

    quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/ (?:-)表示是一个非捕获型 [^<]表示是以"<"起始,包含0个或多个'<'括号 (<[\w\W]+>)表示是一个捕获型,以'<>'起始,中间包含一个或多个字符 $表示字符的结尾 (#([\w\-]+))表示是一个捕获型,以'#'号和字符串.数字._以及-组成 rnotwhite = /\S/ \S表示是空白字符

  • C#学习笔记整理_变量等基础语法(必看篇)

    C#学习笔记1: 变量的作用域冲突时,调用实例变量:this.a,调用类变量:类名.a 常量总是静态的,必须初始化,一般用全大写格式,声明关键字为const,如const int NUNBE = 10; C#的基本预定义类型内置于.NET Framework结构中(System),object是基类: 整型:System.SByte.System.Int16.System.Int32.System.Int64 有符号的8位.16位.32位.64位分别表示为sbyte.short.int.long

  • jQuery学习笔记之回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • ng2学习笔记之bootstrap中的component使用教程

     前序: 现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境: 相关内容请前往:https://angular.cn/docs/ts/latest/cli-quickstart.html 正文: 以图片轮播组件carousel为例: 首先安装好ng2-bootstrap,bootstrap npm install ng2-bootstrap bootstrap --save 在需要用到的模块中导入 import { Carou

  • Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解

    本文实例讲述了Python GUI编程学习笔记之tkinter中messagebox.filedialog控件用法.分享给大家供大家参考,具体如下: 相关内容: messagebox 介绍 使用 filedialog 介绍 使用 首发时间:2018-03-04 22:18 messagebox: 介绍:messagebox是tkinter中的消息框.对话框 使用: 导入模块:import tkinter.messagebox 选择消息框的模式: 提示消息框:[返回"ok"] tkint

  • java 学习笔记(入门篇)_java的基础语法

    java 学习笔记(入门篇)_java的基础语法

    前言 学习完了第一个java程序,之后就来系统的学习java.先从基础语法开始,这个语法你也可以理解为英语或是汉语里面的语法,只不过大家各有各的特点和区别.学习编程其实也是一个编程语言的学习过程.我们在学习英语的时候都说,要想学习好英语一定要动口说,那么在学习编程的时候你一定要动手写.编程无非就是一个写代码的过程,首要就是你心中要有基础,没有基础怎么去写呢,就像一篇好文章,没有好文笔是写不出来的.好文笔不仅靠积累,更要靠创造,编程亦是如此.java是一个面向对象的语言,在写代码的过程中,接触最多

  • 那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad

  • jQuery学习笔记 更改jQuery对象

    jQuery代码的任务就是生成jQuery对象A,操作jQuery对象A:生成jQuery对象B,操作jQuery对象B--但是若此过程中,对象A.B--之间有某种关系,那么完全没必要一个个去$(selector),这很繁琐的.因此jQuery提供了一些方法,使流程变为生成jQuery对象A,操作jQuery对象A:更改为jQuery对象B,操作jQuery对象B-- 一个jQuery对象,既要进行N次操作,又要进行M次更改.因此有必要将生成的jQuery对象存储在一个变量中,多次调用.然而,试

  • jQuery学习笔记之基础中的基础

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

  • JavaScript 学习笔记之基础中的基础

    概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript  ECMAScript(核心) DOM(文档对象模型) BOM(浏览器对象模型) 1.1ECMAScript ECMAScript是通过ECMA-262标准化的脚本语言,ECMA-262规定语言的:语法.类型.语句.关键字.保留字.操作符.对象 1.2 DOM DOM把整个页面映射为一个多层节点结构,HTML或者XML等页面中的每个组成部分都是某种类型的节点,这些节点又包含不同类型的

随机推荐