jQuery总结2

jquery实训报告简介：本报告旨在总结和回顾我在jQuery实训中所学到的知识和经验。

通过本次实训，我深入了解了jQuery的基本概念和用法，并通过实践项目进一步熟悉了jQuery的各种功能和特性。

以下是我在实训过程中的体会和总结。

一、实训背景在这一部分，我将介绍进行jQuery实训的背景和目的。

为了更好地理解实训的目的，我选择了一个具体的项目来作为实践对象。

项目简介：项目名称：在线购物网站项目目标：通过使用jQuery来增强网站的交互和用户体验项目内容：实现购物车功能、商品分类展示、商品搜索以及用户登录验证等功能二、实训过程在这一部分，我将详细介绍在实训过程中所学到的具体内容和技术。

我将按照项目的不同功能来进行讲解。

2.1 购物车功能在这一小节中，我将分享在实训过程中学到的购物车功能的实现方法。

主要包括以下几个方面：1. 使用jQuery选择器选取和操作DOM元素，实现商品的添加、删除和数量的变化。

2. 使用本地存储(localStorage)来保存购物车中的商品信息，以便用户刷新页面后购物车中的内容不会丢失。

3. 使用事件委托来处理购物车中的动态元素（如删除按钮等）的点击事件。

2.2 商品分类展示在这一小节中，我将介绍实训过程中学到的实现商品分类展示的方法：1. 使用jQuery的ajax方法向后台发送请求，获取商品分类的数据。

2. 使用forEach方法遍历分类数据，动态生成商品分类的菜单。

3. 使用jQuery的事件绑定方法，实现商品分类的切换和相应商品的展示。

2.3 商品搜索在这一小节中，我将分享实训过程中学到的实现商品搜索功能的方法：1. 使用jQuery的事件绑定方法，监听搜索框的键盘输入事件。

2. 使用jQuery的ajax方法将用户输入的关键字发送到后台进行匹配。

3. 使用jQuery的append方法将匹配到的商品动态展示在页面上。

2.4 用户登录验证在这一小节中，我将介绍实训过程中学到的实现用户登录验证的方法：1. 使用jQuery的事件绑定方法，监听表单提交事件。

Jquery复习DAY2（jQuery属性操作jQuery⽂本属性值jQuery元素操作）5. jQuery 属性操作5.1 设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本⾝⾃带的属性，⽐如 <a> 元素⾥⾯的 href ，⽐如 <input> 元素⾥⾯的 type。

1. 获取属性语法prop(''属性'')2. 设置属性语法prop(''属性'', ''属性值'')5.2 设置或获取元素⾃定义属性值 attr()⽤户⾃⼰给元素添加的属性，我们称为⾃定义属性。

⽐如给 div 添加 index =“1”。

1. 获取属性语法attr(''属性'') // 类似原⽣ getAttribute()2. 设置属性语法attr(''属性'', ''属性值'') // 类似原⽣ setAttribute()改⽅法也可以获取 H5 ⾃定义属性5.3 数据缓存 data()data() ⽅法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。

⼀旦页⾯刷新，之前存放的数据都将被移除。

1. 附加数据语法data(''name'',''value'') // 向被选元素附加数据2. 获取数据语法date(''name'') // 向被选元素获取数据同时，还可以读取 HTML5 ⾃定义属性 data-index ，得到的是数字型6. jQuery 内容⽂本值主要针对元素的内容还有表单的值操作。

1. 普通元素内容 html()（相当于原⽣inner HTML)html() // 获取元素的内容html(''内容'') // 设置元素的内容2. 普通元素⽂本内容 text() (相当与原⽣ innerText)text() // 获取元素的⽂本内容text(''⽂本内容'') // 设置元素的⽂本内容主要针对元素的内容还有表单的值操作。

jQuery操作Table学习总结jQuery操作Table学习总结随着WEB2.0及ajax思想在互联⽹上的快速发展传播，陆续出现了⼀些优秀的Js 框架，其中⽐较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的J SVM框架等，通过将这些JS框架应⽤到我们的项⽬中能够使程序员从设计和书写繁杂的JS应⽤中解脱出来，将关注点转向功能需求⽽⾮实现细节上，从⽽提⾼项⽬的开发速度。

jQuery是继prototype之后的⼜⼀个优秀的Javascript框架。

它是由 John Resi g 于 2006 年初创建的，它有助于简化JavaScript? 以及Ajax 编程。

有⼈使⽤这样的⼀⽐喻来⽐较prototype和jQuery：prototype就像Java，⽽jQuery就像ruby. 它是⼀个简洁快速灵活的JavaScript框架，它能让你在你的⽹页上简单的操作⽂档、处理事件、实现特效并为Web页⾯添加Ajax交互。

通过这段时间学习和练习，我掌握了⼤部分jQuery操作Table的知识。

1. 常⽤的HTML元素选取$(“xxx”) 所有标签的元素$(“p#demo”) 所有id=”demo”的元素$(“p.style”) 所有class=”style”的元素$(“#demo”) 所有id=”demo”的元素$(“.style”) 所有class=”style”的元素$(“[href]”) 所有带有href属性的元素$(“[href=’#’]”) 所有带有href属性且属性值为”#”的元素$(“[href!=’#’]”) 所有带有href属性且属性值不为”#”的元素$(“[href$=’.jpg’]”) 所有带有href属性且属性值以”.jpg”结尾的元素更多元素选取⽅法请查阅jQuery选择器参考⼿册。

2. 获取元素集合中的具体项如上，通过jQuery选取得到的HTML元素都是⼀组元素的集合，要获取到其中具体的某⼀项，可以使⽤eq(index)⽅法来获得集合中索引号为index的jQuery对象，如：[javascript] view plaincopyprint?1. $(“div”).eq(1).hide(); // 隐藏当前页⾯中第2个div元素若不获取具体的元素项就调⽤相关的⽅法，则会对该集合中的所有元素都执⾏该⽅法，如：[javascript] view plaincopyprint?1. $(“#demo”).hide(); // 隐藏当前页⾯中所有id=”demo”的元素3. jQuery对象与DOM对象需要注意的是eq⽅法获得的是jQuery对象，不是DOM对象，它只能执⾏jQuery 的⽅法⽽不能调⽤DOM的⽅法。

1 引入JQuery的js文件<scrīpt type="text/javascrīpt" src="js/jquery.js"></scrīpt>2 jquery中的对象1 jquery对象只能使用jquery的方法2 dom对象只能使用dom的方法3 jquery对象引用方法$() 引用，通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象）4 、jQuery对象与dom对象的转换1 普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。

所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;5 如何获取jQuery集合的某一项$("div").eq(2).html(); //eq返回的jquery对象，调用jquery对象的方法$("div").get(2).innerHTML; //get(n)和索引返回的是dom元素对象，调用dom的方法属性6、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：$("#msg").html(); //返回id为msg的元素节点的html内容。

});
四， $复.g制et代JS码O
代码如下:
$.getJSO N("data. $("#getJ S所ON以Re调sp用o 时需要使
);
When Ajax 载入静态 页面 load( url, (dSatraing) (cMaalpl)b(a可ck (Callbac load()方 法可以轻 复制代码
代码如下:
$("#load ing").aj $(t}h)i;s).
全局事件 也 复可制以代帮码
代码如下:
$("#msg" ).before $(t}h)i.sa)j.a xSuccess $(t}h)i.sa)j.a xError(f $}()t;his).
很显然， 第 复三制个代参码
代码如下:
$.ajax({
进一步了 解 前A面JA讨X事论 的一些方 ajaxStar t(全局事 件 be)fo开re始Se n(d局部事 件 a(j全)ax局当Se事一nd 件 s(u局)cc部请es事求s 件 aj)ax请Su求cc e全ss局事件 全 e(r局局ro部的r事请 件 aj)ax仅Er当ro r
全局事件 全 c(o局局mp部的le事发te 件 aj)ax不Co管mp l全et局e事件 全 a(j全局ax局的St事请op 件 局)部当事没件 在之前的 复制代码
代码如下:
$('#ajax 这样， d复at制a.代ht码m
代码如下:
$('#ajax -
实现GET 和POST方 get( url, (dSatraing) (cMaalpl)b(a可ck (Callbac 很显然这 是一个专 复制代码
代码如下:
$.get('l ogin.pihdp

jquery判断字符串中是否包含特定字符的⽅法总结⽅法⼀：使⽤indexOf() 和lastIndexOf()⽅法案例：var Cts = "bblText";if(Cts.indexOf("Text") >= 0 ) {alert('Cts中包含Text字符串');}indexOf⽤法：返回 String 对象内第⼀次出现⼦字符串的字符位置。

strObj.indexOf(subString[, startIndex])参数strObj必选项。

String 对象或⽂字。

subString必选项。

要在 String 对象中查找的⼦字符串。

starIndex可选项。

该整数值指出在 String 对象内开始查找的索引。

如果省略，则从字符串的开始处查找。

说明indexOf ⽅法返回⼀个整数值，指出 String 对象内⼦字符串的开始位置。

如果没有找到⼦字符串，则返回 -1。

如果 startindex 是负数，则 startindex 被当作零。

如果它⽐最⼤的字符位置索引还⼤，则它被当作最⼤的可能索引。

从左向右执⾏查找。

否则，该⽅法与 lastIndexOf 相同。

注意：indexOf() ⽅法对⼤⼩写敏感！如果要检索的字符串值没有出现，则该⽅法返回 -1。

lastIndexOf() 的⽤法与indexOf()相同，只是是从右想左查找。

⽅法⼆：使⽤test() ⽅法实例：在下⾯的例⼦中，我们将检索 “W3School”：var str = "Visit W3School";var patt1 = new RegExp("W3School");var result = patt1.test(str);document.write("Result: " + result);结果输出：Result: true使⽤⽅法介绍：定义和⽤法test() ⽅法⽤于检测⼀个字符串是否匹配某个模式.语法RegExpObject.test(string)参数描述string 必需。

$("#test").after("<b>Hello</b>")
$("a").after($("#the")) 查找一个对象直接插入到指定元素的后面
3.append(html) 在指定对象内部插入html
4.appendTo(html) 在指定对象外部部插入html 与append相反
7.fadeTo(speed,opacity,function) 将匹配对象以speed速度调整到透明度为opacity(0-1)时然后执 行函数function
$(document).ready(function() {
$("#back").click(function() {
<asp:ListItem Text="1" Value="1"></asp:ListItem>
</asp:RadioButtonList>
</div>
</form>
<l>
15.alert($("#5").attr("key","value")); key,value 为指定对象设置属性和值
16.alert($("#5").removeAttr("src")); removeAttr(name) 删除指定对象的属性
三、css操作
1.alert($("#div1").css("color")); css(name) 得到指定对象css样式属性的值

jquery使用技巧总结本文来源于网站建设：/一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM 框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。

jQuery是继prototype之后的又一个优秀的Javascript框架。

它是由John Resig 于2006 年初创建的，它有助于简化JavaScript? 以及Ajax 编程。

有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：1、代码简练、语义易懂、学习快速、文档丰富。

2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。

3、jQuery支持CSS1-CSS3,以及基本的xPath。

4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。

5、可以很容易的为jQuery扩展其他功能。

6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。

7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。

J Q U E R Y知识点(总18页) -CAL-FENGHAI.-(YICAI)-Company One1-CAL-本页仅作为文档封面，使用请直接删除基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1.<img src=""alt=""width=""height=""border="0"/>2.<input type="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。

利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。

一起看看以下例子中的选择器：3.$(document).ready(function(){4.5. lick(function(){6.7. alert("You'vejustselectedanimagewhosewidthis600px");8.9. });10.11. lick(function(){12.13. alert("You'vejustselectedanimagewhosewidthisnot600px");14.15. });16.17. ocus(function(){18.19. alert("Thisinputhasanamewhichendswith'email'.");20.21. });22.23.});基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1.<img src=""alt=""width=""height=""border="0"/>2.<input type="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。

jQuery获取⽗元素及⽗节点的⽅法⼩结本⽂实例总结了jQuery获取⽗元素及⽗节点的⽅法。

分享给⼤家供⼤家参考，具体如下：jquery获取⽗元素⽅法⽐较多，⽐如parent()，parents()，closest()这些都能帮你实现查找⽗元素或节点，下⾯我们来⼀⼀讲解：先举个例⼦，<ul class="parent1"><li><a href="#" id="item1">jquery获取⽗节点</a></li><li><a href="#">jquery获取⽗元素</a></li></ul>我们的⽬的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素，有以下⼏种⽅法：1、parent([expr])取得⼀个包含着所有匹配元素的唯⼀⽗元素的元素集合。

你可以使⽤可选的表达式来筛选。

代码如下$('#item1').parent().parent('.parent1');2、:parent匹配含有⼦元素或者⽂本的元素代码如下$('li:parent');3、parents([expr])取得⼀个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。

可以通过⼀个可选的表达式进⾏筛选。

代码如下$('#items').parents('.parent1');4、closest([expr])closest会⾸先检查当前元素是否匹配，如果匹配则直接返回元素本⾝。

如果不匹配则向上查找⽗元素，⼀层⼀层往上，直到找到匹配选择器的元素。

如果什么都没找到则返回⼀个空的jQuery对象。

closest和parents的主要区别是：①前者从当前元素开始匹配寻找，后者从⽗元素开始匹配寻找；②前者逐级向上查找，直到发现匹配的元素后就停⽌了，后者⼀直向上查找直到根元素，然后把这些元素放进⼀个临时集合中，再⽤给定的选择器表达式去过滤；③前者返回0或1个元素，后者可能包含0 个，1个，或者多个元素。

1总体概述以后项目如果没有特殊情况，一般采用jQuery作为最基础的公共底层库。

另外对于前端的javascript相关的知识还是需要有所了解，可以加深对框架的理解2jQuery相关知识点介绍以下功能方面的描述都是基于jQuery1.8.02.1浏览器类型的判断早版本的jQuery提供jQuery.browser，jQuery.browser.version这两个特性来判断浏览器的类型和版本，但是从jQuery1.9开始这两个特性被移出，如果项目需要移植到高版本jQuery(1.9+)，可以使用插件jquery-migrate。

废弃的主要原因是它基于erAgent[声明了浏览器用于HTTP 请求的用户代理头的值]来判断用户的浏览器类型等信息，但是这个信息并不准确，容易被伪造欺骗。

可以使用属性jQuery.support，即浏览器支持的html或者css特性来进行相关的判断，但更加推荐使用第三方的类库Modernizr来替代jQuery.support2.2jQuery选择器主要参考资料<jQuery设计思想>所有jQuery选择器选择出来的都是jQuery对象。

2.2.1jQuery对象是什么一个jQuery对象类似一个数组，它里面包含很多dom对象，一个jQuery对象中具体包含多少dom对象依赖于你的选择器。

jQuery对象中的这些dom对象也通常称为被选择的元素或者匹配的元素。

2.2.2常见的一些jQuery选择器选择器实例选取*$("*") 所有元素#id$("#lastname") id="lastname" 的元素.class$(".intro") 所有class="intro" 的元素element$("p") 所有<p> 元素.class.class$(".intro.demo") 所有class="intro" 且class="demo" 的元素:first$("p:first") 第一个<p> 元素:last$("p:last") 最后一个<p> 元素:even$("tr:even") 所有偶数<tr> 元素:odd$("tr:odd") 所有奇数<tr> 元素:eq(index)$("ul li:eq(3)") 列表中的第四个元素（index 从0 开始）:gt(no)$("ul li:gt(3)") 列出index 大于3 的元素:lt(no)$("ul li:lt(3)") 列出index 小于3 的元素:not(selector) $("input:not(:empty)") 所有不为空的input 元素:header$(":header") 所有标题元素<h1> - <h6>:animated所有动画元素:contains(text)$(":contains('W3School')") 包含指定字符串的所有元素:empty$(":empty") 无子（元素）节点的所有元素:hidden $("p:hidden") 所有隐藏的<p> 元素:visible$("table:visible") 所有可见的表格s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素[attribute]$("[href]") 所有带有href 属性的元素[attribute=value]$("[href='#']") 所有href 属性的值等于"#" 的元素[attribute!=value]$("[href!='#']") 所有href 属性的值不等于"#" 的元素[attribute$=value]$("[href$='.jpg']") 所有href 属性的值包含以".jpg" 结尾的元素:input$(":input") 所有<input> 元素:text$(":text") 所有type="text" 的<input> 元素:password$(":password") 所有type="password" 的<input> 元素:radio$(":radio") 所有type="radio" 的<input> 元素:checkbox$(":checkbox") 所有type="checkbox" 的<input> 元素:submit$(":submit") 所有type="submit" 的<input> 元素:reset$(":reset") 所有type="reset" 的<input> 元素:button$(":button") 所有type="button" 的<input> 元素:image$(":image") 所有type="image" 的<input> 元素:file$(":file") 所有type="file" 的<input> 元素:enabled$(":enabled") 所有激活的input 元素:disabled$(":disabled") 所有禁用的input 元素:selected$(":selected") 所有被选取的input 元素:checked$(":checked") 所有被选中的input 元素2.2.3dom对象和jQuery对象之间的转换jQuery对象中获取第一个dom对象$("selector")[0] === $("selector").get(0)将dom对象转换为jQuery对象var fooDom = document.getElementById("foo");$(fooDom);2.2.4如何判断jQuery对象是否为空if ($( "#myDiv" ).length) {$("#myDiv").show();}当然有时候也并不需要判断一个jQuery对象是否为空$( "#myDiv" ).show();当有id为myDiv的元素就显示，没有的时候什么也不做，也不会出现错误2.3常见的jQuery的一些方法2.3.1工具类方法2.3.2改变结果集的方法jQuery提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为＄），然后得到被选中的元素。

选择表达式可以是CSS选择器:＄（document)//选择整个文档对象$（'#myId'）//选择ID为myId的网页元素$('div。

m yClass’)//选择class为myClass的div元素＄('input[name=first]’）//选择name属性等于first的input元素也可以是jQuery特有的表达式:＄('a：first’)//选择网页中第一个a元素$（’tr：odd’）//选择表格的奇数行＄(’#myForm ：input'）//选择表单中的input元素$（’div：visible’) //选择可见的div元素$（'div:gt（2)')//选择所有的div元素,除了前三个＄(’div:animated’)//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集：* $（'div').has（’p’）; //选择包含p元素的div元素＊$（’div'）.not('。

myClass'）；//选择class不等于myClass的div元素＊$(’div’）.filter（'.myClass'）; //选择class等于myClass的div元素＊$（’div’).first（); //选择第1个div元素＊$（’div')。

eq(5); //选择第6个div元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：$（'div’)。

前端年度工作总结前端年度工作总结1大三下学期开头自学的前端，断断续续半年多，开头找前端相关的工作；到如今，走过了毕业期的十字路口，已经工作一年了；好吧，严峻掉底子了，我是个比较懒的人。

既然起步较晚，那么就只有马不停蹄的追逐了，奔跑吧，小前端！写这个20xx的年终总结，没什么阅历之谈，只是继往开来，反省反省；连续追赶大神们的脚步，间或站在巨人的肩膀上远眺下将来！一、谅解我，Jquery：工作之前，那时什么基础都没有，只是逼于即将毕业后的压力，百度到了前端开发，就直接从原生JS开头学了；学不动了，问了下熟悉的计算机系的学长，知道了Jquery，OK，学吧。

然而我并没有太大爱好。

由于我买了本‘高三’，jquery只是对‘高三’进行了整体的封装，他把我要做的事都做了，那好吧，连续原生JS喽；不得不说那时做的最多的就是原生JS仿写各种特效；还想了个主题，弄了一堆静态页面，拼了个网站的样子作为找工作的‘作品’，后来，我知道我错了，写那些只是属于前端基础的一小部分，工作究竟是工作，Demo终难上台面，团队的协作以及开发的效率才是最重要的；如今工作以jquery为主，至于曾经写的各种效果，如今也都有对应的现成组件，拿来用就是；之前无知时忽视了的jquery，工作后开头马不停蹄的搜寻各种资源补缺了，还好原生JS没有丢，作为前端的根基，在jquery以外帮了我不少；如今，基础组件一般都是以jquery插件的形式做的，但是业余有时间我都会用原生JS实现一些，由于我不想由于jquery而渐渐忽视原生JS。

二、必需追求的模块化：前端的模块化是特别必要的，之前对模块化始终是停留在概念阶段，没有太多实践，只是感觉特殊好，究竟在追赶大神们的脚步嘛！忍不住选择了玉老师的Seajs，试着把原来写的jquery和几个组件，划分成模块，用Seajs组织到一起；由于工作中的前端结构已趋于稳定，一下子不行能整体改，所以我只是在本地新建了个名目，一有时间就考虑下，怎么以模块化的搞法从新组织下；私下里，为了证明我在工作的本地前端结构可用，还特地弄了个简洁的博客，根据自己对模块化的想法，首先以自己的博客作为试验场，来验证可行性；不管结果怎么样，不管这样做好不好，就当是一种熬炼吧；愚论拙见，只当逗大神们一笑吧！三、弱小者的强大力气——CSS：HTML、CSS作为前端开发最基础的一部分，可能在后端眼中不值一提吧，的确我也这么认为；但是，我更认为，前提是你能够把这些基础乱熟于心，并且对各种扫瞄器的兼容性了然于胸，闭着眼睛也能写出简洁明白的HTML、CSS；好吧，其实这只是我对自己的一个长期的要求；由于模块化，不只是JS，对应的少不了HTML、CSS；为了与JS的模块化遥相呼应，那么CSS的模块化是不行忽视的，只是就CSS来说，要想做到极致精简、模块化、可复用，不是想想就可以的；是的，你必需还是得要把一些规律性的东西引入CSS才行；恩，SASS是首选的CSS预编译器之一；风行于前后端的Bootstrap之前是基于Less的，后来全部开头转向Sass了；所以，无论如今对于Bootstrap娴熟度有多少，我想其对于前端样式的构建思想是特别值得学习的；以Sass作为前端样式的构建工具，来实现精简、模块化、可复用的样式，我想那不是梦，当然，一切都是需要历练和积累的；四、革命性的转折点：Nodejs不管Nodejs属于前端还是后端，我想其对于前端工作的变革性影响都是不言而喻的；在我心里，Nodejs将前端的模块化思想做到了极致，包的数量多达十几万的NPM社区足以证明其宏大之处；Nodejs内部实现了Commonjs规范，以require模块的方式调用内部模块和外部模块；所以NPM社区如此强大是必定的；由此各大类库和框架都实现了基于Nodejs的模块化实现；并且远不止这些，基于Nodejs还带来了前端的工程化；各种前端自动化工具推陈出新，不断向前端工作注入新的活力；比方：Grunt、Gulp、Browserify、Webpack 等等；不好意思，Nodejs学的还不多，若有夸大其词的地方，大神还是忽视我吧；花满楼的博客只是对Nodejs小小的探究，诸多缺乏，有待改良，望大神路过指导；五、话说，我想多了：每次信誓旦旦做的规划，都会随着时间的脚步慢慢风化；每次回顾过去，只留一声叹：时间都去哪了？呵呵，还是走好脚下的路吧，究竟做该做的事总归是好的；愿和我一样的小前端们，幻想都不是白日梦！六、遇见最好的你：Angularjs目前工作的状况并没有太大的变动，有些事还是得以团队工作为重；只是业余会多些躁动，20xx年，想学好Angularjs；一方面作为工作内的技术储备，另一方面，我的试验场还是需要多些内含的，准备首先用Angularjs改造博客的后端程序；权当熬炼吧！风靡前端的框架还有许多，大神们也是有各种论调，我想选Angularjs由于我胃口小，一口吃不下一个包子，还是细嚼慢咽的好；主要是：Angularjs 的思想很吸引我，依靠注入、指令系统等；对我来说既生疏又无限的吊胃口；无论学的怎么样，我想理解这些思想对如今的我来说唯恐才是最重要的。

jquery的api以及⽤法总结-数据操作事件数据1. .data()在匹配元素上存储任意相关数据或返回匹配的元素集合中的第⼀个元素的给定名称的数据存储的值.data(obj) ⼀个⽤于更新数据的键/值对.data()⽅法允许我们再dom元素上绑定任意类型的数据，避免了循环引⽤的内存的泄露风险从div元素存储然后找回⼀个值此例中可以将#log内存储的数据分别提取到span中<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test', {first: 16,last: 'jianmei',});//将test的first内容添加到#log上$('span:first').text($('#log').data('test').first);$('span:last').text($('#log').data('test').last);2. .removeData()在元素上移除绑定的数据.removeData([name]),要移除的存储数据名.removeData([list]),⼀个数组或者空间分隔的字符串命名要删除的数据块<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test1', {first: 16,});$('#log').data('test2', {last: 'jianmei',});$('span:first').text($('#log').data('test1').first);//移除绑定在#log上的test1数据$('#log').removeData('test2');$('span:last').text($('#log').data('test2').last);操作拷贝.clone 创建⼀个匹配的元素集合的深度拷贝副本.clone()⽅法深度复制所有匹配的元素集合，包括所有匹配元素，元素的下级元素，⽂字节点当和插⼊⽅法联合使⽤的时候，.clone()对于复制页⾯上的元素很⽅便__注意__:当使⽤clone的时候，在将它插⼊到⽂档之前，我们可以修改克隆后的元素或者元素内容复制所有的b元素然后将他们插⼊到所有的段落中<b>hello</b><p>have a good day</p>// prependTo是将元素插⼊到前⾯// $('b').clone().prependTo('p');// appendTo是将元素插⼊到后⾯,就是添加的意思$('b').clone().appendTo('p');DOM插⼊、包裹1. .wrap()在集合中匹配的每⼀个元素周围包裹⼀个html结构在所有的p外⾯包裹⼀层div，此例中会有两个div<p>have a good day</p><p>have a nice day</p>//在p外⾯包裹⼀个class为demo的div$('p').wrap("<div class = 'demo'></div>")2. wrapAll()在集合中所有匹配元素的外⾯包裹⼀个html元素，此例中只有⼀个包裹在两个p元素怒外⾯的div，div的数量只有⼀个 <p>have a good day</p><p>have a nice day</p>// 与wrap不同的是wrap是在匹配符合的每⼀个元素外⾯都要加⼀个div// ⽽wrapAll只在所有匹配的元素外⾯加⼀层div$('p').wrapAll("<div class = 'demo'></div>")3. wrapInner()在匹配元素⾥的内容外包⼀层结构选择所有的段落，包裹每⼀个匹配元素的内容注意:wrap和wrapInner都是包裹每⼀个匹配的元素但是不同的是wrap是在选择的每⼀个元素外包裹⼀层，但是wrapInner是在选择的每个元素的内容外包裹⼀层<p>have a good day</p><p>have a nice day</p>//包裹的是内容have a good day$('p').wrapInner("<div class = 'demo'></div>")DOM插⼊，内部插⼊1. append()在每个匹配元素⾥⾯的末尾处插⼊参数内容// 在div内插⼊p$('div').append($('b'));2. appendTo()将匹配的元素插⼊到⽬标元素的最后⾯<b>hello</b><div class="demo"></div>// 将p插⼊到div内$('b').appendTo($('.demo'));3. html()获取集合中第⼀个匹配元素的html内容或者设置每⼀个匹配元素的html内容<div class="demo">123</div><div class="demo">123</div><div class="demo">123</div>// 如果添加的是空的字符串,则代表清空div内的内容// $('.demo').html('');// 向div内添加内容$('.demo').html('jianmei');4.prepend()将参数内容插⼊到每个匹配元素的前⾯（元素内部）<b>hello</b><div class="demo">123</div>// 在div内插⼊b// b元素的内容会放在原本div内容的前⾯,跟append是相反的$('.demo').prepend($('b'));5. prependTo()将所有元素插⼊到⽬标前⾯（元素内）<b>hello</b><div class="demo">123</div>// 将b插⼊到div内$('b').prependTo($('.demo'));6. text()得到匹配元素集合中每个元素的⽂本内容，包括他们的后代，或者设置匹配元素集合中每⼀个元素的⽂本内容为指定的⽂本内容 <p>have a good day</p><p>have a nice day</p>// 在段落p中添加⽂本$('p').text('jianmeinew text');DOM插⼊、外部插⼊1、after()在匹配元素集合中的每个元素后⾯插⼊参数所指定的内容，作为其兄弟节点<div class="demo">123</div><div class="demo">123</div>// 在demo类之后插⼊p标签// $('.demo').after('<p>jianmei</p>')// 在demo类后插⼊所有的p$('.demo').after($('p'));2、 before和after的理论是⼀样的，根据参数的设定，在匹配的元素前⾯插⼊内容，外部插⼊// 在demo类之前插⼊p标签$('.demo').before('<p>jianmei</p>')3、 insertAfter和after是⼀样的功能，主要是插⼊内容和⽬标的位置不同，//将p插⼊到demo类之后$('p').insertAfter('.demo');4、同理可知insertBefore的原理// 将p插⼊demo类之前$('p').insertBefore('.demo');DOM移除1、 detach(),从DOM中去掉所有匹配的元素detach和remove⽅法⼀样，除了deach保存所有jquery数据和被移⾛的元素相关联当需要移⾛⼀个数据，不久⼜将该元素插⼊DOM时，常⽤此⽅法。

jquery中toggle的2种⽤法详解（推荐）⼀、在元素的click事件中绑定两个或两个以上的函数 toggle不像bind需要在后⾯添加"click"来绑定click触发事件，toggle本⾝就是click触发的（⽽且只能click触发），如下实例：<input id="btntest" type="button" value="点⼀下我" /><div>我是动态显⽰的</div><script type="text/javascript">$(function () {$("#btntest")$("#btntest").toggle(function(){$("div").html("我变了！");},function(){$("div").html("我⼜变了！");});});</script>⼆、切换元素的显⽰与隐藏效果：<input id="btntest" type="button" value="点⼀下我" /><div>我是动态显⽰的</div><script type="text/javascript">$(function () {$("#btntest").bind("click",function(){$("div").toggle(500);//此处的 500 是隐藏显⽰的延迟时间，默认为0，也可以⽤"slow","normal"或"fast"//如果⾥⾯的值为true（toggle(true)）时只能显⽰元素，值为false（toggle(false)）时只能隐藏元素。

jq命令用法总结一、jq命令简介jq是一款强大的JSON解析和生成工具，它可以让你在命令行环境下轻松处理JSON数据。

jq命令的主要特点包括：1.轻量级：jq仅依赖libjson-perl库，无需其他外部依赖。

2.可定制：jq支持自定义过滤器，可以根据需求定制输出格式。

3.语法简洁：jq的语法简单易懂，易于上手。

二、jq命令的基本用法1.过滤数据jq命令可以通过过滤器对输入的JSON数据进行筛选。

例如，筛选出JSON数组中的某个元素：```jq ".["key"]" input.json```2.映射数据jq命令支持对数据进行映射操作，可以将JSON数据中的某个属性映射到新的属性上。

例如，将JSON数组的某个元素映射为一个新的数组：```jq ".[] | map({"new_key": .["old_key"]})" input.json```3.转换数据类型jq命令可以对数据进行类型转换，例如将字符串转换为数字：```jq ".["key"] = .["key"] * 2" input.json```4.操作数组和对象jq命令支持对数组和对象进行操作，如添加、删除或修改属性。

例如，在JSON数组末尾添加一个新的元素：```jq ".[] += {"new_key": "new_value"}" input.json```二、jq命令的高级用法1.函数定义与调用jq命令支持自定义函数，可以方便地对数据进行处理。

例如，定义一个计算年龄的函数并调用：```jq "def age = ($birthday) => { return ($birthday / 365 * 10000); }; age()" input.json```2.条件语句jq命令支持条件语句，可以根据条件对数据进行处理。

jquery查找⽗元素、⼦元素（个⼈经验总结）使⽤js或者jquery查找⽗元素、⼦元素经常遇到。

可是⽤起来总容易混淆，这⾥统⼀总结了⼀下，以后⽤起来相信会⽅便好多这⾥jquery向上查找⽗元素⽤到的⽅法：closest() parents() parent()向下查找⼦元素⽤到的⽅法：find() children()js⽤的是 children[] 属性html代码复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery查找⽗元素⼦元素</title></head><body><div class="div1" id="div1" name="mydiv"><p>段落1 查找⽗元素</p><table id="table1"><tbody id="tbody1"><tr><td id="mytd1">11closest()向上查找最近的元素（返回零个或⼀个元素的 jQuery 对象）</td></tr><tr id="mytr2"><td id="mytd2">21parent()⽅法</td></tr><tr><td id="mytd3">31parent("选择器")⽅法</td></tr></tbody></table></div><hr><div id="div2" style="border-bottom :5px;" name="mydiv"><p>段落2 查找⼦元素</p><table id="table2"><tbody><tr><td id="sectd1">查找table2的td find()⽅法</td></tr><tr id="sectr2"><td id="sectd2">查找table2的td children()⽅法</td></tr><tr><td id="sectd3">js的children[]属性来查找</td></tbody><tbody><tr><td>tbody2222</td></tr></tbody></table></div></body></html>js代码：复制代码代码如下:<script type="text/javascript" src="./js/jquery-1.7.2.js"></script><script>$(function(){/************ 查找⽗元素 *************///closest()⽅法$("#mytd1").bind("click",function(){//alert($(this).html());alert($(this).closest("table").attr("id")); //table1⽽不是table0//alert($(this).closest("table").html());});//parent()⽅法$("#mytd2").bind("click",function(){//alert($(this).html()); //$(this).html()是21 (this).attr("id")是mytd2alert($(this).parent().parent().parent().attr("id"));//.parent()是tr 第⼆个.parent是tbody。