jQuery常用方法和函数

jQuery 事件

bind() 方法:被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数

$(selector).bind({event:function, event:function, ...})

$("button").bind("click",function(){  $("p").slideToggle();  });

focus([[data],fn]) 元素获得焦点时,触发 focus 事件

$("input[type=text]").focus(function(){  this.blur();   });//无法使用文本档

hover([over,]out) :一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

$("td").hover( function () {  $(this).addClass("hover");  },                 
function () { $(this).removeClass("hover"); } );

blur([[data],fn]):失去焦点

$("p").blur( function () { alert("Hello World!"); } );

jQuery 动画效果

slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。

$(selector).slideToggle(speed,callback)  speed 可选规定元素从隐藏到可见的速度(或者相反)。默认为 "normal" 毫秒 (比如 1500) "slow"  "normal"  "fast"

$(".btn1").click(function(){    $("p").slideToggle();    }); 

jQuery 基础函数

prop()函数用于设置或返回当前jQuery/ prop()操作针对的是元素(Element对象)对象所匹配的元素的属性值

如果需要删除DOM元素的属性,请使用removeProp()函数。

jQueryObject.prop( propertyName [, value ] )

jQueryObject.prop( object )// 以对象形式同时设置任意多个属性值。对象obj的每个属性对应propertyName,属性的值对应value

指定了value参数,则表示设置属性propertyName的值为value;如果没有指定value参数,则表示返回属性propertyName的值。参数value还可以是函数,prop()将根据匹配的所有元素遍历执行该函数,函数中的this指针将指向对应的DOM元素。

<div id="n1">
<p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
<input id="n3" name="order_id" type="checkbox" value="1">
<input id="n4" name="order_id" type="checkbox" checked="checked" value="2"></div> var $n2 = $("#n2");
// prop()操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()设置的属性也是针对元素(Element对象),因此也可以通过元素本身直接访问
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以对象形式同时设置多个属性,属性值可以是对象、数组等任意类型
$n2.prop( { prop_b: "baike", prop_c: 18,
site: { name: "CodePlayer", url: "http://www.365mini.com/" } } );
document.writeln( $n2[0].prop_c ); //
document.writeln( $n2[0].site.url ); // http://www.365mini.com/
// 反选所有的复选框(没选中的改为选中,选中的改为取消选中)
$("input:checkbox").prop("checked", function(index, oldValue){
return !oldValue; });

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素

$(selector).replaceWith(content)   $(selector).replaceWith(function())

提示:replaceWith() 与 replaceAll() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceAll() 无法使用函数进行替换

$(".btn1").click(function(){  $("p").replaceWith("<b>Hello world!</b>");    });

clone() 方法生成被选元素的副本,包含子节点、文本和属性。

$(selector).clone(includeEvents)

$("button").click(function(){  $("body").append($("p").clone());  });

jQuery  插件

Textfile插件 内容填充

<script src="jquery.min.js"></script>

<script src="jquery.textfill.min.js"></script>

<div id="my-element" style="width:100px; height:50px;">

    <span>My awesome text!</span>

</div>

<script>

$('#my-element').textfill({     ...options...});

</script>

例子:返回值success  fail

$(function() {    $('#my-element').textfill({        success: function() {            console.log("yay!")        },        fail: function() {            alert("boo hoo!")        }    });});

$(function() {    $('#my-element').textfill({        maxFontPixels: 36    });});

右键菜单contextMenu

jQuery常用方法和函数

上一篇:编写高质量代码改善C#程序的157个建议[IEnumerable和IQueryable、LINQ避免迭代、LINQ替代迭代]


下一篇:我应该跟libuv说声对不起,我错怪了libuv(转)