1. jQuery核心函数 1.1 jQuery([selector,[context]]) jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素...("body"); //动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中 1.3 jQuery(callback) 允许你绑定一个在 DOM 文档载入完成后执行的函数。...· 函数的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的 $() 操作符都包装到其中来。...2 // 文档就绪 3}); 2. jQuery对象 在 JQuery 库中,可以通过本身自带的方法获取页面 DOM 元素的对象叫做 JQuery 对象。对象用 var 开头定义。...3}); 3.4 jQuery.map(arr|obj,callback) 将一个数组中的元素转换到另一个数组中。 · array: 待转换数组。
是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。 1.2.5....jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象...jQuery 对象本质是: 利用$对DOM对象包装后产生的对象(伪数组形式存储)。...>惊喜不,意外不div> div>惊喜不,意外不div> div>惊喜不,意外不div> div>惊喜不,意外不div> 相同的操作 jQuery为我们提供另一个方法,可以停止动画排队:stop()。 1.5.1.
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法。个人认为在www.21kaiyun.com的紫微斗数星座在线排盘开发中会比较常用的,仅供大家学习和参考。...代码: 作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。...作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。...div> 作用:把所有匹配的元素用其他元素的结构化标记包裹起来。 这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。...小结:在实际的开发中我们可能会发现21世纪开运网用到其他的方法和属性,以上只是个人认为新手初学jQuery时,必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。
从这个版本开始,jQuery的性能达到了Prototype、Mootools以及 Dojo等同类JavaScript库的水平。...jQuery UI中包含大量预定义好的部件( widget),以及一组用于构建高级元素(例如可拖放的界面元素)的工具。...该对象拥有大量预定义的有用方法,能够作用于该组元素。 用编程的话来说,这种构造称为包装器(wrapper),因为它用扩展功能来对匹配的元素进行包装。...我们使用术语jQuery包装器或者包装集(wrapped set),来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。...语法:$(".className") 本例通过类名来获取元素,因为使用同一个类样式的元素可能有多个,所以通过类名来获取元素返回的将是一个数组对象,即jQuery中的包装集,然后对此包装集中的元素进行相关操作
/ 不过目前处于不更新的状态,不推荐使用内部的插件,因为很可能没有作者维护了。...即全局jQuery对象 对象 jQuery对象有jQuery函数返回的对象,一个jQuery对象表示一组文档元素,即jQuery集,包装集,jQuery结果 选中元素 传递css选择器给jQuery函数时...div $(document.body).append('div id="linklist">List of Linksdiv>'); // 将文档中的所有链接复制并插入该新div...a").after(''); 包装元素 // 用元素包装所有的元素 $('h1').wrap(document.createElement('i')); // 产生...div里 $('body > p:first').wrap('div class="first">div>'); // 将所有的其他段落包装在另一个div里
(本文年代久远,请谨慎阅读)今天学习了JQuery的一些基本用法,包括JQuery选择器和JQuery包装集; 从现在开始,要慎重区分DOM对象和JQuery对象,两种对象的方法不同,属性不同,在使用中要特别注意...而在JQUERY中则完全不同,JQUERY提供了异常强大的选择器用来帮助我们获取页面上的对象,并且将对象以JQUERY包装集的形式返回。 "$"符号在JQUERY中代表对JQUERY框架集的引用。...,不包括select中的option) $("select option:selected")匹配所有选中的option元素 注意 DOM转JQUERY包装集:$(arrDiv[i]).html(‘div...’+i);//arrDivp[i]是DOM对象,直接用$()转为JQuery对象后调用html方法; JQUERY包装集转DOM对象 通过索引访问到的JQUERY包装集中的单个元素是DOM对象 通过包装集的某些遍历函数...[i].innerHTML = 'div' + i;//通过索引访问到的元素不是JQuery对象,而是DOM对象} JQuery包装集 在此介绍一些基本的JQuery包装集及使用 ready()方法
1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。...是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。...1.2.5. jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是...jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。...jQuery为我们提供另一个方法,可以停止动画排队:stop() ; 1.5.1.
props:用于附加到新创建元素上的属性、事件和方法 返回值:返回新创建标签的jQuery包装对象 // jq的 appendTo,类似DOM的appendTo方法 $("div>Hello的jQuery包装对象。...这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。...fn: 生成包裹结构的一个函数,返回包裹结构html 返回值:jQuery包装对象 实例 // 把所有的段落用一个新创建的div包裹起来 $("p").wrap("div class...这于 .wrap()是不同的,.wrap()为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。
install jquery 2.入口函数介绍 2.1window.onload事件的问题 在之前DOM课 中咱们已经说过用window的onload事件作为JS代码的入口,时机并不好。...而且对于页面中的iframe等子页面也做了兼容处理。直接用如下的方法进行使用: // 第一种方式: 给document绑定ready事件。...var $div = $('#id'); // $div 不是dom对象是jQuery的包装对象。...这里简单说一点: jQuery包装对象本身是一个伪数组,选择器返回的所有的DOM元素都会存在jQuery的包装对象中,并且还有很多其他的jQuery特有的api。...oddTrs.css('backgroundColor', '#aaa'); // jQuery:如果包装对象里面元素是多个时候,做设置操作会影响包装对象中的所有dom对象。
DOM课 中咱们已经说过用window的onload事件作为JS代码的入口,时机并不好。...而且对于页面中的iframe等子页面也做了兼容处理。直接用如下的方法进行使用: // 第一种方式: 给document绑定ready事件。...var $div = $('#id'); // $div 不是dom对象是jQuery的包装对象。...这里简单说一点: jQuery包装对象本身是一个伪数组,选择器返回的所有的DOM元素都会存在jQuery的包装对象中,并且还有很多其他的jQuery特有的api。...oddTrs.css('backgroundColor', '#aaa'); // jQuery:如果包装对象里面元素是多个时候,做设置操作会影响包装对象中的所有dom对象。
课程目标 掌握jQuery常用API的使用 了解jQuery的设计思想 jQuery基本介绍 为什么要学jQuery 【01-让div显示与设置内容.html】 使用JS操作DOM的时候,会遇到以下的一些缺点...1.12.4) 2.x版本:不兼容IE678浏览器(最终版本2.2.4) //jQuery目前正在更新的版本 3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容...3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组)) jQuery对象与DOM对象的区别: 1. DOM对象与jQuery对象的方法不能混用。 2....【练习:隔行变色案例.html】 【练习:开关灯案例】 选择器 什么是jQuery选择器 jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。...区分jQuery与Javascript JavaScript是一门编程语言,jQuery仅仅是用JavaScript实现的一个JavaScript库,目的是简化我们的开发。
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。...方法 语法 :jQuery.map(arr|obj,callback) 返回值: Array新数组 概述 将一个数组中的元素转换到另一个数组中。...(继承) 语法:jQuery.extend([deep], target, object1, [objectN]) 概述 用一个或多个其他对象来扩展一个对象,返回被扩展的对象。...如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。...(str) 去掉字符串起始和结尾的空格 3.链式编程和隐式迭代 3.1 链式编程 由于大部分jQuery的api方法内部返回值都是jQuery的包装对象自身。
也是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。...,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象。...jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。... // 用原生 JS 获取来的对象就是 DOM 对象 var div = document.querySelector('div'); console.dir...console.dir($('div')); //利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。...方法 语法 :jQuery.map(arr|obj,callback) 返回值: Array新数组 概述 将一个数组中的元素转换到另一个数组中。...继承) 语法:jQuery.extend([deep], target, object1, [objectN]) 概述 用一个或多个其他对象来扩展一个对象,返回被扩展的对象。...如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。...(str) 去掉字符串起始和结尾的空格 3.链式编程和隐式迭代 3.1 链式编程 由于大部分jQuery的api方法内部返回值都是jQuery的包装对象自身。
3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本 2....4. jQuery中的顶级对象$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。...是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。...5. jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是...jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
1.4. jQuery中的顶级对象$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。...是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。 1.5. ...jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的,总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery...jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。...= $('div')[0] // 2.2 jQuery对象.get(索引值) var domObject2 = $('div').get(0) 总结:实际开发比较常用的是把DOM对象转换为jQuery
处理DOM插入操作时,将需要的内容包装在一个元素中 嗯,不要问我为什么要这样做(我相信一个有相当经验的程序员会给你解释)。 在上面的例子中我们使用.html()将1000个item项插入到UL中。...如果在插入操作之前我们将这些项包装在UL标签中,然后把完整的UL插入到另一个DIV标签中,那么我们实际上仅仅插入一个标签而不是1000个,这看起来要更高效些。...这是很棒的特性,然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。...jQuery擅长基于classes进行元素的操作,因此如果你需要存储元素的状态信息,为什么不试试使用额外的class来存储它呢? 这里有一个例子。我们想创建一个展开的菜单。...其他常用的函数包括得到下拉框中的选择项。用传统的JavaScript方法,你就必须使用getElementById得到元素,然后通过遍历它的子元素找出被选中的元素。
easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear".可以可以进行扩展,比如参考文章:地址 返回值: jQuery包装对象。...这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。 参数跟show保持一致,不再赘述。...淡入、淡出效果 由于淡入淡出的方法跟slide系列的方法保持一致。不赘述。...自定义动画 jQuery封装了对css中数值属性的动画效果的封装,可以让开发人员对数值类的属性进行自定义的动画。...语法 animate(params,[speed],[easing],[fn]) 参数 params:一组包含作为动画属性和终值的样式属性和及其值的集合 speed:三种预定速度之一的字符串("slow
-选择器/创建一个标签 //$('#one'); //$('div>啦啦,我是一个divdiv>'); //4.3 如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象...jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合(伪数组) DOM对象与jQuery对象的方法不能混用。...jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。...交集选择器 $(“div.redClass”); 获取class为redClass的div元素 总结:跟css的选择器用法一模一样。
领取专属 10元无门槛券
手把手带您无忧上云