JavaScript大杂烩15 - 使用JQuery(下)
<ul id="items">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 缓存jQuery对象,方便多次使用
var jObj = $('li');
// 获取jQuery对象包装的对象的个数
alert(jObj.length);
// 获取第1个DOM对象
alert(jObj[0]);
alert(jObj.get(0));
// 获取第1个jQuery对象
alert(jObj.eq(0));
// 遍历
jObj.each(function( index, element) {
$(element).prepend( '<em>' + index + ': </em>' );
});
jObj.map(function( index, element) {
$(element).prepend( '<em>' + index + ': </em>' );
});
</script>
这个例子展示了jQuery对象与遍历相关的一些方法和属性,使用起来很简单。需要注意的是map方法的用法与each方法完全一样,区别在于each方法没有返回值,只是对每一个元素执行某种操作,而map方法返回一个新的jQuery对象。
<ul id="items">
<li>Item 1</li>
</ul>
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 0. 缓存jQuery对象,方便多次使用
var jObj = $('#items');
// 1. 获取元素的内容 - HTML形式与Text形式
alert(jObj.html());
alert(jObj.text());
// 2. 更新元素的内容 - 运行一下,体会使用html方法与text方法后,页面对于字符串的编码的不同
alert(jObj.html('<li>Item 2</li>').html());
alert(jObj.text('<li>Item 2</li>').html());
// 3. 添加新的子元素 - 体会一下append与appendTo的不同、prepend与prependTo的不同
jObj.append('<li>Item 3</li>');
$('<li>Item 4</li>').appendTo(jObj);
jObj.prepend('<li>Item 5</li>');
$('<li>Item 6</li>').prependTo(jObj);
// 4. 添加兄弟元素 - 体会一下after与insertAfter的不同、before与insertBefore的不同
jObj.after('<ol id="itemsClone1"><li>Item 7</li><ol>');
$('<ol id="itemsClone2"><li>Item 8</li><ol>').insertAfter(jObj);
jObj.before('<ol id="itemsClone1"><li>Item 7</li><ol>');
$('<ol id="itemsClone2"><li>Item 8</li><ol>').insertBefore(jObj);
// 5. 处理父元素
// - wrap方法:把包装集中每个元素都包装到一个指定的元素中
// - wrapAll方法:把包装集中所有元素包装到同一个指定的元素中
// - unwrap方法:移除当前元素的父元素。
// - wrapInner方法:为当前元素的所有子元素,添加一个父元素。
$('ul').wrap('<div style="color:Red"></div>');
$('ul').wrapAll('<div style="color:Red"></div>');
$('ul').unwrap();
$('ul').wrapInner('<strong></strong>');
// 6. 复制元素 - clone方法,包括id也会复制,所以通常clone完以后需要修改一下id以保证id唯一性
jObj.after(jObj.clone());
// 7. 移除元素
// - remove方法:移除元素,包括其挂接的事件
// - detach方法:移除元素,但保留挂接的事件
// - replaceWith方法:元素替换
$('li').remove();
$('li').detach();
$('li').replaceWith('<p>Items</p>');
// 8. 获取/设置/移除属性值
// 8.1 DOM对象的属性(property,如tagName,nodeName,className等)
// - 由于jQuery对象可以很容易转换成DOM对象,所以第一种方式就是直接取得DOM对象执行操作
// 这个例子在前面讲DOM操作的时候看过了,这里不再重复。
// - 第二种方式就是在JQuery中直接设置/获取DOM对象的属性值,看下面的例子:
$('li').prop('className', 'big')
alert($('li').prop('className')); // 8.2 页面HTML元素的属性(attribute,如id,class,src等)
$('li').attr('title','tooltip...');
alert($('li').attr('title'));
// 9. 获取/设置/移除CSS
// 9.1 addClass方法,removeClass方法,toggleClass方法
// - addClass方法用于添加一个class名字
// - removeClass方法用于移除一个class名字
// - toggleClass方法用于添加/删除一个class名字(如果无就添加,如果有就移除)。
$('li').addClass('special')
$('li').removeClass('special')
$('li').toggleClass('special')
// 9.2 css方法
// - css方法用于获取/改变CSS设置。
// 获取fontSize
$('h1').css('fontSize');
// css方法的参数是css属性名。
// 需要注意,CSS属性名的CSS写法和DOM写法,两者都可以接受,比如font-size和fontSize都行。 // 设置css属性
$('li').css('padding-left', '20px')
// 或者
$('li').css({
'padding-left': '20px'
}); // 10. 自定义数据利器 - data方法
// 储存数据
$("body").data("foo", 52);
// 读取数据
alert($("body").data("foo"));
</script>
click,focus,blur,scroll,resize
keydown/keypress/keyup
mouseover/moouseout/mouseenter/mouseleave/hover
简单看个例子:
// 设置回调函数
$('li').click(function (e) {
alert($(this).text());
});
// 主动的去触发回调函数
$('li').click();
上面最后一行代码将触发click事件的回调函数。
$( document ).ready(function() {
alert('ready!');
});
// 等价写法
$(function() {
alert('ready!');
});
上面代码表示,一旦页面完成解析,就会运行ready方法指定的函数,在控制台显示“ready!”。
$('li').on('click', function (e) {
alert($(this).text());
});
on方法相当强大,使用它不仅一次可以挂接一个事件,还可以做很多事情,看下面的例子:
// 同时挂接click与mouseleave事件
$('li').on('click mouseleave', function (e) {
alert($(this).text());
});
// 给回调函数传额外的参数
$('li').on('click', {name: 'clicked'}, function (event){
alert(event.data.name);
});
// 给子元素挂事件
$('ul').on('click', 'li', function (e){
alert($(this).text());
});
这里由两点需要说明:
$('li').trigger('click');
该方法同样不触发浏览器的默认行为。
$('li').off('click');
one方法设置了事件之触发一次,执行完一次后事件回调函数就被注销了:
$('li').one('click', function (e) {
alert($(this).text());
});
one这种方式特别适合提交表单的情况,这样即使用户多次点击也不会破坏程序。
show/hide/toggle:显示/隐藏当前元素。
fadeIn/fadeOut:淡入/淡出特效。
slideDown/slideUp/slideToggle:以从上向下滑入/从下向上滑出的方式显示当前元素。
上面这些方法可以不带参数调用,也可以接受毫秒或预定义的关键字作为参数。
$('li').show();
$('li').show(300);
$('li').show('slow');
上面三行代码分别表示,以默认速度、300毫秒、较慢的速度隐藏一个元素。
jQuery.fx.speeds.fast = 50;
jQuery.fx.speeds.slow = 3000;
jQuery.fx.speeds.normal = 1000;
上面三行代码重新定义fast和slow关键字对应的毫秒数,并且自定义了normal关键字,表示动画持续时间为1000毫秒。
jQuery.fx.speeds.blazing = 30;
// 调用
$('.hidden').show('blazing');
这些方法还可以接受一个函数,作为第二个参数,表示动画结束后的回调函数。
$('p').fadeOut(300, function() {
$(this).remove();
});
上面代码表示,p元素以300毫秒的速度淡出,然后调用回调函数,将其从DOM中移除。
$('div').animate({
left: '+=50', // 增加50
opacity: 0.25,
fontSize: '12px'
},
300, // 持续事件
function() { // 回调函数
console.log('done!');
}
);
上面代码表示,animate方法的第一个参数是一个对象,表示动画结束时相关CSS属性的值,第二个参数是动画持续的毫秒数,第三个参数是动画结束时的回调函数。需要注意的是,第一个参数对象的成员名称,必须与CSS属性名称一致,如果CSS属性名称带有连字号,则需要用“驼峰拼写法”改写。
$('#foo').slideUp(300).delay(800).fadeIn(400);
上面代码表示,slideUp动画之后,暂停800毫秒,然后继续执行fadeIn动画。
$('#stop').click(function() {
$('.block').stop();
});
上面代码表示,点击按钮后,block元素的动画效果停止。
$.ajax({
type: 'POST',
url: 'some.php',
data: { name: 'John', location: 'Boston' }
}).done(function( msg ) {
alert( 'Data Saved: ' + msg );
});
这是使用了POST方式去更新数据的小例子,从这个例子中可以看出使用JQuery的ajax方法还是相当直接的,这个函数可以传入很多的设置,这些设置完成了许多不同的功能,比如跨域获取数据,是否异步等等,完整的设置可以参看官方文档:http://api.jquery.com/jQuery.ajax/#options,这里就不多说了。
// 使用http get方法向server申请一份数据
// jQuery.get( url, [data], [callback], [type] )
$.get( 'ajax/test.html', function( data ) {
$( '.result' ).html( data );
alert( 'Load was performed.' );
});
// 获取json数据的快捷方法:jQuery.getJSON( url, [data], [callback] )
// 方法相当于jQuery.get(url, [data],[callback], 'json')
// getJSON函数将get函数的type参数设置为'JSON',在回调函数中获取的数据已经是按照JSON格式解析后的对象了。
$.getJSON('Sample.aspx', { 'resultType': 'json' }, function(data, textStatus)
{
alert(data.length);
}); // 获取并执行一段脚本的快捷方法:jQuery.getScript( url, [callback] )
// 方法相当于: jQuery.get(url, null, [callback], 'script')
$.getScript('../scripts/Sample.js', function(data, textStatus)
{
alert(data);
alert(textStatus);
});
// 使用http post方法向server申请一份数据
$.post( 'ajax/test.html', function( data ) {
$( '.result' ).html( data );
});
// 使用load方法直接获取一个页面信息,然后更新当前元素
// 默认使用GET方式, 如果传递了data参数则使用Post方式
$('#divResult').load('data/AjaxGetCityInfo.aspx', { 'resultType': 'html' });
// height/width/innerHeight/innerWidth/outerHeight/outerWidth
// 上述函数取值时得到的都是以px为单位的值,设置值的时候默认单位是px,此外可以是em或者是%
$('li').height();
$('li').height(20);
// offset/position 获取当前元素相对于窗口的偏移和相对于父元素的偏移(只对可见元素有效)
$('li').offset();
$('li').position();
// scrollTOP/scrollLeft/
// 获取/设置当前元素相对滚动条顶部/左边的偏移。此方法对可见和隐藏元素均有效。
$("div.demo").scrollTop();
$("div.demo").scrollTop(300);
这里需要弄清楚的一点就是height, innerHeight, outerHeight的区别,这个可以通过下面的图来说明:
JavaScript大杂烩15 - 使用JQuery(下)的更多相关文章
- JavaScript(15)jQuery 选择器
jQuery 选择器 选择器同意对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器同意通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器同意对 ...
- JavaScript大杂烩14 - 使用JQuery(上)
JQuery意义 - Why? 为什么要使用JQuery,从我个人来说,就是这么几点:简化代码 + 统一行为 + 功能强大 + 搭配方便. 简化代码是从写代码的角度来说的,实现同样的功能,如果用Jav ...
- 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jQuery下拉友情链接美化效果代码分享
这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...
- jquery下php与ajax的互传数据(json格式)自我总结
研究了一整天的json数据与ajax的数据传输,现在进行一个小的自我总结,仅供参考 1.关于ajax的认识 $.ajax(),是jquery下包装好的一个函数:参考地址:http://www.w3sc ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- JavaScript(14)jQuery(JavaScript 库)
JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时.为了应对这些调整,很多的 JavaScript (helper) 库应运而 ...
随机推荐
- 【微服务】.netCore eShopOnContainers 部署实践《一》
官方说明文档 -------------------------------------------------------------- # eShopOnContainers - Microser ...
- python中使用for循环,while循环,一条命令打印99乘法表
用for循环打印九九乘法表: 1 2 3 4 5 6 for i in range (1,10): for j in range(1,10): print(j,"x& ...
- VS Code:让你工作效率翻倍的23个插件和23个编辑技巧
VS Code:让你工作效率翻倍的23个插件和23个编辑技巧 总结了一些平时常用且好用的 VS Code 的插件和编辑技巧分享出来. 文章详情可查阅我的博客:lishaoy.net ,欢迎大家访问. ...
- 配置redis
配置Redis 配置相关redis.conf bind 127.0.0.1 注释掉 否则其它远程计算机无 ...
- Python之unittest测试代码
前言 编写函数或者类时,还可以为其编写测试.通过测试,可确定代码面对各种输入都能够按要求的那样工作. 本次我将介绍如何使用Python模块unittest中的工具来测试代码. 测试函数 首先我们先编写 ...
- Mongoose基础
为了保存网站的用户数据和业务数据,通常需要一个**数据库**.**MongoDB**和**Node.js**特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二 ...
- salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面
上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以 ...
- Quartz.NET的简单任务管理类
昨天使用Quartz.NET做了个定时任务的功能,并实现了多个定时任务的功能 下面这个类实现了如下功能: 1.对定时任务进行管理 2.创建定时任务,需要给定时任务一个job的名称 3.判断给定的job ...
- Kafka的Log存储解析
引言 Kafka中的Message是以topic为基本单位组织的,不同的topic之间是相互独立的.每个topic又可以分成几个不同的partition(每个topic有几个partition是在创建 ...
- MyBatis从入门到放弃三:一对一关联查询
前言 简单来说在mybatis.xml中实现关联查询实在是有些麻烦,正是因为起框架本质是实现orm的半自动化. 那么mybatis实现一对一的关联查询则是使用association属性和resultM ...