`
jy00314996
  • 浏览: 75781 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

我的jQuery学习笔记

阅读更多

 jQuery学习笔记,共享+备份一下:)
中间主要是用自己的方式予以记录,看不明白的地方还请见谅,也欢迎向我提出:P

  1/**//******************************  
  2 * jQuery学习笔记  
  3 * @author Linvo  
  4 ******************************/
  
  5    
  6/**//*=========  
  7 2009-1-14  
  8=========*/
  
  9$() = $(document)   
 10    
 11//实现window.onload()效果   
 12$().ready(   
 13    function(){   
 14        //需要执行的内容   
 15    }
   
 16);   
 17    
 18//获取DOM元素(返回值为jQuery对象)   
 19$(element) //相应元素名的   
 20$(.classname) //class值匹配的   
 21$(element.classname) //相应元素中,class值匹配的   
 22$(#id) //id匹配的   
 23$(element#id) //相应元素中,id匹配的   
 24$(element1 > element2)   //元素一 下 的所有元素二(只包括儿子)   
 25$(element1 element2)        //元素一 中 的所有元素二(包括子孙等)   
 26$(element1 + element2)  //元素一 后 的所有元素二(代码后)   
 27$(element1 ~ element2)  //与元素一 并列 的所有元素二(兄弟元素二)   
 28    
 29$(#id).html(""//设置 getElementById("id").innerHTML = ""   
 30$(#id).html()       //取出 getElementById("id").innerHTML   
 31    
 32//动画出现效果   
 33$(#id).show(speed, [callback])   
 34$(#id).slideDown(speed, [callback])   
 35……   
 36    
 37    
 38/**//*=========  
 39 2009-1-16  
 40=========*/
  
 41//在<p>外面包围另一个结构(html代码/元素)   
 42$("p").wrap("<div class='wrap'></div>")   
 43$("p").wrap(document.getElementById('content'))   
 44    
 45$("p").append("<b>Hello</b>");  //<p>I would like to say: <b>Hello</b></p>   
 46$("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>   
 47$("p").before("<b>Hello</b>");  //<b>Hello</b><p>I would like to say: </p>   
 48$("p").after("<b>Hello</b>");   //<p>I would like to say: </p><b>Hello</b>    
 49    
 50//【删除相应class的p元素】   
 51//<p class="classname">AAA</p> BBB <p>CCC</p>   
 52//BBB <p>CCC</p>   
 53$("p").remove(".classname");   
 54    
 55/**//*=========  
 56 2009-1-18  
 57=========*/
  
 58//获取具有某属性值的相应元素   
 59$("input[name=qq]"//获取<input name="qq" type="text" />元素   
 60    
 61//属性与值关系   
 62=   //等于   
 63*=  //包含该值   
 64!=  //不包含该值   
 65^=  //以该值开头   
 66$=  //以该值结尾   
 67    
 68//为每一个匹配的元素执行该函数   
 69$(element).each(function(){   
 70    //需要执行的内容   
 71}
)     
 72    
 73/**//*=========  
 74 2009-1-19  
 75=========*/
  
 76/**//*  
 77jQuery中用post和get方法  
 78(ajax高层抽象方法,对ajax方法进行了封装)  
 79   
 80【当JQ中用post方式】  
 81PHP用$_POST接收时,只有n2  
 82PHP用$_GET接收时,只有n1  
 83   
 84【当JQ中用get方式】  
 85PHP用$_GET接收,n1 n2都有  
 86PHP用$_POST接收时,都没有  
 87*/
  
 88$.post("do.php?n1=a"{n2: "b"},       
 89    function(data){   
 90        alert("Data Loaded: " + data);   
 91    }
   
 92);   
 93    
 94/**//*=========  
 95 2009-1-20  
 96=========*/
  
 97//DOM对象 -> jQuery对象   
 98//$(DOM对象)   
 99var v = document.getElementById("id");  //DOM对象 v    
100var $v = $(v); //jQuery对象 $v   
101    
102//jQuery对象 -> DOM对象   
103//jQuery对象.get(0) 或者 jQuery对象[0]   
104var $v = $("#id");  //jQuery对象 $v   
105var v = $v.get(0); //DOM对象 v   
106var v = $v[0]; //DOM对象 v   
107    
108$(element).get(); //获取指定元素的集合   
109    
110//jQuery用ajax方法(ajax低层方法)   
111$.ajax({   
112    type:   "POST"//POST时PHP中用$_POST接收,GET反之。   
113    url:    "do.php",   
114    data:   "n1="+x+"&n2="+y,   
115    success: function(data){ alert( "Data Saved: " + data ); }    
116}
);   
117    
118/**//*=========  
119 2009-1-21  
120=========*/
  
121//序列表表格内容为请求字符串   
122//返回值:(例)name=linvo&age=22   
123$("form").serialize() //序列化整个表单元素内容   
124$("input[type=text]").serialize() //序列化指定元素内容(例)   
125    
126$(element).empty(); //移除指定元素下所有元素   
127    
128/**//*  
129 CSS设置  
130*/
  
131$(element).addClass("classname"); //为指定元素添加css样式   
132$(element).removeClass("classname"//移除指定元素的css样式   
133$(element).toggleClass("classname"//指定元素的css样式,有则删除,无则添加   
134$(element).css("attname"); //获取指定元素相应属性的值(attname例:color)   
135$(element).css("attname","value"); //设置……属性值(例:"color","#FF0000")   
136$(element).css("margin-left""10px""background-color""blue" });    
137//使用“名/值对”进行批量设置……(例子见自身)   
138    
139/**//*=========  
140 2009-1-22  
141=========*/
  
142$(element1).next(element2) //与指定元素一 紧邻 的指定元素二   
143$(element1).parent().is(element2) //元素一的父元素在元素二的集合中吗    
144    
145//模仿鼠标悬停事件   
146//hover(over,out)   
147//over:在上方执行 | out:移出时执行   
148$(element).hover(   
149    function(){   
150        //在上方执行   
151    }
function(){   
152        //移出时执行   
153    }
   
154)  
155
 

    以上部分是参考 jQuery中文指导 + jQuery API手册 进行学习的记录
到这里可能算是基本入门吧,接下来准备直接通过阅读API手册进行学习
最后再自我强调一下:切勿眼高手低!

分享到:
评论

相关推荐

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    jQuery 语法学习笔记

    jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

    jquery 学习笔记

    **jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    javascript and jquery学习笔记与资料

    这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...

    JQuery学习笔记(日常积累)

    在深入探讨jQuery的知识点之前,首先需要理解jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器,它允许开发者通过CSS样式的语法轻松选取HTML...

    jQuery学习笔记 jQuery API

    **jQuery学习笔记 jQuery API** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...

    JQuery学习笔记(技术文档)

    ### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...

    jQuery学习笔记

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...

    圣思源的jquery学习笔记

    《圣思源jQuery学习笔记详解》 jQuery,作为一款强大的JavaScript库,自2006年发布以来,因其简洁易用的API和丰富的插件生态,迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记,深入浅出地剖析了...

    锋利的jQuery学习笔记

    《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料,主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理...

Global site tag (gtag.js) - Google Analytics