使用元素属性与特性
属性是javascript对象的内在性质,每个属性都包含名称和值。
特性用于描述DOM元素标记中设定的值
浏览器会读取并解析元素的标记,以便创建在DOM中表现此元素的javascript对象实例。特性被收集到一个列表中,这个列表保存在DOM元素实例中的attributes属性中。除了在列表中保存特性,每个DOM对象还被赋予了多个属性,包括一些描述元素标记中特性的属性。特性值不仅在attributes属性中,还存在于少数属性中。
操作元素属性
访问包装集单个元素的方法:
- 数组索引:$(something)[0]
- get(), toArray()
- each(), map()
- eq(), :eq过滤器
- 通过某些方法(比如not()和filter())的回调函数,包装集元素将作为回调函数的上下文。
$('*').each(function (n) {
this.id = this.tagName + n
})
获取特性值
attr(name)
自定义特性:html5将以data-开头的特性看作为自定义特性。
attr中特性的名称是不区分大小写的。
attr使用规范化的特性名称:cellspacing, class, colspan, cssFloat, float, for, frameborder, maxlength, readonly, rowspan, styleFloat, tabindex, usemap.
设置特性值
attr(name,value)
$('*').attr('title', function (index, previousValue) {
return previousValue + ' I am element ' + index + ' and my name is ' + (this.id || 'unset')
})
attr(attributes)
$('input').attr(
{ value: '', title: 'Please enter a value' }
)
ie浏览器不允许修改input元素的name和type特性。
删除特性值
removeAttr(name)
有用的实例
- 强制在新窗口中打开链接
$('a[href^="http://"]').attr('target', '_blank')
- 解决可恶的双重提交
$('form').submit(function () {
$(':submit', this).attr('disabled', 'disabled')
})
disabled特性存在就表示此元素被设置为禁用状态,可以删除此特性,也可以使用attr函数设置disabled特性为false来启用此元素。
在元素上存储自定义数据
data(name, value)
data(name)
removeData(name)
改变元素样式
添加和删除类名
addClass(names)
removeClass(names)
toggleClass(names)
例子:在元素之间切换显示效果
function swapThem() {
$('tr').toggleClass('striped')
}
$(function(){
$('table tr:nth-child(even)').addClass('striped')
$('table').mouseover(swapThem).mouseout(swapThem)
}
toggleClass(names,switch)
hasClass(name)
获取和设置样式
css(name,value)
$('div.expandable').css('width', function (i, width) {
return width + 20
})
$('#opa').css('opacity', 0.5) //0.0 <= value && value <= 1.0
css(properties)
可以使用函数作为css属性的值,以确定将要应用的值。
css(name)
- 获取和设置尺寸
width(value); height(value)
width(); height()方法计算并返回元素的尺寸。
**innerHeight(); innerWidth(); outerHeight(margin); outerWidth(margin)
- 定位和滚动
offset()
position()
scrollLeft(); scrollLeft(value); scrollTop(); scrollTop(value)
设置元素内容
替换html或者文本内容
html(); html(content)
text(); text(content)
移动和复制元素
append(content)
prepend(content)
before(content)
after(content)
appendTo(targets)
prependTo(targets)
insertBefore(targets)
insertAfter(targets)
分享到:
相关推荐
使用jQuery为表格添加合计行,方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名
利用jquery实现的在页面添加水印,并且使用了jquery的resizeend实现了,根据窗口调整大小自动适应添加水印
在sharepoint2010页面上添加jquery
jQuery动态添加删除编辑标签代码是一款自定义选项卡,添加选项卡,删除选项卡,编辑选项卡内容等。 jQuery动态添加删除编辑标签代码截图
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
jQuery点击添加到购物车 适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
jquery 监听页面按钮 jquery1.5 监听事件
jQuery ui页面全屏滚动fullPage.js插件页面滚动 jQuery ui页面全屏滚动fullPage.js插件页面滚动
jQuery仿京东页面制作,组件封装。适用于初学jQuery的项目。逻辑思路清晰。代码简洁
jQuery调整页面字号大小,jQuery调整页面字号大小,jQuery调整页面字号大小
jquery bootstrap自定义添加删除选项卡代码
自己写的一段jquery小代码,实现了jquery的页面传值功能,代码已经编译运行通过,请各位大侠指教!
jquery web页面 apijquery web页面 apijquery web页面 apijquery web页面 apijquery web页面 apijquery web页面 api
jquery刷新页面和JS常用的函数。另外jQuery实现跨域调用的问题可以联系我。
这是一款jQuery ui实现添加删除动画的例子。
jQuery图片自动添加水印插件是一款可以为图片添加自定义水印的jquery插件。
jQuery为图片添加文字提示内容,鼠标放在图片上,会出现文字提示,效果相当不错,仅供学习参考。
使用jQuery实现动态添加、删除表格,向后台提交时更方便。
一、jQuery加载一个html页面到指定的div里 ...用jquery ajax 可以实现 假设 a.html 和b.html在同一目录 b.html [removed] $(document).ready(function() { bodyContent = $.ajax({ url: "b.html", global: fals
jQuery点击添加到购物车动画代码 .