jQuery琐碎笔记 windrainpy

1、jQuery中可以实现set和get功能的方法：

 

$(”#msg”).html();    //返回id为msg的元素节点的html内容。
$(”#msg”).html(”<b>new content</b>”);
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$(”#msg”).text();    //返回id为msg的元素节点的文本内容。
$(”#msg”).text(”<b>new content</b>”);
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$(”#msg”).height();    //返回id为msg的元素的高度
$(”#msg”).height(”300″); //将id为msg的元素的高度设为300
$(”#msg”).width();    //返回id为msg的元素的宽度
$(”#msg”).width(”300″); //将id为msg的元素的宽度设为300

$(”input”).val(”); //返回表单输入框的value值
$(”input”).val(”test”); //将表单输入框的value值设为test

$(”#msg”).click(); //触发id为msg的元素的单击事件
$(”#msg”).click(fn); //为id为msg的元素单击事件添加函数

 

同样blur,focus,select,submit事件都可以有着两种调用方法。

 

2、扩展jq的功能

 

实例：

$.extend({

min: function(a, b){return a < b?a:b; },

max: function(a, b){return a > b?a:b; }

});

//为jquery扩展了min,max两个方法

 

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); //这样调用该方法

 

这里涉及到jq插件的开发知识，可以查阅相关内容插件开发http://www.jb51.net/article/23525.htm

 

3、操作元素的样式

主要包括以下几种方式：

$(”#msg”).css(”background”);    //返回元素的背景颜色
$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色
$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高
$(”#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式
$(”#msg”).addClass(”select”); //为元素增加名称为select的class
$(”#msg”).removeClass(”select”); //删除元素名称为select的class
$(”#msg”).toggleClass(”select”); //如果存在（不存在）就删除（添加）名称为select的class

 

4、jQuery中几个自定义的事件：

 

(1) hover(fn1,fn2)

(2) ready(fn)

(3) toggle(evenFn,oddFn) ：每次点击时切换要调用的函数。

(4) trigger(eventtype)  //在每一个匹配的元素上触发某类事件。如$(”p”).trigger(”click”);

 

4、几个实用特效功能：

其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。