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内容。

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 必需。

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个，或者多个元素。