没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
jQuery 常用经典技巧大放送
、关于页面元素的引用
通过 的引用元素包括通过 、、元素名以及元素的层级关系及 或者
条件等方法,且返回的对象为 对象(集合对象),不能直接调用 定义
的方法。
、 对象与 对象的转换
只有 对象才能使用 定义的方法。注意 对象和 对象是有区别
的,调用方法时要注意操作的是 对象还是 对象。
普通的 对象一般可以通过转换成 对象。
如:则为 对象,可以使用 的方
法。
由于 对象本身是一个集合。所以如果 对象要转换为 对象则必须取出
其中的某一项,一般可通过索引取出。
如: !"#,$!"#,$!#,!%#这些都是
对象,可以使用 中的方法,但不能再使用 & 的方法。
以下几种写法都是正确的:
'
$(”#msg”).html();
$(”#msg”)[0].innerHTML;
$(”#msg”).eq(0)[0].innerHTML;
$(”#msg”).get(0).innerHTML;
(、如何获取 集合的某一项
'
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用 或 方法或
者索引号获取,要注意, 返回的是 对象,而 和索引返回的是 元素
对象。对于 对象只能使用 的方法,而 对象只能使用 的方法,如
要获取第三个)$*元素的内容。有如下两种方法:
'
$(”div”).eq(2).html();//调用 jquery 对象的方法
$(”div”).get(2).innerHTML;//调用 dom 的方法属性
+、同一函数实现 和
'
中的很多方法都是如此,主要包括如下几个:
'
$(”#msg”).html();//返回 id 为 msg 的元素节点的 html 内容。
$(”#msg”).html(”<b>new'content</b>”);
//将“<b>new content</b>” 作为 html 串写入 id 为 msg 的元素节点内容中,页面显
示粗体的 new content
$(”#msg”).text();//返回 id 为 msg 的元素节点的文本内容。
$(”#msg”).text(”<b>new'content</b>”);
//将“<b>new content</b>” 作为普通文本串写入 id 为 msg 的元素节点内容中,页面
显示<b>new content</b>
$(”#msg”).height();//返回 id 为 msg 的元素的高度
$(”#msg”).height(”300″);//将 id 为 msg 的元素的高度设为 300
$(”#msg”).width();//返回 id 为 msg 的元素的宽度
$(”#msg”).width(”300″);//将 id 为 msg 的元素的宽度设为 300
$(”input”).val(”);//返回表单输入框的 value 值
$(”input”).val(”test”);//将表单输入框的 value 值设为 test
$(”#msg”).click();//触发 id 为 msg 的元素的单击事件
$(”#msg”).click(fn);//为 id 为 msg 的元素单击事件添加函数
同样 ,-.--, 事件都可以有着两种调用方法。
'
%、集合处理功能
对于 返回的集合内容无需我们自己循环遍历并对每个对象分别做处理, 已
经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
'
$(”p”).each(function(i){this.style.color=['#f00','#0f0','#00f']
[ i ]})
//为索引分别为 0,1,2 的 p 元素分别设定不同的字体颜色。
$(”tr”).each(function(i)
{this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$(”p”).click(function(){alert($(this).html())})
//为每个 p 元素增加了 click 事件,单击某个 p 元素则弹出其内容
/、扩展我们需要的功能
'
'
$.extend({
min:function(a, b){return'a<'b?a:b; },
max:function(a, b){return'a>'b?a:b; }
});//为 jquery 扩展了 min,max 两个方法
使用扩展的方法(通过“方法名”调用):
'
'
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
0、支持方法的连写
'
所谓连写,即可以对一个 对象连续调用各种不同的方法。例如:
'
$(”p”).click(function(){alert($(this).html())})
.mouseover(function(){alert(’mouse over event’)})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
1、操作元素的样式
'
主要包括以下几种方式:
'
$(”#msg”).css(”background”);//返回元素的背景颜色
$(”#msg”).css(”background”,”#ccc”)//设定元素背景为灰色
$(”#msg”).height(300); $(”#msg”).width(”200″);//设定宽高
剩余55页未读,继续阅读
zgpinguo
- 粉丝: 3
- 资源: 23
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于74LS161+ 74LS192芯片实现倒计时定时器Multisim仿真源文件,Multisim10以上版本可打开运行
- 科大讯飞语音引擎 jar包 demo,科大讯飞语音合成引擎3.0,支持4.0系统以上,文字转语音输出.zip
- Java架构面试笔试专题资料及经验(含答案)SpringBoot面试Linux面试专题及答案 合集.zip
- 头歌c语言实验答案tion-model-for-ne开发笔记
- docker配置使用-model-for-networK开发demo
- docker配置使用vaWeb-mas笔记
- c语言连接两个字符串-mas开发笔记
- 俄罗斯引擎yandex进入x-master 笔记
- 头歌c语言实验答案el-for-network-ids-ma笔记
- 一个delphi写的连连看
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0