-
用jQuery让页面生动起来
普通类 -
- 支持
- 批判
- 提问
- 解释
- 补充
- 删除
-
-
操作元素属性和特性
HTML标记会由浏览器解释为表示图像的DOM元素,创建节点列表对象NodeList(DOM定义的容器类型之一),并指派给名为attributes的元素属性,特性和对应属性存在动态关联。
操作元素属性
each(iterator) 遍历包装集所有元素,调用迭代器函数
eg $('img').each(function(n){
this.alt='This is image ['+n+'] with an id of' +this.id;
});
获取特性值
attribute(name) 从匹配集中的第一个元素获取特征值 eg $("#myImage").attr("title") 获取titile的值
设置特性值
attr(name,value) value还可以是一个函数调用,这样name属性就被设置为函数的返回值
eg $('*').attr('title',function(index){
return 'I am element '+index+' and my name is '+ (this.id ?this.id: 'unset');
});
attr(attributes) 一次赋多值 eg. $('input').attr({ value:'' ; title: 'Please enter a value' });
删除特性
removeAttr(name)
特性带来的快乐
防止双重提交的 $("form").submit( function(){
$(":submit",this).attr("disabled",disabled); //this在这里是因为在事件处理程序中,this指针总是引用已绑定事件的页面元素,待看
});
-
修改元素样式
添加和删除类名称
在HTML中,class也行被用来提供一空格分隔,多个类名称所组成的字符串。
eg <div class="someclass anotherclass yetOtherClass"></div>
jQuery提供操作类很方便的方法
addClass(names) 添加指定的一个或多个类名称到包装集所有元素 PS用空格分隔
removeClass(names) 从包装集各元素删除指定的一个或多个类名称
toggleClass(names) 如果包装集中元素有指定的类名称,则删除该元素的指定类,如果没有则添加。这个可以用来实现快速简便的在元素之间切换视觉呈现
获取和设置样式
css(name,value) 设置指定的值到匹配元素的CSS样式属性,在希望完全覆盖原有样式表的情况下使用
css(properties) 为所有匹配元素设置已传递对象里多个键所指定的CSS属性为相关的值,工作方式类似于attr()函数
css(name) 获取包装集中第一个元素name指定CSS属性值的样式值 ,注意返回的总是字符串
更快捷的设定宽度和高速的方式: width(value) 和 height(value)以及获取宽度和高度的方式 width()和height()
其他有用的命令
hasClass(name) 确定元素是否含有特定类
另一个常用功能是以数组形式获取指定元素的已定义类列表 $("p:first").attr("class").split(" "); //如果查找的特性不存在则返回undefined,如果<p>元素没有任何类名称,则会抛出异常。所以需要通过检查特性是否存在来解决这个问题。
==》上面的问题也可以通过写可重用的jQuery扩展包装整个事件:
$.fn,getClassName=function(){
if(name= this.attr("className")){
return name.split(" ");
}else{
return [];
}
}
-
设置元素内容
替换HTML或文本内容
html() 获取匹配集第一个元素的HTML内容
html(text) 把传入的HTML片段设置为匹配元素的内容
text() 获取包装集中所有文本内容连接起来并返回
text(content) 把已包含元素的文本内容替换为传递值,若包含尖括号则替换为等价的HTML实体
注意:这些命令会替换元素的原始内容,需要谨慎处理
移动和复制元素
append(content) 将传入的HTML片段或元素添加到匹配元素后
appendTo(target)
备注:这两个函数都是当有多个目标时源元素被复制,当只有一个目标时,源元素被移动
几个相关的命令:
prepend()和prependTo()
before() 和 insertBefore()
after()和 insertAfter()
备注:以上这八个命令和用来创建新的HTML片段的$( )配合使用会有很好的效果
包裹元素
实现在某标记内包裹一个元素而不是插入到其他元素里。
wrap(wrapper) 把匹配集个元素用已传递的HTML标签或已传递元素的克隆副本分别包裹起来
eg $("a.surprise").wrap("<div class='hello'></div>") //把带有surprise类的各链接分别包裹在带有类hello的div里面
wrapAll(wrapper) 把匹配集作为一个单元,用已传递的HTML标签或已传递元素的克隆副本包裹起来
wrapInner(wrapper) 如果不想包裹匹配集里面的元素而想包裹内容,可使用此函数。各元素的内容包括文本节点
删除元素
remove()
empty() 清空匹配集所有DOM元素的内容
习惯用法是利用remove()和after()来实现替换操作,eg $("div.elementToReplace").after("<p>new paragraph!</p>").remove(); //因为after()函数返回的是包含div的原始包装集,这个jQuery链先在元素后插入一个段落,然后删除元素,所以实现了替换的效果
克隆元素
clone(copyHandlers) copyHandlers为布尔型
-
处理表单元素
由于表单元素的特别属性,jQuery提供了便利的函数来获取和设置表单元素的值,对表单元素序列化以及根据表单属性选择元素等操作
val() 返回匹配集中第一个元素的value值。如果是多选元素,返回所有选中项的数组。 注意,包装集中第一个元素必须是表单元素
单选按钮时,采用$('[name=radioGroup]:checked').val() 可以得到选中按钮的值,这样就不用遍历数组得到了
val(value) 传入值设置为匹配表单的值
val(values)使复选框或单选按钮变成选中状态,或选择<select>元素内的选项 values是一个值数组
eg $(‘input,select’).val([ 'one','two','three' ]) //搜索页面上所有的input和select元素,只要值与one、two、three中任何一个匹配,就成为已选择状态。
-
-
- 标签:
- 39
- 生动
- 元素
- jquery
- 页面
- 匹配
-
学习元评论 (0条)
聪明如你,不妨在这 发表你的看法与心得 ~