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


Posted in Javascript onJanuary 19, 2015

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>

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

Javascript 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Jquery获取radio选中的值
May 05 jQuery
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
js实现计算器功能
Aug 10 Javascript
jQuery 选择器详解
Jan 19 #Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 #Javascript
jQuery中ready事件用法实例
Jan 19 #Javascript
jQuery中offsetParent()方法用法实例
Jan 19 #Javascript
jQuery中outerWidth()方法用法实例
Jan 19 #Javascript
You might like
php中cookie的使用方法
2014/03/29 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python去除所有html标签的方法
2015/05/05 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python中的set实现不重复的排序原理
2018/01/24 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
解决python运行效率不高的问题
2020/07/20 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
自动一体化专业求职信
2014/03/15 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
高中生物教学反思
2016/02/20 职场文书
python中数组和列表的简单实例
2022/03/25 Python