xuxianmei-CSDN博客

原创 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 1058

原创 64、使用jQuery全局函数转换数组

使用jQuery全局函数转换数组$(function(){ var arr=$("li"); arr=$.makeArray(arr);//转换为数组 arr.reverse();//数组倒序 $("ul").html(arr);});12345

2014-07-10 16:48:33 692

原创 61、实例 jQuery管理页面中的多个库

管理页面中的多个库var $=function(){ alert("其它库别名$"); }jQuery.noConflict();// 如果希望执行jQuery库前面的$()或者其他库的名字空间中的$()函数，则只需要在导入jQuery库后的脚本中调用jQuery.noConflict()函数就可以$(document).ready(function(e) {

2014-07-10 16:42:35 626

原创 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 1033

原创 60、实例使用jQuery实现自定义动画效果

使用jQuery实现自定义动画效果//可以给一个对象添加多个动画效果，可以放到队列当中去(默认就是)，有两种方法可以不回，一个是链接语法，一个单独的添加.$(document).ready(function(e) { $(".toright").click(function(event) { $("div").animate( { left:"+=100px"

2014-07-10 16:40:07 927

原创 58、实例使用jQuery设计滑动显隐切换效果

使用jQuery设计滑动显隐切换效果$(document).ready(function(e) { $("button").click(function() { $("div").slideToggle(1000); });});;滑动效果

2014-07-10 16:39:01 574

原创 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 631 1

原创 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 604

原创 56、实例使用jQuery显隐切换

使用jQuery显隐切换$(document).ready(function(e) { $("button").click(function() { $("div").toggle(800); });});;切换DIV元素

2014-07-10 16:34:39 583

原创 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 1120

原创 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 567

原创 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 576

原创 51、实例使用jQuery管理事件之自定义事件

使用jQuery管理事件之自定义事件$(function(){ $("div").bind("mydelay",function(event)//自定义事件并绑定处理函数 { setTimeout(function()//延迟响应 { alert(event.type); },1000) }); $("div").click(function() {

2014-07-10 16:31:11 524

原创 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 590

原创 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 798

原创 47、实例使用jQuery管理事件之事件切换

使用jQuery管理事件之事件切换$(function(){ $("#btn1").toggle(//暂时测试失败，显隐成功 function() { $(this).text("第一次单击");} ,function() { $(this).text("第二次单击");} ); $("div").hover(function(event) { $("

2014-07-10 12:56:49 486

原创 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 481

原创 48、实例使用jQuery管理事件之事件委派

使用jQuery管理事件之事件委派$(function(){ //使用live绑定事件，在以后动态添加的可匹配的元素也有这个事件功能 $("button").live("click",function() { alert("aaa"); }); //测试失败没有任何反应 });点击

2014-07-10 12:55:02 785

原创 45、实例使用jQuery管理事件之注销事件

使用jQuery管理事件之注销事件$(function(){ $("p").dblclick(function() { $("p").unbind();//不加参数，则为匹配的元素的所有事件都解绑,有二个参数可选，一个是事件类型，二个是处理函数。可以同时指定，解绑由某一个事件处理函数处理的事件类型。 }); $("p").click(f); $("p").mouse

2014-07-10 12:54:54 1334

原创 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 463

原创 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 480

原创 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 448

原创 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 488

原创 40、实例使用jQuery操作DOM之操作属性

使用jQuery操作DOM之操作属性$(function(){ $("p").attr("title","title段落文本");var a=$("p").attr("title");alert(a);$("p").removeAttr("title");var b=$("p").attr("title");alert(b); });段落文本

2014-07-09 09:41:19 428

原创 39、实例使用jQuery操作DOM之复制元素

使用jQuery操作DOM之复制元素$(function(){ $("div").click( function() { var div=$("div").clone();//如果传递参数true，那么使用jQuery自定义的事件也复制 div.insertAfter("div"); } ); });段落文本

2014-07-09 09:39:54 480

原创 37、实例使用jQuery操作DOM之插入元素

使用jQuery操作DOM之插入元素$(document).ready(function(e) { $("div").append("这是一个使用append向div添加的P元素"); //等同于$("这是一个使用append添加的P元素").appendTo("div"); $("div").prepend("这是一个使用prepend向div添加的P元素");

2014-07-09 09:35:51 513

原创 38、实例使用jQuery操作DOM之删除元素

使用jQuery操作DOM之删除元素$(function(){ var p=$("p").remove(); p.insertAfter("div"); });段落文本

2014-07-09 09:35:09 558

原创 36、实例 jQuery过滤器之可见过滤器

jQuery过滤器之可见过滤器$(function(){$("p:odd").hide();$("p:odd").css("color","red");$("p:visible").css("color","blue");$("p:hidden").show(); });段落文本1段落文本2段落文本3段落文本4

2014-07-09 09:34:50 608

原创 35、实例 jQuery过滤选择器之内容过滤器

jQuery过滤选择器之内容过滤器$(document).ready(function(e) { $("li:empty").text("空内容"); $("div ul:parent").css("background-color","yellow");//匹配div包含的ul元素中包含子元素或者文本元素的ul元素 $("h2:contains(标题)").css("col

2014-07-09 09:31:32 614

原创 34、实例 jQuery过滤选择器之定位过滤器

jQuery过滤选择器之定位过滤器$(function(){ $("tr:first").css("color","red");$("tr:eq(0)").css("font-size","20px");$("tr:last").css("color","blue");$("tr:even").css("background-color","#ffd");$("tr:odd

2014-07-09 09:31:30 567

原创 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 657

原创 32、实例 jQuery选择器之基本选择器

jQuery选择器之基本选择器//基本选择器主要包括5种类型，这与CSS基本选择器类型相一致$(document).ready(function(e) { //ID选择器 var e1=document.getElementById("div1");//javascript原型方法 e1.innerHTML="内容改变"; var e2=$("#div1");//jQu

2014-07-09 09:26:34 405

原创 31、实例 jQuery框架核心构建过程

jQuery框架核心构建过程//定义jQuery类var jQuery=function(){ }//扩展类原型//所有类都有最基本的功能，如继承、派生、重写等，javascript很奇特，它为所有函数绑定一个prototype属性，由这个属性指向一个原型对象//原型对象中可以定义类的继承属性和方法，所以对于上面的空类，可以继续扩展原型jQuery.prototype=//扩展原

2014-07-09 09:25:16 658

原创 30、实例 jQuery对象与Dom对象的区别以及转换

jQuery对象与Dom对象的区别以及转换<!--DOM是文档对象模型。DOM对象是文档对象模型中的一个节点（元素）。jQuery是一个框架，里面有方法，属性jQuery对象是通过jQuery框架包装DOM对象（或者对象集合）之后产生的一个新对象，本质上说：jQuery对象仅是DOM对象的集合，因此可以把DOM对象看做是一个独立的个体，而jQuery可以是多个DOM对象组成的数据

2014-07-09 09:22:02 582

原创 28、队列

FIFO 先进先出的线性表结构。只允许在表的前面删除，只允许在表的后端插入新元素。jQuery把队列看做是element对象的数据缓存工具。队列中存储的是将要被执行的一连串的动作函数。这对于一系列需要按次序执行的函数特别有用。比如animate动画、Ajax异步请求和交互以及timeout等需要一定时间的函数。1、定义队列queue([name],callback)

2014-07-09 09:16:18 403

原创 27、缓存

数据缓存的作用：用于在一个元素上存取数据而避免了循环引用的风险（来自API帮助文档）1、定义缓存使用data(name,value)方法可以为jQuery对象定义缓存数据。这些缓存数据被存放在匹配的DOM元素集合中，同时返回缓存数据的value。如果jQuery集合指向多个元素，则将为匹配的所有元素定义缓存数据。2、获取缓存jQuery对象的data

2014-07-09 09:15:55 403

原创 29、浏览器开发

javascript在浏览器中的使用（客户端javaScript）浏览器核心对象：浏览器对象模型 (Browser Object Model,BOM )BOM由一系列相关的对象构成。其中Window对象是整个BOM的核心。所有对象和集合都以某种方式与window对象关联。一、客户端开发基础浏览器核心对象定义了6种重要的对象：1、window对象表示浏

2014-07-09 09:15:27 380

原创 25、使用jQuery操作JavaScript（字符串操作数组操作）

一、字符串操作1、修剪字符串jQuery.trim(str)去除str前后空格2、序列化字符串序列化：将数组或者对象按照名/值(name/value)对格式进行序列化。jQuery.param()函数能够将表单元素数组或者对象序列化.是.serialize()的核心方法。二、数组操作1、检测数组jQuery.isArray(a)检测a是否为数组。2、遍历

2014-07-09 09:15:10 671

原创 24、管理页面中的多个库

所谓多库共存，就是多个JavaScript技术库被引入到同一个页面后，如何确保它们不发生名字冲突。例如：jQuery定义$符号代表jQuery对象，而Prototype技术库也引用了$名字空间。如果把它们直接导入到同一个文档中，可能就会引发名字空间混乱。1、jQuery库兼容性jQuery定义了noConflict()函数工具，调用该工具函数可以把变量$的控制权交给第一次

2014-07-09 09:14:51 476

原创 26、使用jQuery操作jQuery对象

jQuery是一个类数组结构的对象，但是它不是数组，我们可以把它视为散列表结构的数据集合，更准确的说是DOM元素集合。1、遍历jQuery对象jQuery为jQuery对象定义了each()方法，实现对jQuery数据集合进行遍历，并能够以每一个匹配的元素作为上下文来执行一个函数。each(callback)处理函数(callback)有两个可选参数，第一个是索

2014-07-09 09:14:10 653