js框架(jQuery)

                           Js框架(jQuery)

在前端的学习中,我学习了两种js框架。

有传统的js框架:jQuery,jQuery从创建开始历经了十年的优化和改进,已经是非常成熟和得到了大多数前端的人员的使用,所有jQuery是我们必须掌握的。

也有比较新型的js框架:Angular-js,Angular-js的思想比较新颖,方法也跟jQuery完全不同,历经了5年的建设,Angular-js也开始流行,现在也有很多人开始运用。

jQuery:

jQuery从根本来说是javaScript的函数库,它封装各种方法各种功能的函数,jQuery极大地简化了javaScript编程。在项目建设中,大部分都会采用它(jQuery)来进行代码的编写。在工作单位中,在要求你javaScript掌握的情况下,也一定要求你会使用jQuery。

jQuery和核心是用$()找到添加事件的对象然后在添加事件的jQuery封装函数。

jQuery有着强大的选择器,而不是只有js中那几个找id,找classname,找name,找tagName这几种。它的选择器有着清晰的逻辑性,比如js中没有的:parent>child是在给定父元素下匹配所有子元素、prev+next是匹配所有紧接在prev元素后的next元素、还有匹配基数偶数项的函数 偶数:even和基数:odd、 :eq(index)是匹配一个给定索引值的元素,简单来说就是找到元素的第几个。还有很多具有逻辑性的选择器,具体了解可以查查jQuery的文档,选择器用好了会代码编辑带来极大的方便,会更简单明了的找到你想操作的对象。

jQuery对Dom的操作也很强大,它有着很多的文档处理函数,这里将简单介绍几个比较常用的。

  1:append(content|fn)  是向每个匹配的元素内部追加内容,在Js中就如同对指定的元素执行 appendChild的方法,把它们添加到文档中。()是要添加的内容。 添加的方法还有appendTo() 它 和append()的区别在于添加对象的位置,appendTo()的前面是添加内容,后面是添加对象。

  2:after()和before()  after()是在匹配元素之后插入内容,而before()就是在元素之前插入内容了。

  3:empty() 是删除匹配元素集合中所有的子节点。

  4:remove() 是从DOM中删除所有匹配的元素。

jQuery有很多帮助筛选的函数,极大的方便了我们对元素进行筛选。比如:

  1:eq() 是获取标签的第n个元素。

  2:first()和last() 分别是获取第一个和最后一个元素。

  3:has()是保留包含特定后代的元素,去掉那些不含有指定后代的元素。

  4:next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

  5:nextAll() 查找当前元素之后所有的同辈元素。

jQuery也有很多常见的事件封装的函数。例如

  1:js中的加载完成后运行代码的onload在jQuery中用ready()。.

  2:bind(type,fn)是为元素绑定事件处理函数,type为事件名。

  3:  change()是元素的只发生改变的时候触发事件

  4:又比如js中一些常见的事件,在jQuery中例如 hover()、blur()、click()、focus()、mousedown()等等。

jQuery的动画添加,例如:比较强大的创建自定义动画: animate(params,[speed],[fn]); params是动画属性和样式属性,speed是动画时间以毫秒为单位,fn为动画完成后执行的函数。

时间: 2024-07-31 14:31:39

js框架(jQuery)的相关文章

js框架封装,模拟jQuery封装

模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获取dom元素:其后设置入口函数jQuery,返回一个F的实例:然后对jQuery.prototype进行设置:其后修改F的原型指向jQuery的原型,最后暴露出去两个接口$和jQuery:二:jQuery.fn.extend = jQuery.extend = function(){}通过向jQue

ecshop2.7.3 transposrt.js和 jquery 等js框架冲突最简单最新的解决办法

适用于 ecshop v2.7.3 由于ecshop中的 transport.js 中重写的json解析 导致各种js框架不兼容和处理前台和后台html文档时不便. parseResult() error: can't parse to JSON 等错误 ,由此考虑替换掉 json解析.(不影响原有功能) 方法 1 引入 jquery.js ,jquery.json.js 2 修改 transport.js 为以下内容 /**  * @file            transport.js  

解决ECSHOP中transport.js和jquery的冲突

ecshop模板兼容jquery问题, 一直是困扰开发人员的棘手问题,主要原因是 transprot.js  文件中, 大概 580行到590行之间,这个句用于格式化json,他重写了object的结构,导致于js框架冲突.冲突的原因是jquery给一个object增加了很多元素,那么在Object.prototype.toJSONString = function () 这个函数中 for (k in this) 语句中进行了无数次的循环,导致网页很卡,并且在IE中会报错. ecshop开发中

简单的JS框架

一 Yui-ext 基于Yahoo UI的扩展包yui-ext是具有cs风格的web用户界面组件,能实现复杂的Layou布局,界面效果可以和backbase比美,而且使用纯JavaScript代码开发.真正的可编辑的表格edit Grid,支持XML和Json数据类型.许多组件实现了对数据源的支持,如动态布局,动态加载Tree控件,动态拖拽效果等等.从1..0beta版开始同jQuery合作,推出基于jQuery的ext1.0,提供了更多有趣的功能. 优点:结构化,清晰明了,底层用到了jQuer

借鉴一些关于js框架的东西

八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartui (转载) Extjs 与 JQuery 1.Turbomail(www.turbomail.org)下一版本决定用Extjs + jquery 开发.2.JQuery 提供了方便的对网页元素操作方法,但不提供基本控件,如:Tab,Grid,Muen 等,Extjs 是一套   完整的控件库,Ex

JS框架常识。

JS框架: 1,Dojo是目前最为强大的j s框架,它在自己的Wiki上给自己下了一个定义,dojo是一个用JavaScript编写的开源的DHTML工具箱.2,Scriptaculous是基于prototype.js框架的JS效果.3,jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便! 优点:注重简介和高效,js效果有yui-ext的选择,因为yui-ext 重用了很多jQuery的函数 4,MochiKit自称为一个轻量级

手淘flexible.js框架使用和源代码讲解

手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架. 其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了,首先我们来说一下常用的移动设备. iphone6:    375px*667px  实际像素:750px*1334px iphone5:   320px*568px   实际像素:640px*1136px iphone4:   320p

不需要更多JS框架了

现在,JavaScript框架已成为Web项目开发不可或缺的一部分.那是因为很长一段时间以来,各种浏览器之间有很大的差别,人们不得不编写框架对此进行屏蔽.问题在于,各种浏览器甚至在基本问题上都难以取得一致,以致框架还要针对浏览器该如何工作设计自己的模型,比如如何传播事件.如何与DOM交互等.于是出现了许多框架,常见的有jQuery.Dojo.MochiKit.Ext JS.AngularJS.Backbone .Ember.React等.对于这种情况,谷歌工程师Joe Gregorio在博文中写

js框架设计1.1命名空间笔记

借到了司徒正美的写的js框架设计一书,司徒大神所著有些看不太懂,果然尚需循序渐进,稳扎js基础之中. 第一张开篇司徒阐述了种子模块的概念 种子模块亦为核心模块,框架最先执行模块,司徒见解应包含:对象扩展.数组化,类型判定,简单事件的绑定和写在,无冲突处理,模块加载与domReady.应具有扩展性.常用.稳定等特点. 1.1 命名空间 一观各大框架,基本是定义一个全局变量作为命名空间,如Ext的Ext等,大体抽象取例为: if(typeof(Ten)==='undefined'){ Ten={};