jquery的api以及用法总结-属性/css/位置
属性/css
属性
- .attr()
attr()设置普通属性,prop()设置特有属性
获取或者设置匹配的元素集合中的第一个元素的属性的值
如果需要获取或者设置每个单独元素的属性值,需要依靠.each() .map()方式循环
此例中同时给img添加alt和title属性
<img src="../img/4.jpg" alt="" id="photo">
$('#photo').attr({
alt: 'jianemi',
title: 'meimei',
})
- prop()
获取或者设置匹配的元素集中第一个元素的属性值
.prop()方法只获得第一个匹配元素的属性值
禁止页面上所有的复选框
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
$("input[type='checkbox']").prop({
disabled: true,
})
3.removeAttr()
为匹配的元素集合中的每一个元素中移除一个属性(attribute)
removeAttr()使用的是原生的js方法
ie 8,9,11中使用removeAttr()删除一个内联onclick事件处理程序不会达到预期的效果,为了避免潜在的问题,使用.prop()代替
点击按钮,添加或者删除按钮后面input元素的title属性,此例使用立即执行函数
<button>enable</button>
<input type="text" title="hello">
<div id="log"></div>
(function () {
var inputTitle = $("input").attr("title");
$("button").click(function () {
var input = $(this).next();
if(input.attr("title") == inputTitle) {
input.removeAttr("title")
}else{
input.attr("title", inputTitle);
}
$("#log").html("input title is now" + input.attr("title"));
});
})();
- .removeprop
为集合中匹配的元素删除一个属性(property)
注意:此方法不可以用来删除原生的属性,例如:cheackede disabled selected
此例中设置一个div的数字属性,然后将其删除
para是直接定义在全局对象上面的,即定义在window上面的,所以可以访问window.para来访问,直接访问para
<div id="log"></div>
para = $("#log");
para
.prop('code', 1234)
.append('code is:', String(para.prop('code')),'.')
.removeProp('code')
// 这个时候已经将prop添加的字符串删除
.append('now code is:', String(para.prop('code')),'.')
- val()
获取匹配的元素集合中第一个元素的当前值,这个方法不接受任何参数
.val方法主要用于获取表单元素的值,如input select和textarea,当在一个空集合上调用的时候,返回值为undefined
例:取得文本框的值
<input type="text" value="text">
<p></p>
// 取得文本框的值
$("input").keyup(function () {
// 获取当前的value值
var value = $(this).val();
// 向p中添加获取的value值
$("p").text(value);
}).keyup();
val()允许你传递一个元素值的数组,当使用在包含像input select option等jquery对象时很有用
例:点击按钮时,在文本框显示按钮值
<button>feed </button>
<button>the </button>
<button>input </button>
<button type="reset">reset</button>
<input type="text" value="click a button" lang="en">
$("button").click(function () {
// 获取button的text文本
var text = $(this).text();
// 将获取到的文本添加到value
$("input[lang = 'en']").val(text);
})
// 点击重置按钮
$("button[type = reset]").click(function () {
$("input[lang = 'en']").val('click a button');
})
CSS
- addClass() 为每个匹配的元素添加指定的一个或者多个样式类名
对所有匹配的元素添加多个样式类名 用空格隔开
$("p").addClass('css1 css2')
通常和removeClass一起使用
$("p").removeClass('css1 css2').addClass('css3')
<p>jianmei</p>
<p>meimei</p>
<p>jianjian</p>
// 给第二个p添加elem样式
$("p:nth(1)").addClass("elem");
- css 获取匹配元素集合中的第一个元素的样式属性的计算值或设置每一个匹配元素的一个或者多个css属性
<p>jianmei</p>
<p>meimei</p>
<p>jianjian</p>
// 点击元素,获取它的背景颜色
$("p").click(function () {
var color = $(this).css("background-color");
$("input").val(color);
})
设置样式,每点击一次div 会改变样式或者恢复样式
<div id="log"></div>
// 增加div的宽度
// 定义count,用于计算次数
var count = 0;
$("#log").click(function () {
// 每点击一次,count+1
count ++;
if(count % 2 == 0){
$(this).css({
width: '300px',
})
}else{
$(this).css({
width: '400px',
})
}
})
- hasClass()
确定任何一个匹配的元素是否有被分配给定的样式(类)
<button>feed </button>
<button class="elem">the </button>
<button>input </button>
$("input").hasClass("elem").toString();
- removeClass()
移除集合中每个匹配元素中一个或者多个样式
从匹配的元素中移除elem类
<button>feed </button>
<button class="elem">the </button>
<button>input </button>
$("button").removeClass('elem');
//如果removeClass()后面跟的是(),则代表移出当前元素的所有样式类
- toggleClass()
为匹配的元素集合中的每一个元素添加或者删除一个或多个样式类(class),取决于这个样式类是否存在或者参数的值。
如果存在就删除,如果不存在就添加
<p>jianmei</p>
<p class="elem">meimei</p>
<p>jianjian</p>
$("p").click(function () {
$(this).toggleClass('elem');
})
尺寸
- .height()
获取匹配元素集合中的第一个元素的当前计算高度值或者设置每一个匹配元素的高度值
注意: height中的高度只包括元素本身的高度和宽度
.css('height') 和.height()之间的区别就是后者返回一个没有单位的数值,前者是返回一个带有完整单位的字符串,当一个元素的高度需要计算的时候通常使用.height()
<p>jianmei</p>
<p class="elem">meimei</p>
<p>jianjian</p>
// 点击p的时候增加p的长度,并且改变颜色
$("p").click(function () {
$(this).width(300)
.css({
cursor: "auto",
background: '#90EE90',
})
})
width和height用法一致
innerHeight()
注意: innerHeight()返回的高度包括当前元素本身的高度 + padding的高度
<p>jianmei</p>
<p>jianjian</p>
<p>jianjian</p>
// 每点击一次,innerHeight就会改变并改变颜色
var count = 0;
$("p").click(function () {
count ++;
if(count % 2 == 1) {
$(this).innerHeight(50).addClass('elem');
}
else {
$(this).innerHeight(30).addClass();
}
})
- innerWidth和innerHeight用法一致
5.outerHeight()
获取或者设置匹配的元素集合中第一个元素的当前计算外部高度
outerHeight的高度包括:本身的高度 + padding + border + (margin)
当outerHeight(true)时,包括margin,margin是可选的
<p>jianmei</p>
<p>jianjian</p>
<p>jianjian</p>
var oheight = 60;
$("p").click(function() {
$(this).outerHeight(oheight).addClass('elem');
// 每点击一次就减少4
oheight -= 4;
})
var oheight = 60;
$("p").one('click', function() {
$(this).outerHeight(oheight).addClass('elem');
// 只有点击一次的效果
oheight -= 4;
})
位置
- .offset()
在匹配的元素集合中,获取的第一个元素的当前坐标,或者设置每一个元素的坐标,坐标相对于文档
点击查看当前元素的位置
<p>jianjian</p>
<div id="log"></div>
$('#log', document.body).click(function (e) {
var offset = $(this).offset();
// 阻止事件冒泡
e.stopPropagation();
$('p').text(offset.left + ', ' + offset.top);
});
- .position()
和offset的区别在于position是i相对于父级元素的位移,如果要取得这个新的元素的位置,那么使用offset更合适
<p>jianjian</p>
<div id="log"></div>
$('#log').click(function (e) {
var position =
$('p').text(position.left + ', ' + position.top);
})
- offsetParent()
取得离指定元素最近的含有定位信息的祖先元素,含有定位信息的元素指的是:
css的position属性是relative absolute 或者fixed元素
<ul>
<li>22
<ul>
<li style="position: relative;">1</li>
<li class="elem">2</li>
<li>3</li>
</ul>
</li>
</ul>
$('li.elem').offsetParent().css('background-color', 'red');
- scrollLeft()
获取匹配的元素集合中第一个元素的当前水平滚动条的位置或者设置每个匹配元素的水平滚动条位置
获取div的scrollLeft
此例中可知当前div水平滚动条的距离
<div id="log"></div>
$('#log').text('scrollLeft:' + $(this).scrollLeft());
- scrollTop()
获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或者设置每个匹配元素的垂直滚动条位置
此例中可知当前div垂直滚动条的距离
<div id="log"></div>
$('#log').text('scrollTop:' + $(this).scrollTop());
jquery的api以及用法总结-属性/css/位置的更多相关文章
- jquery的api以及用法总结-选择器
jQuery API及用法总结 选择器 基本选择器 * 通用选择器 .class 类选择器,一个元素可以有多个类(chrome使用原生js函数getElementByClassName()实现) 利用 ...
- jquery的api以及用法总结-数据/操作/事件
数据 .data() 在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值 .data(obj) 一个用于更新数据的键/值对 .data()方法允许我们再dom元素上 ...
- jQuery EasyUI API 中文文档
http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页 jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- jQuery属性/CSS使用例子
jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...
- jquery知识 属性 css
jquery基础知识 属性 css <!doctype html> <html lang="en"> <head> <meta chars ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jquery中$.each()的用法
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
随机推荐
- HTML+JavaScript自己动手做日历
当我们需要在页面中显示某月的事项,或是选择某一段日期时,常常要使用到日历组件.这一组件同样有着许多现成的类库,然而亲自动手开发一个日历,从中了解其实现原理也是非常必要的.在本例中我们就将制作一款非常经 ...
- RocketMQ 4.3.2 standalone Installation and Configuration
1 Download RockeMQ Package: You need to download it and put it to the OS Image. wget http://apache.c ...
- 游戏客户端面试(Egret)
推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 一.朋友面的一家公司 1.说下let,var,const. var定义的变量,没有块的概念,可以跨块访问, 不能跨函 ...
- Educational Codeforces Round 42 D. Merge Equals (set + pll)
CF962D 题意: 给定一个数列,对于靠近左端的两个相同大小的值x可以合并成一个点.把x 乘以2 放在第二个点的位置,问最后的数列大小和每个位子的值. 思路: 利用set 配上 pair 就行了,感 ...
- codeforces 828 C. String Reconstruction(思维+优先队列)
题目链接:http://codeforces.com/contest/828/problem/C 题解:有点意思的题目,可用优先队列解决一下具体看代码理解.或者用并查集或者用线段树都行. #inclu ...
- CodeM 资格赛 B 可乐 思维
分析: 我们假设购买一种可乐p瓶,我们可以得到期望:p*(m/n*a[i]+(n-m)/n*b[i]),由这个式子我们可以看出唯一的变量是i,所以可以遍历i找出式子的最大值 #include &l ...
- 企查猫app数据解密
通过最近几天的对企查猫的研究,目前已经成功将企查猫的数据加密和响应数据加密完成解密. 和之前对启信宝APP的数据解密操作基本一样,不过企查猫对请求和响应都使用aes加密了,抓包的时候可以看到,具体可以 ...
- 深入分析Mybatis 使用useGeneratedKeys获取自增主键
摘要 我们经常使用useGenerateKeys来返回自增主键,避免多一次查询.也会经常使用on duplicate key update,来进行insertOrUpdate,来避免先query 在i ...
- PythonI/O进阶学习笔记_3.2面向对象编程_python的封装
前言: 本篇相关内容分为3篇多态.继承.封装,这篇为第三篇 封装. 本篇内容围绕 python基础教程这段: 在面向对象编程中,术语对象大致意味着一系列数据(属性)以及一套访问和操作这些数据的方法.使 ...
- 【Offer】[6] 【从尾到头打印链表】
题目描述 思路分析 Java代码 代码链接 题目描述 从尾到头打印链表,将其添加到ArrayList当中输出 思路分析 递归的思路 利用栈 Java代码 public class Offer006 { ...