jquery函数设计

Jquery设计文档

Author：xu_shuyi

2015-03-24 08:32:30

1.window.onload与$(document).ready()

window.onload ：必须等待网页中所有的内容加载完毕后（包括图片）才能执行，并且不能编写多个。

$(document).ready()：网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完，并且能够编写多个。

2.解决jquery库与其他库之间冲突

var $j = jQuery.noConflict();//自定义一个快捷方式

$j(function(){

$j("p").click(function(){

alert($j("p").text());

});

});

3.Jquery中的DOM操作

3.1查找节点

3.1.1查找元素节点

/**

 * 获取元素节点并打印文本内容

 * <ul>

 * <li title="apple">apple</li>

 * </ul>

 * @param {Object} "ul li:eq(1)"

 */

$(function(){

var $li_text = $("ul li:eq(0)").text();

var $li_html = $("ul li:eq(0)").html();

alert($li_text);

alert($li_html);

});

3.1.2查找属性节点

/**

 * 获取属性节点并打印文本内容

 * <p title="选择你最喜欢的水果.">选择你最喜欢的水果.</p>

 * @param {Object} "ul li:eq(1)"

 */

$(function(){

var $para_attr = $("p").attr("title");

alert($para_attr);

});

3.1.3创建节点

/**

 * 创建元素,文本,属性节点

 * <ul>

 * <li title="apple">apple</li>

 * </ul>

 * @param {Object} "<li title = ‘banana‘>banana</li>"

 */

$(function(){

var $li_1 = $("<li title = ‘banana‘>banana</li>");

var $li_2 = $("<li title = ‘aire‘>aire</li>");

$("ul").append($li_1);

$("ul").append($li_2);

});

3.1.4插入节点

3.1.5删除节点

/**

 * remove()方法

 * <ul>

 * <li title="apple">apple</li>

 * <li title="apple">apple</li>

 * </ul>

 */

$(function(){

$("ul li:eq(1)").remove();

});

/**

 * 将<li>元素中属性title不等于“banana”的<li>元素删除

 * @param {Object} "ul li"

 */

$(function(){

$("ul li").remove("li[title!=banana]");

});

/**

 * 清空元素中的内容

 * @param {Object} "ul li"

 */

$(function(){

$("ul li:eq(1)").empty();

});

3.1.6复制节点

/**

 * 复制当前单击的节点,并将其追加到<ul>元素中

 * clone(true):注意true

 * 在clone()方法中传递了一个参数true,他的含义是复制元素的同时复制元素所绑定的事件

 * @param {Object} "ul li"

 */

$(function(){

$("ul li").click(function(){

$(this).clone(true).appendTo("ul");

});

});

3.1.7替换节点

/**

 * <p title="选择你最喜欢的水果.">选择你最喜欢的水果.</p>

 * @param {Object} "p"

 */

$(function(){

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");

});

/**

 * <p title="选择你最喜欢的水果.">选择你最喜欢的水果.</p>

 * @param {Object} "p"

 */

$(function(){

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");

});

3.1.8包裹节点

/**

 * 用b标签把strong元素包裹起来

 * @param {Object} "strong"

 */

$(function(){

$("strong").wrap("<b></b>");

//将所有匹配的元素用一个元素来包裹

$("strong").wrapAll("<b></b>");

//将每一个匹配的元素的子内容（包含文本节点）用其他结构化的标价包裹起来

$("strong").wrapInner("<b></b>");

});

3.2属性操作

3.2.1获取属性,设置属性和删除属性

/**

 * 获取属性,设置属性和删除属性

 * @param {Object} "p"

 */

$(function(){

var $para = $("p").attr("title");

alert($para);

$("p").attr("title","my title");

//将一个 名/值 形式的对象设置为匹配元素的属性

// $("p").attr({"title":"my title","name":"my name"});

$("p").removeAttr("title");

});

3.3样式操作

3.3.1追加样式

/**

 * jquery提供了专门的addClass来追加样式

 * @param {Object} "input:eq(0)"

 */

$(function(){

$("input:eq(0)").click(function(){

$("p").addClass("another");

});

});

3.3.2样式切换

/**

 * 切换样式,toggle()方法此处的作用是交替执行代码 3 4 两个函数

 * 如果元素是显示的,则隐藏它；如果是隐藏的,则显示它

 * <p class="another" style="display:none" title="选择你最喜欢的水果.">选择你最喜欢的水果.</p>

 * <input name="uname" value="xushuyi"/>

 * @param {Object} "input:eq(0)"

 */

$(function(){

$("input:eq(0)").click(function(){

$("p").toggle(function(){

//显示 3

},function(){

//隐藏 4

});

});

});

/**

 * 样式的切换

 * 当点击"切换样式"按钮后,在原样式的基础上追加high样式

 * 再次点击"切换样式"按钮后,又恢复到原样式

 * @param {Object} "p"

 */

$(function(){

$("input:eq(0)").click(function(){

$("p").toggleClass("high");

});

});

3.4设置、获取HTML、文本和值

3.4.1html()方法

/**

 * 类似于javascript中的innerHTML属性

 * 用来读取或设置某个元素中的HTML内容

 * @param {Object} "p"

 */

$(function(){

var $p_html = $("p").html();

alert($p_html);

//设置P元素中的代码

$("p").html("<strong>选择你最喜欢的水果.</strong>");

});

3.4.2text()方法

/**

 * 类似于javascript中的innerText属性

 * 用来读取或设置某个元素中的HTML内容

 * @param {Object} "p"

 */

$(function(){

var $p_text = $("p").text();

alert($p_text);

//设置P元素中的文本内容

$("p").text("<strong>选择你最喜欢的水果.</strong>");

});

3.4.3val()方法

/**

 * focus()方法相当于javascript中的onfocus()方法,处理获取焦点事件

 * blur()方法相当于javascript中的onblur()方法,处理失去焦点事件

 * @param {Object} "#address"

 */

$(function(){

$("#address").focus(function(){

var $text = $(this).val();

if($text=="请输入邮箱地址!"){

$(this).val(‘‘);

}

});

$("#address").blur(function(){

var $text = $(this).val();

if($text==‘‘){

$(this).val("请输入邮箱地址!");

}

});

});

/**

 * <select id="single">

 * <option>选择1号</option>

 * <option>选择2号</option>

 * <option>选择3号</option>

 * </select>

 * <select id="multiple" multiple="multiple" style="height:120px;">

 * <option>选择1号</option>

 * <option>选择2号</option>

 * <option>选择3号</option>

 * </select>

 * @param {Object} "#single"

 */

$(function(){

$("#single").val("选择2号");

$("#multiple").val(["选择1号","选择3号"]);

});

3.4事件的绑定

/**

 * 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,可以使用bind()方法

 * 来对匹配元素进行特定事件的绑定

 * unbind()方法,为删除绑定事件：

 * $("input:eq(0)").unbind("click",fun);

 * $("input:eq(0)").bind("click");

 * @param {Object} "input:eq(0)"

 */

$(function(){

$("input:eq(0)").bind("click",fun);

});

function fun(){

alert("我是绑定事件!");

}

/**

 * 体现bind()方法的用法

 * <div id="panel">

<h5 class="head">什么事jquery？</h5>

<div class="content" style="display:none">

jquery是继Prototype之后又一个优秀的javascript库。

</div>

</div>

 * @param {Object} "#panel h5.head"

 */

$(function(){

$("#panel h5.head").bind("click",function(){

$(this).next("div.content").show();

});

});

3.5合成事件

3.5.1hover()光标悬停

/**

 * hover()方法的用法：hover(enter,leave)

 * 用来模拟光标悬停事件,当光标移动到元素上时,会触发指定的第一个函数

 * 当光标移除这个元素时,会触发第二个函数

 * <div id="panel">

<h5 class="head">什么事jquery？</h5>

<div class="content" style="display:none">

jquery是继Prototype之后又一个优秀的javascript库。

</div>

</div>

 * @param {Object} "#panel h5.head"

 */

$(function(){

$("#panel h5.head").hover(function(){

$(this).next("div.content").show();

},function(){

    $(this).next("div.content").hide();

});

});

3.5.2mouse()光标滑过

/**

 * 当光标滑过“标题”链接时,相应内容被显示

 * 当光标滑出“标题”链接后,相应内容被隐藏

 * <div id="panel">

<h5 class="head">什么事jquery？</h5>

<div class="content" style="display:none">

jquery是继Prototype之后又一个优秀的javascript库。

</div>

</div>

 * @param {Object} "#panel h5.head"

 */

$(function(){

$("#panel h5.head").mouseover(function(){

$(this).next("div.content").show();

});

$("#panel h5.head").mouseout(function(){

    $(this).next("div.content").hide();

});

});

3.6绑定事件