您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • jQuery+HTML5仿iPhoneQQ首页效果

    jQuery+HTML5仿iPhoneQQ首页效果

    jQuery+HTML5仿iPhoneQQ首页效果
    jQuery+HTML5仿iPhoneQQ首页效果
    一款基于jQuery实现的仿QQiPhone首页效果,采用HTML5,适合手机APP展示。
    适用浏览器:IE8+、FireFox、Chrome、Safari、Opera。
    引入js代码

    // JavaScript Document $(document).ready(function(){ $("nav ul").after('<img class="navHover" src="images/p1_scroll_btn.png" />'); $("nav li").each(function(i){ $(this).mouseover(function(){ $(".navHover").animate({'left':i*109 +'px'},300); $(".scrollImages img").animate({'left':i*-233+'px'},300); }) }) })

    下载地址
    预览地址

  • jQuery 教程十一 jQuery noConflict()

    jQuery 教程十一 jQuery noConflict()

    jQuery 教程十一 jQuery noConflict()

    如何在页面上同时使用 jQuery 和其他框架?
    jQuery 和其他 JavaScript 框架
    正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写。
    如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办?
    其他一些 JavaScript 框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
    其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行。
    jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法。
    jQuery noConflict() 方法
    noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

    当然,您仍然可以通过全名替代简写的方式来使用 jQuery:

    $.noConflict();jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行!"); });});

    实例
    您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:

    var jq = $.noConflict();jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在运行!"); });});

    实例
    如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用

    "jQuery":$.noConflict();jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在运行!"); });});
  • jQuery 教程十 AJAX 函数

    jQuery 教程十 AJAX 函数

    日子真的飞快,又到一年的圣诞节了,马上要元旦,然后过年了。项目不断,bug连连,需求不明,苦比死了咱们搞WEB前端开发们。哎,来一个领导,换个版本,换个思路,回顾2012工作整一个纠结了得。
    什么是 AJAX
    AJAX = Asynchronous JavaScript and XML.
    AJAX 是一种创建快速动态网页的技术。
    AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。

    AJAX 和 jQuery
    jQuery 提供了用于 AJAX 开发的丰富函数(方法)库。
    通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
    而且您可以直接把远程数据载入网页的被选 HTML 元素中!
    写的更少,做的更多
    jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:

    $(selector).load(url,data,callback)

    请使用 selector 来定义要改变的 HTML 元素,使用 url 参数来指定数据的 web 地址。
    亲自试一试
    只有当您希望向服务器发送数据时,才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时,您才需要使用 callback 参数。
    Low Level AJAX
    $.ajax(options) 是低层级 AJAX 函数的语法。
    $.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。
    option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
    jQuery AJAX 请求
    请求 描述

    $(selector).load(url,data,callback) 把远程数据加载到被选的元素中$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据$.getScript(url,callback) 加载并执行远程的 JavaScript 文件(url) 被加载的数据的 URL(地址)(data) 发送到服务器的数据的键/值对象(callback) 当数据被加载时,所执行的函数(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)(options) 完整 AJAX 请求的所有键/值对选项
  • jQuery 教程九 CSS 函数

    jQuery 教程九 CSS 函数

    jQuery CSS 操作
    jQuery 拥有三种用于 CSS 操作的重要函数:

    $(selector).css(name,value)$(selector).css({properties})$(selector).css(name)

    CSS 操作实例
    函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值:
    实例

    $(selector).css(name,value)$("p").css("background-color","red");

    函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值:
    实例

    $(selector).css({properties})$("p").css({"background-color":"red","font-size":"200%"});

    函数 css(name) 返回指定的 CSS 属性的值:
    实例

    $(selector).css(name)$(this).css("background-color");

    jQuery Size 操作
    jQuery 拥有两种用于尺寸操作的重要函数:

    $(selector).height(value)$(selector).width(value)

    Size 操作实例
    函数 height(value) 设置所有匹配元素的高度:
    实例
    <

    $(selector).height(value)$("#id100").height("200px");

    函数 width(value) 设置所有匹配元素的宽度:
    实例

    $(selector).width(value)$("#id200").width("300px");
  • jQuery 教程八 HTML 操作

    jQuery 教程八 HTML 操作

    jQuery 包含很多供改变和操作 HTML 的强大函数。
    改变 HTML 内容
    语法
    $(selector).html(content)

    html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。

    $("p").html("jqueryba");

    添加 HTML 内容
    语法
    $(selector).append(content)
    append() 函数向所匹配的 HTML 元素内部追加内容。
    语法
    $(selector).prepend(content)
    prepend() 函数向所匹配的 HTML 元素内部预置(Prepend)内容。
    实例
    $("p").append(" 前端开发");
    亲自试一试
    语法
    $(selector).after(content)
    after() 函数在所有匹配的元素之后插入 HTML 内容。
    语法
    $(selector).before(content)
    before() 函数在所有匹配的元素之前插入 HTML 内容。
    实例
    $("p").after("web前端开发.");

    亲自试一试
    jQuery HTML 操作 - 来自本页
    函数 描述
    $(selector).html(content) 改变被选元素的(内部)HTML
    $(selector).append(content) 向被选元素的(内部)HTML 追加内容
    $(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
    $(selector).after(content) 在被选元素之后添加 HTML
    $(selector).before(content) 在被选元素之前添加 HTML

  • jQuery 教程七 jQuery Callback 函数

    jQuery 教程七 jQuery Callback 函数

    Callback 函数在当前动画 100% 完成之后执行。
    jQuery 动画的问题
    许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
    例子:

    $("p").hide("slow")

    speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
    实例

    $("button").click(function(){$("p").hide(1000);});

    由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
    为了避免这个情况,您可以以参数的形式添加 Callback 函数。
    jQuery Callback 函数
    当动画 100% 完成后,即调用 Callback 函数。
    典型的语法:

    $(selector).hide(speed,callback)

    callback 参数是一个在 hide 操作完成后被执行的函数。
    错误(没有 callback)

    $("p").hide(1000);alert("The paragraph is now hidden");

    正确(有 callback)

    $("p").hide(1000,function(){alert("The paragraph is now hidden");});

    结论:如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。

  • jQuery 教程六 效果

    jQuery 教程六 效果

    jQuery 可以创建隐藏显示切换滑动以及自定义动画等效果,为我们WEB前端开发实现很多简单快速方便的效果。
    jQuery 隐藏和显示
    通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
    实例

    $("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});

    亲自试一试

    hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
    语法:
    $(selector).hide(speed,callback)
    $(selector).show(speed,callback)
    speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
    callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
    实例

    $("button").click(function(){$("p").hide(1000);});

    亲自试一试
    jQuery 切换
    jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
    隐藏显示的元素,显示隐藏的元素。
    语法:
    $(selector).toggle(speed,callback)
    speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
    实例

    $("button").click(function(){$("p").toggle();});

    亲自试一试
    callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
    jQuery 滑动函数 - slideDown, slideUp, slideToggle
    jQuery 拥有以下滑动函数:
    $(selector).slideDown(speed,callback)
    $(selector).slideUp(speed,callback)
    $(selector).slideToggle(speed,callback)
    speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
    callback 参数是在该函数完成之后被执行的函数名称。
    slideDown() 实例

    $(".flip").click(function(){$(".panel").slideDown();});

    亲自试一试
    slideUp() 实例

    $(".flip").click(function(){$(".panel").slideUp()})

    亲自试一试
    slideToggle() 实例

    $(".flip").click(function(){$(".panel").slideToggle();});

    亲自试一试
    jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
    jQuery 拥有以下 fade 函数:
    $(selector).fadeIn(speed,callback)
    $(selector).fadeOut(speed,callback)
    $(selector).fadeTo(speed,opacity,callback)
    speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
    fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
    callback 参数是在该函数完成之后被执行的函数名称。
    fadeTo() 实例

    $("button").click(function(){$("div").fadeTo("slow",0.25);});

    亲自试一试
    fadeOut() 实例

    $("button").click(function(){$("div").fadeOut(4000);});

    亲自试一试
    jQuery 自定义动画
    jQuery 函数创建自定义动画的语法:
    $(selector).animate({params},[duration],[easing],[callback])
    关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性:
    animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
    第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
    实例 1

    <script type="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},"slow");$("#box").animate({width:300},"slow");$("#box").animate({height:100},"slow");$("#box").animate({width:100},"slow");});});</script> 

    亲自试一试
    实例 2

    亲自试一试
    HTML 元素默认是静态定位,且无法移动。
    如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。
    jQuery 效果
    函数 描述
    $(selector).hide() 隐藏被选元素
    $(selector).show() 显示被选元素
    $(selector).toggle() 切换(在隐藏与显示之间)被选元素
    $(selector).slideDown() 向下滑动(显示)被选元素
    $(selector).slideUp() 向上滑动(隐藏)被选元素
    $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
    $(selector).fadeIn() 淡入被选元素
    $(selector).fadeOut() 淡出被选元素
    $(selector).fadeTo() 把被选元素淡出为给定的不透明度
    $(selector).animate() 对被选元素执行自定义动画

  • jQuery 教程五 事件

    jQuery 教程五 事件

    jQuery 是为事件处理特别设计的。
    jQuery 事件函数
    jQuery 事件处理方法是 jQuery 中的核心函数。
    事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
    通常会把 jQuery 代码放到 部分的事件处理方法中:
    实例

    <html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script></head><body><h2>jQuery 教程五 事件</h2><p>jQuery博客</p><p>前端开发</p><button>CSS</button></body></html>

    亲自试一试
    在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
    $("button").click(function() {..some code... } )
    该方法隐藏所有

    元素:
    $("p").hide();
    单独文件中的函数
    如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。
    当我们在教程中演示 jQuery 时,会将函数直接添加到 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):
    实例

    <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript" src="my_jquery_functions.js"></script></head>

    jQuery 名称冲突
    jQuery 使用 $ 符号作为 jQuery 的简介方式。
    某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
    jQuery 使用名为 noConflict() 的方法来解决该问题。
    var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
    亲自试一试
    结论
    由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
    把所有 jQuery 代码置于事件处理函数中
    把所有事件处理函数置于文档就绪事件处理器中
    把 jQuery 代码置于单独的 .js 文件中
    如果存在名称冲突,则重命名 jQuery 库
    jQuery 事件
    下面是 jQuery 中事件方法的一些例子:
    Event 函数 绑定函数至
    $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
    $(selector).click(function) 触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

  • jQuery 教程四 选择器

    jQuery 教程四 选择器

    jQuery 教程四jQuery 选择器
    jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
    选择器允许您对 HTML 元素组或单个元素进行操作。
    在 HTML DOM 术语中:
    选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

    jQuery 元素选择器
    jQuery 使用 CSS 选择器来选取 HTML 元素。
    $("p") 选取

    元素。
    $("p.intro") 选取所有 class="intro" 的

    元素。
    $("p#demo") 选取 id="demo" 的第一个

    元素。

    jQuery 属性选择器
    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    $("[href]") 选取所有带有 href 属性的元素。
    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

    jQuery CSS 选择器
    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
    下面的例子把所有 p 元素的背景颜色更改为红色:

    实例

    $("p").css("background-color","red");
  • jQuery 教程三(语法实例)

    jQuery 教程三(语法实例)

    jQuery 教程三下面简单讲述个语法与调用吧,下面有实例,运行下,基本上没什么问题,多动手哦。
    jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
    基础语法是:$(selector).action()
    美元符号定义 jQuery
    选择符(selector)“查询”和“查找” HTML 元素
    jQuery 的 action() 执行对元素的操作
    示例
    $(this).hide() - 隐藏当前元素

    <html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $(this).hide();});});</script></head><body><button type="button">jQuery 教程</button></body></html>

    $("p").hide() - 隐藏所有段落

    <html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p id="test">This is another paragraph.</p><button type="button">欢迎来到jQuery吧</button></body></html>

    $("p.test").hide() - 隐藏所有 class="test" 的段落

    <html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">前端开发</button></body></html> 

    $("#test").hide() - 隐藏所有 id="test" 的元素

    <html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function() { $(".test").hide(); });});</script></head><body><h2 class="test">This is a heading</h2><p class="test">This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!