jQuery常用操作方法及常用函数总结
一篇 jQuery 常用方法及函数的文章留存备忘。
jQuery 常见操作实现方式
$("标签名") //取html元素 document.getElementsByTagName("")
$("#ID") //取单个控件document.getElementById("")
$("div #ID") //取某个控件中 控件
$("#ID #ID") // 通过控件ID取其中的控件
$("标签.class样式名") //通过class来取控件
$("#ID").val(); //取value值
$("#ID").val(""); //赋值
$("#ID").hide(); //隐藏
$("#ID").show(); //显示
$("#ID").text(); //相当于取innerText
$("#ID").text(""); //相当于innerText=""
$("#ID").html(); //相当于取innerHTML
$("#ID").html(""); //相当于innerHTML=""
$("#ID").css("属性","值") //添加CSS样式
$("form#表单id").find("#所找控件id").end() //遍历表单
$("#ID").load("*.html") //载入一个文件
例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
$( "form#frmMain" ).find( "#ne" ).css( "border" , "1px solid #0f0" ).end() // end()返回表单 .find( "#chenes" ).css( "border-top" , "3px dotted #00f" ).end() $.ajax({ url: "Result.aspx" , //数据请求页面的url type: "get" , //数据传递方式(get或post) dataType: "html" , //期待数据返回的数据格式(例如 "xml", "html", "script",或 "json") data: "chen=h" , //传递数据的参数字符串,只适合get方式 timeout:3000, //设置时间延迟请求的时间 success: function (msg) //当请求成功时触发函数 { $( "#stats" ).text(msg); }, error: function (msg) //当请求失败时触发的函数 { $( "#stats" ).text(msg); } }); $(document).ready( function (){}); $( "#description" ).mouseover( function (){}); //ajax方法 $.get( "Result.aspx" , //数据请求页面的url { chen: "测试" ,age: "25" }, //传递数据的参数字符串 function (data){ alert( "Data Loaded: " + data); } //触发后的函数 ); }); }); //取得下拉选单的选取值 $( #testSelect option:selected').text(); //取文本值 或$( "#testSelect" ).find('option:selected').text(); 或$( "#testSelect" ).val(); |
------
jQuery中常用的函数方法总结
事件处理
ready(fn)
代码:
1
2
3
|
$(document).ready( function (){ // Your code here... }); |
作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
bind(type,[data],fn)
代码:
1
2
3
|
$( "p" ).bind( "click" , function (){ alert( $( this ).text() ); }); |
作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。
toggle(fn,fn)
代码:
1
2
3
4
5
6
7
8
|
$( "td" ).toggle( function () { $( this ).addClass( "selected" ); }, function () { $( this ).removeClass( "selected" ); } ); |
作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。
(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)
外观效果
addClass(class)和removeClass(class)
代码:
1
2
3
4
|
$( ".stripe tr" ).mouseover( function (){ $( this ).addClass( "over" );}).mouseout( function (){ $( this ).removeClass( "over" );}) }); |
也可以写成:
1
2
|
$( ".stripe tr" ).mouseover( function () { $( this ).addClass( "over" ) }); $( ".stripe tr" ).mouseout( function () { $( this ).removeClass( "over" ) }); |
作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码。
css(name,value)
代码:
$("p").css("color","red");
作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。
slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
代码:
1
2
|
$( "#btnShow" ).bind( "click" , function (event){ $( "#divMsg" ).show() }); $( "#btnHide" ).bind( "click" , function (evnet){ $( "#divMsg" ).hide() }); |
作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
animate(params[,duration[,easing[,callback]]])
作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。
查找筛选
map(callback)
HTML 代码:
1
2
3
4
5
6
|
<p><b>Values: </b></p> <form> <input type= "text" name= "name" value= "John" /> <input type= "text" name= "password" value= "password" /> <input type= "text" name= "url" value="http: //www.fufuok.com/> </form> |
jQuery 代码:
1
2
3
|
$( "p" ).append( $( "input" ).map( function (){ return $( this ).val(); }).get().join( ", " ) ); |
结果:
[ <p>John, password, http://www.fufuok.com/</p> ]
作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
find(expr)
HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]
作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
文档处理
attr(key,value)
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").attr("src","test.jpg");
作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。在控制HTML标记上是必备的工具。
html()/html(val)
HTML 代码:
<div><p>Hello</p></div>
jQuery 代码:
$("div").html();
结果:
<p>Hello</p>
作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。
wrap(html)
HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class="wrap"><p>Test Paragraph.</p></div>
作用:把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。
empty()
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
作用:删除匹配的元素集合中所有的子节点。
Ajax处理
load(url,[data],[callback])
url (String) : 待装入 HTML 网页网址。
data (Map) : (可选) 发送至服务器的 key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。
代码:
1
2
3
|
$( "#feeds" ).load( "feeds.aspx" , {limit: 25}, function (){ alert( "The last 25 entries in the feed have been loaded" ); }); |
作用:载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。
serialize()
HTML 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<p id= "results" ><b>Results: </b> </p> <form> <select name= "single" > <option>Single</option> <option>Single2</option> </select> <select name= "multiple" multiple= "multiple" > <option selected= "selected" >Multiple</option> <option>Multiple2</option> <option selected= "selected" >Multiple3</option> </select><br/> <input type= "checkbox" name= "check" value= "check1" /> check1 <input type= "checkbox" name= "check" value= "check2" checked= "checked" /> check2 <input type= "radio" name= "radio" value= "radio1" checked= "checked" /> radio1 <input type= "radio" name= "radio" value= "radio2" /> radio2 </form> |
jQuery 代码:
1
|
$( "#results" ).append( "<tt>" + $( "form" ).serialize() + "</tt>" ); |
作用:序列化表格内容为字符串。用于 Ajax 请求。
工具
jQuery.each(obj,callback)
代码:
1
2
3
4
5
6
|
$.each( [0,1,2], function (i, n){ alert( "Item #" + i + ": " + n ); }); //遍历数组 $.each( { name: "John" , lang: "JS" }, function (i, n){ alert( "Name: " + i + ", Value: " + n ); //遍历对象 }); |
作用:通用例遍方法,可用于例遍对象和数组。
jQuery.makeArray(obj)
HTML 代码:
1
|
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div> |
jQuery 代码:
1
|
var arr = jQuery.makeArray(document.getElementsByTagName( "div" )); |
结果:
Fourth
Third
Second
First
作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。
jQuery.trim(str)
作用:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.文档加载完成执行函数
1
2
3
|
$(document).ready( function (){ alert( "开始了" ); }); |
2.添加/删除CSS类
1
2
|
$( "#some-id" ).addClass( "NewClassName" ); $( "#some-id" ).removeClass( "ClassNameToBeRemoved" ); |
3.选择符 利用了CSS和Xpath(XML Path Language)选择符的能力,以及jQuery独有的选择符
3.1常用的:
1.根据标签名: $('p') 选择文档中的所有段落
2. 根据ID: $("#some-id")
3.类: $('.some-class')
3.2使用CSS选择符:
1
2
|
$( "#some-id > li" ) 选择特定id下的所有子li元素 $( "#some-id li:not(.horizontal)" ) 伪类选择,特定id下所有没有.horizontal 类的li元素 |
3.3使用XPath选择符:
属性选择:$("a[@title]") 选择所有带title属性的链接
$("div[ol]") 选择包含一个ol元素的所有div元素
$('a[@href^="mailto:%22]') 选择所有带href属性[@href]且该属性值以mailto开头^="mailto"(^标识字符串开始,$标识字符串结
尾,*表示字符串中任意位置)
$('a[@href$=".pdf"]') 选择带有href属性且该属性值以.pdf结尾的所有链接
$('a[@href*="mysite.com"]') 选择mysite.com出现在href任意位置(包含mysite.com)的所有链接
3.4JQuery自定义选择符(过滤器,从已选择的结果集中过滤出符合某一条件的所有元素),与CSS的伪类选择符相似,使用“:”开头
1.$('div.horizontal:eq(1)') 选择带有类horizontal的div集合中的第2个项
$('div:nth-child(1)') 选择作为其父元素第1个子元素的所有div
2.自定义选择符:odd和:even选择奇偶行
$('tr:odd').addClass('odd'); //过滤选择结果集中的奇数元素
$('tr:even').addClass('even'); //过滤选择结果集中的偶数元素
3.自定义选择符:contains()
$('td:contains("Henry")') 选择包含Henry字符串的所有表格
3.5JQuery选择函数
1.$('#some-id').parent() 选择特定元素的父元素
2.$('#some-id').next() 选择特定元素最近的下一个同级元素
3.$('#some-id').siblings() 选择特定元素的所有同级元素
4.$('#some-id').find('.some-class') 选择特定元素下所有包含特定类的元素
5.$('#some-id').find('td').not(':contains("Henry")') 选择特定元素下表格内容不包含Henry的所有元素
5.$('#some-id').find('td').not(':contains("Henry")').end() .end()表示回到最后一次.find()的元素处
3.6访问DOM元素,使用get()方法从选择后的JQuery对象中获得,去掉JQuery的包装
1
2
|
var myTag = $( '#some-id' ).get(0).tagName; var myTag = $( '#some-id' )[0].tagName; //与上面的等效 |
4.事件(都是给某一元素绑定事件)
4.1绑定事件
1
2
3
|
$( "#some-id" ).bind( "click" , function (){ }) $( "#some-id" ).unbind( "click" , bindedFunctionName); //移除已绑定的事件,前提是绑定的函数有名称(不是匿名函数) $( "#some-id" ).click( function (){ }) |
4.2复合函数绑定事件
1
2
3
4
|
$( "#some-id" ).toggle( function (){ } , function (){ }); //交替执行 $(“ #some-id”).toggleClass("hidden"); // 添加/删除类交替进行 $( "#some-id" ).hover( function (){ }, function (){ }); //鼠标进入元素时执行第一个函数,离开元素时执行第二个函数 $( "#some-id" ).one( "click" , functionName); //只需触发一次,随后便立即解除绑定 |
4.3模仿用户触发某一事件
$("#some-id").trigger("click"); //触发特定元素的click事件
5.为元素添加效果
5.1读取或设置CSS样式属性
$("#some-id").css("property") //读取样式值
$('#some-id').css('property', 'value') //设置一个样式值
$('#some-id').css({property1: 'value1', property2: 'value2'}) //设置多个样式属性
5.2改变字体大小
1
2
3
4
5
6
7
8
9
|
$(document).ready({ $( '#button-id' ).click( function (){ var currentSize = $( '#text-id' ).css( 'fontSize' ); //获取字体大小,如30px var num = parseFloat(currentSize, 10); //将值转为浮点数,.parseFloat( , )为javascript内置函数,这里是转为10进制的浮点数 var unit = currentSize.slice(-2); //获取单位名称,如px,.slice()是javascript内置函数,获取字符串指从定位置开始的子字符串,-2表示倒数两个字符 num *= 1.5; $( 'text-id' ).css( 'fontSize' , num + unit); //设置字体大小样式 }); }); |
5.3隐藏和显示
$('#some-id').show(); //无效果,会自动记录原来的display属性值(如:block, inline),再回复display值
$('#some-id').hide(); //无效果,等效于:$('#some-id').css('display', 'none'); 隐藏元素,不保留物理位置
大小、透明度逐渐变化的显示或隐藏
$('#some-id').show('slow'); //指定显示速度,在指定时间内元素的高、宽、不透明度逐渐增加到属性值,有:slow是0.6秒,normal是0.4秒,fast是0.2秒,或者直接填入毫秒数
$('#some-id').hide(800); //与.show()指定速度显示一样,指定时间内高、宽、不透明度逐渐减小到0
淡入淡出
$('some-id').fadeIn('slow'); //指定时间内不透明度属性值由0增加到1
$('some-id').fadeOut('slow'); //指定时间内不透明度值由1减小到0
5.4构建具有动画效果的show
主要调用.animate()方法,其有4个参数:包含样式属性及值的映射;可选的速度参数;可选的缓动类型;可选的回调函数;
1.并发显示多个效果
$('#some-id').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow', function(){ alert('动画显示元素');});
$('div .button').animate({left:600, height:44}, 'slow'); //水平位置从0移动到600,高度由0增加到44
2.排队显示多个效果,级联多个.animate(),一个效果显示完了再显示下一个效果
$('#some-id').animate({left:600}, 'slow').animate({height: 44}, 'slow');
6DOM操作
6.1属性操作
1
2
3
4
5
6
7
8
9
10
11
|
$( '#some-id' ).attr( 'property' ); //获取属性 $( '#some-id' ).attr( 'property' , 'value' ); //设置属性 $( '#some-id' ).attr({ 'property1' : 'value1' , 'property2' : 'value2' }); //设置多个属性 修改一个段落中所有链接,并给每个链接附上新的id号 $( 'div p .content a' ).each( function (index){ $( this ).attr({ 'rel' : 'external' , 'id' : 'link_' + index }); }); // ********* JQuery的.each()类似一个迭代器,给其传递的参数index类似一个计数器 ********* |
6.2插入新元素
1.将元素插入到其他元素前面:.insertBefore()和.before()
2.将元素插入到其他元素后面:.insertAfter()和after()
3.将元素插入到其他元素内部或后面(相当于追加一个元素):appendTo()和append()
4.将元素插入到其他元素内部或前面(相当于追加一个元素):prependTo()和prepend()
6.3包装元素,将元素包装到其他元素中 .wrap();
$('#some-id').wrap('<li></li>'); // 将某一特定元素包装到li中,即在特定元素外围添加一个包围元素
6.4复制元素 .clone()
1.$('#some-id').clone().appendTo($('body'));
2.复制深度,当传入false参数时,只复制匹配上的元素,其内部的其他元素不复制
$('#some-id').clone(false)
注意:.clone()方法不会复制元素中的事件
6.5移除匹配元素中的元素,类似清空元素
$('#some-id').empty();
6.6从DOM中移除匹配的元素及其后代元素
$('#some-id').remove();
有关常用的JQuery函数及功能小结 小编就给大家介绍到这里,希望对大家有所帮助!
jQuery常用操作方法及常用函数总结的更多相关文章
- jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)
上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- Javascript和JQuery中常用的随机数产生函数
无论在普通Js框架或者JQuery中都可以使用的,函数如下,使用方法简介: 1)获取0-100的随机数--getRandom(100); 2)获取0-999的随机数--getRandom(999); ...
- Python文件常用操作方法
Python文件常用操作方法 一.对File对象常用操作方法: file= open(file, mode='r', buffering=-1, encoding=None, errors=None, ...
- python 字符串常用操作方法
python 字符串常用操作方法 python 字符串操作常用操作,如字符串的替换.删除.截取.赋值.连接.比较.查找.分割等 1.去除空格 str.strip():删除字符串两边的指定字符,括号的写 ...
- PHP开发中常用的字符串操作函数
1,拼接字符串 拼接字符串是最常用到的字符串操作之一,在PHP中支持三种方式对字符串进行拼接操作,分别是圆点.分隔符{}操作,还有圆点等号.=来进行操作,圆点等号可以把一个比较长的字符串分解为几行进行 ...
- day2_python之数据类型常用操作方法
一.什么可变数据类型和不可变数据类型 可变数据类型:value值改变,id值不变:不可变数据类型:value值改变,id值也随之改变. 如何确定一种数据类型是可变的还是不可变的: 根据可变数据类型与不 ...
- 003_python的str切片,str常用操作方法,for循环,集合,深浅copy
基础数据类型 基础数据类型,有7种类型,存在即合理. 1.int 整数 主要是做运算的 .比如加减乘除,幂,取余 + - * / ** %... 2.bool布尔值 判断真假以及作为条件变量 3.s ...
- js数组常用操作方法小结(增加,删除,合并,分割等)
本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shi ...
随机推荐
- radar js
<!doctype html> <html> <head> <meta charset="utf-8"> <link href ...
- 每天一个linux命令:route命令
Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或 ...
- python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
实例1.取得MYSQL版本 复制代码 代码如下: # -*- coding: UTF-8 -*-#安装MYSQL DB for pythonimport MySQLdb as mdbcon = Non ...
- 改造rm命令为mv
:刚在群里面看到小伙伴误操作把服务器上重要的文件给删掉了,于是google了下,找到一篇文章把rm命令改造成mv命令,源博客如下:http://blog.csdn.net/dataspark/arti ...
- Nginx报错403 forbidden (13: Permission denied)的解决办法
由于开发需要,在本地环境中配置了LNMP环境,使用的是Centos 6.5 的yum安装,安装一切正常,但是由于默认网站文件夹比较奇葩,于是把网站文件用mv命令移动到了新的目录,并相应修改了配置文件, ...
- thinkphp传递参数
php文件输出 U() 跳转地址, echo U('Index/index',array('uid'=>1,'username'=>'wang','time'=>165465121) ...
- autofac Adding services after container has been built
http://stackoverflow.com/questions/6173566/run-time-registration-with-autofac Yes you can, using the ...
- yii2 如何用命名空间方式使用第三方类库
原文地址:http://www.yiichina.com/tutorial/395 Yii 2.0最显著的特征之一就是引入了命名空间,因此对于自定义类的引入方式也同之前有所不同.这篇文章讨论一下如何利 ...
- CSS学习点滴
1.CSS :link 选择器 a:link { background-color:yellow;text-decoration:none } 参考:http://www.w3school.com.c ...
- Java并发编程核心方法与框架-CountDownLatch的使用
Java多线程编程中经常会碰到这样一种场景:某个线程需要等待一个或多个线程操作结束(或达到某种状态)才开始执行.比如裁判员需要等待运动员准备好后才发送开始指令,运动员要等裁判员发送开始指令后才开始比赛 ...