js代码改写成jq代码的方法

　　js代码改写成jq代码篇一：jQuery工作原理解析以及源代码示例
　　jQuery的开篇声明里有一段非常重要的话：jQuery是为了改变javascript的编码方式而设计的。从这段话可以看出jQuery本身并不是UI组件库或其他的一般AJAX类库。jQuery改变javascript编码方式！
　　那么它是如何实现它的声明的呢？这里，用以下的一段简短的使用流程：
　　1、查找（创建）jQuery对象：（selector）；
　　2、调用jQuery对象的方法完成我们需要完成的工作：（selector）。doOurWork（）；好了，jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的。这两个步骤是jQuery的编码逻辑核心！
　　要实现这种简洁编码方式，创建jQuery对象这一环节至关重要。因此，jQuery的dom元素查找能力相当强悍。此外，jQuery对象的方法肯定是有限的，有限的方法满足不了日益增长各有所需的要求，所以，必须提供jQuery对象方法的扩展能力。
　　强悍的dom元素查找能力，以及随心所欲的方法扩展，这两点正是jQuery的核心所在！来一个简单的示例，来说明jQuery是如何工作的：
　　！DOCTYPEhtmlPUBLICW3CDTDXHTML1。0
　　TransitionalENbaidu
　　（function（）｛
　　（a）。click（function（e）｛1）查找（a）；2）jQuery对象事件3）jQuery对象方法hide（this）。hide（slow）；
　　
　　｝）；
　　｝）；
　　jQuery中有一个配置的思想，这一点使得对象的属性事件等设置变得容易理解且十分简便，如下一个拖拽组件的初始化：
　　可以看到，（drag1）是查找并创建一个jquery对象，然后调用Draggable方法进行拖拽初始化，在此方法调用时，传递一个配置对象，进行拖拽操作的初始化配置。这一配置的思想，极大简化了一些编码步骤，并相当直观和易懂。
　　以下我进行三个问答：
　　1、问：为什么（selector）之后，返回的是jQuery对象？
　　答：从jQuery的源代码中，我们可以知道：varjQuery。因此当我们（selector）操作时，其实就是jQuery（selector），创建的是一个jQuery对象。当然正确的写法应该是这样的：varjqnew（selector）；而jQuery使用了一个小技巧在外部避免了new，在jquery方法内部：if（windowthis）returnnewjQuery（selector）；
　　2、问：为什么创建一个jQuery对象之后，我们可以这样写
　　（selector）。each（function（index）｛｝）；进行遍历操作呢？
　　答：其实jQuery（selector）方法调用时，在jQuery（selector）方法内部，最后返回的是一个数组：returnthis。setArray（a）；而each方法体内部是一个for循环，在循环体内是这样调用的：method。call（this〔i〕，i）。
　　3、问：为什么jQuery能做到jQuery对象属性方法事件的插件式扩展？
　　答：如果您有一些javasciprt的面向对象方面的知识，就会知道，jQuery。prototype原型对象上的扩展属性方法和事件，将会给jQuery的对象扩展。基于这一点，jQuery是这样写的：jQuery。fnjQuery。prototype。所以，当我们扩展一个插件功能时，如下：jQuery。fn。checkfunction（）｛
　　returnthis。each（function（）｛
　　其实就是：
　　综上所述，jQuery给我们带来了一个简洁方便的编码模型（1创建jQuery对象；2直接使用jQuery对象的属性方法事件），一个强悍的dom元素查找器（），插件式编程接口（jQuery。fn），以及插件初始化的配置对象思想。
　　附：实现自己的jQ！DOCTYPEhtmlPUBLICW3CDTDXHTML1。0
　　TransitionalENhttp：www。w3。orgTRxhtml1DTDxhtml1transitional。
　　pvv
　　fdsf
　　实现自己的MyQuery框架
　　varMyQueryfunction（selector）｛
　　if（windowthis）returnnewMyQuery（selector）；
　　这里只实现dom类型的简单查找，嘿嘿
　　vardomsdocument。getElementsByTagName（selector）；
　　vararr〔〕；
　　for（vari0；doms。i）｛
　　arr。push（doms。item（i））；
　　｝
　　returnthis。setArray（arr）；
　　｝
　　MyQuery。prototype。setArrayfunction（arr）｛this。length0；
　　〔〕。push。apply（this，arr）；
　　
　　｝
　　MyQuery。fnMyQuery。
　　varMyQ
　　插件扩展1）each
　　MyQuery。fn。eachfunctionethod）｛for（vari0，lthis。l；i）｛
　　method。call（this〔i〕，i）；
　　｝
　　｝
　　插件扩展2）show
　　MyQuery。fn。showfunction（）｛
　　this。each（function（i）｛
　　alert（i：this。id：this。innerHTML）；｝）；
　　｝
　　debugger
　　（p）。show（）；
　　js代码改写成jq代码篇二：JQ添加移除css样式代码实现
　　jQuery添加移除CSS类实现代码
　　在网页设计中，我们常常要使用Javascript来改变页面元素的样式。
　　其中一种办法是改变页面元素的CSS类（Class），这在传统的Javascript里，我们通常是通过处理HTMLDom的classname特性来实现的。；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法的思想相通，但是却节省了许多代码。还是那句话jQuery让JavaScript代码变得简洁！
　　1。addClass（）添加CSS类
　　代码如下：
　　（target）。addClass（newClass）；
　　target指的是需要添加样式的元素的ID
　　newClass指的是CSS类的名称
　　2。removeClass（）移除CSS类
　　代码如下：
　　（target）。removeClass（oldClass）；
　　target指的是需要移除CSS类的元素的ID
　　oldClass指的是CSS类的名称
　　3。toggleClass（）添加或者移除CSS类：如果CSS类已经存在，它将被移除；相反，如果CSS类不存在，它将被加上。
　　代码如下：
　　（target）。toggleClass（newClass）
　　如果ID为target的元素已经定义了CSS样式，它将被移除；
　　反之，CSS类newClass将被赋给该ID。
　　4。hasClass（className）判断是否已经存在CSS
　　在实际运用中，我们常常先定义好这些CSS类，然后通过Javascript事件触发（比如点击某个链接）来改变页面元素样式。此外，jQuery还提供一种方法hasClass（className），用来判断某个元素是否已经被赋予某个CSS类。
　　Jquery使用addClass（）与removeClass（）来动态的添加或移出一个css类的具体例子如下：
　　1。（para1）。addClass（39；highlight39；）；添加一个highlightcss类给id为para1的元素。
　　2。（‘para1’）。removeClass（‘39；highlight39；）；从id为para1的元素中移出一个‘highlight’css类。
　　具体实例代码如下：
　　窗口标题left
　　61。hr62。hr63。hr64。hr65。img
　　srchttp：pic002。cnblogs。comimages20124512072012100814082487。jpgalt关闭窗口标题right
　　66。hr67。hr68。hr69。hr70。获取窗口的高度
　　71。varwindowH
　　72。获取窗口的宽度
　　73。varwindowW
　　74。获取弹窗的宽度
　　75。varpopW
　　76。获取弹窗高度
　　77。varpopH
　　78。functioninit（）｛
　　79。windowHeight（window）。height（）；
　　80。windowWidth（window）。width（）；
　　81。popHeight（。window）。height（）；
　　82。popWidth（。window）。width（）；
　　83。｝
　　84。hr85。关闭窗口的方法
　　86。functioncloseWindow（）｛
　　87。（。wintitleimg）。click（function（）｛
　　88。（this）。parent（）。parent（）。hide（normal）；
　　89。｝）；
　　90。｝
　　91。hr92。functionpopCenterWindow（）｛
　　93。init（）；
　　94。计算弹出窗口的左上角Y的偏移量
　　95。varpopY（windowHeightpopHeight）2；垂直方向偏移量
　　96。varpopX（windowWidthpopWidth）2；水平方向偏移量
　　97。hr98。设定窗口的位置
　　99。（center）。css（top，popY）。css（left，popX）。slideToggle（fast）；100。closeWindow（）；
　　101。｝
　　102。hr103。functionpopLeftWindow（）｛
　　104。init（）；
　　105。计算弹出窗口的左上角Y的偏移量
　　106。varpopYwindowHeightpopH
　　107。varpopX（windowWidthpopWidth）；
　　108。hr109。设定窗口的位置
　　110。（left）。css（top，popY50）。css（left，50）。slideToggle（slow）；111。closeWindow（）；
　　112。｝
　　113。functionpopRightWindow（）｛
　　114。init（）；
　　115。计算弹出窗口的左上角Y的偏移量
　　116。varpopYwindowHeightpopH
　　117。varpopXwindowWidthpopW
　　118。hr119。设定窗口的位置
　　120。（right）。css（top，popY50）。css（left，popX50）。slideToggle（normal
　　）；
　　121。closeWindow（）；
　　122。｝
　　123。hr124。hr125。