JQuery常用的函数和属性[1]

  • 作者:不详
  • 来源:56gee
  • 更新时间:2012-04-06 12:54:36
  • 点击:362
[0分]
Attribute(属性):
$("p").addClass(css中定义的样式类型); //给某个元素添加样式
$("img").attr({src:"test.jpg",title:"test Image"}); //给某个元素添加属性/值,参数是map
$("input").attr({"checked", "checked"});
$("img").attr("title", function() { return this.src }); //给某个元素添加属性/值
$("元素名称").html(); //获得该元素内的内容(元素,文本等)
$("元素名称").html("<b>new stuff</b>"); //给某元素设置内容
$("元素名称").removeAttr("属性名称") //给某元素删除指定的属性以及该属性的值
$("元素名称").removeClass("class") //给某元素删除指定的样式
$("元素名称").text(); //获得该元素的文本
$("元素名称").text(value); //设置该元素的文本值为value
$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$("input元素名称").val(); //获取input元素的值
$("input元素名称").val(value); //设置input元素的值为value

Manipulation(操作):
$("元素名称").after(content); 在匹配元素后面添加内容
$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面
$("元素名称").appendTo(content); 在content后接元素
$("元素名称").before(content); 与after方法相反
$("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
$("元素名称").empty() 将该元素的内容设置为空
$("元素名称").insertAfter(content); 将该元素插入到content之后
$("元素名称").insertBefore(content); 将该元素插入到content之前
$("元素").prepend(content); 将content作为该元素的一部分,放到该元素的最前面
$("元素").prependTo(content); 将该元素作为content的一部分,放content的最前面
$("元素").remove(); 删除所有的指定元素
$("元素").remove("exp"); 删除所有含有exp的元素
$("元素").wrap("html"); 用html来包围该元素
$("元素").wrap(element); 用element来包围该元素

Traversing(遍历):
add(expr)当前匹配元素集合增加新的匹配元素集合’expr’,形成新的匹配元素集合;
例子:
$(document).ready(function(){  
    $("div").css("border", "2px solid red")
                 .add("p")//文档中的P元素会应用背景色为yellow的CSS样式;
                 .css("background", "yellow");  
   });
children(expr)从当前匹配元素集合中得到各个元素第一层子集集合,形成新的元素集合
contains(str) 匹配集合中包含str这个变量文本的元素集合,返回匹配元素集合
end()用于返回到调用 find() 或 parents() 函数(或者其它遍历函数)之前的 jQuery 对象
例子
$("#div1").find("p").hide().end().hide()
第一个hide()是对于p标签的 然后用end()结束对p标签的引用而返回到#div1标签
所以第二个hide()是对于#div1起作用的
如果不加end() 则两个hide()都是对p标签起作用

filter(expression)
find(expr)
filter和find的区别:
filter将在一组已经选取的元素里面选择;
find将在一组已经选取的元素的子节点里面选择;
<html代码>
<div class="css">
       <p class="rain">测试1</p>
</div>
<div class="rain">
       <p>测试2</p>
</div>
</html>
如果我们使用find()方法:
var $find =   $("div").find(".rain");
alert( $find.html() ) ;
将会输出:测试1
如果使用filter()方法:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
将会输出:测试2
区别在于:
find()会在div元素内寻找class为rain 的元素;而filter()则是筛选div的class为rain的元素。一个是对它的子集操作,一个是对自身集合元素筛选。

is(expr)//判断现有集合是否属于’expr’集合中的一部分或是相等。如果是则返回true,否则返回false
next(expr)//取得一个包含匹配的元素集合中每一个元素紧邻的后面兄弟元素集合。
not(el)//匹配集合中没有满足过滤要求的元素集合

例子:
$("div").not(".green, #blueone")  
$("input:not(:checked) + span")
$(’tr:not([th]):odd’)

parent(expr)取得一个包含着所有匹配元素的唯一父元素的元素集合
parents(expr)//得到匹配元素集合中各个元素的所有祖先元素集合
prev(expr)得到匹配元素集合中各个元素紧邻的前一个兄弟元素集合
siblings(expr)得到所有匹配元素集合中各个元素的所有兄弟元素集合

Core(核心):
$(html).appendTo("body") 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(function(){……..}); 执行一个函数
$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p,添加样式
$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object) 为扩展jQuery类本身.为类添加新的方法。

举例
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
引用jQuery:
$.min(3,4); //return 3
jQuery.fn.extend(object)给jQuery对象添加方法,是对jQuery.prototype进得扩展

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//.... 
   //......
};

举例
$.fn.extend({       
   alertWhileClick:function(){     
       $(this).click(function(){     
            alert($(this).val());    
        });    
     }    
});
引用jQuery:
$("#input1").alertWhileClick();

jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例:1
$("span").click(function){
$("li").each(function(){
$(this).toggleClass("example");
});
});
举例:2
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});

jQuery Event(事件):
ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行。
例子:
$(document).ready(function(){alert("aa");}

bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件type属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error
例子1:
$(’#myBtn’).bind("click",function(){   
alert(’click’);
});
例子2:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
type(String) : 事件类型。
data(Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象。
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数。

trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
$("p").click( function (event, a, b) {
   // 一个普通的点击事件时,a和b是undefined类型
   // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]); toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);
例子:

$("p").bind("myEvent", function (event, message1, message2) {
   alert(message1 + ’ ’ + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。
$("p").unbind() 移除所有段落上的所有绑定的事件
$("p").unbind( "click" ) 移除所有段落上的click事件
例子:
var foo = function () {
   // 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发函数foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo

hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
);
元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件描述,支持元素或对象
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
   if($("#in").val()==’关键字’){
   $("#in").val("")};
}).blur(function(){
   if($("#in").val()==’’){
   $("#in").val("关键字").css("color","#ccc")};
});
change( ) 用户改变域的内容 input, textarea, select
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
$("input[type=’text’]").change( function() {
   // 这里可以写些验证代码
});
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华