jQuery常用方法和函数

2022-11-20 17:11:37

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

码农公寓