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常用方法和函数的更多相关文章
- 一篇 jQuery 常用方法及函数的文章留存备忘。
jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID ...
- ThinkPHP第二十四天(JQuery常用方法、TP自动验证)
---恢复内容开始--- 1.JQuery常用方法 A:JS中可以用json格式数据当做数组使用,如var validate={username:false,pwd:false,pwded:false ...
- JQuery基本知识汇总;JQuery常用方法;浅入了解JQuery
一.jQuery对象与JavaScript对象 ①JavaScript入口函数比jQuery入口函数执行的晚一些: JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载: JavaSc ...
- Jquery 常用方法 及属性
Jquery 常用方法 及属性 jQuery 事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown chang ...
- jQuery常用方法(持续更新) jQuery(转)
0.常用代码: 请容许我在1之前插入一个0,我觉得我有必要把最常用的代码放在第一位,毕竟大部分时间大家都是找代码的. (1)AJAX请求 $(function() { $('#send').click ...
- javascrit原生实现jquery的append()函数
/** * javascrit原生实现jquery的append()函数 * @param parent * @param text */ function append(parent, text) ...
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
- 解读jQuery中extend函数
$.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...
- 利用Jquery的load函数实现页面的动态加载
利用Jquery的load函数实现页面的动态加载 js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...
随机推荐
- rabbitMQ第五篇:Spring集成RabbitMQ
前面几篇讲解了如何使用rabbitMq,这一篇主要讲解spring集成rabbitmq. 首先引入配置文件org.springframework.amqp,如下 <dependency> ...
- Derived Column 用法
Derived Column Component 用法是为数据流增加派生列,Derived column 有两种用法:add as new column 或 replace . 图中,增加一个 De ...
- CSS系列:CSS表格样式
1. 设置单元格的边框 border-collapse: collapse; 2. 边框的分离 对table使用CSS实现cellspacing的属性border-spacing. border-sp ...
- ExtJs布局详解
序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...
- 【WP8.1开发】RenderTargetBitmap类的特殊用途
相信,耍过WPF的人都知道RenderTargetBitmap这个玩意儿,这家伙比较有意思,它可以将用户界面上呈现的东西写入到内存的位图对象,从而开发者可以在应用程序中使用它,或者将其保存为图像文件. ...
- C#单例模式详解
C#要实现单例模式必须要有以下三点: 声明私有静态成员.私有化构造函数.静态函数返回实例. private static GameManager s_GameManager=null; private ...
- Linux分区:超过2TB硬盘分区
测试iscsi服务是否正常 [root@FocusBackup ~]# service iscsi restart 停止 iscsi: ...
- Oracle 11g安装GI后,运行roothas.pl脚本报错libcap.so.1找不到
环境:RHEL6.4 + Oracle 11.2.0.3问题:需求是文件系统迁移到ASM,在安装GI后,运行roothas.pl脚本报错 1.运行root.sh后,按提示运行roothas.pl报错 ...
- Spark计算均值
作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 用spark来快速计算分组的平均值,写法很便捷,话不多说上代码 object ColumnVal ...
- 在 .NET 中远程请求 https 内容时,发生错误:根据验证过程,远程证书无效。
当访问 https 内容的时候,有时候经常会看到证书错误(不在操作系统的证书信任链中?)的提示,在浏览器中我们可以忽略错误的证书,继续访问网页内容. 但是在 .NET 程序中,需要由代码来判断是否忽略 ...