jQuery
xuxianmei
这个作者很懒,什么都没留下…
展开
-
1、jQuery基础(jQuery构造器)
首先:在jQuery库中,$表示jQuery的别名,$()等效于jQuery()1、所有的$(documnet).ready(fn);或者$(fn) jQuery(fn)中的代码都会在Dom载入之后立刻执行。按创建顺序执行。注:fn表示处理函数,一般为匿名函数。相当于windon.load();2、jQuery构造器jQuery把所有的操作都包装在一个jQuery()函原创 2014-07-06 17:20:17 · 594 阅读 · 0 评论 -
56、实例 使用jQuery显隐切换
使用jQuery显隐切换$(document).ready(function(e) { $("button").click(function() { $("div").toggle(800); });});;切换DIV元素原创 2014-07-10 16:34:39 · 608 阅读 · 0 评论 -
53、实例 jQuery设计折叠效果
jQuery设计折叠效果//总结:1、eahc默认自带两个参数,一个是下标,一个是对象本身(节点),不过是DOM对象,如果要使用jQuery的方法,需要加上 $()$(document).ready(function(e) { var t=[]; //注:一个dt 配合 一个dd 这种格式的都行,当然这里加了class,指定某一个里面的 var dt=$("dl.collap原创 2014-07-10 16:33:14 · 597 阅读 · 0 评论 -
47、实例 使用jQuery管理事件之事件切换
使用jQuery管理事件之事件切换$(function(){ $("#btn1").toggle(//暂时测试失败,显隐成功 function() { $(this).text("第一次单击");} ,function() { $(this).text("第二次单击");} ); $("div").hover(function(event) { $("原创 2014-07-10 12:56:49 · 511 阅读 · 0 评论 -
44、实例 使用jQuery管理事件之事件绑定
使用jQuery管理事件之事件绑定$(function(){ //注:event对象具有很多属性和方法可以使用,其中data只是其中的一个 $("p").bind("click",{a:"A",b:"B"},function(event) { $(this).text(event.data.a+event.data.b); }); $("p").click(functio原创 2014-07-10 12:53:54 · 483 阅读 · 0 评论 -
59、实例 使用jQuery设计渐进动态效果
使用jQuery设计渐进动态效果$(document).ready(function(e) { $("#fadeinandout").click(function() { $("div").fadeIn(2000,function() { $("div").fadeOut(2000,function() { $("div").fadeIn(500);原创 2014-07-10 16:41:07 · 1049 阅读 · 0 评论 -
58、实例 使用jQuery设计滑动显隐切换效果
使用jQuery设计滑动显隐切换效果$(document).ready(function(e) { $("button").click(function() { $("div").slideToggle(1000); });});;滑动效果原创 2014-07-10 16:39:01 · 598 阅读 · 0 评论 -
57、实例 使用jQuery设计滑动显隐效果
使用jQuery设计滑动显隐效果$(document).ready(function(e) { $("button").click(function() { $("div").slideDown(1000,function() { //alert($("div").css("display"));//显示为block $("div").slideUp("slo原创 2014-07-10 16:38:04 · 656 阅读 · 1 评论 -
52、实例 使用jQuery设计简单的显隐效果
使用jQuery设计简单的显隐效果$(document).ready(function(){ //当使用了hide之后再使用show,display值是系统默认值。 //当一开始就设置了none时,使用show是清空这个声明。 $("p").hide(2500).show(); $("div").hide().show(2000); $("span").eq(0).hide(原创 2014-07-10 16:32:24 · 607 阅读 · 0 评论 -
49、实例 使用jQuery管理事件之事件命名空间
使用jQuery管理事件之事件命名空间$(function(){ $("div").bind("click.a",function() { $("body").append("click事件"); $("div").unbind(".a"); }); $("div").bind("dbclick.a",function() { $("body").append原创 2014-07-10 13:23:20 · 824 阅读 · 0 评论 -
55、实例 使用jQuery设计Tab选项卡
使用jQuery设计Tab选项卡(暂时没有实现,因为没有相关的CSS样式)$(function(){ var uli=$(".tab ul li"); var oli=$(".tab ol li"); uli.addClass("normal"); oli.addClass("none"); })Tab1Tab2Tab3原创 2014-07-10 16:36:37 · 632 阅读 · 0 评论 -
54、实例 jQuery设计树形结构(类似多级菜单)
jQuery设计树形结构(类似多级菜单)$(document).ready(function(e) { $("li:has(ul)").click(function(event) { if(this==event.target)//如果当前li元素就是事件触发的目标对象,防止是触发父对象的事件 { if($(this).children().is(':hidden')原创 2014-07-10 16:34:08 · 1163 阅读 · 0 评论 -
33、实例 jQuery选择器之层级选择器之关系选择器
jQuery选择器之层级选择器之关系选择器//关系选择器$(document).ready(function() { $("div").css("border","solid 1px red");//控制所有div元素 $("div>div").css("margin","20px");//控制最外层div元素包含的第一个div子元素 $("div div").css("原创 2014-07-09 09:28:05 · 674 阅读 · 0 评论 -
30、实例 jQuery对象与Dom对象的区别以及转换
jQuery对象与Dom对象的区别以及转换<!--DOM是文档对象模型。DOM对象 是文档对象模型中的一个节点(元素)。jQuery是一个框架,里面有方法,属性jQuery对象是通过jQuery框架包装DOM对象(或者对象集合)之后产生的一个新对象,本质上说:jQuery对象仅是DOM对象的集合,因此可以把DOM对象看做是一个独立的个体,而jQuery可以是多个DOM对象组成的数据原创 2014-07-09 09:22:02 · 597 阅读 · 0 评论 -
61、实例 jQuery管理页面中的多个库
管理页面中的多个库var $=function(){ alert("其它库别名$"); }jQuery.noConflict();// 如果希望执行jQuery库前面的$()或者其他库的名字空间中的$()函数,则只需要在导入jQuery库后的脚本中调用jQuery.noConflict()函数就可以$(document).ready(function(e) {原创 2014-07-10 16:42:35 · 645 阅读 · 0 评论 -
63、实例 使用jQuery全局函数遍历数组和集合对象
使用jQuery全局函数遍历数组和集合对象$(function(){ var a=[ {width:400}, {height:300} ]; $.each(a,function(index,value){//对数组中的元素进行迭代 //因为这个数组中存放的是两个匿名对象元素,所以Index代码是这个对象在数组中的下标,value代表这个对象 $.each(a[i原创 2014-07-10 16:50:21 · 1079 阅读 · 0 评论 -
64、使用jQuery全局函数转换数组
使用jQuery全局函数转换数组$(function(){ var arr=$("li"); arr=$.makeArray(arr);//转换为数组 arr.reverse();//数组倒序 $("ul").html(arr);});12345原创 2014-07-10 16:48:33 · 712 阅读 · 0 评论 -
50、实例 使用jQuery管理事件之绑定多个事件
使用jQuery管理事件之绑定多个事件$(function(){ $("div").bind("click",function() { $("body").append("click事件一"); }).bind("click",function() { $("body").append("click事件二"); }); $("div").bind("mo原创 2014-07-10 16:24:50 · 618 阅读 · 0 评论 -
43、实例 使用jQuery遍历文档树
使用jQuery遍历文档树$(document).ready(function(e) { var mybody=$("body"); var li=mybody.children().eq(2).children()[0]; //var li=mybody.children().eq(2).children().eq(0); // li.text("第一项").nex原创 2014-07-10 12:51:52 · 509 阅读 · 0 评论 -
51、实例 使用jQuery管理事件之自定义事件
使用jQuery管理事件之自定义事件$(function(){ $("div").bind("mydelay",function(event)//自定义事件并绑定处理函数 { setTimeout(function()//延迟响应 { alert(event.type); },1000) }); $("div").click(function() {原创 2014-07-10 16:31:11 · 546 阅读 · 0 评论 -
45、实例 使用jQuery管理事件之注销事件
使用jQuery管理事件之注销事件$(function(){ $("p").dblclick(function() { $("p").unbind();//不加参数,则为匹配的元素的所有事件都解绑,有二个参数可选 ,一个是事件类型,二个是处理函数。可以同时指定,解绑由某一个事件处理函数处理的事件类型。 }); $("p").click(f); $("p").mouse原创 2014-07-10 12:54:54 · 1372 阅读 · 0 评论 -
42、实例 使用jQuery操作样式表
使用jQuery操作样式表.red{ color:red;}$(document).ready(function(e) { $("p").html("color="+$("p").css("color")+"font-weight:"+$("p").css("font-weight"));//可以使用对象格式为css赋值,也可以是单一赋值。 $("p").cs原创 2014-07-10 12:51:03 · 467 阅读 · 0 评论 -
60、实例 使用jQuery实现自定义动画效果
使用jQuery实现自定义动画效果//可以给一个对象添加多个动画效果,可以放到队列当中去(默认就是),有两种方法可以不回,一个是链接语法,一个单独的添加.$(document).ready(function(e) { $(".toright").click(function(event) { $("div").animate( { left:"+=100px"原创 2014-07-10 16:40:07 · 950 阅读 · 0 评论 -
46、实例 使用jQuery管理事件之事件触发
使用jQuery管理事件之事件触发$(function(){ $("p").click(f); $("p").mouseover(function() { $(this).trigger("click"); }); function f(event) { $(this).text("事件类型="+event.type); } });原创 2014-07-10 12:55:39 · 504 阅读 · 0 评论 -
48、实例 使用jQuery管理事件之事件委派
使用jQuery管理事件之事件委派$(function(){ //使用live绑定事件,在以后动态添加的可匹配的元素也有这个事件功能 $("button").live("click",function() { alert("aaa"); }); //测试失败 没有任何反应 });点击原创 2014-07-10 12:55:02 · 803 阅读 · 0 评论 -
41、实例 使用jQuery操作DOM之操作样式
使用jQuery操作DOM之操作样式.red{ color:red;}.bold{ font-weight:bold;}.italic{ font-style:italic;}.hidden{ visibility:hidden; }$(document).ready(function(){ $("button").eq(0).click(functio原创 2014-07-10 12:47:55 · 500 阅读 · 0 评论 -
22、操作CSS之使用JavaScript
第8章概述:JavaScript程序本身是无法实现特效的,它必须借助CSS技术来实现动画效果。一、CSS2脚本模型在DOM2规范中,与CSS脚本化相差的规范都包含在StyleSheets、CSS、和CSS2这3个模块中。在CSS模块中使用最频繁且复杂的3个对象:CSSStyleSheet、CSSStyleRule、CSSStyleDeclaration二、CSS原创 2014-07-09 09:10:34 · 479 阅读 · 0 评论 -
24、管理页面中的多个库
所谓多库共存,就是多个JavaScript技术库被引入到同一个页面后,如何确保它们不发生名字冲突。例如:jQuery定义$符号代表jQuery对象,而Prototype技术库也引用了$名字空间。如果把它们直接导入到同一个文档中,可能就会引发名字空间混乱。1、jQuery库兼容性jQuery定义了noConflict()函数工具,调用该工具函数可以把变量$的控制权交给第一次原创 2014-07-09 09:14:51 · 495 阅读 · 0 评论 -
8、jQuery对象
jQuery返回的是jQuery对象,jQuery对象是一个类数组对象,本质上它就是一个对象1、jQuery对象是一个数据集合,它不是一个个体对象。因此,用户无法直接使用javascript方法来操作它2、jQuery对象实际上就是一个普通的对象,因为它是通过new 运算符创建的一个新实例对象。 它可以继承原型方法或属性,同时也拥有Object类型方法和属性。3、jQuery原创 2014-07-06 17:23:24 · 439 阅读 · 0 评论 -
7、jQuery框架实现之选择和操作问题
1、如何去选择DOM元素,jQuery框架选择向CSS选择器以及XPath学习。2、对DOM元素进行操作,这些操作主要包括:属性操作、元素操作、内容操作、样式操作、事件操作、通信操作。在javascript中,使用类来归置代码段。函数也可以实现一个类。这个类是面向对象编程中的最基本概念,也是最高抽象。定义一个类相当于制作了一个模型,然后借助这个模型复制无数的实例。原创 2014-07-06 17:24:03 · 529 阅读 · 0 评论 -
13、使用jQuery操作DOM之操作元素
一、使用jQuery插入元素1、在节点内部插入元素方法 说明append() 向每个匹配的元素内部追加内容,在元素内部的最后面appendTo() 把所有匹配的元素追加到指定的元素集合中。与append相反操作prepend() 向每个匹配的元素内部前置内容prependTo()原创 2014-07-06 17:27:42 · 511 阅读 · 0 评论 -
19、使用jQuery管理事件
jQuery事件模型jQuery事件模型体现如下特征:1、统一了事件处理中的各种方法2、允许在每个元素上为每个事件类型建立多个处理程序3、采用2级事件模型中标准的事件类型名称4、统一了Event对象的传递方法,并对Event对象的常用属性和方法进行规范5、为事件管理和操作提供统一的方法。1、绑定事件:使用bind()绑定jQuery定义了bind()方法作为原创 2014-07-06 17:31:00 · 552 阅读 · 0 评论 -
12、使用jQuery操作DOM之操作节点
结点是DOM结构的基础。节点概念包含:元素、属性、文本、文档、注释,而且网页文档中所有内容都可以归为某一类结点。在实际开发中,要创建动态内容,主要操作的结点包括元素、属性、文本。一、创建元素 格式:$(html) html是HTML标记字符串,创建一个DOM对象。 比如:var a=$(""); 返回的是一个jQuery对象二、创建文本原创 2014-07-06 17:26:40 · 495 阅读 · 0 评论 -
10、选择器Sizzle工作原理
jQuery从1.3版本开始,使用了新的选择器引擎Sizzle。在使用jQuery选择器时,应该注意几个问题1、多用ID选择器。可以缩短结点访问的路程2、少直接使用Class选择器。3、多用父子关系,少用嵌套关系。4、缓存jQuery对象。原创 2014-07-06 17:24:14 · 490 阅读 · 0 评论 -
6、jQuery基础重点之jQuery类数组操作
包括:元素的定位、查找、复制和删除。另外琮可以通过迭代器和映射器扩展对类数组的操作功能。注意:类数组的操作对象是集合。1、定位元素jQuery定义了get()和index()方法用来定位元素,它们是集合操作的最基本方法,另外jQuery还定义了get(index)和eq(index)方法,读取指定位置的元素。get(index)与eq(index)方法主要区别在于get原创 2014-07-06 17:23:45 · 795 阅读 · 0 评论 -
20、jQuery页面初始化
jQuery定义了ready()方法封装了JavaScript原生的window.onload()方法。ready()方法表示当DOM载入就绪,并可以查询和被操作时,能够自动执行的函数,它是jQuery事件模型中最重要的一个函数,极大地提高了Web应用程序的响应速度1、使用ready()方法$(document).ready(function(){})或者原创 2014-07-06 17:31:31 · 432 阅读 · 0 评论 -
9、jQuery参数
jQuery的方法在大多数情况下要求传递的参数都是为对象结构的。比如 $.ajax({type:"GET",url:"test.js",dataType:"script"});使用对象直接量作为参数进行传递,方便参数管理,当方法或者函数的参数长度不固定时,使用对象直接量作为参数存在很多优势。原创 2014-07-06 17:23:50 · 405 阅读 · 0 评论 -
5、jQuery基础重点之选择器
所谓的选择器,通俗地说就是一个表示特殊语义的字符串,只要把选择器字符串传递给jQuery()构造函数,就能够选择不同的DOM对象,并且返回jQuery对象(jQuery选择器支持CSS3选择器标准)。原创 2014-07-06 17:22:55 · 472 阅读 · 0 评论 -
3、jQuery基础重点之链式语法
一直使用“.”链接函数使用时链式语法注意:1、如果在同一个jQuery对象上执行不超过三个方法,则可以在同一行内书写。如:$("input[type=‘button’]").eq(0).val("修改按钮名称").addClass("red");如果是涉及子元素的操作,应该分行写,并进行缩进。原创 2014-07-06 17:22:05 · 688 阅读 · 0 评论 -
17、使用jQuery操作DOM之操作样式表
CSS样式存在3种形式:行内样式、文档内部样式、文档外部样式1、通过CSS样式读写方法。jQuery定义了css()方法,使用该方法能够读取指定的样式,也能够为元素设置css样式。使用//可以使用对象格式为css赋值,也可以是单一赋值。 $("p").css("font-style","italic"); $("p").css(原创 2014-07-06 17:29:51 · 495 阅读 · 0 评论