当前位置: 澳门新濠3559 > 服务器运维 > 正文

1、首先需要引入JQuery的核心库,JQuery是一种非常

时间:2019-12-26 07:51来源:服务器运维
JQuery是一种非常灵活的脚本库,JQuery库为Web脚本编程提供了通用的抽象层,它几乎适用于我们任何脚本编程,它让我们使用Javascript更加方便更加简介,大大的提高了我们的工作效率和减

JQuery是一种非常灵活的脚本库,JQuery库为Web脚本编程提供了通用的抽象层,它几乎适用于我们任何脚本编程,它让我们使用Javascript更加方便更加简介,大大的提高了我们的工作效率和减少了我们的编码量,它主要几个功能有以下几个。 一、获取页面中任何元素。 二、修改页面的外观,调整页面的样式。 三、动态改变页面中的内容。 四、动态绑定控件事件。 五、为页面添加动画效果。 六、Ajax无刷新技术。 七、扩展插件开发。 对于我个人而言,在众多的脚本库中,我还是比较偏向于JQuery的,因为它本身即摆脱的使用JavaScript的繁琐,又不像其他脚本库一样不易于扩展使用,就像我用过的ExtJs脚本框架,虽然很强大,但是使用起来比较费力而且不易于扩展,某些程度上阻扰了自我的发挥,我觉得JQuery的优势在于: 一、利用了CSS的优势,便于我们进行选择。 二、本身对多种浏览器兼容性进行处理,使用了跨浏览器的最佳方案。 三、总是面向集合,不需要每个都去循环。 四、支持扩展。 五、将多重操作集为一行。 六、完全免费,使用时只要导入一个20几KB的JS文件就可以使用,非常方便。 此文章纯属个人见解,望感兴趣的朋友参与讨论研究。未完待续。

JQuery相信每个做过web开发的程序员都很熟悉,它是继Prototype之后又一个优秀的Javascript框架,由于它的兼容性要比直接使用JS好很多(它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器),所以越来越多的人在开发web项目的时候都会引入JQuery的相关文件,即使用不到一些特效我们也还是很愿意引入它(它的宗旨:WRITE LESS,DO MORE,写更少的代码,做更多的事情),它不仅能够给我提供比JS更好的兼容性,而且还封装了一些操作,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互,所以web开发非常建议使用JQuery。当让更加高级的封装也有,比如JQuery-UI等,让我们开发的弹出窗口更加美观,操作也更加简单。下面我根据平时使用及网络资料总结了一些我们常用的JQuery常用的特性。

1、首先需要引入JQuery的核心库

JQuery核心js文件也就几十kb,基本不会影响页面加载速度。

<script type="text/javascript" src="${ctx}/js/jquery-1.9.1.min.js"></script>

2、选择器功能

JQuery的选择器用起来很方便,好比要找到某个dom对象的相邻元素js可能要写好几行代码,而JQuery一行代码就搞定了,再比如要将一个表格的隔行变色,JQuery也是一行代码搞定。下面是一个例子:

<script type="text/javascript">
  //隔行变色
 $(document).ready(function(){

  $(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
  $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over,并且当鼠标一出该行时执行函数
  $(this).removeClass("over");}) //移除该行的class
  $(".stripe_tb tr:even").addClass("alt"); //给class为stripe_tb的表格的偶数行添加class值为alt

 });
</script>

/*注意选择器的层叠关系*/
.stripe_tb tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*这个将是鼠标高亮行的背景色

3、跨浏览器兼容
澳门新濠3559,JQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。

4、Ajax操作支持

JQuery简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信。当然也可以配合div或iframe完成返回一个页面的异步刷新功能,下面的连接是我写的Jquery+div实现异步刷新的例子:

5、事件、样式、动画支持

JQuery还简化了js操作css的代码,并且代码的可读性也比js要强。下面是Jquery实现的一些动态效果:

//1、点击出现爆炸效果:
$(document).ready(function(){
    $('div').click(function(){
        $(this).effect('explode');
    });
});

//2、点击出现滑动效果
$(document).ready(function(){
    $('img').animate({top: '+=100px'},1000);
});

//3、点击出现上下跳动的效果
$(document).ready(function(){
    $('div').click(function(){
        $(this).effect('bounce', {times:3}, 500);
    });
});

//4、点击出现闪现的效果
$(document).ready(function(){
    $('div').click(function(){
        $(this).effect('slide');
    });
});

//5、可以拖动重新排序
$(document).ready(function(){
    $('ol').sortable();
});

//6、点击出现可折叠的效果
$(document).ready(function(){
    $('#menu').accordion();
});

6、链式操作

JQuery的链式操作可以把多个操作写在一行代码里,更加简洁。

选中网页元素以后,就可以对它进行某种操作。jQuery允许将所有操作连接在一起,以链条的形式写出来。这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。

 $('div').find('h3').eq(2).html('Hello'); 

7、可扩展性强

JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用(Jquery-UI)。
JQuery提供了扩展接口:JQuery.extend(object),可以在JQuery的命名空间上增加新函数。JQuery的所有插件都是基于这个扩展接口开发的。

总结:其实想了解更多的特性还是直接去参考官方的文档,上面说的很全面,当然我们也不用全部去记忆,用到了什么效果直接去查就可以,只要我们平时没事多看看,知道有些什么样的效果就ok了。

JQuery实现脚本与页面的分离,只要有标签id就可以实现添加各种效果,就像CSS让样式代码与页面代码分离开一样,这样我们可以实现灵活性非常强的清晰页面代码。当然JQuery也有一些缺点,比如:不能向后兼容、有时候多个插件冲突、引入不同库的先后顺序等,但是这些比起它带来的方便都不值一提,相信经过不断的优化,以后它的缺点会越来越少,优点将越来越多。

...

编辑:服务器运维 本文来源:1、首先需要引入JQuery的核心库,JQuery是一种非常

关键词: