jQuery 核心函数以及jQuery对象
- 格式:doc
- 大小:28.50 KB
- 文档页数:2
jquery】常⽤的jquery获取表单对象的属性与值1【jquery】常⽤的jquery获取表单对象的属性与值234 1、JQuery的概念56789 JQuery是⼀个JavaScript的类库,这个类库集合了很多功能⽅法,利⽤类库你可以⽤⼀些简单的代码实现⼀些复杂的JS效果。
101112 2、JQuery实现了代码的分离1314不⽤再⽹页中加⼊如:onclick之类的事件来调⽤函数了,直接引⼊JQuery类库和⾃⼰编写的JQuery代码就可以了;15如:16 $(function(){17 $("Element").click{function(){18 alert("点击我哦!");19 }20 }21 });22上⾯的代码中只要定义了Element 这个元素后⾯的click是动作2324 alert("点击我哦!");这个是要执⾏的代码,当然你可以有很多的操作在这个函数中;25这⾥⾯的$这个号代表JQuery的意思,就是引⽤类库。
2627 3、JQuery的核⼼的⼀些⽅法28 each(callback) '就像循环29 $("Element").length; ‘元素的个数,是个属性30 $("Element").size(); ’也是元素的个数,不过带括号是个⽅法31 $("Element").get(); ‘某个元素在页⾯中的集合,以数组的形式存储32 $("Element").get(index); ’功能和上⾯的相同,index表⽰第⼏个元素,数组的下标33 $("Element").get().reverse(); ‘把得到的数组⽅向34 ("Element1").index(("Element1").index(("Element2")); ’元素2在元素1中的索引值是。
jquery用法jQuery是一种广泛应用于网页开发的JavaScript库,它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。
下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素,如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。
以下是一些常见的选择器:•('#element'):选择具有特定ID的元素•('.class'):选择具有特定类的元素•('input[type=“text”]'):选择特定类型的表单元素•('div:first'):选择第一个div•('ul li').eq(2):选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。
以下是一些常见的事件处理函数:•click():单击元素时触发•dblclick():双击元素时触发•mouseenter():鼠标移入元素时触发•mouseleave():鼠标移出元素时触发•keydown():按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作,可以改变和获取元素的属性,例如:•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值,与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果,可以使网页更加动态。
以下是一些常见的动画效果:•fadeIn():淡入元素,即从不可见到可见•fadeOut():淡出元素,即从可见到不可见•slideDown():向下展开元素•slideUp():向上收缩元素•animate():通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法,可以在不刷新网页的情况下从服务器获取数据。
菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库,它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作,为前端开发者提供了非常方便的编程工具。
本篇文章将为大家简单介绍jQuery的语法和用法,包括选择器、事件、动画和AJAX交互等常用功能。
1. jQuery选择器选择器是jQuery的核心功能之一,它允许我们通过CSS样式来获取文档中的HTML元素。
以下是一些常见选择器:- 元素选择器$('p'):获取所有的p元素$('#header'):获取id为header的元素$('.nav'):获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似,但是它的处理方式更为方便和高效。
以下是一些常用的事件处理方法:- click():点击事件$('button').click(function(){//执行操作});- hover():鼠标悬停事件jQuery提供了一些强大的动画效果,比如淡入淡出、滑动等。
以下是一些常用的动画效果:- fadeIn():淡入效果$('div').fadeIn();- slideUp():上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互,比如发送请求、接收数据等。
以下是一些常用的AJAX方法:- $.ajax():发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍,包括选择器、事件、动画和AJAX交互等常用功能。
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内容。
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库的新特性:jquery是一个javascript的函数库,它包含以下特性:html元素选取、html元素操作、css操作、html事件函数、javascript特效和动画、html dom遍历和修改、ajax、utilites 向页面中添加jquery库。
Jquery库位于一个javascript文件中,其中包含了所有的jquery 函数,可以通过以下标记把jquery添加到页面中:注意:<script>标签应该位于页面的<head>部分Jquery的实例:hide()函数,隐藏了html中所有的<p>标签效果:页面会出现三段字和一个按钮,当点击按钮时,<p>标签里边的字将自动隐藏库的代替:Google和Microsoft对jquery的支持都很好。
如果不从自己的计算机上加载jquery库,可以从Google和Microsoft加载CDNjquery的核心文件使用Google的CDN:使用Microsoft的CDN:Jquery语法通过jQuery,您可以选取(查询,query)HTML 元素,并对它们执行“操作”(actions)。
Jquery语法实例$(this).hide(); 演示jquery hide()函数,隐藏当前的html元素$(“#this”).hide(); 演示jquery hide()函数,隐藏id为test的元素$(“p”).hide(); 演示jquery hide()函数,隐藏所有p标签元素$(“.this”).hide(); 演示jquery hide()函数,隐藏class为test的元素Jquery语法基础语法是$(selector).action();美元符号定义jquery,选择符(selector)查询和查找html元素,jquery的action()执行对元素的操作例如:$(“p”),hide(); 隐藏所有段落$(“p.test”).hide(); 隐藏所有class为test的段落等提示:jQuery使用的语法是XPath与CSS 选择器语法的组合。
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测试题1下面哪种不是jquery的选择器?(单选)A、基本选择器B、后代选择器C、类选择器D、进一步选择器考点:jquery的选择器(C)2当DOM加载完成后要执行的函数,下面哪个是正确的?(单选) jQuery(expressi on Jeon text])B、j Query(html,[ownerDocument])C、j Query(callback)D、j Query(elements)考占.jquery的核心函数(C)3下面哪一个是用来追加到指定元素的末尾的?(单选)A、i nsertAfter()B、a ppend()C、a ppendTo()D、a fter()考占.属性一样. jquery 的核心函数(C)4下面哪一个不是jquery 对象访问的方法?(单选)A^ each(callback)B 、size()C^ index(subject)D 、index()考占.jquery 的核心函数之对象访问(D)5. jquery 访问对象中的size()方法的返回值和jQuery 对象的 考占.jquery 的核心函数之对象访问(length)6. jquery 中$(this).get(0)的写法和 ____ 是等价的。
考占.jquery 的核心函数之对象访问($(this)[0])7 •有这样一个表单元素,想要找到这个hidden 元素,下面哪个是正确的?(单选)A 、 visibleB 、 h iddenC 、 v isible))D 、hidden()考占•jquery的选择器(B)8•如果需要匹配包含文本的元素,用下面哪种来实现?(单选)A、t ext()B、c ontains()C、i nput()D、attr(name)考占・jquery的选择器(B)9•现有一个表格,如果想要匹配所有行数为偶数的,用—实现,奇数的用—实现。
考占・jquery 的选择器(even,odd)10•“如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素?(单选)A、t ext()B、g et()C、e q()D、contents ()考占•jquery的选择器(C)11・”在一个表单里,想要找到指定元素的第一个元素用__ 实现,那么第二个元素用____ 实现。
一、选择网页元素jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作”.这是它区别于其他函数库的根本特点。
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。
选择表达式可以是CSS选择器:$(document)//选择整个文档对象$(’#myId’)//选择ID为myId的网页元素$(’div。
myClass')//选择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’)。
jQuery 教程Next PagejQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
每一章中用到的实例<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>TIY通过点击 "TIY" 按钮来看看它是如何运行的。
您将学到什么在本教程中,您将通过文字以及许多在线实例,学到如何通过使用 jQuery 网页应用 JavaScript 效果。
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。
基本上,您将学习到如何选取 HTML 元素,以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
您需要具备的基础知识在您开始学习 jQuery 之前,您应该对以下知识有基本的了解:∙HTML∙CSS∙JavaScript如果您需要首先学习这些科目,请在我们的首页查找这些教程。
jQuery 实例通过实例来学习!在 W3School,您将找到很多能够编辑并测试的 jQuery 实例。
jQuery 实例jQuery 参考手册在 W3School,您将找到包含所有 jQuery 对象和函数的完整参考手册。
jquery的使用方法jQuery作为一种常用的JavaScript库,其强大的功能和简化代码的方便性让其成为前端开发者中的首选。
以下是在项目中常见的jQuery使用方法的分步骤阐述:1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库,通常我们是从官网下载一个jquery-x.x.x.js文件,在引用时需要写正确的路径。
2. jQuery对象的创建要使用jQuery对象,首先需要用jQuery构造函数来创建一个jQuery对象。
这可以使用两种方式创建:1)通过$或jQuery函数创建:例如:$("选择器")或者jQuery("选择器");2)通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。
3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器,也支持自定义选择器。
与CSS选择器类似,jQuery选择器是用于选择HTML元素的字符串。
例如:选择id为“content”的元素:$("#content");选择class为“box”的元素:$(".box");选择label元素中“for”属性值为“id”的元素:$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件,例如:$(selector).bind(event,function)绑定事件。
事件可以是click、dblclick、mouseenter等等,函数可以是已定义的函数名,也可以是匿名函数。
5. 样式的操作通过jQuery对象的css()方法设置样式。
例如:$(selector).css('color','#fff')设置字体颜色为白色,$(selector).addClass('className')增加类名为'className'的样式。
jQuery开发技术笔记HTML DOM 加载步骤1、解析 HTML 结构2、加载外部脚本和样式表⽂件3、解析并执⾏脚本代码4、构造 HTML DOM 模型5、加载图⽚等外部⽂件6、页⾯加载⼀、总体架构1.1:jQuery 的核⼼特征:兼容主流浏览器:⽀持 IE 6.0+、Chrome、Firefox 3.6+、Safari 5.0+、Opera等。
具有的特的链式语法和短⼩清晰的多功能接⼝。
具有⾼效灵活的 CSS 选择器,并且可对 CSS 选择器进⾏扩展。
拥有便捷的插件扩展机制和丰富的插件。
1.2:总体架构jQuery 的模块可以分为 3 个部分:⼊⼝模块、底层模块、功能模块。
在底层⽀持模块中,回调函数列表模块⽤于增强对回调函数的管理,⽀持添加、移除、触发、锁定、禁⽤回调函数等功能;异步队列模块⽤于解耦异步任务和回调函数,它在回调函数刘表的基础上为回调函数增加了状态,并提供了多个回调函数列表,⽀持传播任意同步或异步回调函数的成功或失败状态;数据缓存模块⽤于为 DOM 元素和 JavaScript 对象附加任意类型的数据;队列模块⽤于管理⼀组函数,⽀持函数的⼊队和出队操作,并确保函数按顺序执⾏,它基于数据缓存模块实现。
在功能模块中,事件系统提供了统⼀的时间绑定、响应、⼿动触发和移除机制,它并没有将事件直接绑定到 DOM 元素上,⽽是基于数据缓存模块来管理事件;ajax 模块允许从服务器上加载数据,⽽不⽤刷新页⾯,它基于异步队列模块来管理和触发回调函数;动画模块⽤于向⽹页中添加动画效果,它基于队列模块来管理和执⾏动画函数;属性操作模块⽤于对 HTML 属性和 DOM 属性惊醒读取、设置和移除操作;DOM 遍历模块⽤于在 DOM 树中遍历⽗元素、⼦元素和兄弟元素;DOM 操作模块⽤于插⼊、移除、复制和替换 DOM元素;样式操作模块⽤于获取计算样式或设置内联样式;坐标模块⽤于读取或设置 DOM 元素的⽂档坐标;尺⼨模块⽤于获取 DOM 元素的⾼度和宽度。
浅谈JQUREY(摘自/softwave/article/details/2070815)JQUERY手册(第七页,附教程)Jquery是继prototype之后又一个优秀的Javascript框架。
对prototype我使用不多,简单了解过。
但使用上jquery 之后,马上被她的优雅吸引住了。
有人使用这样的一比喻来比较prototype和jquery:prototype就像Java,而jquery 就像ruby.实际上我比较喜欢java(少接触Ruby罢了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自已唯一的框架类包。
使用其间也有一点点心得,其实这些心得,在jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。
一,找到你了!还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。
没错,jquery也跟风了。
为达到document.getElementById()的目的,jquery是这样写的:Java代码1.var someElement = $("#myId");[java]view plaincopyprint?1.var someElement = $("#myId");看起来比其他两个框架的要多了一个#,好,看看下面的用法:Java代码1.$("div p");(1)2.$("div.container")(2)3.$("div #msg");(3)4.$("table a",context);(4)[java]view plaincopyprint?1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4)在prototype里看过这样的写法吗?第一行代码得到所有<div>标签下的<p>元素。
一、Jquery测试题1下面哪种不是jquery的选择器(单选)A、基本选择器B、后代选择器C、类选择器D、进一步选择器考点:jquery的选择器 (C)2当DOM加载完成后要执行的函数,下面哪个是正确的(单选)jQuery(expression, [context]) B、jQuery(html, [ownerDocument]) C、jQuery(callback) D、jQuery(elements)考点:jquery的核心函数 (C)3下面哪一个是用来追加到指定元素的末尾的(单选)A、insertAfter()B、append()C、appendTo()D、after()考点:jquery的核心函数 (C)4下面哪一个不是jquery对象访问的方法(单选)A、each(callback)B、size()C、index(subject)D、index()考点: jquery的核心函数之对象访问(D)5.jquery访问对象中的size()方法的返回值和jQuery对象的_______属性一样.考点:jquery的核心函数之对象访问(length)中$(this).get(0)的写法和__________是等价的。
考点:jquery的核心函数之对象访问($(this)[0])7. 有这样一个表单元素,想要找到这个hidden元素,下面哪个是正确的(单选)A、visibleB、hiddenC、visible()D、hidden()考点:jquery的选择器(B)8.如果需要匹配包含文本的元素,用下面哪种来实现(单选)A、text()B、contains()C、input()D、attr(name)考点:jquery的选择器(B)9.现有一个表格,如果想要匹配所有行数为偶数的,用________实现,奇数的用_______实现。
考点:jquery的选择器(even,odd)10.如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素(单选)A、text()B、get()C、eq()D、contents()考点:jquery的选择器(C)11.在一个表单里,想要找到指定元素的第一个元素用_________实现,那么第二个元素用_________实现。
jQuery的$.each循环的对象1.最简单的对象//最简单的对象o = {'name':"哈哈",'age' : 30,'level':"2b",'sex' : '男'};$.each(o, function(key, value){console.log(key, value);});输出结果2.最基本的数组2.1//最基本的数组var a = [3,4,5,6,7];$.each(a, function(key, value){console.log(key, value);});输出结果:2.2 each处理⼆维数组var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]$.each(arr2, function (i, item) {console.log("i_:"+i);console.log("item_:"+item);});arr2为⼀个⼆维数组,item相当于取这⼆维数组中的每⼀个数组。
item[0]相对于取每⼀个⼀维数组⾥的第⼀个值alert(i)将输出为0,1,2,因为这⼆维数组含有3个数组元素alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']输出结果:对此⼆位数组的处理稍作变更之后var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]$.each(arr, function(i, item){$.each(item,function(j,val){alert(j);alert(val);});});alert(j)将输出为0,1,2,0,1,2,0,1,2alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc3.⼜像数组,⼜像对象(晕晕的,$.each不循环)1. var arr = [];2. arr['name'] = "helios";3. arr['version'] = 'trunk';4. console.log(arr, typeof arr);5. console.dir(arr);6. $.each(arr, function(key, item){7. console.log(key, item, item[key]);8. });9.10. console.log( Object.prototype.toString.call(arr) );11. console.log( arr.constructor , arr.constructor === Array);12. console.log(arr && typeof(arr) === "object" && arr.constructor === Array); console.log(arr);输出结果:console.dir(arr);输出结果:$.each(arr, function (key, item) { console.log(key, item, item[key]);});没有输出结果4.两个对象var a1 = [], b1 = {};console.log(typeof a1, typeof b1);输出结果5.json 对象处理var s = [{'name': "哈哈",'age': 30,'level': "2b",'sex': '男'}, {'name': "嘿嘿",'age': 30,'level': "3b",'sex': '男'}];$.each(s, function (index, item) {console.log(index, item, );});输出结果:6.部分应⽤$("img").each(function(){var a = $(this).attr("src");});//遍历后存放到数组中。
jQuery -JQ方法大全-jQueryJQuery:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值$("元素名称").html(); 获得该元素内的内容(元素,文本等)$("元素名称").html("new stuff"); 给某元素设置内容$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值$("元素名称").removeClass("class") 给某元素删除指定的样式$("元素名称").text(); 获得该元素的文本$("元素名称").text(value); 设置该元素的文本值为value$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值$("input元素名称").val(value); 设置input元素的值为valueManipulation:$("元素名称").after(content); 在匹配元素后面添加内容$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面$("元素名称").appendTo(content); 在content后接元素$("元素名称").before(content); 与after方法相反$("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)$("元素名称").empty() 将该元素的内容设置为空$("元素名称").insertAfter(content); 将该元素插入到content之后$("元素名称").insertBefore(content); 将该元素插入到content之前$("元素").prepend(content); 将content作为该元素的一部分,放到该元素的最前面$("元素").prependTo(content); 将该元素作为content的一部分,放content的最前面$("元素").remove(); 删除所有的指定元素$("元素").remove("exp"); 删除所有含有exp的元素$("元素").wrap("html"); 用html来包围该元素$("元素").wrap(element); 用element来包围该元素Traversing:add(expr)add(html)add(elements)children(expr)contains(str)end()filter(expression)filter(filter)find(expr)is(expr)next(expr)not(el)not(expr)not(elems)parent(expr)parents(expr)prev(expr)siblings(expr)Core:$(html).appendTo("body") 相当于在body中写了一段html代码$(elems) 获得DOM上的某个元素$(function(){……..}); 执行一个函数$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p,添加样式$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮$.extend(prop) prop是一个jQuery对象,举例:jQuery.extend({min: function(a, b) { return a b ? a : b; }});jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。
一、jQuery 核心函数
首先介绍jQuery 的几个核心函数,在jQuery 中它们起着至关重要的作用,在实际的前端开发过程中用到最多的也是它们。
1、jQuery(elements)
将一个或多个DOM元素转化为jQuery对象。
这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。
返回值:jQuery 对象
参数
elements:用于封装成jQuery 对象的DOM 元素
复制代码代码如下:
// 将当前页面的背景色设为黑色
jQuery(document.body).css( "background-color", "black" );
再看以下代码
// 将当前页面的背景色设为黑色
$(document.body).css( "background-color", "black" );
代码也可以正常运行,并且执行的效果跟前面的代码一致;那么这儿的$ 和前面的jQuery 标识符到底有什么关系呢?
打开jQuery 的源文件jquery-1.3.2.js 发现以下代码
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
原来$ 与jQuery 代表的是jQuery 框架中同一个function,使用jQuery 和$ 的效果是一样的;实际上jQuery 框架中采用$ 来作为jQuery 方法的一个别名(更易于使用),由于担心$ 与其它javascript 框架(比如 ajax)甚至个人代码中的$ 标识符产生冲突,也可以通过jQuery.noConflict() 函数来移除$ 与jQuery 函数的关联,这样$ 就不代表jQuery 方法了,而是代表那个原始的$ 对象了。
2、jQuery(expression,[context])
这个函数接收一个包含CSS 选择器的字符串,然后用这个字符串去匹配一组元素。
jQuery 的核心功能都是通过这个函数实现的。
jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。
这个函数最基本的用法就是向它传递一个表达式(通常由CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。
返回值:jQuery 对象
参数
expression:用来查找DOM 元素的字符串
context:(可选) 作为待查找的DOM 元素集、文档或jQuery 对象,用于限定查找范围
复制代码代码如下:
// 查找所有DIV 元素下的A 元素
$("div > a");
3、jQuery(html)
根据HTML 字符串,动态创建由jQuery 对象包装的DOM 元素。
返回值:jQuery 对象
参数
html:用于创建DOM 元素的HTML 字符串
复制代码代码如下:
// 将一个 的超链接元素加到页面主体元素中
$("<a href=/></a>").appendTo("body");
二、jQuery 对象
jQuery 核心函数的返回值都是一个jQuery 对象,通过对jQuery 对象进行操作,可以完成javascript 编程中的大部分任务;那么这个jQuery 对象到底是一个什么对象呢?
通过doc[0]、doc[1] 可以分别取出一个DOM 对象,其它的则是一些jQuery 对象特有的属性和方法;实际上jQuery 对象包装了DOM 对象,同时还包含了一些操作DOM 元素的jQuery 方法。
在使用jQuery 的过程中,大部分情况下第一步工作同时也是最重要的一步工作,就是取得包装了要操作DOM 对象的jQuery 对象;然后通过调用取得的jQuery 对象的方法来完成对DOM 对象的操作。
详细出处参考:/article/22688.htm。